/* flōw design system: 8px spacing, two typefaces, clear color roles. */
:root {
  --flow-green:#286d54;
  --flow-deep:#192d27;
  --flow-pink:#c7336b;
  --flow-pink-hover:#a8295a;
  --flow-paper:#fffefa;
  --flow-soft:#eaf1eb;
  --flow-line:#d7dfda;
  --flow-muted:#52645a;
  --space-1:8px;
  --space-2:16px;
  --space-3:24px;
  --space-4:32px;
  --space-5:40px;
  --space-6:48px;
  --space-8:64px;
  --space-10:80px;
  --radius-small:8px;
  --radius-medium:12px;
  --radius-large:24px;
  --radius-full:999px;
  --shadow-raised:0 16px 40px rgba(19,46,31,.12);
  --type-caption:.75rem;
  --type-small:.875rem;
  --type-body:1rem;
  --type-body-large:1.125rem;
  --type-h3:clamp(1.5rem,2.4vw,2.25rem);
  --type-h2:clamp(2.6rem,4.6vw,5.2rem);
  --type-h1:clamp(3.25rem,6vw,7rem);
}

:focus-visible {outline:3px solid var(--flow-pink);outline-offset:4px}
button,select,input,textarea {font-family:'DM Sans',system-ui,sans-serif}
.eyebrow {letter-spacing:.1em;font-size:var(--type-caption)}
.site-header .header-inner {gap:var(--space-3)}
.pill,.device-link-button,.support-page button.btn {
  min-height:52px;border-radius:var(--radius-medium);font-weight:700;
  transition:background-color .18s ease,border-color .18s ease,color .18s ease;
}
.pill:hover,.device-link-button:hover,.support-page button.btn:hover {transform:none;box-shadow:none}
.pill:active,.device-link-button:active {filter:brightness(.94)}
.home-page .site-header .header-cta,
body:not(.home-page) .site-header .header-cta {
  color:#fff;background:var(--flow-pink);border-color:var(--flow-pink);
  backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:none;
}
.home-page .site-header .header-cta:hover,
body:not(.home-page) .site-header .header-cta:hover {
  color:#fff;background:var(--flow-pink-hover);border-color:var(--flow-pink-hover);box-shadow:none;
}
.text-link:hover {gap:24px}
.editorial-card:hover img {transform:none;filter:brightness(1.05)}
.editorial-card .card-overlay span {text-transform:uppercase;letter-spacing:.1em}
.home-collage-store:hover {transform:none;outline:1px solid #fff}
.device-moment-grid article:hover .device-moment-photo {transform:none}
.step-grid article:hover,.support-page .cat:hover,.hub-card:hover {
  transform:none;box-shadow:none;
}
.device-moment-grid h3,.step-grid h3,.safety-cards h3,
.support-page #contact h2,.support-page .support-form-intro h3 {
  font-family:'DM Sans',system-ui,sans-serif;
}
.site-footer .footer-upper {gap:var(--space-4)}
.site-footer .footer-group a {line-height:1.55}
.site-footer .footer-group a:focus-visible {text-decoration:underline}

/* Real product screens interrupt the editorial photography on the home page. */
.product-look {background:var(--flow-soft)}
.product-look-grid {
  display:grid;grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr);
  align-items:center;gap:clamp(var(--space-5),6vw,96px);
}
.product-look-copy h2 {
  margin:0;font-size:var(--type-h2);line-height:1.04;letter-spacing:-.06em;
}
.product-look-copy h2 em {
  color:#b6386c;font-family:'Playfair Display',Georgia,serif;font-weight:500;
}
.product-look-copy p {
  max-width:43ch;margin:var(--space-3) 0;
  color:var(--flow-muted);font-size:var(--type-body-large);line-height:1.6;
}
.product-look-copy small {display:block;margin-top:var(--space-4);color:var(--flow-muted);font-size:var(--type-small)}
.product-look-screens {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:end;gap:var(--space-3)}
.product-look-screens figure {margin:0;min-width:0}
.product-look-screens figure:first-child {margin-bottom:var(--space-5)}
.product-look-screens img {display:block;width:100%;height:auto;max-width:300px;margin-inline:auto}
.product-look-screens figcaption {margin-top:var(--space-2);text-align:center;font-size:var(--type-small);font-weight:700}

@media (max-width:850px) {
  .product-look-grid {grid-template-columns:1fr;gap:var(--space-5)}
  .product-look-copy {max-width:680px}
  .product-look-screens {max-width:650px;margin-inline:auto}
  .home-page .site-header .mobile-nav:not([hidden]),
  body:not(.home-page) .site-header .mobile-nav:not([hidden]) {
    background:var(--flow-green);backdrop-filter:none;-webkit-backdrop-filter:none;
  }
  .site-header .mobile-nav a,.site-header .mobile-nav summary {min-height:48px}
}
@media (max-width:600px) {
  .product-look-screens {gap:var(--space-2)}
  .product-look-screens figure:first-child {margin-bottom:var(--space-3)}
  .product-look-screens figcaption {font-size:var(--type-caption)}
  .site-footer .footer-upper {gap:var(--space-4) var(--space-2)}
  .home-page .home-collage-hero h1 em {white-space:normal}
  .home-page .home-collage-store-item {min-width:0}
  .home-page .home-collage-store {width:100%}
}
@media (prefers-reduced-motion:reduce) {
  .editorial-card img,.device-moment-photo,.home-collage-store {transition:none}
}