/* ==========================================================================
   Tango — landing
   Built from Figma "Home — Desktop (1440)" 761:1451 and "Home — Phone (390)".
   Desktop frame is 1500 wide with a 64px gutter (1372 content).
   Phone frame is 390 wide with a 24px gutter (342 content).
   ========================================================================== */

:root{
  --bg:#000000;
  --panel:#121212;
  --text:#ffffff;
  --muted:#a4a4a4;
  --line:#414141;
  --red:#fe0042;
  --mid:#9c5a87;
  --teal:#00cacf;
  --grad:linear-gradient(90deg,#fe0042 0%,#9c5a87 50%,#00cacf 100%);
  --maxw:1376px;
  --gutter:64px;
  /* first screen: viewport minus the 78px header. svh keeps mobile chrome from jolting it */
  --hdr-h:78px;
  --hero-h:calc(100vh - var(--hdr-h));
  --font:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Inter","Segoe UI",Roboto,sans-serif;
}

@supports (height:100svh){:root{--hero-h:calc(100svh - var(--hdr-h))}}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0 auto;max-width:var(--maxw);
  background:var(--bg);color:var(--text);
  font-family:var(--font);font-size:16px;line-height:1.5;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
h1,h2,h3{margin:0;letter-spacing:-.02em}
p{margin:0}
ul{margin:0;padding:0;list-style:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}

.skip{position:absolute;left:-9999px}
.skip:focus{left:16px;top:16px;z-index:100;background:var(--panel);padding:10px 16px;border-radius:8px}
:focus-visible{outline:2px solid var(--teal);outline-offset:3px;border-radius:6px}

/* ---------- shared bits ---------- */
.mark{width:30px;height:30px;flex:none}
.mark.lg{width:72px;height:72px}
.wordmark{font-size:21px;font-weight:700;letter-spacing:-.02em}
.logo{display:inline-flex;align-items:center;gap:10px}

.eyebrow{font-size:12px;font-weight:600;color:var(--muted);letter-spacing:.02em}

.chip{
  display:inline-flex;align-items:center;gap:8px;
  padding:9px 16px 9px 14px;border-radius:999px;
  background:var(--panel);border:1px solid var(--line);
  font-size:13px;font-weight:500;white-space:nowrap;
}
.dot{width:6px;height:6px;border-radius:50%;flex:none}
.dot.teal{background:var(--teal)}
.dot.red{background:var(--red)}

.pill{
  display:inline-flex;align-items:center;justify-content:center;
  padding:11px 20px;border-radius:999px;
  font-size:14px;font-weight:600;
  background:linear-gradient(var(--panel),var(--panel)) padding-box,var(--grad) border-box;
  border:1px solid transparent;
}

/* Figma "Download Block": 473x124 — badges stacked, QR to the right, gap 32 */
.download{display:flex;align-items:center;gap:32px}
.badges{display:flex;flex-direction:column;gap:12px;flex:none}
.badge{
  display:inline-flex;align-items:center;gap:10px;
  width:176px;height:56px;padding:0 18px 0 14px;border-radius:12px;
  background:var(--panel);border:1px solid var(--line);
}
.badge svg{width:26px;height:28px;flex:none}
.badge .lines{display:flex;flex-direction:column;gap:1px;line-height:1.15}
.badge .small{font-size:10px;font-weight:500;letter-spacing:.02em;text-transform:uppercase;color:var(--muted)}
.badge .big{font-size:19px;font-weight:600;white-space:nowrap}
/* Google Play isn't live yet: the badge keeps its shape but is inert, so
   nothing is focusable or clickable and it reads as a promise, not a link. */
.badge-soon{cursor:default}
.qr{display:flex;align-items:center;gap:16px;flex:none}
.qr::before{content:"";width:1px;height:96px;background:var(--line);flex:none}
.qr img{width:104px;height:104px;border-radius:10px;background:#fff;padding:6px;flex:none}
.qr>div{width:128px}
.qr-label{font-size:12px;font-weight:600;color:var(--muted)}
.qr p{font-size:15px;line-height:1.4;color:var(--muted);margin-top:6px}

/* ---------- header ---------- */
.header{position:sticky;top:0;z-index:50;background:rgba(0,0,0,.82);backdrop-filter:blur(18px)}
.bar{display:flex;align-items:center;justify-content:space-between;padding:18px var(--gutter);min-height:var(--hdr-h)}
.nav{display:flex;align-items:center;gap:26px;font-size:14px;font-weight:500}
.nav a{color:var(--muted)}
.nav a:hover{color:var(--text)}
.bar-right{display:flex;align-items:center;gap:12px}
.menu-btn{display:none;width:40px;height:40px;border-radius:12px;background:var(--panel);
  border:1px solid var(--line);flex-direction:column;align-items:center;justify-content:center;gap:4px}
.menu-btn span{display:block;width:18px;height:2px;border-radius:1px;background:#fff}

/* ---------- hero ---------- */
/* Two-column grid: the copy stacks in column 1, the art spans every row in
   column 2. A grid (rather than a flex row with a copy wrapper) lets the
   phone sit between the headline and the buttons on mobile, where the fold
   has to end on the store badges. */
.hero{position:relative;padding:0 40px;background:var(--bg);min-height:var(--hero-h);
  overflow:hidden;
  display:grid;align-content:center;justify-items:start;
  grid-template-columns:var(--colw) 1fr;
  grid-template-rows:repeat(5,auto);
  column-gap:40px;row-gap:clamp(14px,2.61vh,26px);
  --colw:min(48%,640px);
  --art-h:clamp(420px,var(--hero-h),1100px)}
.hero-inner,.hero-tail,.hero-row,.hero-head{display:contents}
.hero .chip    {grid-column:1;grid-row:1;position:relative;z-index:1}
.hero .headline{grid-column:1;grid-row:2;position:relative;z-index:1}
.hero .subhead {grid-column:1;grid-row:3;position:relative;z-index:1}
.hero .download{grid-column:1;grid-row:4;position:relative;z-index:1}
.hero .micro   {grid-column:1;grid-row:5;position:relative;z-index:1}
/* scales off height only — vw would blow this up on a wide, short window */
.headline{display:flex;flex-direction:column;letter-spacing:-.03em;line-height:1;
  font-size:clamp(40px,8.64vh,96px)}
.headline .l1{font-weight:400}
.headline .l2{font-weight:700;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.subhead{max-width:500px;font-size:clamp(15px,1.91vh,19px);line-height:1.58;color:var(--muted)}
.micro{font-size:13px;color:var(--muted)}
/* Scale to the PHONE, not the artwork. In img-hero the device is only
   57.78% x 73.49% of the canvas — the rest is glow — so object-fit:contain
   left it looking small. The device is sized to ~88% of the box and centred
   on its own midpoint (49.95%, 49.73%); the glow overflows and is clipped. */
.hero-art{grid-column:2;grid-row:1/-1;justify-self:stretch;align-self:center;
  position:relative;height:0}
.hero-art img{position:absolute;left:50%;top:50%;max-width:none;height:auto;
  width:min(152.3%,calc(var(--art-h) * 0.74861));
  transform:translate(-49.95%,-49.73%)}

/* Desktop only: the whole left column scales off one unit tied to the hero
   height, so the headline, badges and QR grow with the window and the dead
   space above the chip / below the micro line stays small. */
@media (min-width:1376px){
  /* u is capped by the 1376 design width: the headline's longest line is
     ~6.25x its font-size and the column is 70u, so u tops out at 10.74px. */
  .hero{--u:clamp(7.6px,calc(1.262vh - 1px),10.74px)}
  /* elements scale with u; the column gap takes up whatever height is left
     over once u has capped, so the air above the chip / below the micro
     line stays small on tall windows. */
  .hero{--colw:min(58%,calc(var(--u)*70));
    row-gap:clamp(calc(var(--u)*2.2),calc(21vh - 16px - var(--u)*13.45),calc(var(--u)*5.5))}
  .hero .chip{font-size:calc(var(--u)*1.6);gap:calc(var(--u)*.85);
    padding:calc(var(--u)*1.1) calc(var(--u)*1.9) calc(var(--u)*1.1) calc(var(--u)*1.65)}
  .hero .chip .dot{width:calc(var(--u)*.72);height:calc(var(--u)*.72)}
  .headline{font-size:calc(var(--u)*10.42)}
  .hero .subhead{max-width:calc(var(--u)*56);font-size:calc(var(--u)*2.2)}
  .hero .micro{font-size:calc(var(--u)*1.5)}
  .hero .download{gap:calc(var(--u)*3.2)}
  .hero .badges{gap:calc(var(--u)*1.5)}
  .hero .badge{width:calc(var(--u)*22);height:calc(var(--u)*7);border-radius:calc(var(--u)*1.5);
    gap:calc(var(--u)*1.25);padding:0 calc(var(--u)*2.2) 0 calc(var(--u)*1.75)}
  .hero .badge svg{width:calc(var(--u)*3.25);height:calc(var(--u)*3.5)}
  .hero .badge .small{font-size:calc(var(--u)*1.25)}
  .hero .badge .big{font-size:calc(var(--u)*2.375)}
  .hero .qr{gap:calc(var(--u)*1.6)}
  .hero .qr::before{height:calc(var(--u)*12)}
  .hero .qr img{width:calc(var(--u)*13);height:calc(var(--u)*13);
    border-radius:calc(var(--u)*1.25);padding:calc(var(--u)*.75)}
  .hero .qr>div{width:calc(var(--u)*16)}
  .hero .qr-label{font-size:calc(var(--u)*1.5)}
  .hero .qr p{font-size:calc(var(--u)*1.75);margin-top:calc(var(--u)*.75)}
}

/* ---------- spec chips ---------- */
.specs{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;padding:26px 80px}

/* ---------- the difference ---------- */
.difference{position:relative;overflow-x:clip;overflow-y:visible;padding:120px 22px;display:flex;flex-direction:column;gap:125px;align-items:center}
/* Figma: 1116x454 at x184, y28 inside the 1376 section */
.cmp-glow{position:absolute;left:calc(50% + 54px);top:28px;transform:translateX(-50%);
  width:1116px;max-width:none;pointer-events:none;z-index:0}
.diff-head,.compare{position:relative;z-index:1;width:100%}
.diff-head{display:flex;flex-direction:column;align-items:center;gap:28px;text-align:center;max-width:1248px;margin:0 auto}
.diff-head h2{font-size:52px;line-height:1.1;font-weight:700}
.diff-head p{max-width:428px;font-size:17px;line-height:1.55;color:var(--muted)}

/* Two 594 columns with a 145 gutter (1332 total). Them is right-aligned and
   Tango left-aligned, so both face the centre, exactly as the frame does. */
.compare{display:grid;grid-template-columns:1fr 1fr;column-gap:145px;row-gap:0;
  max-width:1332px;margin:0 auto;align-items:center}
.cmp{display:contents}
.cmp.them  .cmp-caption{grid-column:1;grid-row:1}
.cmp.them  .cmp-row    {grid-column:1;grid-row:2}
.cmp.tango .cmp-caption{grid-column:2;grid-row:1}
.cmp.tango .cmp-row    {grid-column:2;grid-row:2}
.cmp-caption{display:flex;flex-direction:column;gap:6px;align-self:end}
.cmp.them  .cmp-caption{align-items:flex-end;text-align:right}
.cmp.tango .cmp-caption{align-items:flex-start;text-align:left}
.cmp-caption h3{font-size:40px;line-height:1.2;font-weight:600}
.cmp-caption p{font-size:15px;line-height:1.5;color:var(--muted)}
.cmp-row{display:flex;align-items:center}
/* the phone row is centred on its own axis in the frame, a few px wider than
   the caption column — these nudges reproduce that exactly */
.cmp.them  .cmp-row{justify-content:flex-end;gap:61px;margin-right:-9px}
.cmp.tango .cmp-row{justify-content:flex-start;gap:0;margin-left:-6px}
.cmp-shot{display:contents}
.cmp-row img{flex:none}
.cmp.them  .cmp-row img{width:232px}
.cmp.tango .cmp-row img{width:463px}
/* 48px label + 190px gap + 48px label = 286, centred — so 8%/50% and
   92%/50% sit on the same baselines across both columns */
.pcts{display:flex;flex-direction:column;gap:190px;height:286px;flex:none;
  font-size:40px;line-height:1.2;font-weight:600}
/* fixed so the layout doesn't shift between SF Pro and the Inter fallback */
.cmp.them  .pcts{width:84px}
.cmp.tango .pcts{width:88px}

/* ---------- feature rows ---------- */
.feature{display:grid;grid-template-columns:698px 678px;align-items:center;padding:50px 0}
.feature.flip{grid-template-columns:678px 698px}
.feature-art{display:flex;justify-content:center;padding:10px}
/* Figma's Crop rect is baked into the asset, so this just fills the column */
.art-reframe{width:100%;height:auto}
.feature-copy{display:flex;flex-direction:column;gap:18px}
/* Figma "Rule": 48x4 brand gradient, 18px above the title */
.feature-copy .rule{width:48px;height:4px;border-radius:2px;background:var(--grad);flex:none}
.feature.flip .feature-copy{padding-left:65px}
.feature-copy h2{font-size:40px;line-height:1.15;font-weight:700}
.feature-copy p{max-width:500px;font-size:17px;line-height:1.6;color:var(--muted)}

/* ---------- privacy ---------- */
.privacy{display:flex;flex-direction:column;align-items:center;gap:28px;text-align:center;padding:140px var(--gutter)}
.privacy .eyebrow{font-size:20px;font-weight:600}
.privacy h2{max-width:1042px;font-size:56px;line-height:1.15;font-weight:700}
.privacy p{max-width:640px;font-size:17px;line-height:1.6;color:var(--muted)}

/* ---------- pricing ---------- */
.pricing{padding:0 var(--gutter) 120px}
.pricing-panel{
  display:flex;align-items:center;gap:64px;padding:56px;border-radius:24px;
  background:linear-gradient(var(--panel),var(--panel)) padding-box,var(--grad) border-box;
  border:1.5px solid transparent;
}
.pricing-left{display:flex;flex-direction:column;gap:14px;flex:1}
.pricing-left h2{font-size:40px;line-height:1.15;font-weight:700}
.pricing-right{display:flex;flex-direction:column;gap:16px;width:400px;flex:none}
.pricing-right li{display:flex;align-items:center;gap:12px;font-size:16px;color:var(--muted)}
.pricing-right li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--grad);flex:none}

/* ---------- faq ---------- */
.faq{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:80px;padding:120px var(--gutter) 140px}
.faq-head{display:flex;flex-direction:column;gap:14px}
.faq-head h2{font-size:44px;line-height:1.12;font-weight:700}
.faq-list details{border-bottom:1px solid var(--line);padding:22px 0}
.faq-list summary{display:flex;align-items:center;justify-content:space-between;gap:16px;
  font-size:18px;font-weight:600;cursor:pointer;list-style:none}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary::after{content:"";flex:none;width:15px;height:15px;
  background:linear-gradient(var(--muted),var(--muted)) center/15px 1.5px no-repeat,
             linear-gradient(var(--muted),var(--muted)) center/1.5px 15px no-repeat}
.faq-list details[open] summary::after{
  background:linear-gradient(var(--muted),var(--muted)) center/15px 1.5px no-repeat}
.faq-list details p{margin-top:10px;font-size:16px;line-height:1.6;color:var(--muted);max-width:70ch}
.faq-list details a{text-decoration:underline;text-underline-offset:3px}

/* ---------- final cta ---------- */
/* Figma: Frame 8893 is 1376x590, pad 10. The glow and the phone are absolute
   and bleed upward past the section, exactly as they do in the frame. */
.cta{position:relative;height:590px;padding:10px;
  overflow-x:clip;overflow-y:visible}   /* clip the glow sideways, keep its upward bleed */
.cta-glow{position:absolute;left:10px;top:-192px;width:1490px;height:760px;
  max-width:none;pointer-events:none;z-index:0}
.cta-phone{position:absolute;left:108px;top:71px;width:370px;height:495px;
  max-width:none;pointer-events:none;z-index:1}
.cta-copy{position:relative;z-index:2;display:flex;flex-direction:column;
  align-items:center;gap:32px;text-align:center}
.cta-copy h2{font-size:68px;line-height:1.04;font-weight:600}
.cta-sub{font-size:20px;line-height:1.2;font-weight:600;color:var(--muted)}

/* ---------- footer ---------- */
.footer{border-top:1px solid var(--line);padding:48px var(--gutter) 56px;display:flex;flex-direction:column;gap:36px}
.foot-top{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.foot-links{display:flex;gap:28px;font-size:14px}
.foot-links a{color:var(--muted)}
.foot-links a:hover{color:var(--text)}
.foot-legal{display:flex;flex-direction:column;gap:8px;color:var(--muted)}
.foot-legal p:first-child{font-size:13px}
.foot-legal p:last-child{font-size:12px;line-height:1.5}

/* ---------- legal / support pages ---------- */
.doc{max-width:760px;margin:0 auto;padding:72px var(--gutter) 120px}
.doc h1{font-size:44px;line-height:1.12;font-weight:700;letter-spacing:-.02em}
.doc .updated{margin-top:10px;font-size:13px;color:var(--muted)}
.doc h2{margin-top:36px;font-size:20px;font-weight:600}
.doc p,.doc li{margin-top:10px;font-size:16px;line-height:1.65;color:var(--muted)}
.doc ul{margin-top:6px;padding-left:20px;list-style:disc}
.doc a{text-decoration:underline;text-underline-offset:3px}

/* ---------- menu ---------- */
.menu{border:0;padding:0;width:min(420px,92vw);border-radius:20px;background:var(--panel);
  color:var(--text);box-shadow:0 30px 80px rgba(0,0,0,.7)}
.menu::backdrop{background:rgba(0,0,0,.7);backdrop-filter:blur(6px)}
.menu-head{display:flex;align-items:center;justify-content:space-between;padding:20px 22px;border-bottom:1px solid var(--line)}
.menu-close{font-size:28px;line-height:1;color:var(--muted)}
.menu nav{display:flex;flex-direction:column;padding:8px 10px}
.menu nav a{padding:14px 12px;border-radius:12px;font-size:17px;font-weight:500}
.menu nav a:hover{background:rgba(255,255,255,.06)}
.menu .pill.wide{margin:10px 22px 22px;width:calc(100% - 44px)}

/* ==========================================================================
   Between the two frames — keep the desktop layout from overflowing
   ========================================================================== */
@media (max-width:1375px){
  .feature,.feature.flip{grid-template-columns:1fr 1fr;gap:40px;padding:50px var(--gutter)}
  .feature.flip .feature-copy{padding-left:0}
  .feature-art img{width:100%}
  .compare{column-gap:64px}
  .cmp.them .cmp-row img{width:min(232px,46%)}
  .cmp.tango .cmp-row img{width:min(463px,78%)}
  .cmp.them .cmp-row{gap:32px}
}
@media (max-width:1100px){
  :root{--gutter:40px}
  .hero{min-height:0;padding:56px var(--gutter) 72px;align-content:start;
    grid-template-columns:1fr min(42vw,560px);column-gap:32px;row-gap:22px}
  .headline{font-size:clamp(48px,6.6vw,86px)}
  .hero-art{height:auto;align-self:center;overflow:visible}
  .hero-art img{position:static;transform:none;height:auto;width:100%;object-fit:fill}
  /* one column here, so the two-column grid placements have to be released
     or Tango lands in an implicit second column and collapses */
  .compare{grid-template-columns:1fr;gap:56px}
  .cmp{display:flex;flex-direction:column;gap:20px;align-items:flex-start}
  .cmp.them .cmp-caption,.cmp.tango .cmp-caption{grid-column:auto;grid-row:auto;
    align-self:stretch;align-items:flex-start;text-align:left}
  .cmp.them .cmp-row,.cmp.tango .cmp-row{grid-column:auto;grid-row:auto;
    justify-content:flex-start;margin:0}
  .faq{grid-template-columns:1fr;gap:32px;padding:88px var(--gutter) 96px}
  .pricing-panel{flex-direction:column;align-items:flex-start;gap:32px;padding:40px}
  .pricing-right{width:100%}
  .difference{padding:88px var(--gutter);gap:72px}
  .privacy{padding:96px var(--gutter)}
  .privacy h2{font-size:clamp(32px,4.6vw,56px)}
  .diff-head h2{font-size:clamp(32px,4.4vw,52px)}
  .cta{height:auto;padding:96px var(--gutter)}
  .cta-glow{left:50%;top:50%;transform:translate(-50%,-50%);height:auto}
  .cta-copy h2{font-size:clamp(40px,5.6vw,68px)}
  .cta-phone{display:none}
}

/* ==========================================================================
   Phone — "Home — Phone (390)"
   ========================================================================== */
@media (max-width:768px){
  :root{--gutter:24px;--hdr-h:63px}

  /* Header — 63 tall, no Get Tango pill, logo back at Figma size */
  .nav{display:none}
  .header{background:rgba(0,0,0,.72);box-shadow:inset 0 -1px 0 var(--line)}
  .bar{padding:12px var(--gutter);min-height:var(--hdr-h)}
  .bar .pill{display:none}
  .menu-btn{display:flex;width:40px;height:38px;border-radius:12px}
  .menu-btn span{width:18px}
  .mark{width:30px;height:30px}
  .wordmark{font-size:21px}
  .logo{gap:10px}

  /* Hero — headline and chip stand beside the phone. Figma's row is 350 wide
     inside a 342 column, so it bleeds 8px past the right gutter by design;
     the second width caps it by viewport height so the badges stay above the
     fold on short phones (190 = 24 top pad + 18 gap + 129 badges + 19 air). */
  /* the phone runs past the right edge by design, so clip sideways while
     still letting its glow bleed above and below */
  .hero{display:flex;flex-direction:column;padding:0 var(--gutter);
    min-height:0;overflow-x:clip;overflow-y:visible;row-gap:0;column-gap:0}
  .hero-inner{display:flex;flex-direction:column;align-items:stretch;gap:18px;
    padding:24px 0 22px;min-height:calc(100vh - var(--hdr-h));
    min-height:calc(100svh - var(--hdr-h))}
  /* auto margins centre the phone row in whatever is left, which leaves the
     download block sitting on the bottom edge of the first screen */
  .hero-row{margin-top:auto;margin-bottom:auto}
  .hero-tail{display:flex;flex-direction:column;gap:18px;padding:18px 0 44px}

  /* Figma: 160-wide copy column, 275x501 phone starting at x=160 and running
     93px past the column so it bleeds off the screen edge. The phone is the
     flow item (it sets the row height); the copy is laid over it. */
  .hero-row{position:relative;display:flex;justify-content:flex-end;width:100%}
  .hero-head{position:absolute;left:0;top:36.7%;transform:translateY(-50%);
    z-index:1;width:46.78%;display:flex;flex-direction:column;
    align-items:flex-start;gap:10px}

  /* nowrap: the two lines must each stay on one line whatever face the phone
     falls back to; min-width:0 on .hero-head lets a wide face spill into the
     artwork's glow rather than widening the row. */
  /* 33px in a 160px column: each line wraps to two, which is the look the
     frame has — so no nowrap here. */
  .hero .headline{gap:2px;line-height:1;letter-spacing:-.02em;font-size:8.46vw}
  @media (min-width:466px){.hero .headline{font-size:39px}}
  .hero .headline .l1{font-weight:300}
  /* Figma gradientTransform maps the stops to 2.35 / 29.33 / 56.3 % of the
     text box, so the line is fully teal well before it ends. */
  /* background-image, not the shorthand — the shorthand resets background-clip
     and the gradient paints over the glyphs instead of filling them. */
  .hero .headline .l2{font-weight:600;letter-spacing:0;
    background-image:linear-gradient(90deg,#fe0042 2.35%,#9c5a87 29.33%,#00cacf 56.3%)}

  .hero .chip{font-size:11px;font-weight:600;letter-spacing:.02em;line-height:1.18;
    padding:8px 14px 8px 12px;gap:8px;align-self:flex-start}
  .hero .chip .dot{width:7px;height:7px}
  .chip-rest{display:none}

  /* Figma crops the hero art to x 8.54–88.61%, y 4.51–95.61% of the source. */
  .hero-art{flex:none;position:relative;overflow:hidden;height:auto;
    aspect-ratio:844/1536;margin-left:0;margin-right:-27.3%;
    width:80.5%;
    width:min(80.5%,calc((100svh - var(--hdr-h) - 235px) * 0.5495))}
  .hero-art img{position:absolute;left:-10.663%;top:-4.948%;
    width:124.881%;height:auto;max-width:none;transform:none}

  .hero .subhead{max-width:none;font-size:15px;line-height:1.58;color:rgba(255,255,255,.82)}
  .hero .micro{font-size:12px}

  .download{flex-direction:column;align-items:stretch;gap:16px}
  .badges{gap:12px}
  .badge{width:100%;height:auto;justify-content:center;padding:11px 18px}
  .qr{display:none}

  .specs{justify-content:flex-start;gap:8px;padding:22px var(--gutter)}
  .chip{font-size:12px;padding:8px 14px 8px 12px}

  /* ----- the difference (phone) -----
     Figma: section pad 64/24, gap 40; head block centred; the two blocks
     36 apart. Widths are percentages of the 342 content column so the
     composition scales, type stays at the sizes the frame specifies. */
  .difference{padding:64px var(--gutter);gap:40px;align-items:stretch}
  .cmp-glow{display:none}
  .diff-head{align-items:center;text-align:center;gap:16px;max-width:none}
  .diff-head h2{font-size:28px;line-height:1.1}
  .diff-head h2 br{display:none}
  .diff-head p{font-size:15px;line-height:1.55;max-width:none}

  .compare{grid-template-columns:1fr;row-gap:36px;column-gap:0}
  .cmp{display:flex;flex-direction:column;gap:16px;align-items:flex-start}
  .cmp.them .cmp-caption,.cmp.tango .cmp-caption{grid-column:auto;grid-row:auto;
    align-self:stretch;align-items:flex-start;text-align:left;gap:6px}
  .cmp-caption h3{font-size:24px;line-height:1.2}
  .cmp-caption p{font-size:15px;line-height:1.5}
  .cmp.them .cmp-row,.cmp.tango .cmp-row{grid-column:auto;grid-row:auto;
    justify-content:flex-start;margin:0;align-items:center}

  /* Them — image 107, gap 34, labels 51 wide over a 230 column */
  .cmp.them .cmp-row{gap:9.94%}
  .cmp.them .cmp-row img{width:31.29%;height:auto}
  .cmp.them .pcts{width:14.91%;height:auto;aspect-ratio:51/230;
    padding:24px 0;justify-content:space-between}

  /* Tango — image 173 left, labels 54 overlapping it by 22, in a 342x349 box.
     The frame crops the shot tighter than the desktop asset, so the extra
     crop (x 27.6-95.2%, y 16.2-83.8%) is applied here instead of a 2nd file. */
  .cmp.tango .cmp-row{gap:0;align-self:stretch;padding:7.89% 0}
  .cmp-shot{display:block;order:1;flex:none;position:relative;overflow:hidden;
    width:86.84%;aspect-ratio:297/441}
  .cmp.tango .cmp-shot img{position:absolute;left:-41.05%;top:-23.9%;
    width:148.6%;max-width:none;height:auto}
  .cmp.tango .pcts{order:2;width:15.79%;height:auto;aspect-ratio:54/197;
    margin-left:-6.43%;padding:24px 0 15px;justify-content:space-between}

  .pcts{font-size:24px;line-height:1.2;font-weight:600;gap:0}

  .feature,.feature.flip{display:flex;flex-direction:column;gap:24px;padding:40px var(--gutter)}
  /* copy first: the headline sets up the shot, it doesn't caption it */
  .feature-copy{order:1}
  /* Each shot is rendered wider than its window and centre-cropped, so the
     phones read large. Widths come from the frame: reframe 492, ring 654,
     layouts 652 — ring keeps the gutter, the other two go edge to edge.
     The reframe figure is scaled to match the phones in the frame, because
     that section's art has more surrounding glow than the mobile source. */
  /* min-width:0 matters: these are flex items holding an image wider than
     themselves, and min-width:auto would stretch the page to the image. */
  .feature-art{order:2;padding:0;overflow:hidden;min-width:0;
    display:flex;align-items:center;justify-content:center;
    width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw)}
  .feature-art img{flex:none;width:auto;max-width:none;height:auto}
  .feature--reframe .feature-art{height:93.8vw}
  .feature--reframe .feature-art img{width:114vw}
  .feature--ring .feature-art{width:100%;margin-left:0;margin-right:0}
  .feature--ring .feature-art img{width:167.7vw}
  .feature--layouts .feature-art img{width:167.2vw}
  .feature-copy{gap:14px}
  .feature-copy h2{font-size:26px}
  .feature-copy p{font-size:15px;max-width:none}

  .privacy{padding:72px var(--gutter);gap:18px}
  .privacy .eyebrow{font-size:14px}
  .privacy h2{font-size:30px}
  .privacy p{font-size:15px}

  .pricing{padding:0 var(--gutter) 72px}
  .pricing-panel{gap:22px;padding:28px 24px}
  .pricing-left h2{font-size:26px}
  .pricing-right li{font-size:15px}

  .faq{padding:64px var(--gutter) 72px;gap:26px}
  .faq-head h2{font-size:26px}
  .faq-list summary{font-size:16px}
  .faq-list details p{font-size:15px}

  .cta{height:auto;padding:64px var(--gutter) 72px}
  .cta-glow{display:none}
  .cta-phone{display:none}
  .cta-copy{gap:20px}
  .mark.lg{width:56px;height:56px}
  .cta-copy h2{font-size:32px}
  .cta-sub{font-size:16px}

  .footer{padding:40px var(--gutter) 48px;gap:24px}
  .foot-top{flex-direction:column;align-items:flex-start;gap:20px}
  .foot-links{flex-wrap:wrap;gap:10px 18px}

  .doc{padding:48px var(--gutter) 80px}
  .doc h1{font-size:30px}
}

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