/* ============================================================
   SUNBOTS MARKETING AUTOPILOT · v5 shared stylesheet
   cream #F2EFE6 · card #FFFFFF · ink #16261E · forest #123527
   green #2F6B4F · mint #A9D9BE · mint-soft #DCEDE2 · amber #F5A731
   Space Grotesk / Space Mono + 12 Indian-script Noto families

   PART 1 · design system, carried over verbatim from v4
   PART 2 · v5 additions (header nav, language dropdown, pricing,
            shared closing CTA band, shared site footer, utilities)
   PART 3 · RTL (Urdu) adjustments
   PART 4 · per-language typography

   Nothing in PART 1 is renamed or removed — every v4 page class
   (.road .rail .railfill .station .pain .fix .vig .engine .btn
   .btn.amber .btn.line .fab .top .lang .sec .eyebrow .g
   .blob …) keeps working exactly as before.
   ============================================================ */


/* ============================================================
   PART 1 — v4 DESIGN SYSTEM (verbatim)
   ============================================================ */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
:root{
  --cream:#F2EFE6;--card:#FFFFFF;--ink:#16261E;--forest:#123527;
  --green:#2F6B4F;--mint:#A9D9BE;--mintsoft:#DCEDE2;--amber:#F5A731;
  --hair:rgba(22,38,30,.14);
  --mono:"Space Mono",ui-monospace,monospace;
  --sans:"Space Grotesk",system-ui,sans-serif;
}
body{margin:0;background:var(--cream);color:var(--ink);font-family:var(--sans);line-height:1.5;overflow-x:hidden}
a{color:inherit}
::selection{background:var(--mint);color:var(--forest)}
.skip{
  position:fixed;left:12px;top:-60px;z-index:100;background:var(--forest);color:#fff;
  padding:10px 16px;border-radius:8px;font-family:var(--mono);font-size:12px;transition:top .2s;
}
.skip:focus{top:12px}

.blob{position:absolute;border-radius:50%;background:var(--mint);opacity:.35;pointer-events:none;z-index:0}

/* ---- progress + header ------------------------------------------ */
#prog{position:fixed;top:0;left:0;height:3px;width:0;background:var(--amber);z-index:60}
.top{
  position:fixed;top:0;left:0;right:0;z-index:50;
  display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:10px clamp(14px,4vw,40px);
  background:rgba(242,239,230,.94);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--hair);
}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;min-width:0}
.logo svg{width:26px;height:26px;flex:none}
.logo b{font-weight:700;font-size:13px;text-transform:uppercase;white-space:nowrap}
.logo i{display:block;font-style:normal;font-family:var(--mono);font-size:9px;letter-spacing:.08em;color:var(--green)}
.topright{display:flex;align-items:center;gap:10px}
.lang{display:flex;border:1.5px solid var(--ink);border-radius:8px;overflow:hidden;background:var(--card)}
.lang button{
  appearance:none;border:0;background:transparent;cursor:pointer;
  font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.04em;
  padding:8px 11px;color:var(--ink);
}
.lang button+button{border-left:1.5px solid var(--ink)}
.lang button[aria-pressed="true"]{background:var(--forest);color:var(--mint)}
.lang button:focus-visible{outline:3px solid var(--amber);outline-offset:-3px}
@media (max-width:700px){.logo b{font-size:11px}.logo i{display:none}}

/* ---- section bones ----------------------------------------------- */
.sec{position:relative;padding:clamp(72px,12vh,130px) clamp(18px,5vw,48px);overflow:clip}
.shell{max-width:1060px;margin:0 auto;position:relative;z-index:1}
.eyebrow{
  font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--green);margin:0 0 18px;
}
.eyebrow::before{content:"— "}
h1,h2{font-weight:700;letter-spacing:-.02em;line-height:1.05;margin:0;text-wrap:balance}
h1{font-size:clamp(35px,6.2vw,70px)}
h2{font-size:clamp(27px,4.5vw,50px)}
.g{color:var(--green)}
.sub{font-size:clamp(16px,2vw,20px);max-width:56ch;margin:20px 0 0;color:rgba(22,38,30,.8)}
.hinglish{
  margin:26px 0 0;padding:14px 18px;background:var(--mint);
  border-left:4px solid var(--forest);
  font-style:italic;font-size:clamp(15px,2.1vw,21px);max-width:740px;
}

[data-r]{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s ease;transition-delay:var(--d,0s)}
[data-r].in{opacity:1;transform:none}

/* ---- hero --------------------------------------------------------- */
.hero{padding-top:clamp(118px,19vh,185px)}
.hero .roadq{
  margin:32px 0 0;display:flex;gap:12px;flex-wrap:wrap;
  font-family:var(--mono);font-size:11px;letter-spacing:.04em;text-transform:uppercase;
}
.roadq span{border:1px solid var(--hair);background:var(--card);padding:9px 14px;border-radius:99px}
.roadq span b{color:var(--green)}
.scrollhint{
  margin:52px 0 0;font-family:var(--mono);font-size:10px;letter-spacing:.28em;
  text-transform:uppercase;color:var(--green);
}
@media (prefers-reduced-motion:no-preference){.scrollhint{animation:bob 2.4s ease-in-out infinite}}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(6px)}}

/* ---- roads -------------------------------------------------------- */
.road{--railx:clamp(6px,2vw,22px)}
.road .shell{padding-left:calc(var(--railx) + 34px)}
.rail{position:absolute;top:0;bottom:0;left:var(--railx);width:2px;background:var(--hair)}
.railfill{position:absolute;top:0;left:0;width:2px;height:0;background:var(--green)}
.road--bad .railfill{background:var(--ink)}
.station{
  position:absolute;left:calc(var(--railx) - 8px);width:18px;height:18px;border-radius:50%;
  background:var(--cream);border:2px solid var(--hair);z-index:2;
  display:grid;place-items:center;font-family:var(--mono);font-size:9px;font-weight:700;
  color:transparent;transition:all .35s;
}
.station.hit{border-color:var(--ink);color:var(--ink)}
.road--good .station.hit{border-color:var(--green);color:var(--green);background:var(--mintsoft)}

/* minmax(0,…) not 1fr: a grid track's automatic minimum is min-content, and
   the receipt card's nowrap rows have a min-content wider than the road column
   on a phone. With a bare 1fr the track refused to shrink, the card was forced
   past the viewport and the section's overflow-x:clip sliced the amounts off. */
