/* ==========================================================================
   Belkin x ScreenSkinz landing page
   Rebuilt from refs/1440px.pdf (desktop) and refs/400px.pdf (mobile)
   Design canvas: 1440px wide, content gutter 80px, header gutter 48px
   ========================================================================== */

:root{
  --green:      #6efb38;
  --green-ink:  #0d2b05;
  --black:      #000;
  --ink:        #101010;
  --ink-soft:   #4a4a4a;
  --muted:      #8f8f8f;
  --rail:       #e2e1de;
  --grey-bg:    #f4f4f4;
  --cyan:       #a5e2f6;
  --white:      #fff;

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

  --fs-display: 56px;
  --lh-display: 1.16;
  --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{ -webkit-text-size-adjust:100%; }

html{ overflow-x:hidden; }

body{
  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);
  font-feature-settings:"cv05" 1,"cv08" 1;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ max-width:100%; display:block; }
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-display);
  line-height:var(--lh-display);
  letter-spacing:-.028em;
  font-weight:600;
}
.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); }
.center{ text-align:center; }
.microcopy{ font-size:var(--fs-small); color:var(--muted); margin-top:14px; }
.microcopy--onDark{ color:rgba(255,255,255,.6); }

/* ---------- 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; transition:transform .25s ease;
}
.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;
}
.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--sm{ height:42px; padding:0 22px; font-size:14px; }

/* ==========================================================================
   ANNOUNCEMENT  (design y 0-40)
   ========================================================================== */
.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; letter-spacing:-.005em;
}
.dot{ opacity:.75; }

/* ==========================================================================
   HEADER  (design y 40-110)
   ========================================================================== */
.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  (design y 110-710, height 600)
   ========================================================================== */
.hero{ position:relative; min-height:600px; display:flex; align-items:center; overflow:hidden; }
.hero__bg{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:60% 50%;
  z-index:0;
}
.hero::after{
  content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(90deg, rgba(10,8,6,.86) 0%, rgba(10,8,6,.62) 34%, rgba(10,8,6,.12) 62%, rgba(10,8,6,0) 78%);
}
.hero__inner{ position:relative; z-index:2; width:100%; max-width:var(--maxw); margin:0 auto; padding:0 var(--gutter); color:var(--white); }
/* align-self matters inside .trusted__copy, a column flex container: the default
   `stretch` would blow the mark out to the full column width at height:22px. */
.lockup{ height:22px; width:auto; margin-bottom:32px; align-self:flex-start; }
.hero__sub{ margin-top:24px; font-size:var(--fs-body); line-height:1.62; color:rgba(255,255,255,.88); }
.hero__actions{ display:flex; gap:14px; margin-top:44px; }
.trustline{ margin-top:30px; font-size:var(--fs-small); color:rgba(255,255,255,.8); display:flex; gap:10px; }

/* ==========================================================================
   PRESS  (design y 710-906, height 196)
   ========================================================================== */
.press{ background:var(--white); padding:52px var(--gutter) 56px; }
.press__label{ text-align:center; font-size:14px; font-weight:600; margin-bottom:34px; }
.press__row{
  max-width:1200px; margin:0 auto;
  display:flex; align-items:center; justify-content:space-between; gap:32px;
}
.press__row img{ width:auto; opacity:.92; flex:0 0 auto; }

/* ==========================================================================
   BUILT TOUGH  (design y 906-1863)
   ========================================================================== */
.built{
  background:var(--grey-bg);
  position:relative;
  display:grid; grid-template-columns:1fr 1fr;
  align-items:center;
  min-height:957px;
  padding:0 0 0 var(--gutter);
  overflow:hidden;
}
.built__copy{ padding:80px 40px 80px 0; max-width:560px; }
/* phone trio: design x 578-1525, y 1043-1809 in a 1440x957 section.
   It bleeds 85px past the right edge; the section's overflow:hidden clips it,
   exactly as the comp does. */
.built__art{ position:absolute; right:-5.9%; bottom:5.64%; width:65.76%; pointer-events:none; }
.built__art img{ width:100%; height:auto; }
.built .display{ margin-bottom:52px; }
.built .btn{ margin-top:46px; }

