/* ==========================================================================
   Belkin x ScreenSkinz landing page — v2
   Rebuilt from refs/1440px.pdf (desktop) and refs/400px.pdf (mobile).
   Design canvas 1440px, content gutter 80px, header gutter 48px.
   Section rectangles in the comments are design-space y coordinates; the
   percentages they produce are what position the artwork.
   ========================================================================== */

:root, :host{
  --green:      #6efb38;
  --black:      #000;
  --ink:        #101010;
  --ink-soft:   #4a4a4a;
  --muted:      #6e6e6e;   /* 4.64:1 on #f4f4f4, 5.1:1 on white (WCAG AA) */
  --rail:       #e2e1de;
  --grey-bg:    #f4f4f4;
  --cyan:       #b0e5f7;
  --white:      #fff;
  --sale:       #ffd9e2;

  --gutter:     80px;
  --maxw:       1280px;

  --fs-hero:    52px;
  --fs-display: 48px;
  --fs-h2:      44px;
  --fs-step:    24px;
  --fs-body:    16px;
  --lh-body:    1.62;
  --fs-small:   13px;

  --r-pill:     999px;
  --r-card:     14px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ overflow-x:hidden; -webkit-text-size-adjust:100%; }

body, :host{
  margin:0;
  background:var(--white);
  color:var(--ink);
  font-family:"Inter","Helvetica Neue",Helvetica,Arial,sans-serif;
  font-size:var(--fs-body);
  line-height:var(--lh-body);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* width/height attributes (written by tools/imgattr.py) reserve space against
   layout shift, but without this the height attribute also *sets* the height
   wherever CSS only overrides the width - which squashed the licensed tiles.
   Rules that set a height on purpose are more specific and still win. */
img{ max-width:100%; height:auto; display:block; }

/* readable by assistive tech, invisible on screen */
.vh{
  position:absolute; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0;
}
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
h1,h2,h3,h4{ margin:0; font-weight:600; letter-spacing:-.022em; }
p{ margin:0; }
ul{ margin:0; padding:0; list-style:none; }

/* ---------- shared type ---------- */
.display{ font-size:var(--fs-hero); line-height:1.28; letter-spacing:-.03em; font-weight:600; }
.display--md{ font-size:var(--fs-display); line-height:1.18; }
.h2{ font-size:var(--fs-h2); line-height:1.18; letter-spacing:-.026em; font-weight:600; }
.lede{ font-size:var(--fs-body); line-height:var(--lh-body); color:var(--ink-soft); }
.lede--onDark{ color:rgba(255,255,255,.86); }
.eyebrow{ font-size:15px; font-weight:600; letter-spacing:-.01em; margin-bottom:10px; }
.center{ text-align:center; }
.microcopy{ font-size:var(--fs-small); color:var(--muted); margin-top:14px; line-height:1.5; }
.microcopy--onDark{ color:rgba(255,255,255,.65); }

/* ---------- icons ---------- */
.ico-arrow{
  width:16px; height:16px; flex:0 0 16px; display:inline-block; background:currentColor;
  -webkit-mask:no-repeat center/16px url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M4 12h15M13 6l6 6-6 6'/></svg>");
          mask:no-repeat center/16px url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M4 12h15M13 6l6 6-6 6'/></svg>");
}
.ico-ne{
  width:15px; height:15px; flex:0 0 15px; display:inline-block; background:currentColor;
  -webkit-mask:no-repeat center/15px url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M7 17L17 7M8 7h9v9'/></svg>");
          mask:no-repeat center/15px url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M7 17L17 7M8 7h9v9'/></svg>");
}
.ico-plus{ width:16px; height:16px; flex:0 0 16px; position:relative; }
.ico-plus::before,.ico-plus::after{ content:""; position:absolute; inset:0; margin:auto; background:currentColor; }
.ico-plus::before{ width:16px; height:1.8px; }
.ico-plus::after { width:1.8px; height:16px; transition:opacity .25s ease; }
.q.is-open .ico-plus::after{ opacity:0; }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  height:48px; padding:0 26px; border-radius:var(--r-pill);
  font-size:15px; font-weight:600; letter-spacing:-.01em; line-height:1; white-space:nowrap;
  transition:transform .16s ease, background-color .16s ease, box-shadow .16s ease, color .16s ease;
}
.btn:hover{ transform:translateY(-1px); }
.btn:active{ transform:translateY(0); }
.btn--green{ background:var(--green); color:#08240a; }
.btn--green:hover{ background:#63e831; box-shadow:0 6px 18px rgba(110,251,56,.35); }
.btn--white{ background:var(--white); color:var(--ink); }
.btn--white:hover{ background:#f2f2f2; }
.btn--outline{ background:var(--white); color:var(--ink); border:1px solid var(--rail); }
.btn--outline:hover{ background:#f2f2f2; }
.btn--sm{ height:42px; padding:0 22px; font-size:14px; }

/* ---------- handwritten callouts ---------- */

/* ==========================================================================
   ANNOUNCEMENT + HEADER  (y 0-110)
   ========================================================================== */
.announce{
  height:40px; background:var(--black); color:var(--white);
  display:flex; align-items:center; justify-content:center; gap:10px;
  font-size:13px; font-weight:500;
}
.dot{ opacity:.75; }

.header{
  height:70px; background:var(--white);
  display:flex; align-items:center; justify-content:space-between;
  padding:0 48px; position:sticky; top:0; z-index:50;
}
.header__logo img{ height:22px; width:auto; }

/* ==========================================================================
   HERO  (y 110-710, height 600)
   ========================================================================== */
.hero{ position:relative; min-height:600px; display:flex; align-items:center; overflow:hidden; }
/* top, not centre: the picture is trimmed to the subject's outline, so any
   cropping has to come off the bottom or that alignment is lost */
.hero__bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 0%; z-index:0; }
.hero::after{
  content:""; position:absolute; inset:0; z-index:1;
  /* the banner arrives already composed on a near-black field, so this is back
     to the designed scrim - the copy column measures 17.6:1 without any of it */
  background:linear-gradient(90deg, rgba(20,26,44,.82) 0%, rgba(20,26,44,.55) 32%, rgba(20,26,44,.08) 60%, rgba(20,26,44,0) 76%);
}
.hero__inner{ position:relative; z-index:2; width:100%; max-width:var(--maxw); margin:0 auto; padding:0 var(--gutter); color:var(--white); }
.lockup{ height:24px; width:auto; margin-bottom:26px; align-self:flex-start; }
.hero__sub{ margin-top:26px; font-size:var(--fs-body); line-height:1.62; color:rgba(255,255,255,.9); }
.hero__actions{ display:flex; gap:14px; margin-top:38px; }
.trustline{ margin-top:28px; font-size:var(--fs-small); color:rgba(255,255,255,.82); display:flex; flex-wrap:wrap; gap:10px; }

/* "As seen on Shark Tank" chip: design x 1207-1391, y 552-644 */
.seenon{
  position:absolute; right:3.4%; top:73.7%; z-index:3; width:12.8%; min-width:150px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:9px;
  padding:14px 18px; border-radius:14px;
  background:rgba(255,255,255,.17); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
}
.seenon__label{ font-size:13px; font-weight:700; letter-spacing:.01em; color:var(--white); text-transform:uppercase; }
.seenon img{ width:86%; height:auto; }

/* ==========================================================================
   PRESS  (y 710-912, height 202)
   ========================================================================== */
.press{ background:var(--white); padding:52px 0 58px; }
.press__label{ text-align:center; font-size:15px; font-weight:600; margin-bottom:34px; }
/* Two identical lanes, each sliding a full lane-width: when the first has
   travelled 100% the second sits exactly where it started, so the loop is
   seamless with no JS. */
.press__row{ display:flex; overflow:hidden; }
.press__lane{
  display:flex; align-items:center; gap:72px; padding-right:72px;
  flex:0 0 auto; min-width:100%; justify-content:space-around;
  animation:press-marquee 34s linear infinite;
}
.press__row:hover .press__lane{ animation-play-state:paused; }
.press__row img{ width:auto; flex:0 0 auto; }
@keyframes press-marquee{ from{ transform:translateX(0); } to{ transform:translateX(-100%); } }

/* ==========================================================================
   PROTECTION ALWAYS ON  (y 912-2004, height 1092)
   ========================================================================== */
/* the columns are capped and the pair is centred: as 1fr 1fr across a
   full-bleed section they grew with the monitor and opened a dead gap
   in the middle, copy pinned left and artwork pinned right.
   The three widths are variables so the split can be dialled in live, and
   --split-half follows from them - artwork pinned to the group's right edge
   has to move with it. */
.always{
  --col-copy:580px; --col-gap:60px; --col-art:460px;
  --split-half:calc((var(--col-copy) + var(--col-gap) + var(--col-art)) / 2);
  background:var(--grey-bg); position:relative; overflow:hidden;
  display:grid;
  grid-template-columns:minmax(0,var(--col-copy)) minmax(0,var(--col-art));
  justify-content:center; column-gap:var(--col-gap); align-items:center;
  min-height:1092px; padding:0 var(--gutter);
}
.always__copy{ padding:86px 0; max-width:var(--col-copy); }
.seals{ display:flex; gap:16px; align-items:flex-end; margin-bottom:38px; }
.seals img{ height:112px; width:auto; }
.always .display--md{ margin-bottom:54px; }
.always__actions{ display:flex; gap:12px; margin-top:44px; }

/* accordion, shared with How It Works */
.steps{ border-left:2px solid var(--rail); }
.step{ position:relative; padding:0 0 0 32px; }
.step + .step{ margin-top:26px; }
.step::before{ content:""; position:absolute; left:-2px; top:0; bottom:0; width:3px; background:var(--green); opacity:0; transition:opacity .25s ease; }
.step.is-active::before{ opacity:1; }
.step__head{
  display:flex; align-items:flex-start; gap:16px; padding:0; text-align:left;
  font-size:var(--fs-step); line-height:1.3; font-weight:600; letter-spacing:-.02em;
  color:var(--muted); transition:color .25s ease;
}
.step.is-active .step__head{ color:var(--ink); }
/* max-height reveal: an overflow:hidden grid item has an automatic minimum size
   of 0, so a 0fr/1fr animation collapses to the padding instead of the content */
.step__body{
  overflow:hidden; max-height:0; opacity:0; visibility:hidden;
  /* visibility flips only after the collapse finishes, so the panel is really
     gone from the accessibility tree while the button says collapsed */
  transition:max-height .32s ease, opacity .25s ease, visibility 0s linear .32s;
}
.step.is-active .step__body{
  max-height:300px; opacity:1; visibility:visible;
  transition:max-height .32s ease, opacity .25s ease, visibility 0s;
}
.step__body > p{ font-size:var(--fs-body); line-height:1.68; color:var(--ink-soft); max-width:440px; padding-top:14px; }

/* demo column */
.always__demo{ position:relative; justify-self:center; text-align:center; padding:60px 0; }
.always__caption{ font-size:15px; color:var(--ink-soft); margin-bottom:26px; }
/* before/after comparison: the design-on render sits underneath and the
   screen-on render is clipped away from the divider rightwards. Both renders
   share one alpha bounding box, so the layers register exactly. */
.compare{
  position:relative; width:min(338px, 74vw); margin:0 auto;
  --pos:50%; touch-action:pan-y; -webkit-user-select:none; user-select:none;
}
.compare img{ display:block; width:100%; height:auto; pointer-events:none; }
.compare__over{ position:absolute; inset:0; clip-path:inset(0 0 0 var(--pos)); }
.compare__divider{
  position:absolute; top:1%; bottom:1%; left:var(--pos); width:2px;
  margin-left:-1px; background:var(--white); box-shadow:0 0 0 1px rgba(0,0,0,.14);
  pointer-events:none;
}
.compare__handle{
  position:absolute; top:50%; left:var(--pos); width:28px; height:28px;
  margin:-14px 0 0 -14px; padding:0; border-radius:50%;
  background:var(--white); box-shadow:0 2px 10px rgba(0,0,0,.3);
  cursor:ew-resize; touch-action:none;
}
.compare__handle:focus-visible{ outline:2px solid var(--ink); outline-offset:3px; }

.compare__chips{ display:flex; justify-content:center; gap:14px; margin-top:26px; }
.chip{
  width:47px; height:47px; border-radius:50%; background:var(--white);
  display:grid; place-items:center; border:1.5px solid transparent;
  transition:border-color .16s ease, transform .16s ease;
}
.chip:hover{ transform:translateY(-2px); }
.chip.is-active{ border-color:var(--ink); }
.chip img{ width:100%; height:100%; object-fit:contain; }
/* note sits right of the phone: design x 1210-1389, y 1373-1440 in a 1092-tall section */
/* mirrored to the left of the phone: the note is positioned against the whole
   two-column section, so a plain right->left swap would park it on the page
   edge. 55.17% is the mirror of the old box about the demo column's centre. */

/* ==========================================================================
   OFFICIALLY LICENSED  (y 2004-3366)
   ========================================================================== */
.licensed{ background:var(--white); padding:92px var(--gutter) 96px; }
.licensed .lede{ margin:22px auto 0; }
.collections{ max-width:1020px; margin:56px auto 0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; }
.collection{
  background:var(--grey-bg); border-radius:var(--r-card); padding:24px 22px 26px;
  display:flex; flex-direction:column; transition:transform .18s ease, box-shadow .18s ease;
}
.collection:hover{ transform:translateY(-3px); box-shadow:0 12px 30px rgba(0,0,0,.09); }
.collection__top{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.collection h3{ font-size:19px; letter-spacing:-.02em; }
.collection > p{ font-size:14px; color:var(--muted); margin-top:6px; }
.collection img{ width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:10px; margin-top:20px; }
.licensed .center .btn{ margin-top:56px; }

/* ==========================================================================
   OWN DESIGN BANNER  (y 3366-4036, height 670)
   ========================================================================== */
.ownbanner{ position:relative; min-height:670px; display:flex; align-items:center; overflow:hidden; color:var(--white); text-align:center; }
.ownbanner__bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; }
.ownbanner::after{ content:""; position:absolute; inset:0; z-index:1; background:rgba(6,8,10,.56); }
.ownbanner__copy{ position:relative; z-index:2; width:100%; max-width:720px; margin:0 auto; padding:0 var(--gutter); }
.ownbanner .lede{ margin-top:22px; }
.feat{ display:flex; gap:54px; margin:42px 0 0; justify-content:center; }
.feat li{ display:flex; flex-direction:column; align-items:center; gap:14px; font-size:13px; font-weight:500; color:rgba(255,255,255,.9); }
.feat__ico{ width:48px; height:48px; border-radius:50%; background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.22); display:inline-flex; align-items:center; justify-content:center; }
.feat__ico svg{ width:22px; height:22px; fill:none; stroke:var(--white); stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.ownbanner .btn{ margin-top:42px; }
/* WCAG 2.2.2: the backdrop moves for longer than five seconds, so it needs a
   control. Sits above the scrim and the copy, out of the way bottom-right. */
.bgtoggle{
  position:absolute; right:20px; bottom:20px; z-index:3;
  width:40px; height:40px; border-radius:50%; display:grid; place-items:center;
  background:rgba(10,12,14,.55); color:var(--white);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  transition:background .18s ease, transform .18s ease;
}
.bgtoggle:hover{ background:rgba(10,12,14,.78); transform:translateY(-1px); }
.bgtoggle:focus-visible{ outline:2px solid var(--white); outline-offset:3px; }
.bgtoggle svg{ width:14px; height:16px; fill:currentColor; }
.bgtoggle__play{ display:none; }
.bgtoggle.is-paused .bgtoggle__pause{ display:none; }
.bgtoggle.is-paused .bgtoggle__play{ display:block; }

/* ==========================================================================
   MADE BY YOU  (y 4036-5000)
   ========================================================================== */
.madeby{ background:var(--white); padding:88px 0 40px; }
.madeby__head{ max-width:calc(var(--maxw) + 80px); margin:0 auto; padding:0 40px; display:flex; align-items:flex-end; justify-content:space-between; gap:40px; }
.madeby__share{ font-size:14px; color:var(--ink-soft); white-space:nowrap; }
.madeby__share b{ font-weight:600; color:var(--ink); }
.madeby .carousel__track{ --edge:40px; }
/* taller tiles, still bounded by the viewport so a row always fits on screen */
.ugc{ margin:0; position:relative; flex:0 0 auto; height:min(600px, 58vh); aspect-ratio:9/16;
  border-radius:12px; overflow:hidden; scroll-snap-align:start; background:var(--grey-bg); }
.ugc img,.ugc__video{ width:100%; height:100%; object-fit:cover; display:block; background:var(--grey-bg); }
.ugc__play{
  position:absolute; top:12px; right:12px; width:22px; height:22px; padding:0;
  border-radius:50%; background:rgba(0,0,0,.42);
  display:grid; place-items:center; opacity:0; transition:opacity .18s ease;
}
.ugc:hover .ugc__play,.ugc__play:focus-visible,.ugc__play.is-paused{ opacity:1; }
.ico-pause{ width:22px; height:22px; display:block; position:relative; }
.ico-pause::before,.ico-pause::after{ content:""; position:absolute; top:6px; width:2px; height:10px; background:var(--white); }
.ico-pause::before{ left:8px; } .ico-pause::after{ left:12px; }
/* paused: the two bars collapse into a play triangle */
.is-paused .ico-pause::before{ left:8px; width:0; height:0; top:5px; background:none;
  border-left:8px solid var(--white); border-top:6px solid transparent; border-bottom:6px solid transparent; }
.is-paused .ico-pause::after{ display:none; }

/* ---------- carousels (shared) ---------- */
.carousel{ position:relative; margin-top:40px; }
.carousel__track{
  --edge:var(--gutter);
  display:flex; gap:16px; padding:0;
  overflow-x:auto; scroll-snap-type:x proximity;
  /* without this the snap engine parks the first tile against the container
     edge and swallows the gutter spacer */
  scroll-padding-inline:var(--edge);
  scrollbar-width:none; -ms-overflow-style:none;
}
/* The gutter is a pair of flex spacers rather than padding on the scroll
   container: a container's start padding drops out of the scrollable range, so
   the first tile ended up flush against the edge. The spacers are real content,
   and their auto margins centre the row while there is slack and collapse to
   nothing once it overflows. */
.carousel__track::before,
.carousel__track::after{ content:""; flex:0 0 var(--edge); }
.carousel__track::before{ margin-left:auto; }
.carousel__track::after{ margin-right:auto; }
/* nothing to page through: the control and the dots take themselves away */
.carousel.is-static .carousel__next,
.carousel.is-static .carousel__prev,
.carousel.is-static .carousel__dots{ display:none; }
.carousel__track::-webkit-scrollbar{ display:none; }
.carousel__prev,
.carousel__next{
  position:absolute; top:50%; transform:translateY(-50%);
  width:36px; height:36px; border-radius:50%; background:var(--green); color:#08240a;
  display:inline-flex; align-items:center; justify-content:center;
  box-shadow:0 4px 14px rgba(0,0,0,.18); z-index:4;
}
.carousel__next{ right:26px; }
.carousel__prev{ left:26px; }
.carousel__prev .ico-arrow{ transform:rotate(180deg); }
.carousel.is-static .carousel__prev{ display:none; }
.carousel__dots{ display:flex; justify-content:center; gap:7px; margin-top:26px; }
.carousel__dots i{ width:6px; height:6px; border-radius:50%; background:#d3d3d3; }
.carousel__dots i.is-active{ background:var(--ink); }

/* ==========================================================================
   TRENDING DESIGNS  (y 5000-6010)
   ========================================================================== */
.trending{ background:var(--white); padding:60px var(--gutter) 90px; }
.tabs{ display:flex; justify-content:center; gap:12px; margin-top:34px; }
.tab{ height:38px; padding:0 22px; border-radius:var(--r-pill); border:1px solid var(--rail); font-size:14px; font-weight:500; color:var(--ink-soft); transition:border-color .18s ease, color .18s ease; }
.tab.is-active{ border-color:var(--black); color:var(--ink); font-weight:600; }
.tab:hover{ color:var(--ink); }
.products{ max-width:var(--maxw); margin:52px auto 0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:28px; }
.product{ display:flex; flex-direction:column; align-items:stretch; }
/* the tab filter hides cards with the hidden attribute; an author display
   rule outranks the UA one, so it has to be said here */
.product[hidden]{ display:none; }
.product__img{ width:100%; aspect-ratio:1/1.05; overflow:hidden; }
.product__img img{ width:100%; height:100%; object-fit:contain; }
/* one shop link per tile, full width of the tile so the four line up */
.product__shop{ width:100%; margin-top:16px; }
.products__all{ margin-top:44px; }

/* ==========================================================================
   HOW IT WORKS  (y 6010-7012, height 1002)
   ========================================================================== */
/* The clip is square and tight on the subject, so it sits beside the copy
   instead of behind it: a full-bleed crop would cut 30% off the top and bottom
   of the phone, and 848px stretched across the section reads as soft. Putting
   the words on a solid ground also retires the "text over a photograph"
   contrast question for this section. */
.how{ position:relative; min-height:1002px; display:grid; align-content:center; overflow:hidden;
  color:var(--white); background:#111927; }
/* the copy stays inside the page container; the clip is a flush panel on the
   right, running the full height of the section and bleeding off the edge */
.how__inner{ width:100%; max-width:var(--maxw); margin:0 auto; padding:0 var(--gutter); }
.how__copy{ max-width:560px; min-width:0; }
.how__media{ position:absolute; right:0; top:0; bottom:0; width:46%; }
.how__video{
  width:100%; height:100%; object-fit:cover; display:block; background:#111927;
}
.how__play{
  position:absolute; top:20px; right:20px; width:26px; height:26px; padding:0;
  border-radius:50%; background:rgba(0,0,0,.45);
  display:grid; place-items:center; opacity:0; transition:opacity .18s ease;
}
.how__media:hover .how__play,.how__play:focus-visible,.how__play.is-paused{ opacity:1; }
.how .display--md{ margin-bottom:48px; }
.how .steps{ border-left-color:rgba(255,255,255,.3); max-width:560px; }
.how .step__head{ color:rgba(255,255,255,.62); }
.how .step.is-active .step__head{ color:var(--white); }
.how .step__body > p{ color:rgba(255,255,255,.82); }
.how .btn{ margin-top:44px; }
/* note sits over the photo, design x 1122-1339 y 6190-6272 */

/* ==========================================================================
   TRUST BAR (dark)  (y 7012-7205, height 193)
   ========================================================================== */
.trustbar{ background:var(--black); color:var(--white); }
.trustbar__inner{
  max-width:var(--maxw); margin:0 auto; padding:0 var(--gutter);
  height:193px; display:flex; align-items:center; justify-content:space-around; gap:24px;
}
/* the shared .benefit sets black ink for the green bar — invert it here */
.trustbar .benefit{ flex-direction:column; gap:14px; font-size:16px; color:var(--white); }
.trustbar .benefit svg{ stroke:var(--white); height:30px; }

/* ==========================================================================
   REVIEWS  (y 7205-8022)
   ========================================================================== */
.reviews{ background:var(--white); padding:84px 0 88px; }
.reviews .h2{ padding:0 var(--gutter); }
/* portrait-leaning box: the review photos are mostly portrait and a square
   crop was cutting the phones in half */
.rev{ margin:0; flex:0 0 auto; width:min(360px, 78vw); height:min(480px, 52vh);
  scroll-snap-align:start; overflow:hidden; background:var(--grey-bg); border-radius:4px; }
.rev img{ width:100%; height:100%; object-fit:cover; }
/* one slide = the review joined to a photograph, so they scroll as a unit and
   the seam between them disappears */
.revpair{ display:flex; flex:0 0 auto; scroll-snap-align:start; overflow:hidden; border-radius:var(--r-card); }
/* half width each, so a pair occupies the same room one tile used to and
   still fits a phone screen - at 78vw a pair came to 156vw */
.revpair .rev{ width:min(360px, 39vw); border-radius:0; scroll-snap-align:none; }
.rev--quote{ background:var(--black); color:var(--white); padding:36px 34px; display:flex; flex-direction:column; justify-content:space-between; }
.rev__stars{ color:var(--green); font-size:15px; letter-spacing:2px; }
.rev--quote blockquote{ margin:0; font-size:22px; line-height:1.42; font-weight:500; letter-spacing:-.02em; }
/* real reviews run from one line to a full paragraph, so the quote steps down
   a size rather than overflowing its card */
.rev--md blockquote{ font-size:17px; line-height:1.48; }
.rev--sm blockquote{ font-size:14px; line-height:1.55; font-weight:400; }
.rev--quote figcaption{ font-size:13px; display:flex; align-items:center; gap:12px; }
.verified{ display:inline-flex; align-items:center; gap:6px; color:rgba(255,255,255,.75); }
.verified svg{ width:15px; height:15px; fill:var(--green); }

/* ==========================================================================
   BRAND STORY (cyan)  (y 8022-8697, height 675)
   ========================================================================== */
.story{ display:grid; grid-template-columns:1fr 1fr; min-height:675px; background:var(--cyan); }
.story__copy{ padding:80px var(--gutter); display:flex; flex-direction:column; justify-content:center; }
.lockup--dark{ height:24px; margin-bottom:30px; }
.story .lede{ margin-top:26px; color:#1e3138; max-width:560px; }
.story .btn{ margin-top:40px; align-self:flex-start; }
.story .microcopy{ color:#48626c; }
/* the founders and the wordmark sit right of centre in an uncropped frame,
   and the column is nearly square - at the default 50% the lockup is cut */
.story__art img{ width:100%; height:100%; object-fit:cover; object-position:70% 50%; }

/* ==========================================================================
   FAQ  (y 8697-9590, height 893)
   ========================================================================== */
/* the columns are capped and the pair is centred: as 1fr 1fr across a
   full-bleed section they grew with the monitor and opened a dead gap
   in the middle, copy pinned left and artwork pinned right */
.faq{
  /* the artwork is a square sized by height, so its column has to be as
     wide as the slot is tall (73.9% of 893) or the clip reaches over the
     questions and lays flat grey across the white cards */
  --col-copy:640px; --col-gap:60px; --col-art:660px;
  --split-half:calc((var(--col-copy) + var(--col-gap) + var(--col-art)) / 2);
  background:var(--grey-bg); position:relative; overflow:hidden;
  display:grid;
  grid-template-columns:minmax(0,var(--col-copy)) minmax(0,var(--col-art));
  justify-content:center; column-gap:var(--col-gap); align-items:center;
  min-height:893px; padding:0 var(--gutter);
}
/* the artwork is absolutely positioned, so it paints over this static grid
   item: at narrow widths its flat grey margin lay across the cards. Give
   the questions a layer of their own and they stay on top. */
.faq__copy{ position:relative; z-index:1; padding:88px 0; max-width:var(--col-copy); }
.faq .h2{ margin-bottom:44px; }
/* phone: design x 904-1281, y 8825-9485 inside a 1440x893 section.
   Sized from the section's HEIGHT, not its width — a percentage width grows
   past the bottom edge on wide viewports, where the section height is fixed. */
.faq__art{ position:absolute;
  /* calc() places it at the right edge of the centred group; the floor takes
     over once the window is too narrow for that, and is deliberately smaller
     than the gutter - at 48px the square sat too far in and crowded the
     questions. Tune with --faq-art-edge. */
  right:max(var(--faq-art-edge, 16px), calc(50% - var(--split-half)));
  /* Capped, not a bare percentage. 73.9% of the 893px minimum is the 660px the
     column is built for, but the section grows when an answer opens - a plain
     percentage grew the square with it, pushing it left over the questions and
     sliding it down. The cap holds the size and centring holds the place. */
  top:50%; transform:translateY(-50%);
  height:min(73.9%, 660px); width:auto;
  /* the clip is a square with flat grey margins, so sized by height it reaches
     past its column over the question list - invisible, but it would swallow
     the clicks on them */
  pointer-events:none; }
/* direct child only - the callout nested in here must not inherit this */
.faq__art > img,
.faq__art > video{ height:100%; width:auto; max-width:none; display:block; }
/* in the comp this one stacks: the curve arcs up over the words */
/* positioned against the section, not the phone: design x 1206-1368,
   block y 9375-9538 in a 1440x893 section */

.qa{ display:flex; flex-direction:column; gap:10px; }
.q{ background:var(--white); border-radius:10px; overflow:hidden; }
.q__head{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:20px; padding:16px 20px; font-size:15px; font-weight:500; text-align:left; letter-spacing:-.012em; }
.q__body{
  overflow:hidden; max-height:0; visibility:hidden;
  transition:max-height .32s ease, visibility 0s linear .32s;
}
.q.is-open .q__body{ max-height:340px; visibility:visible; transition:max-height .32s ease, visibility 0s; }
/* was 14px/--ink-soft: legible but set smaller than the question above it */
.q__body > p{ font-size:15px; line-height:1.62; color:#3a3a3a; padding:0 20px 18px; }

/* one answer carries a clip beside its text; the panel animates on max-height,
   so the taller content needs its own ceiling or it opens clipped */
.q--media .q__body{ display:flex; align-items:flex-start; gap:20px; padding:0 20px 18px; }
.q--media .q__body > p{ flex:1 1 auto; padding:0; }
.q__clip{ flex:0 0 auto; width:168px; height:auto; border-radius:8px; display:block; }
.q--media.is-open .q__body{ max-height:480px; }

/* ==========================================================================
   BENEFITS BAR (green)  (y 9590-9698, height 108)
   ========================================================================== */
.benefits{ background:var(--green); }
.benefits__inner{ max-width:1340px; margin:0 auto; padding:0 var(--gutter); height:108px; display:flex; align-items:center; justify-content:space-between; gap:24px; }
.benefit{ display:flex; align-items:center; gap:14px; font-size:16px; font-weight:500; color:var(--black); letter-spacing:-.015em; }
.benefit svg{ height:26px; width:auto; flex:0 0 auto; fill:none; stroke:var(--black); stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width:1280px){
  /* the hard breaks are typeset for the 1440 canvas; narrower columns strand
     orphan words, so let the copy reflow */
  .hero__sub br,.lede br,.microcopy br{ display:none; }
  :root, :host{ --gutter:48px; --fs-hero:44px; --fs-display:40px; --fs-h2:38px; }
  .header{ padding:0 32px; }
  .always__phone{ width:300px; }
  /* the callouts are placed for the 1440 canvas; narrower columns push them
     past the edge, so they drop out below it */
}

@media (max-width:1024px){
  :root, :host{ --fs-hero:38px; --fs-display:34px; --fs-h2:32px; --fs-step:21px; }
  .always,.faq{ grid-template-columns:1fr; min-height:0; padding:0; }
  .always__copy,.faq__copy{ padding:56px var(--gutter) 60px; max-width:none; }
  .always__demo{ padding:0 0 60px; }
  /* stacked: the artwork is no longer sized by the section's height, so the
     child has to go back to filling its box - left as width:auto it keeps its
     intrinsic 1500px and runs off the page */
  .faq__art{ position:static; transform:none; height:auto; width:100%; max-width:320px; margin:0 auto 56px; }
  .faq__art > img,
  .faq__art > video{ height:auto; width:100%; max-width:100%; }
  .how{ min-height:0; padding:70px 0; }
  /* stacked: the clip leads, the copy reads under it. The flex container has to
     be .how__inner — the media sits inside it, so `order` on .how does nothing. */
  .how__inner{ display:flex; flex-direction:column; gap:44px; }
  .how__copy{ max-width:none; }
  /* stacked: a square box for a square clip, so object-fit has nothing to crop.
     A fixed height against an 848x848 source cut the sides off on a phone and
     the top and bottom on a tablet. */
  /* pulled out of .how__inner's gutter so the clip meets the section edges -
     inside the padding it read as a framed box floating in the panel */
  .how__media{ position:static; order:-1; width:auto; height:auto;
    aspect-ratio:1/1; margin:0 calc(var(--gutter) * -1) 36px; }
  .how__video{ object-fit:contain; }
  .collections,.products{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .story{ grid-template-columns:1fr; }
  .story__art{ height:360px; }
  .trustbar__inner{ height:auto; padding:40px var(--gutter); gap:30px; }
  .benefits__inner{ height:auto; padding:26px var(--gutter); flex-wrap:wrap; gap:18px 34px; }
}

@media (max-width:760px){
  :root, :host{ --gutter:20px; --fs-hero:32px; --fs-display:29px; --fs-h2:28px; --fs-step:19px; --fs-body:15px; }

  .display br,.h2 br{ display:none; }

  /* the mobile comp runs section CTAs edge to edge */
  .always .btn,.how .btn,.ownbanner .btn,.story .btn,
  .hero__actions .btn{ width:100%; }
  .always__actions{ flex-direction:column; gap:12px; }

  .announce{ font-size:12px; gap:8px; }
  .header{ height:64px; padding:0 20px; }
  .header__logo img{ height:19px; }

  .hero{ min-height:640px; align-items:flex-start; padding-top:40px; }
  .hero::after{ background:linear-gradient(180deg, rgba(20,26,44,.72) 0%, rgba(20,26,44,.66) 45%, rgba(20,26,44,.9) 100%); }
  .hero__bg{ object-position:66% 38%; }
  .hero__actions{ flex-direction:column; gap:12px; margin-top:200px; }
  .trustline{ justify-content:center; }
  /* on a phone the price drops to its own line, so its separator goes away */
  .dot--price{ display:none; }
  .trustline__price{ flex-basis:100%; }
  .lockup{ height:20px; margin-bottom:22px; }
  /* the mobile comp drops the Shark Tank chip entirely */
  .seenon{ display:none; }

  .press{ padding:34px 0 38px; }
  .press__row{ gap:44px; }

  .seals img{ height:86px; }
  .always__phone{ width:230px; }
  .always__chips{ width:230px; }

  .licensed,.trending{ padding:56px var(--gutter) 60px; }
  .collections,.products{ gap:14px; }
  .collection{ padding:18px 16px 20px; }
  .collection h3{ font-size:17px; }

  .ownbanner{ min-height:0; padding:60px 0 64px; }
  .bgtoggle{ right:14px; bottom:14px; width:36px; height:36px; }
  .feat{ gap:14px; justify-content:space-between; }
  .feat li{ font-size:11px; text-align:center; flex:1; }
  .feat__ico{ width:42px; height:42px; }

  .madeby,.reviews{ padding:56px 0 46px; }
  .madeby__head{ flex-direction:column; align-items:flex-start; gap:10px; padding:0 var(--gutter); }
  .carousel__track{ --edge:var(--gutter); gap:10px; }
  .madeby .carousel__track{ --edge:var(--gutter); }
  .ugc{ height:min(560px, 58vh); }   /* width follows the 9:16 aspect-ratio */
  .rev{ width:min(300px, 78vw); height:min(400px, 46vh); }
  .rev--quote{ padding:26px 24px; }
  .rev--quote blockquote{ font-size:19px; }
  .rev--md blockquote{ font-size:15px; }
  .rev--sm blockquote{ font-size:13px; }
  .carousel__next{ right:10px; }
  .carousel__prev{ left:10px; }

  .tabs{ flex-wrap:wrap; }

  .trustbar__inner{ flex-direction:column; align-items:flex-start; gap:22px; padding:34px var(--gutter); }
  .trustbar .benefit{ flex-direction:row; }

  .story__copy{ padding:56px var(--gutter) 60px; text-align:center; align-items:center; }
  .story .lede{ text-align:center; }
  .story .btn{ align-self:stretch; }
  .lockup--dark{ align-self:center; }
  .story__art{ order:-1; height:280px; }
  .faq__copy{ text-align:center; }
  .q__head{ text-align:left; }
  .q--media .q__body{ flex-direction:column; gap:14px; }
  .q__clip{ width:min(200px, 60%); align-self:center; }
  .q--media.is-open .q__body{ max-height:560px; }
  .faq__art{ display:none; }

  /* benefits: 2x2, icon above the label */
  .benefits__inner{ display:grid; grid-template-columns:1fr 1fr; gap:30px 16px; padding:34px var(--gutter); height:auto; }
  .benefits .benefit{ flex-direction:column; text-align:center; gap:12px; font-size:15px; }
  .benefits .benefit svg{ height:30px; }

}

@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; scroll-behavior:auto !important; }
}