.pain{margin:clamp(56px,9vh,100px) 0 0;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(22px,4vw,48px);align-items:center}
.pain:nth-child(even of .pain){direction:rtl}
.pain>*{direction:ltr}
.pain h3{font-size:clamp(21px,2.8vw,33px);font-weight:700;letter-spacing:-.015em;line-height:1.12;margin:0}
.pain .k{
  font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:rgba(22,38,30,.55);margin:0 0 10px;
}
.pain p{margin:12px 0 0;font-size:clamp(15px,1.8vw,18px);color:rgba(22,38,30,.82);max-width:48ch}
@media (max-width:820px){.pain{grid-template-columns:minmax(0,1fr)}.pain:nth-child(even of .pain){direction:ltr}}

.verdict{
  margin:clamp(64px,10vh,110px) 0 0;padding:22px 26px;background:var(--card);
  border:2px solid var(--ink);border-radius:10px;max-width:660px;
  box-shadow:6px 6px 0 var(--mint);
}
.verdict b{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;margin-bottom:8px}
.verdict p{margin:0;font-size:clamp(16px,2vw,20px)}

/* ---- vignettes ----------------------------------------------------- */
.vig{
  background:var(--card);border:1px solid var(--hair);border-radius:14px;
  box-shadow:0 20px 44px -22px rgba(18,53,39,.35);
  padding:16px;position:relative;
  transition:transform .35s ease,box-shadow .35s ease;
}
.vig:hover{transform:translateY(-4px);box-shadow:0 30px 54px -24px rgba(18,53,39,.45)}
.vig .bar{
  display:flex;align-items:center;gap:8px;padding:0 2px 12px;
  border-bottom:1px solid var(--hair);margin-bottom:14px;
  font-family:var(--mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase;
  color:rgba(22,38,30,.55);
}
.vig .bar u{width:8px;height:8px;border-radius:50%;background:var(--mint);text-decoration:none;flex:none}

.chat{display:grid;gap:9px}
.day{
  justify-self:center;font-family:var(--mono);font-size:8.5px;letter-spacing:.12em;
  text-transform:uppercase;background:var(--mintsoft);padding:3px 10px;border-radius:99px;
  color:rgba(22,38,30,.6);
}
.msg{max-width:84%;padding:9px 13px;border-radius:12px;font-size:13.5px;line-height:1.4}
.msg.you{justify-self:end;background:var(--mintsoft);border-bottom-right-radius:3px}
.msg.them{justify-self:start;background:#F1EFE9;border-bottom-left-radius:3px}
.msg .tick{display:block;text-align:right;font-family:var(--mono);font-size:8.5px;color:rgba(22,38,30,.45);margin-top:3px}
.msg .tick.blue{color:#3F86C6}

.draft .ph{
  height:120px;border-radius:8px;background:linear-gradient(135deg,var(--mintsoft),var(--mint));
  display:grid;place-items:center;font-family:var(--mono);font-size:9px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--forest);text-align:center;padding:0 10px;
}
.draft .cap{font-size:13.5px;margin:12px 2px 4px;line-height:1.45}
.draft .cap s{text-decoration-color:#C25B4E;text-decoration-thickness:2px}
.draft .flags{color:#C25B4E;font-family:var(--mono);font-size:11px;margin:6px 2px 4px;line-height:1.7}
/* The note hangs off the card's bottom-right corner, so it covers roughly the
   last 40px inside the card. That was invisible while the card held a 120px
   placeholder box and a one-line source credit; with a real 1:1 creative in it
   the credit wraps to two lines and the note sat on top of the second one.
   Reserve the corner only in the card that actually has a note. */
.vig:has(> .sticky) .promise{margin-bottom:46px}
.sticky{
  position:absolute;right:-10px;bottom:-16px;transform:rotate(3deg);
  background:#FFE9A8;border:1px solid rgba(22,38,30,.2);border-radius:4px;
  padding:9px 12px;font-size:12.5px;box-shadow:0 10px 20px -10px rgba(18,53,39,.4);
}

.decay{display:flex;align-items:flex-end;gap:10px;height:205px;padding:6px 4px 0}
.decay div{
  flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:6px;
  font-family:var(--mono);font-size:9px;color:rgba(22,38,30,.6);min-width:0;
}
.decay i{
  width:100%;border-radius:5px 5px 0 0;background:var(--green);
  height:calc(var(--v)*1.1px);transform-origin:bottom;transform:scaleY(0);
  transition:transform .8s cubic-bezier(.2,.7,.2,1);transition-delay:var(--d,0s);font-style:normal;
}
.decay div:nth-child(4) i{background:#7FA98F}
.decay div:nth-child(5) i{background:#B7C6BC}
.decay div:nth-child(6) i{background:repeating-linear-gradient(45deg,#D8D4C6,#D8D4C6 4px,#CFCABB 4px,#CFCABB 8px)}
.vig.in .decay i{transform:scaleY(1)}
.decay b{font-weight:700;color:var(--ink)}
.decay .quote{font-style:italic;text-transform:none;letter-spacing:0;font-size:8px;text-align:center}

.metrics{display:grid;gap:10px}
.metrics .big{display:flex;gap:14px;justify-content:space-between;padding:14px;background:var(--mintsoft);border-radius:8px;text-align:center}
.metrics .big div{flex:1}
.metrics .big b{display:block;font-size:clamp(18px,2.4vw,26px);letter-spacing:-.02em}
.metrics .big span{font-family:var(--mono);font-size:8.5px;letter-spacing:.12em;text-transform:uppercase;color:rgba(22,38,30,.55)}
.metrics .reg{
  padding:13px 14px;border:2px dashed rgba(22,38,30,.35);border-radius:8px;
  font-family:var(--mono);font-size:12px;display:flex;justify-content:space-between;gap:10px;align-items:center;
}
.metrics .reg b{color:#C25B4E}
.promise{margin:4px 2px 0;font-size:12.5px;font-family:var(--mono);color:rgba(22,38,30,.7)}
.promise s{text-decoration-color:#C25B4E;text-decoration-thickness:2px}

.night{
  background:radial-gradient(120% 120% at 70% 20%,#1E3A2E 0%,#0D1F17 70%);
  border-radius:14px;padding:26px 18px;display:grid;place-items:center;
  border:1px solid rgba(255,255,255,.06);
}
.phone{
  width:min(200px,70%);background:#0B120E;border-radius:22px;
  outline:2px solid rgba(255,255,255,.12);padding:10px 10px 16px;color:#E9F2EC;
}
.phone .pt{display:flex;justify-content:space-between;font-family:var(--mono);font-size:8.5px;opacity:.7;padding:2px 4px 8px}
.phone .app{background:#13251C;border-radius:12px;padding:12px 10px;font-size:11px;line-height:1.5}
.phone .app b{display:block;font-size:11.5px}
.phone .tools{display:flex;gap:5px;margin:9px 0}
.phone .tools u{width:16px;height:16px;border-radius:4px;background:#28513C;text-decoration:none}
.phone .tools u:nth-child(2){background:#3B6B4F}
.phone .tools u:nth-child(3){background:#89B99B}
.phone .tools u:nth-child(4){background:#F5A731}
.phone .toast{margin-top:10px;background:#241812;border:1px solid #F5A73155;border-radius:8px;padding:7px 9px;font-family:var(--mono);font-size:8.5px;color:#F5C77E}
.nightcap{margin-top:14px;font-family:var(--mono);font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:#A9D9BE;text-align:center}

.tools-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.toolapp{
  background:var(--mintsoft);border:1px solid var(--hair);border-radius:12px;
  padding:14px 10px 12px;text-align:center;position:relative;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.04em;text-transform:uppercase;
}
.toolapp u{display:block;width:34px;height:34px;border-radius:9px;margin:0 auto 8px;background:var(--green);text-decoration:none}
.toolapp:nth-child(2) u{background:var(--forest)}
.toolapp:nth-child(3) u{background:#7FA98F}
.toolapp:nth-child(4) u{background:var(--amber)}
.toolapp:nth-child(5) u{background:#5E8770}
.toolapp:nth-child(6) u{background:#C9B98A}
.toolapp b{
  position:absolute;top:-7px;right:-7px;min-width:20px;height:20px;border-radius:99px;
  background:#C25B4E;color:#fff;display:grid;place-items:center;font-size:10px;padding:0 5px;
}
.toolsum{margin-top:10px;font-family:var(--mono);font-size:11px;color:rgba(22,38,30,.65);border-top:1px dashed var(--hair);padding-top:10px;display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap}

.receipt{font-family:var(--mono);font-size:12.5px}
.receipt h4{margin:0 0 10px;text-align:center;font-size:11px;letter-spacing:.16em;font-weight:700;border-bottom:1px dashed var(--hair);padding-bottom:10px}
.receipt ul{list-style:none;margin:0;padding:0}
.receipt li{display:flex;align-items:baseline;gap:8px;padding:5px 0}
.receipt li span:first-child{white-space:nowrap}
.receipt li i{flex:1;border-bottom:1px dotted rgba(22,38,30,.4);transform:translateY(-3px)}
.receipt li span:last-child{white-space:nowrap}
.receipt .tot{margin-top:10px;border-top:1px dashed var(--hair);padding-top:10px;display:flex;justify-content:space-between;font-weight:700;gap:8px}
.receipt .tot span:last-child{color:#C25B4E;text-align:right}
/* A receipt row is [label] · dotted leader · [amount], both ends nowrap so the
   leader reads as one continuous dotted line. Below ~600px that nowrap pair is
   wider than the road column, which used to force the whole card past the
   viewport where the section's overflow-x:clip sliced the amounts off. Let the
   label wrap and the row break; the amount keeps its right edge and stays whole.
   Must sit AFTER the base .receipt rules — a media query adds no specificity. */
@media (max-width:600px){
  .receipt{font-size:11.5px}
  .receipt li{flex-wrap:wrap}
  .receipt li span:first-child{white-space:normal;min-width:0}
  .receipt li i{min-width:18px}
  .receipt li span:last-child{margin-inline-start:auto}
  .receipt .tot{flex-wrap:wrap}
}

/* ---- dark sections ------------------------------------------------- */
.dark{background:var(--forest);color:#F2EFE6}
.dark .eyebrow{color:var(--mint)}
.dark .sub{color:rgba(242,239,230,.82)}
.dark h2 .g{color:var(--mint)}
.dark .hinglish{background:rgba(169,217,190,.14);border-left-color:var(--mint);color:#EAF4ED}

.engine{margin:44px auto 0;max-width:640px}
.engine svg{width:100%;height:auto;display:block}
.engine .wire{stroke:var(--mint);stroke-width:1.6;fill:none;opacity:.9;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.1s ease .15s}
.engine.in .wire{stroke-dashoffset:0}
.engine .nodebox{fill:rgba(242,239,230,.06);stroke:rgba(169,217,190,.5)}
.engine .corebox{fill:var(--amber)}
.engine text{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;fill:#EAF4ED}
.engine .coretxt{fill:#123527;font-weight:700}
@media (prefers-reduced-motion:no-preference){.engine.in .corebox{animation:corepulse 3s ease-in-out infinite}}
@keyframes corepulse{0%,100%{opacity:1}50%{opacity:.82}}

/* ---- fixes map ----------------------------------------------------- */
.map{margin:46px 0 0;display:grid;gap:12px}
.fix{
  display:grid;grid-template-columns:1fr 34px 1.25fr;gap:14px;align-items:center;
  background:var(--card);border:1px solid var(--hair);border-radius:12px;padding:16px 18px;
  transition:border-color .3s;
}
.fix:hover{border-color:var(--green)}
.fix .was{font-family:var(--mono);font-size:12px;color:rgba(22,38,30,.6)}
.fix .was s{text-decoration-color:#C25B4E;text-decoration-thickness:2px}
.fix .arr{width:34px;height:34px;border-radius:50%;background:var(--mintsoft);display:grid;place-items:center;color:var(--green);font-weight:700}
.fix .now b{display:block;font-size:clamp(15px,1.9vw,18px);letter-spacing:-.01em}
.fix .now span{font-size:13.5px;color:rgba(22,38,30,.75)}
.fix .now .nmc{
  display:inline-block;margin-top:7px;font-family:var(--mono);font-size:9px;
  letter-spacing:.08em;text-transform:uppercase;color:var(--green);
  border:1px solid var(--mint);border-radius:99px;padding:3px 9px;background:var(--mintsoft);
}
@media (max-width:720px){.fix{grid-template-columns:1fr;gap:8px}.fix .arr{transform:rotate(90deg)}}

.aud-grid{margin:30px 0 0;display:flex;flex-wrap:wrap;gap:10px}
.aud-grid span{
  font-family:var(--mono);font-size:11px;letter-spacing:.04em;text-transform:uppercase;
  border:1.5px solid var(--ink);border-radius:8px;padding:10px 14px;background:var(--card);
  box-shadow:3px 3px 0 var(--mint);
}

/* ---- offer --------------------------------------------------------- */
.steps{margin:40px 0 0;display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.step{border:1px solid rgba(169,217,190,.35);border-radius:12px;padding:16px}
.step b{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.14em;color:var(--amber);margin-bottom:8px}
.step p{margin:0;font-size:14.5px;color:rgba(242,239,230,.88)}
@media (max-width:720px){.steps{grid-template-columns:1fr}}

.offer-card{
  margin:26px 0 0;background:#0E2C20;border:1px solid rgba(169,217,190,.35);
  border-radius:16px;padding:clamp(22px,4vw,38px);
  display:grid;grid-template-columns:1.3fr 1fr;gap:clamp(20px,4vw,44px);align-items:center;
}
.offer-card .ex{font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--amber)}
.offer-card h3{margin:10px 0 0;font-size:clamp(24px,3.6vw,40px);line-height:1.06;letter-spacing:-.02em}
.price{display:flex;align-items:baseline;gap:10px;margin:14px 0 0}
.price b{font-size:clamp(40px,6vw,64px);color:var(--amber);letter-spacing:-.03em;line-height:1}
.price i{font-family:var(--mono);font-style:normal;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:rgba(242,239,230,.7)}
.offer-card .what{margin:14px 0 0;color:rgba(242,239,230,.85);font-size:clamp(14px,1.8vw,17px);max-width:46ch}
.ctas{display:grid;gap:12px}
.btn{
  display:block;text-align:center;text-decoration:none;border-radius:10px;
  font-family:var(--mono);font-weight:700;font-size:13px;letter-spacing:.04em;padding:16px 18px;
  transition:transform .2s ease,filter .2s ease;
}
.btn:hover{transform:translateY(-2px)}
.btn.amber{background:var(--amber);color:#12271C}
.btn.amber:hover{filter:brightness(1.06)}
.btn.line{border:1.5px solid rgba(242,239,230,.5);color:#F2EFE6}
.btn:focus-visible{outline:3px solid var(--mint);outline-offset:3px}
.smallnote{font-family:var(--mono);font-size:9.5px;letter-spacing:.04em;color:rgba(242,239,230,.55);text-align:center}
@media (max-width:820px){.offer-card{grid-template-columns:1fr}}

.marq{overflow:hidden;margin:64px -120px 0}
.marq .row{
  white-space:nowrap;font-weight:700;font-size:clamp(34px,7vw,86px);line-height:1.15;
  color:transparent;-webkit-text-stroke:1.5px rgba(169,217,190,.5);
}
.marq .row.solid{color:#2F6B4F;-webkit-text-stroke:0;opacity:.9}
@media (prefers-reduced-motion:no-preference){
  .marq .row{animation:slide 36s linear infinite}
  .marq .row.solid{animation:slide 30s linear infinite reverse}
}
@keyframes slide{to{transform:translateX(-50%)}}

.foot{
  margin-top:60px;padding-top:22px;border-top:1px solid rgba(242,239,230,.2);
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;
  color:rgba(242,239,230,.65);
}

/* floating WhatsApp */
.fab{
  position:fixed;right:16px;bottom:calc(16px + env(safe-area-inset-bottom));z-index:55;
  display:flex;align-items:center;gap:9px;text-decoration:none;
  background:var(--forest);color:#EAF4ED;border:1.5px solid var(--mint);
  border-radius:99px;padding:12px 16px;font-family:var(--mono);font-size:12px;font-weight:700;
  box-shadow:0 16px 34px -12px rgba(18,53,39,.6);
  opacity:0;transform:translateY(14px);pointer-events:none;
  transition:opacity .4s,transform .4s;
}
.fab.show{opacity:1;transform:none;pointer-events:auto}
.fab svg{width:18px;height:18px;flex:none}
.fab:focus-visible{outline:3px solid var(--amber);outline-offset:3px}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  [data-r]{opacity:1;transform:none;transition:none}
  .decay i{transform:scaleY(1);transition:none}
  .engine .wire{stroke-dashoffset:0;transition:none}
  .vig,.btn{transition:none}
  .vig:hover,.btn:hover{transform:none}
}


/* ============================================================
   PART 2 — v5 ADDITIONS
   ============================================================ */

/* ---- utilities ----------------------------------------------------- */
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
}
.shell--narrow{max-width:820px}
.stack{display:grid;gap:14px}
.center{text-align:center}
.center .sub,.center .eyebrow{margin-left:auto;margin-right:auto}

/* Honest-roadmap callout — for anything not live yet. Say it plainly. */
.honest{
  margin:26px 0 0;padding:14px 18px;border:1.5px dashed rgba(22,38,30,.35);
  border-radius:10px;background:var(--card);max-width:740px;
  font-size:14.5px;line-height:1.55;color:rgba(22,38,30,.82);
}
.honest b{
  display:block;font-family:var(--mono);font-size:9.5px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--green);margin-bottom:6px;
}
.dark .honest{border-color:rgba(169,217,190,.45);background:rgba(169,217,190,.08);color:rgba(242,239,230,.85)}
.dark .honest b{color:var(--mint)}

/* ---- header navigation --------------------------------------------- */
.nav{
  display:flex;align-items:center;gap:clamp(10px,1.8vw,22px);
  font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
}
.nav a{
  text-decoration:none;color:var(--ink);opacity:.78;white-space:nowrap;
  padding:6px 1px;border-bottom:2px solid transparent;transition:opacity .2s,border-color .2s;
}
.nav a:hover{opacity:1;border-bottom-color:var(--mint)}
.nav a[aria-current="page"]{opacity:1;color:var(--forest);border-bottom-color:var(--green)}
.nav a:focus-visible{outline:3px solid var(--amber);outline-offset:2px}
@media (max-width:1080px){.nav{display:none}}

/* v5 puts a dropdown and two CTAs in the header, so the wordmark has to be
   willing to shrink instead of shoving them off the edge. */
.logo>span{min-width:0;overflow:hidden}
.logo b{display:block;overflow:hidden;text-overflow:ellipsis}
@media (max-width:560px){
  .top{gap:8px;padding-left:12px;padding-right:12px}
  .logo svg{width:22px;height:22px}
  .topright{gap:7px}
  .btn--sm{padding:9px 11px;font-size:10.5px}
}

/* Compact header buttons — the two CTAs live here on every page. */
.btn--sm{display:inline-block;padding:9px 13px;font-size:11px;border-radius:8px;white-space:nowrap}
.btn.solid{background:var(--forest);color:var(--mint)}
.btn.solid:hover{filter:brightness(1.14)}
.btn.ghost{border:1.5px solid var(--ink);color:var(--ink);background:var(--card)}
.btn.ghost:hover{background:var(--mintsoft)}
.btn.ghost:focus-visible,.btn.solid:focus-visible{outline:3px solid var(--amber);outline-offset:3px}
@media (max-width:820px){.top .btn.ghost{display:none}}

/* Inline CTA row (hero + closing band): .btn is display:block by default. */
.ctarow{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin:28px 0 0}
.ctarow .btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:min(230px,100%);flex:0 1 auto;
}
.ctarow .btn.solid{background:var(--forest);color:var(--mint)}
.ctarow .note{
  font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;
  color:rgba(22,38,30,.55);
}
.dark .ctarow .note{color:rgba(242,239,230,.6)}

/* ---- language dropdown --------------------------------------------- */
/* 13 languages do not fit a segmented control, so the header carries a
   dropdown. Built by assets/i18n.js → buildLangSwitcher(mountEl).
   The legacy .lang segmented control above still works for old pages. */
.langdd{position:relative;flex:none;display:inline-block}
/* if the dropdown is mounted inside a legacy .lang box, neutralise that box */
.lang.langdd-host{border:0;background:transparent;overflow:visible;display:block}

.langbtn{
  appearance:none;display:inline-flex;align-items:center;gap:7px;cursor:pointer;
  background:var(--card);border:1.5px solid var(--ink);border-radius:8px;
  padding:7px 10px;color:var(--ink);line-height:1;max-width:190px;
  font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.04em;
  transition:background .2s;
}
.langbtn:hover{background:var(--mintsoft)}
.langbtn:focus-visible{outline:3px solid var(--amber);outline-offset:2px}
.langbtn .code{flex:none}
.langbtn .native{
  font-weight:500;letter-spacing:0;font-size:13px;
  max-width:104px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.langbtn .caret{width:9px;height:9px;flex:none;transition:transform .2s ease}
.langdd[data-open="true"] .langbtn{background:var(--mintsoft)}
.langdd[data-open="true"] .langbtn .caret{transform:rotate(180deg)}
@media (max-width:760px){.langbtn .native{display:none}}

.langmenu{
  position:absolute;top:calc(100% + 8px);right:0;z-index:70;
  margin:0;padding:6px;list-style:none;min-width:238px;
  max-height:min(64vh,430px);overflow-y:auto;overscroll-behavior:contain;
  background:var(--card);border:1.5px solid var(--ink);border-radius:10px;
  box-shadow:0 24px 46px -18px rgba(18,53,39,.55);
}
.langmenu[hidden]{display:none}
.langmenu:focus{outline:none}
.langopt{
  display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  padding:9px 10px;border-radius:7px;cursor:pointer;font-size:15px;line-height:1.4;
}
.langopt .en{
  flex:none;font-family:var(--mono);font-size:9.5px;letter-spacing:.08em;
  text-transform:uppercase;color:rgba(22,38,30,.5);
}
.langopt:hover{background:var(--mintsoft)}
.langopt.is-active{background:var(--mintsoft);outline:2px solid var(--amber);outline-offset:-2px}
.langopt[aria-selected="true"]{background:var(--forest);color:var(--mint)}
.langopt[aria-selected="true"] .en{color:rgba(169,217,190,.72)}

/* language names always render in their own script */
.lang-native{
  font-family:
    "Noto Sans Devanagari","Noto Sans Gujarati","Noto Sans Bengali","Noto Sans Tamil",
    "Noto Sans Telugu","Noto Sans Kannada","Noto Sans Malayalam","Noto Sans Gurmukhi",
    "Noto Sans Oriya","Noto Nastaliq Urdu",var(--sans),system-ui,sans-serif;
  font-weight:500;letter-spacing:0;text-transform:none;
}
.lang-native[lang="ur"]{font-size:1.18em;line-height:2}

/* ---- pricing: plan cards ------------------------------------------- */
.plans{margin:44px 0 0;display:grid;gap:14px;grid-template-columns:repeat(3,1fr);align-items:stretch}
@media (max-width:1000px){.plans{grid-template-columns:repeat(2,1fr)}}
@media (max-width:620px){.plans{grid-template-columns:1fr}}

.plan{
  display:flex;flex-direction:column;position:relative;
  background:var(--card);border:1px solid var(--hair);border-radius:14px;
  padding:22px 18px 18px;
  transition:transform .3s ease,border-color .3s ease,box-shadow .3s ease;
}
.plan:hover{transform:translateY(-4px);border-color:var(--green);box-shadow:0 26px 48px -26px rgba(18,53,39,.45)}
.plan .tier{
  margin:0;font-family:var(--mono);font-size:10px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--green);
}
.plan h3{margin:8px 0 0;font-size:clamp(19px,2.3vw,24px);font-weight:700;letter-spacing:-.015em;line-height:1.12}
.plan .who{margin:9px 0 0;font-size:13px;line-height:1.5;color:rgba(22,38,30,.7)}
.plan .price{margin:16px 0 0}
.plan .price b{font-size:clamp(27px,3.2vw,36px);color:var(--forest)}
.plan .price i{color:rgba(22,38,30,.55);letter-spacing:.14em}
.plan ul{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:9px;flex:1 1 auto}
.plan li{position:relative;padding-left:23px;font-size:13.5px;line-height:1.5;color:rgba(22,38,30,.85)}
.plan li::before{content:"✓";position:absolute;left:0;top:0;color:var(--green);font-weight:700;font-size:12.5px}
.plan .meta{
  margin:14px 0 0;font-family:var(--mono);font-size:9.5px;letter-spacing:.06em;
  text-transform:uppercase;color:rgba(22,38,30,.5);
}
.plan .btn{margin-top:16px}
.plan .flag{
  position:absolute;top:-11px;left:18px;background:var(--amber);color:#12271C;
  font-family:var(--mono);font-size:9px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;padding:4px 10px;border-radius:99px;
}
.plan--featured{border:2px solid var(--ink);box-shadow:6px 6px 0 var(--mint)}
.plan--featured:hover{border-color:var(--ink);box-shadow:9px 9px 0 var(--mint)}

/* plan cards on a dark section */
.dark .plan{background:#0E2C20;border-color:rgba(169,217,190,.35);color:#EAF4ED}
.dark .plan .tier{color:var(--amber)}
.dark .plan .who{color:rgba(242,239,230,.75)}
.dark .plan li{color:rgba(242,239,230,.86)}
.dark .plan li::before{color:var(--mint)}
.dark .plan .meta{color:rgba(242,239,230,.5)}
.dark .plan .price b{color:var(--amber)}
.dark .plan .price i{color:rgba(242,239,230,.6)}
.dark .plan:hover{border-color:var(--mint)}
.dark .plan--featured{border:2px solid var(--mint);box-shadow:6px 6px 0 rgba(169,217,190,.25)}

/* ---- pricing: comparison table -------------------------------------- */
.ptable-wrap{
  margin:38px 0 0;overflow-x:auto;-webkit-overflow-scrolling:touch;
  border:1px solid var(--hair);border-radius:12px;background:var(--card);
}
.ptable-wrap:focus-visible{outline:3px solid var(--amber);outline-offset:2px}
.ptable{border-collapse:collapse;width:100%;min-width:760px;font-size:13.5px}
.ptable caption{
  caption-side:top;text-align:left;padding:14px 16px 0;
  font-family:var(--mono);font-size:10px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--green);
}
.ptable th,.ptable td{padding:12px 15px;text-align:left;vertical-align:top;border-bottom:1px solid var(--hair)}
.ptable thead th{
  position:sticky;top:0;z-index:1;background:var(--mintsoft);color:var(--forest);
  font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
}
.ptable thead th span{display:block;font-family:var(--sans);font-size:13px;letter-spacing:-.01em;text-transform:none;margin-top:4px}
.ptable tbody th{
  font-family:var(--mono);font-size:10.5px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:rgba(22,38,30,.62);white-space:nowrap;
}
.ptable tbody tr:last-child th,.ptable tbody tr:last-child td{border-bottom:0}
.ptable tbody tr:hover td,.ptable tbody tr:hover th{background:rgba(220,237,226,.4)}
.ptable td b{font-weight:700}
.ptable .yes{color:var(--green);font-weight:700}
.ptable .no{color:rgba(22,38,30,.38)}
.ptable-hint{
  margin:8px 2px 0;font-family:var(--mono);font-size:9.5px;letter-spacing:.08em;
  text-transform:uppercase;color:rgba(22,38,30,.45);
}
@media (min-width:900px){.ptable-hint{display:none}}

/* ---- shared closing CTA band ---------------------------------------- */
/* Every page ends with this. Both CTAs, both translatable. */
.band{
  position:relative;background:var(--forest);color:#F2EFE6;overflow:clip;
  padding:clamp(60px,10vh,104px) clamp(18px,5vw,48px);
}
.band .shell{max-width:1060px}
.band .eyebrow{color:var(--mint)}
.band h2{max-width:20ch}
.band h2 .g{color:var(--mint)}
.band .sub{color:rgba(242,239,230,.82)}
.band .ctarow .btn.line{border-color:rgba(242,239,230,.5);color:#F2EFE6}
.band .ctarow .btn.solid{background:var(--amber);color:#12271C}
.band .blob{background:var(--mint);opacity:.12}
.band .bandnote{
  margin:20px 0 0;font-family:var(--mono);font-size:10px;letter-spacing:.08em;
  text-transform:uppercase;color:rgba(242,239,230,.58);
}

/* ---- shared site footer ---------------------------------------------- */
.sitefoot{
  background:var(--forest);color:rgba(242,239,230,.8);
  padding:clamp(46px,7vh,74px) clamp(18px,5vw,48px) 26px;
  border-top:1px solid rgba(242,239,230,.12);
}
.sitefoot .cols{max-width:1060px;margin:0 auto;display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:28px}
.sitefoot .brand b{display:block;font-size:15px;color:#F2EFE6;letter-spacing:-.01em}
.sitefoot .brand p{margin:10px 0 0;font-size:13.5px;line-height:1.6;max-width:34ch;color:rgba(242,239,230,.72)}
.sitefoot h4{
  margin:0 0 12px;font-family:var(--mono);font-size:10px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--mint);
}
.sitefoot ul{list-style:none;margin:0;padding:0}
.sitefoot a{
  display:inline-block;padding:4px 0;font-size:14px;color:rgba(242,239,230,.8);
  text-decoration:none;transition:color .2s;
}
.sitefoot a:hover{color:var(--mint)}
.sitefoot a:focus-visible{outline:3px solid var(--amber);outline-offset:2px}
.sitefoot .bottom{
  max-width:1060px;margin:34px auto 0;padding-top:18px;
  border-top:1px solid rgba(242,239,230,.2);
  display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;
  font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;
  color:rgba(242,239,230,.6);
}
@media (max-width:860px){.sitefoot .cols{grid-template-columns:1fr 1fr}.sitefoot .brand{grid-column:1/-1}}
@media (max-width:520px){.sitefoot .cols{grid-template-columns:1fr}}


/* ============================================================
   PART 3 — RTL (Urdu). Only html[dir="rtl"] is ever set,
   and only for ur. Everything below flips the handful of
   physical offsets the layout depends on.
   ============================================================ */
[dir="rtl"] .skip{left:auto;right:12px}
[dir="rtl"] .eyebrow::before{content:""}
[dir="rtl"] .eyebrow::after{content:" —"}
[dir="rtl"] .hinglish{border-left:0;border-right:4px solid var(--forest)}
[dir="rtl"] .dark .hinglish{border-right-color:var(--mint)}

[dir="rtl"] .road .shell{padding-left:0;padding-right:calc(var(--railx) + 34px)}
[dir="rtl"] .rail{left:auto;right:var(--railx)}
[dir="rtl"] .railfill{left:auto;right:0}
[dir="rtl"] .station{left:auto;right:calc(var(--railx) - 8px)}

/* .pain column-order trick is direction-based: invert it under RTL */
[dir="rtl"] .pain{direction:rtl}
[dir="rtl"] .pain>*{direction:rtl}
[dir="rtl"] .pain:nth-child(even of .pain){direction:ltr}
@media (max-width:820px){[dir="rtl"] .pain:nth-child(even of .pain){direction:rtl}}

[dir="rtl"] .verdict{box-shadow:-6px 6px 0 var(--mint)}
[dir="rtl"] .aud-grid span{box-shadow:-3px 3px 0 var(--mint)}
[dir="rtl"] .plan--featured{box-shadow:-6px 6px 0 var(--mint)}
[dir="rtl"] .plan--featured:hover{box-shadow:-9px 9px 0 var(--mint)}
[dir="rtl"] .plan li{padding-left:0;padding-right:23px}
[dir="rtl"] .plan li::before{left:auto;right:0}
[dir="rtl"] .plan .flag{left:auto;right:18px}

[dir="rtl"] .msg.you{border-bottom-right-radius:12px;border-bottom-left-radius:3px}
[dir="rtl"] .msg.them{border-bottom-left-radius:12px;border-bottom-right-radius:3px}
[dir="rtl"] .msg .tick{text-align:left}
[dir="rtl"] .sticky{right:auto;left:-10px;transform:rotate(-3deg)}
[dir="rtl"] .toolapp b{right:auto;left:-7px}
[dir="rtl"] .receipt .tot span:last-child{text-align:left}
[dir="rtl"] .fix .arr{transform:scaleX(-1)}
@media (max-width:720px){[dir="rtl"] .fix .arr{transform:rotate(90deg)}}
[dir="rtl"] .ptable th,[dir="rtl"] .ptable td,[dir="rtl"] .ptable caption{text-align:right}
[dir="rtl"] .sitefoot .bottom,[dir="rtl"] .foot,[dir="rtl"] .toolsum{text-align:right}

[dir="rtl"] .fab{right:auto;left:16px}
[dir="rtl"] .langmenu{right:auto;left:0}
[dir="rtl"] .nav a{border-bottom-color:transparent}

/* Mixed-direction text.
   Any [data-t] node can be holding its ENGLISH fallback while the page is in
   Urdu — a dictionary key that is not translated yet, by design. Left alone,
   the surrounding RTL paragraph reorders that English ("30 posts a month"
   renders as "posts a month 30"). `unicode-bidi:plaintext` resolves each
   block's direction from its own first strong character: Urdu content stays
   RTL, an English fallback renders LTR and readable. Scoping it to [data-t] is
   exact — those are precisely the nodes whose language can differ from the
   page's. Latin-only chrome (prices, phone numbers, URLs) gets the same. */
[dir="rtl"] [data-t]{unicode-bidi:plaintext}
[dir="rtl"] .price,
[dir="rtl"] .ptable td,
[dir="rtl"] .foot span,
[dir="rtl"] .sitefoot a,
[dir="rtl"] .sitefoot .bottom span,
[dir="rtl"] .sitefoot .brand b,
[dir="rtl"] a[href^="tel:"],
[dir="rtl"] a[href^="mailto:"]{unicode-bidi:plaintext}
.ltr{direction:ltr;unicode-bidi:isolate;display:inline-block}


/* ============================================================
   PART 4 — PER-LANGUAGE TYPOGRAPHY
   i18n.js sets html[data-lang] and, for non-English languages,
   the --langsans custom property (script font first, Space
   Grotesk behind it so Latin words keep the brand face).
   ============================================================ */
html[data-lang]:not([data-lang="en"]) body{font-family:var(--langsans,var(--sans))}

/* mono micro-labels: Indic scripts break under .12–.28em tracking */
html[data-lang]:not([data-lang="en"]) .eyebrow,
html[data-lang]:not([data-lang="en"]) .scrollhint,
html[data-lang]:not([data-lang="en"]) .btn,
html[data-lang]:not([data-lang="en"]) .nav,
html[data-lang]:not([data-lang="en"]) .pain .k,
html[data-lang]:not([data-lang="en"]) .plan .tier,
html[data-lang]:not([data-lang="en"]) .plan .meta,
html[data-lang]:not([data-lang="en"]) .step b,
html[data-lang]:not([data-lang="en"]) .verdict b,
html[data-lang]:not([data-lang="en"]) .sitefoot h4,
html[data-lang]:not([data-lang="en"]) .sitefoot .bottom,
html[data-lang]:not([data-lang="en"]) .foot,
html[data-lang]:not([data-lang="en"]) .band .bandnote,
html[data-lang]:not([data-lang="en"]) .ptable thead th,
html[data-lang]:not([data-lang="en"]) .ptable tbody th{letter-spacing:.02em}

/* Nastaliq sits low and tall — give Urdu room to breathe */
html[data-lang="ur"] body{line-height:1.95;font-size:16.5px}
html[data-lang="ur"] h1,html[data-lang="ur"] h2{line-height:1.72;letter-spacing:0}
html[data-lang="ur"] .pain h3,html[data-lang="ur"] .plan h3{line-height:1.6}
html[data-lang="ur"] .msg,html[data-lang="ur"] .plan li{line-height:2}
html[data-lang="ur"] .btn{line-height:1.9;padding-top:12px;padding-bottom:12px}

/* while a dictionary is in flight, keep the page fully usable */
html[data-i18n-loading] .langbtn{opacity:.72}

@media (prefers-reduced-motion:reduce){
  .plan,.langbtn,.langdd[data-open="true"] .langbtn .caret,.nav a{transition:none}
  .plan:hover{transform:none}
}

/* ---------------------------------------------------------------------------
   Cookie consent banner (assets/analytics.js)
   Docked to the bottom rather than centred over the page: the visitor came to
   read, and a modal that blocks the first paragraph to ask about analytics
   trades a real reader for a measurement. Sits above the WhatsApp FAB.
--------------------------------------------------------------------------- */
.consent{
  position:fixed; left:0; right:0; bottom:0; z-index:60;
  background:var(--card); border-top:1px solid rgba(18,53,39,.14);
  box-shadow:0 -8px 30px rgba(18,53,39,.10);
  padding:14px 18px calc(14px + env(safe-area-inset-bottom));
  animation:consent-in .28s ease-out both;
}
@keyframes consent-in{from{transform:translateY(100%)}to{transform:translateY(0)}}
@media (prefers-reduced-motion:reduce){ .consent{animation:none} }
.consent__in{
  max-width:1100px; margin:0 auto;
  display:flex; align-items:center; gap:18px; flex-wrap:wrap;
}
.consent__copy{flex:1 1 340px; min-width:0}
.consent__copy b{display:block; font-size:14px; color:var(--forest); margin-bottom:2px}
.consent__copy p{margin:0; font-size:13px; line-height:1.5; color:var(--ink); opacity:.82}
.consent__copy a{color:var(--green); text-decoration:underline}
.consent__acts{display:flex; gap:10px; flex:0 0 auto; margin-left:auto}
@media (max-width:560px){
  .consent__acts{width:100%; margin-left:0}
  .consent__acts .btn{flex:1 1 0}
}

/* The header hides its ghost buttons below 820px to keep the bar from
   wrapping. That rule predates the signup CTA: when "Start now" opened
   WhatsApp the floating button already covered it, but the primary route into
   the product has to survive on the width most of this market browses at.
   `.cta-signup` is added by scripts/sync-marketing-site.mjs, so this rule is
   inert when the site is previewed standalone. */
@media (max-width:820px){
  .top .btn.ghost.cta-signup{display:inline-flex}
}
@media (max-width:420px){
  /* At the narrowest widths the wordmark yields before the CTA does. */
  .logo span b{max-width:104px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
}

/* ---------------------------------------------------------------------------
   Product screenshots (assets/shots/*)
   The first raster images on this site, so everything here is net-new. Two
   rules matter more than the styling: an explicit aspect-ratio, because
   without intrinsic dimensions every lazy-loaded shot shifts the layout as it
   arrives; and max-width, because `.sec{overflow:clip}` silently crops
   anything wider than its column rather than scrolling it.
--------------------------------------------------------------------------- */
.shot{margin:0}
.shot img{
  display:block; width:100%; height:auto; max-width:100%;
  aspect-ratio:16/10;                 /* matches the 1440x900 capture viewport */
  object-fit:cover; object-position:top left;
  border-radius:10px; border:1px solid var(--hair);
  background:var(--cream);            /* placeholder tone while it loads */
}
.shot figcaption{
  margin-top:10px; font-family:var(--mono); font-size:10.5px;
  letter-spacing:.08em; text-transform:uppercase; color:var(--ink);
  opacity:.62; line-height:1.5;
}
/* No `.sec.dark` variant here, deliberately. A `.shot` is always inside a
   `.vig`, and `.vig` keeps its white card in a dark section — so the mint
   these rules used to set landed on white at 1.57:1 and failed WCAG AA badly.
   The default ink at .62 opacity is 4.77:1 on the card it actually sits on. */

/* The GIF is heavier than any still, so it never sits in the first viewport
   and it announces itself as motion rather than pretending to be a photo. */
.shot--loop img{aspect-ratio:16/10}
.shot--loop figcaption::before{content:"▶ "; opacity:.7}

/* ---- the work itself, annotated ---------------------------------------
   Sample posts rendered by the product's own publish-time path, with numbered
   pins over them and a matching legend. Two decisions worth keeping:

   The pins use physical `left`, not `inset-inline-start`. The image does not
   mirror in RTL, so a pin that flipped with the text would point at the wrong
   corner of an unflipped picture. The legend beside it mirrors normally.

   Each creative declares its true aspect-ratio rather than being cropped to a
   common one. The whole point of the panel is that a platform gets its own
   canvas, so squeezing 9:16 into a 4:3 box would argue against the caption.
--------------------------------------------------------------------------- */
.mk{margin:0}
.mk .lay{display:grid; gap:20px; align-items:start}
@media (min-width:860px){ .mk .lay{grid-template-columns:minmax(0,1fr) minmax(0,1fr)} }

.mkframe{position:relative; display:block; border-radius:10px}
.mkframe img{
  display:block; width:100%; height:auto; max-width:100%;
  border-radius:10px; border:1px solid var(--hair); background:var(--cream);
}
.mk--sq .mkframe img{aspect-ratio:1/1; object-fit:cover}

.pin{
  position:absolute; left:var(--x); top:var(--y); transform:translate(-50%,-50%);
  width:24px; height:24px; border-radius:50%;
  display:grid; place-items:center;
  font-family:var(--mono); font-size:11.5px; font-weight:700; font-style:normal;
  background:var(--green); color:#fff; border:2px solid var(--card);
  box-shadow:0 3px 10px rgba(0,0,0,.4);
}

.mknotes{list-style:none; margin:0; padding:0; display:grid; gap:13px}
.mknotes li{
  display:grid; grid-template-columns:24px minmax(0,1fr); gap:11px;
  align-items:start; font-size:14px; line-height:1.55;
  /* Explicit, not inherited: this card is white even inside `.sec.dark`, and
     the section's own light-on-forest colour lands at 1.57:1 here. */
  color:var(--ink);
}
.mknotes b{
  width:24px; height:24px; border-radius:50%; display:grid; place-items:center;
  font-family:var(--mono); font-size:11.5px; background:var(--green); color:#fff;
}

/* The other two formats at their own shapes. A 9:16 cover given the same
   column width as a 1.9:1 banner renders three times its height and swallows
   the row, so the reel takes a narrow, phone-sized column and the two land at
   roughly the same height. */
.mkrow{display:grid; gap:16px; grid-template-columns:1fr; margin-top:20px}
@media (min-width:620px){ .mkrow{grid-template-columns:minmax(0,240px) minmax(0,1fr)} }
.mkcard--reel{max-width:240px; margin-inline:auto; width:100%}
.mkcard figure, .mkcard{margin:0}
/* The real creative inside the "draft awaiting approval" card, where a
   `[ your photo · your branding ]` placeholder box used to stand in for it. */
.draft .dimg{
  display:block; width:100%; height:auto; aspect-ratio:1/1; object-fit:cover;
  border-radius:8px; border:1px solid var(--hair); background:var(--cream);
}
.mk > figcaption{
  margin-top:14px; font-family:var(--mono); font-size:10.5px;
  letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink); opacity:.62; line-height:1.5;
}
.mkcard img{
  display:block; width:100%; height:auto; border-radius:10px;
  border:1px solid var(--hair); background:var(--cream);
}
.mkcard--reel img{aspect-ratio:9/16; object-fit:cover}
.mkcard--wide img{aspect-ratio:1200/630; object-fit:cover}
.mkcard figcaption{
  margin-top:9px; font-family:var(--mono); font-size:10px;
  letter-spacing:.08em; text-transform:uppercase; color:var(--ink);
  opacity:.6; line-height:1.5;
}
/* A 9:16 cover next to a 1.9:1 banner leaves the short one floating; pin both
   to the top so the captions still read as a row. */
.mkrow > *{align-self:start}

/* Same reason as `.shot` above: this panel lives inside a white `.vig` even in
   a dark section, so it takes no dark-section colour overrides. Mint legend
   text here would sit on white at 1.57:1. */