/* 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;
  font-size:var(--fs-step); line-height:1.3; font-weight:600; letter-spacing:-.02em;
  color:var(--muted); text-align:left; padding:0;
  transition:color .25s ease;
}
.step.is-active .step__head{ color:var(--ink); }
/* max-height reveal rather than 0fr/1fr: an overflow:hidden grid item has an
   automatic minimum size of 0, so `1fr` collapses to the padding instead of
   resolving to the content height. */
.step__body{
  overflow:hidden; max-height:0; opacity:0;
  transition:max-height .32s ease, opacity .25s ease;
}
.step.is-active .step__body{ max-height:280px; opacity:1; }
.step__body > p{
  font-size:var(--fs-body); line-height:1.68; color:var(--ink-soft);
  max-width:430px;
  padding-top:14px;
}
.step__num{
  flex:0 0 30px; width:30px; height:30px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  background:#cfcfcf; color:var(--white);
  font-size:14px; font-weight:600; line-height:1;
  transition:background-color .25s ease;
}
.step.is-active .step__num{ background:var(--black); }
.steps--num .step__head{ align-items:center; }
.steps--num .step__body > p{ margin-left:46px; }

/* ==========================================================================
   OFFICIALLY LICENSED  (design y 1863-3199)
   ========================================================================== */
.licensed{ background:var(--white); padding:92px var(--gutter) 96px; }
.licensed .lede{ margin:22px auto 0; }
.collections{
  max-width:var(--maxw); margin:56px auto 0;
  display:grid; grid-template-columns:repeat(4,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  (design y 3199-3844, height 645)
   ========================================================================== */
.ownbanner{ position:relative; min-height:645px; display:flex; align-items:center; overflow:hidden; color:var(--white); }
.ownbanner__bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; }
/* glass phone + "your design here": design x 778-1244, y 3270-3846 in a
   1440x645 section */
.ownbanner__art{ position:absolute; right:13.61%; bottom:-0.31%; width:32.36%; height:auto; z-index:2; }
.ownbanner::after{
  content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(90deg, rgba(6,14,22,.92) 0%, rgba(6,14,22,.7) 32%, rgba(6,14,22,0) 58%);
}
.ownbanner__copy{ position:relative; z-index:3; width:100%; max-width:var(--maxw); margin:0 auto; padding:0 var(--gutter); }
.ownbanner .lede{ margin-top:24px; }
.feat{ display:flex; gap:44px; margin-top:44px; }
.feat li{ display:flex; flex-direction:column; 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:44px; }

/* ==========================================================================
   POPULAR DESIGNS  (design y 3844-4750)
   ========================================================================== */
.popular{ background:var(--white); padding:92px var(--gutter) 96px; }
.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, background-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:56px auto 0;
  display:grid; grid-template-columns:repeat(4,1fr); gap:28px;
}
.product{ display:flex; flex-direction:column; align-items:flex-start; }
.product__img{ width:100%; aspect-ratio:1/1; background:var(--white); overflow:hidden; }
.product__img img{ width:100%; height:100%; object-fit:contain; }
.product__badge{ width:34px; height:34px; object-fit:contain; margin-top:-8px; }
.product__brand{ font-size:11px; letter-spacing:.09em; text-transform:uppercase; color:var(--muted); margin-top:14px; }
.product__name{ font-size:18px; letter-spacing:-.02em; margin-top:4px; }
.product .btn{ margin-top:18px; }

/* ==========================================================================
   HOW IT WORKS  (design y 4750-5752)
   ========================================================================== */
.how{
  background:var(--grey-bg); position:relative; overflow:hidden;
  display:grid; grid-template-columns:1fr 1fr; align-items:center;
  min-height:1002px; padding-left:var(--gutter);
}
.how__copy{ padding:80px 40px 80px 0; max-width:560px; }
.how .display{ margin-bottom:56px; }
.how .btn{ margin-top:46px; }
/* phones: design x 609-1383, y 4924-5772 in a 1440x1002 section */
.how__art{ position:absolute; right:3.96%; bottom:-2%; width:53.75%; pointer-events:none; }
.how__art img{ width:100%; height:auto; }

/* ==========================================================================
   REVIEWS  (design y 5752-6674)
   ========================================================================== */
.reviews{ background:var(--white); padding:92px 0 96px; }
.reviews .h2{ padding:0 var(--gutter); }
.carousel{ position:relative; margin-top:56px; }
.carousel__track{
  display:flex; gap:8px;
  padding:0 var(--gutter);
  overflow-x:auto; scroll-snap-type:x proximity;
  scrollbar-width:none; -ms-overflow-style:none;
}
.carousel__track::-webkit-scrollbar{ display:none; }
.carousel__next{
  position:absolute; right:26px; 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__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); }

.rev{
  margin:0; flex:0 0 400px; height:400px; scroll-snap-align:start;
  overflow:hidden; background:var(--grey-bg);
}
.rev img{ width:100%; height:100%; object-fit:cover; }
.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; }
.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); }
.reviews .center .btn{ margin-top:44px; }

/* ==========================================================================
   PROTECTION MEETS  (design y 6674-7274, height 600)
   ========================================================================== */
.protection{ position:relative; min-height:600px; display:flex; align-items:center; overflow:hidden; color:var(--white); }
.protection__bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; }
/* privacy phone + warranty seal: design x 805-1403, y 6697-7442 in a 600-tall
   section — it runs past the bottom edge and is clipped there, as in the comp */
.protection__art{ position:absolute; right:2.57%; top:3.83%; width:41.53%; height:auto; z-index:2; }
.protection::after{
  content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(90deg, rgba(18,15,12,.9) 0%, rgba(18,15,12,.66) 34%, rgba(18,15,12,0) 60%);
}
.protection__copy{ position:relative; z-index:3; width:100%; max-width:var(--maxw); margin:0 auto; padding:0 var(--gutter); }
.protection .lede{ margin-top:24px; }
.stats{ display:flex; gap:56px; margin:56px 0 0; }
.stat{ padding-top:18px; border-top:2px solid var(--green); min-width:150px; }
.stat dt{ font-size:48px; font-weight:600; letter-spacing:-.03em; line-height:1.1; }
.stat dd{ margin:8px 0 0; font-size:13px; color:rgba(255,255,255,.82); }

/* ==========================================================================
   COMMUNITY  (design y 7274-8244)
   ========================================================================== */
.community{ background:var(--white); padding:88px 0 92px; }
.community__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;
}
.community__share{ font-size:14px; color:var(--ink-soft); white-space:nowrap; }
.community__share b{ font-weight:600; color:var(--ink); }
.community .carousel__track{ padding:0 40px; gap:16px; }
.ugc{
  margin:0; position:relative; flex:0 0 258px; height:460px;
  border-radius:12px; overflow:hidden; scroll-snap-align:start; background:var(--grey-bg);
}
.ugc img{ width:100%; height:100%; object-fit:cover; }
.ugc__user{
  position:absolute; top:14px; left:14px;
  font-size:10px; font-weight:600; letter-spacing:.06em; color:var(--white);
  text-shadow:0 1px 4px rgba(0,0,0,.5);
}
.ugc__ctrls{ position:absolute; top:12px; right:12px; display:flex; gap:8px; }
.ugc__ctrls i{
  width:22px; height:22px; border-radius:50%;
  background:rgba(0,0,0,.42); display:inline-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; }
.ico-mute::before{
  content:""; position:absolute; inset:0; margin:auto; width:12px; height:12px;
  background:var(--white);
  -webkit-mask:no-repeat center/12px 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' stroke-linecap='round'><path d='M4 9v6h4l5 4V5L8 9H4zM17 9l4 6M21 9l-4 6'/></svg>");
          mask:no-repeat center/12px 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' stroke-linecap='round'><path d='M4 9v6h4l5 4V5L8 9H4zM17 9l4 6M21 9l-4 6'/></svg>");
}
.community .carousel__next{ right:26px; }

/* ==========================================================================
   TRUSTED  (design y 8244-8844, height 600)
   ========================================================================== */
.trusted{ display:grid; grid-template-columns:1fr 1fr; min-height:600px; background:var(--cyan); }
.trusted__copy{ padding:80px var(--gutter); display:flex; flex-direction:column; justify-content:center; }
.lockup--dark{ margin-bottom:28px; }
.trusted .lede{ margin-top:24px; color:#1e3138; }
.trusted .btn{ margin-top:40px; align-self:flex-start; }
.trusted__art img{ width:100%; height:100%; object-fit:cover; }

/* ==========================================================================
   FAQ  (design y 8844-9736)
   ========================================================================== */
.faq{
  background:var(--grey-bg); position:relative; overflow:hidden;
  display:grid; grid-template-columns:1fr 1fr; align-items:center;
  min-height:892px; padding-left:var(--gutter);
}
.faq__copy{ padding:88px 40px 88px 0; max-width:620px; }
.faq .h2{ margin-bottom:44px; }
/* phone: design x 904-1281, y 8972-9632 in a 1440x892 section */
.faq__art{ position:absolute; right:11.04%; top:14.35%; width:26.18%; pointer-events:none; }
.faq__art img{ width:100%; height:auto; }

.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; transition:max-height .32s ease; }
.q.is-open .q__body{ max-height:340px; }
.q__body > p{ font-size:14px; line-height:1.65; color:var(--ink-soft); padding:0 20px 18px; }

/* ==========================================================================
   BENEFITS BAR  (design y 9736-9844, 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;
}

/* ==========================================================================
   FINAL CTA  (design y 9844-10544, height 700)
   ========================================================================== */
.finalcta{ position:relative; min-height:700px; display:flex; align-items:center; overflow:hidden; color:var(--white); }
.finalcta__bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:55% 50%; z-index:0; }
.finalcta::after{
  content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(90deg, rgba(12,9,7,.86) 0%, rgba(12,9,7,.58) 36%, rgba(12,9,7,0) 66%);
}
.finalcta__inner{ position:relative; z-index:2; width:100%; max-width:var(--maxw); margin:0 auto; padding:0 var(--gutter); }
.finalcta .btn{ margin-top:44px; }

/* ==========================================================================
   FOOTER  (design y 10544-11104)
   ========================================================================== */
.footer{ background:var(--black); color:var(--white); padding:52px 0 64px; }
.footer__inner{ max-width:1360px; margin:0 auto; padding:0 40px; }
.footer__logo{ height:30px; width:auto; margin:0 0 44px 16px; }
.footer__grid{
  display:grid; grid-template-columns:1.1fr 1.2fr 1.2fr 1.5fr; gap:32px;
}
.fcol h4{ font-size:15px; font-weight:600; margin-bottom:16px; }
/* the heading is a button so it can drive the mobile accordion; on desktop it is
   inert-looking and the list is always open */
.fcol__head{ display:flex; align-items:center; justify-content:space-between; width:100%; font:inherit; cursor:default; }
.fcol__head .ico-plus{ display:none; }
.fcol li + li{ margin-top:10px; }
.fcol a{ font-size:15px; color:rgba(255,255,255,.88); }
.fcol a:hover{ color:var(--white); text-decoration:underline; }
.fcol__note{ font-size:14px; color:rgba(255,255,255,.85); margin-bottom:16px; }
.fcol--connect h4{ font-size:17px; }
.legal{ grid-column:4; }

.signup{ display:flex; gap:12px; max-width:440px; }
.signup input{
  flex:1; height:46px; border-radius:var(--r-pill); border:0;
  padding:0 22px; font-size:14px; background:var(--white); color:var(--ink);
}
.signup input::placeholder{ color:#6b6b6b; }
.signup button{
  height:46px; padding:0 30px; border-radius:var(--r-pill);
  border:1.5px solid var(--white); color:var(--white); font-size:14px; font-weight:600;
  transition:background-color .16s ease, color .16s ease;
}
.signup button:hover{ background:var(--white); color:var(--black); }
.signup__arrow{ display:none; }

.socials{ display:flex; gap:18px; margin-top:22px; }
.socials svg{ width:19px; height:19px; fill:currentColor; }
.socials a{ color:rgba(255,255,255,.92); }
.socials a:hover{ color:var(--green); }

.legal{ margin-top:22px; font-size:13px; color:rgba(255,255,255,.8); max-width:420px; }
.legal a{ font-weight:600; color:var(--white); }

.locale{ display:flex; align-items:center; gap:9px; margin-top:56px; font-size:13px; font-weight:600; }
.locale svg{ width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.6; }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width:1280px){
  /* The hard breaks in body copy are typeset for the 1440 canvas; below it the
     columns are narrower and they strand orphan words. Let the text reflow. */
  .hero__sub br,.lede br{ display:none; }

  :root{ --gutter:48px; --fs-display:46px; --fs-h2:38px; }
  .header{ padding:0 32px; }
  .stats{ gap:34px; }
  .stat{ min-width:0; }
}

@media (max-width:1024px){
  :root{ --fs-display:40px; --fs-h2:34px; --fs-step:21px; }
  .built,.how,.faq{ grid-template-columns:1fr; min-height:0; padding-left:0; }
  .built__art,.how__art,.faq__art{ position:static; width:100%; height:380px; order:-1; }
  /* base rules size these by width; in the stacked layout they must fit the box instead */
  .built__art img,.how__art img,.faq__art img{ height:100%; width:100%; object-fit:contain; object-position:center; }
  .built__copy,.how__copy,.faq__copy{ padding:56px var(--gutter) 64px; max-width:none; }
  /* still absolutely positioned here, so the inherited `right` offset would push
     a full-width image off the left edge — pin it to the edge instead */
  .ownbanner__art,.protection__art{ right:0; width:100%; opacity:.5; }
  .ownbanner::after,.protection::after{
    background:linear-gradient(90deg, rgba(8,12,18,.92) 0%, rgba(8,12,18,.74) 60%, rgba(8,12,18,.5) 100%);
  }
  /* minmax(0,1fr): a 1fr track has min-width:auto, so a nowrap button inside
     a card would push the track — and the whole page — wider than the viewport */
  .collections,.products{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .trusted{ grid-template-columns:1fr; }
  .trusted__art{ height:360px; }
  .footer__grid{ grid-template-columns:1fr 1fr; gap:40px 32px; }
  .benefits__inner{ height:auto; padding:26px var(--gutter); flex-wrap:wrap; justify-content:flex-start; gap:18px 34px; }
}

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

  /* hard line breaks are desktop typesetting only — let copy reflow on mobile */
  .hero__sub br,.lede br,.display br{ display:none; }

  /* the mobile comp runs section CTAs edge to edge; only the two centred
     "explore/see all" pills keep their intrinsic width */
  .built .btn,.how .btn,.ownbanner .btn,.reviews .btn,
  .trusted .btn,.finalcta .btn,.hero__actions .btn,.product .btn{ width:100%; }

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

  .hero{ min-height:620px; align-items:flex-start; padding-top:44px; }
  .hero::after{ background:linear-gradient(180deg, rgba(10,8,6,.82) 0%, rgba(10,8,6,.42) 46%, rgba(10,8,6,.86) 100%); }
  .hero__bg{ object-position:62% 40%; }
  .hero__actions{ flex-direction:column; gap:12px; margin-top:210px; }
  .trustline{ justify-content:center; }
  .lockup{ height:19px; margin-bottom:24px; }

  .press{ padding:34px 0 38px; }
  .press__label{ margin-bottom:24px; }
  .press__row{
    justify-content:flex-start; gap:44px; padding:0 20px;
    overflow-x:auto; scrollbar-width:none;
  }
  .press__row::-webkit-scrollbar{ display:none; }

  .built__art,.how__art{ height:300px; }
  /* the comp drops the FAQ phone on mobile rather than stacking it */
  .faq__art{ display:none; }

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

  /* blue banner: copy, then the artwork below it at full strength.
     The art precedes the copy in the DOM (it is an absolute overlay on desktop),
     so flex order puts it back underneath here. */
  .ownbanner{ min-height:0; padding:56px 0 0; display:flex; flex-direction:column; }
  .ownbanner__copy{ order:1; }
  .ownbanner__art{ order:2; position:static; width:100%; opacity:1; margin-top:34px; }
  .ownbanner::after{ background:linear-gradient(180deg, rgba(6,14,22,.86) 0%, rgba(6,14,22,.45) 55%, rgba(6,14,22,0) 100%); }
  .feat{ gap:14px; justify-content:space-between; }
  .feat li{ font-size:11px; text-align:center; align-items:center; flex:1; }
  .feat__ico{ width:42px; height:42px; }
  .ownbanner .microcopy{ text-align:center; }

  .tabs{ flex-wrap:wrap; }
  .product__badge{ width:28px; height:28px; }
  .product .btn{ font-size:12px; padding:0 10px; gap:6px; height:38px; }
  .product .btn .ico-arrow{ width:14px; height:14px; flex-basis:14px; }
  .product__name{ font-size:16px; }

  .reviews,.community{ padding:56px 0 60px; }
  .carousel__track{ padding:0 var(--gutter); gap:10px; }
  .rev{ flex:0 0 84vw; height:340px; }
  .rev--quote{ padding:26px 24px; }
  .rev--quote blockquote{ font-size:19px; }
  .ugc{ flex:0 0 76vw; height:420px; }
  .carousel__next{ right:10px; }

  /* protection: heading, copy, artwork, then the three stats side by side.
     `display:contents` promotes the copy's children to flex items of the section
     so the artwork can be ordered between the paragraph and the stats. */
  .protection{ min-height:0; padding:56px 0 46px; display:flex; flex-direction:column; }
  .protection::after{ background:linear-gradient(180deg, rgba(18,15,12,.8) 0%, rgba(18,15,12,.35) 60%, rgba(18,15,12,.1) 100%); }
  /* display:contents drops the wrapper's box, so its z-index goes with it —
     the promoted children have to sit above the overlay themselves. */
  .protection__copy{ display:contents; }
  .protection .display,
  .protection .lede,
  .protection .stats{ position:relative; z-index:3; padding:0 var(--gutter); }
  .protection .display{ order:1; }
  .protection .lede{ order:2; }
  .protection__art{ order:3; position:static; width:100%; margin-top:26px; }
  .stats{ order:4; gap:12px; margin-top:30px; }
  .stat{ flex:1; min-width:0; padding-top:12px; }
  .stat dt{ font-size:26px; }
  .stat dd{ font-size:12px; }

  .community__head{ flex-direction:column; align-items:center; text-align:center; gap:12px; padding:0 var(--gutter); }
  .community .h2{ text-align:center; }
  .community__share{ white-space:normal; }

  /* trusted: photo first, everything centred */
  .trusted__art{ order:-1; height:280px; }
  .trusted__copy{ padding:44px var(--gutter) 56px; text-align:center; align-items:center; }
  .trusted .btn{ align-self:stretch; }
  .lockup--dark{ align-self:center; }

  .faq__copy{ text-align:center; }
  .q__head{ text-align:left; }

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

  .finalcta{ min-height:0; padding:64px 0 72px; }
  .finalcta::after{ background:linear-gradient(180deg, rgba(12,9,7,.8) 0%, rgba(12,9,7,.5) 40%, rgba(12,9,7,.9) 100%); }

  /* footer: newsletter first, link columns collapse into accordions */
  .footer{ padding:44px 0 52px; }
  .footer__inner{ padding:0 var(--gutter); }
  .footer__logo{ margin:0 0 32px; }
  .footer__grid{ grid-template-columns:1fr; gap:0; }
  .fcol--connect{ order:1; margin-bottom:26px; }
  .fcol--support{ order:2; } .fcol--company{ order:3; } .fcol--account{ order:4; }
  .legal{ order:5; grid-column:1; margin-top:26px; }

  .fcol:not(.fcol--connect) h4{ margin:0; border-top:1px solid rgba(255,255,255,.28); }
  .fcol--account{ border-bottom:1px solid rgba(255,255,255,.28); }
  .fcol__head{ padding:20px 2px; font-size:17px; font-weight:400; cursor:pointer; }
  .fcol__head .ico-plus{ display:block; }
  .fcol__list{ overflow:hidden; max-height:0; transition:max-height .3s ease; }
  .fcol.is-open .fcol__list{ max-height:340px; }
  .fcol:not(.fcol--connect) .fcol__list{ padding-bottom:0; }
  .fcol.is-open .fcol__list{ padding-bottom:18px; }

  /* email field with the submit arrow sitting inside the pill */
  .signup{ position:relative; max-width:none; gap:0; }
  .signup input{ width:100%; height:54px; padding-right:60px; }
  .signup button{
    position:absolute; right:5px; top:5px; width:44px; height:44px; padding:0;
    border-radius:50%; border:1.5px solid rgba(0,0,0,.55); color:var(--ink);
  }
  .signup__label{ display:none; }
  .signup__arrow{ display:inline-block; }
  .socials{ gap:22px; margin-top:24px; }
  .socials svg{ width:22px; height:22px; }
  .locale{ margin-top:32px; }
}

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