/* ══════════════════════════════════════════════════════════════════════════════════════════════
   myPara — shared stylesheet for the policy pages
   ══════════════════════════════════════════════════════════════════════════════════════════════
   Everything above the POLICY PAGES banner is index.html's <style> block, copied MECHANICALLY and
   unedited apart from one line: the @font-face url climbs one level (../Figtree.woff2) because
   this file lives in assets/ while the font sits at the project root.

   Copied whole rather than hand-picked. The nav and the footer are not self-contained blocks in
   that sheet — their rules are threaded through four separate media queries and the
   prefers-reduced-motion block — so cherry-picking risks dropping exactly one responsive rule and
   producing a header that is subtly wrong at one width. Taking the sheet entire makes the policy
   pages' header and footer the SAME components by construction. Rules for sections these pages do
   not contain simply never match anything.

   index.html is untouched and still carries its own inline copy. That duplication is deliberate:
   the alternative — lifting the styles out of index.html into this file and linking it there too —
   is the properly DRY answer, but it restructures the one file this task was told to leave alone.
   See the handover note.
   ══════════════════════════════════════════════════════════════════════════════════════════════ */

@font-face{font-family:'Figtree';font-weight:300 900;font-display:swap;src:url(../Figtree.woff2) format('woff2')}

:root{
  --paper:#F7F9FF; --paper-2:#F2F6FD; --paper-3:#EAF1FB;
  /* --ink-3 was #7A889F. Measured at 3.59:1 on white — below the 4.5:1 WCAG AA floor for small
     text, and it carries small text in four places (.card .num, .pcard .psub, .pcard .per,
     the input placeholder). #65748F is 4.72:1 and was ALREADY in the sheet twice, hard-coded on
     .judg .court and .judg .more b with comments explaining it was "a shade darker than --ink-3"
     for exactly this reason and "scoped here, not a new global token". Promoting it to the token
     fixes the contrast everywhere and removes the near-duplicate grey in the same move: those two
     one-offs now reference the token instead. */
  --ink:#0B1220; --ink-2:#41506A; --ink-3:#65748F; --line:#DDE6F3;
  --blue:#1935FF; --blue-deep:#0529F9; --blue-soft:#4F97FF;
  --disp:'Figtree','Inter','Helvetica Neue',Arial,sans-serif;
  --edge:clamp(22px,5vw,84px); --maxw:1400px;
  /* ── RADIUS ──────────────────────────────────────────────────────────────────────────────────
     Named for the three jobs the sheet actually has, so the scale is legible: a control, a card,
     a large panel. Values are the ones already dominant in the sheet (10 on the nav pill and the
     inputs, 18 on the feature/judgement/FAQ cards, 28 on the pricing card), not new numbers.
     The pill (100px) and circles (50%) stay literal — they are shapes, not steps on a scale. */
  --r-control:10px; --r-card:18px; --r-panel:28px;
  /* ── TYPE SCALE ──────────────────────────────────────────────────────────────────────────────
     Measured at 1440 before this pass, peer section headings ran 50 / 57.5 / 58 / 66 / 69.6px —
     five sizes for one semantic level, which is drift rather than hierarchy. Two tiers now:

       --h2       every section heading
       --h2-lead  the two conversion moments (Subscribe Now, the closing statement)

     --h2 adopts the curve four sections already used (3.6vw, max 50) rather than a new number, so
     the site's own most common heading is the standard. Its MINIMUM is 33.6px, which is the value
     the mobile block was setting by hand for seven headings — folding it into the clamp both
     removes those overrides and closes a real seam: at 641px the old clamps resolved to ~26-28px
     while 640px rendered 33.6px, so every section heading jumped a size at the breakpoint. It no
     longer can. With the hero at 91px the scale now steps 91 → 69.6 → 50 at ratios of 1.31 and
     1.39, instead of five values crowded between 50 and 70. */
  --h2:clamp(33.6px,3.6vw,50px);
  --h2-lead:clamp(36px,5.28vw,69.6px);
  /* breathing room between the hero and whatever section follows it, and the sliver of that
     section left showing on the first fold. The hero's min-height is derived from both, so the
     section directly below the hero has to open with --foldgap of its own for the sums to hold. */
  --foldgap:clamp(40px,5vh,72px); --foldpeek:20px;
  /* ── THE SECTION SPACING SYSTEM ──────────────────────────────────────────────────────────────
     --sec-gap is the ONE distance between any two major sections, anywhere on the page, at any
     viewport. It is not a new number: it is literally the sum that produced the reference gap —
     .coverage's bottom padding plus .feat's top padding — kept as the sum rather than rounded into
     a fresh clamp, so the standard is exactly the distance it was taken from at every width
     instead of an approximation of it. (A single clamp(178px,19vw,264px) tracks it within ~3px,
     but the two source clamps cross over at different widths, so only the sum is exact.)

     --sec-pad is half of it, and that halving is the whole mechanism. Every section carries
     --sec-pad on its top AND bottom, so ANY two neighbours add up to exactly --sec-gap without
     either of them knowing what it sits next to. No pairwise rules, no ordering assumptions, and
     inserting or reordering a section cannot produce a wrong gap.

     Both are fluid clamps, so the gap breathes with the viewport — but it is ONE curve everywhere.
     There are no per-breakpoint section-spacing overrides left in this sheet; the mobile block used
     to carry five of them and they are gone. */
  --sec-gap:calc(clamp(124px,12vw,176px) + clamp(54px,7vw,88px));
  --sec-pad:calc(var(--sec-gap) / 2);
}
*{box-sizing:border-box;margin:0;padding:0}
/* form controls do not inherit the page font on their own. This was being fixed one rule at a
   time — .contact input, .contact select, .contact .actions .cta, .faq's question button — and
   two buttons had been missed, so the burger and the feature-rail arrows were rendering in
   Arial. One rule covers every control there is now, including any added later. */
button,input,select,textarea{font-family:inherit}
/* the CSS half of the fixed-header offset. Lenis handles the click path, but it is only built
   when smooth scroll is available — under prefers-reduced-motion, with the CDN blocked, or on a
   #link typed straight into the address bar, the browser does the jump itself and would land the
   heading under the pill. Same --navh, same 16px, so both paths stop in the same place. */
html{overflow-x:clip;scroll-padding-top:calc(var(--navh,80px) + 16px)}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
body{
  font-family:var(--disp);font-weight:400;color:var(--ink);-webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;overflow-x:clip;
  background:#F6F9FF;
}
/* scroll-driven base colour — continuously interpolates through soft tints, so the
   atmosphere changes section to section without any separators */
#bgtint{position:fixed;inset:0;z-index:-2;background:#F6F9FF;pointer-events:none}
/* living aurora — fixed soft fields that drift with scroll (no grid) */
#atmos{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
#atmos .field{position:absolute;border-radius:50%;will-change:transform}
#atmos .f1{width:78vw;height:78vw;left:-14vw;top:-24vw;
  background:radial-gradient(circle at 50% 50%, rgba(25,53,255,.18), rgba(25,53,255,0) 60%)}
#atmos .f2{width:66vw;height:66vw;right:-18vw;top:18vh;
  background:radial-gradient(circle at 50% 50%, rgba(5,41,249,.12), rgba(5,41,249,0) 60%)}
#atmos .f3{width:88vw;height:88vw;left:6vw;top:120vh;
  background:radial-gradient(circle at 50% 50%, rgba(25,53,255,.16), rgba(25,53,255,0) 60%)}
#atmos .f4{width:60vw;height:60vw;right:-6vw;top:230vh;
  background:radial-gradient(circle at 50% 50%, rgba(79,151,255,.16), rgba(79,151,255,0) 62%)}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
::selection{background:var(--blue);color:#fff}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--edge)}
.eyebrow{font-weight:500;font-size:13px;letter-spacing:.01em;color:var(--blue);display:inline-flex;align-items:center;gap:9px;
  background:rgba(25,53,255,.09);padding:8px 16px 8px 14px;border-radius:100px}
.eyebrow::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--blue);flex:0 0 auto}
.period{color:var(--blue)}

/* NAV */
/* 2vw gutters, so the pill below fills exactly 96vw and is centred by construction rather
   than by a width + auto-margin that could overflow once the gutters stop shrinking */
.nav{position:fixed;inset:0 0 auto 0;z-index:60;display:flex;align-items:center;justify-content:space-between;
  padding:18px 2vw;transition:transform .6s cubic-bezier(.32,.72,0,1)}
/* max-width:none defeats .wrap's 1400px cap, which otherwise shrinks the header to 73% of a
   1920px screen instead of the intended 96% */
/* solid #fff, not the old 55% white over a 14px blur. The glass read differently over every
   section it passed — bluish on the hero, near-white over the pricing fold — and the links are
   var(--ink-2) at 14px, the size where that wobble costs the most. Opaque white is the same fill
   the cards already use, so the header now belongs to the same family rather than sampling
   whatever is behind it. The 1px border and the drop shadow stay: with no blur they are the only
   things separating the pill from a light page, and they are what keep it reading as a layer.
   align-items:center is what vertically centres the logo, the links and the CTA against each
   other, so the pill's height can grow from padding alone without any of them drifting. */
.nav .in{width:100%;max-width:none;display:flex;align-items:center;justify-content:space-between;
  background:#fff;border:1px solid rgba(221,230,243,.9);border-radius:10px;
  padding:10px 12px 10px 22px;
  box-shadow:0 10px 30px -22px rgba(11,18,32,.4);
  position:relative;z-index:2}
.nav .logo{display:flex;align-items:center}
/* 30% up on the previous 40px. Height only, so the SVG keeps its own ratio — no crop, no squash */
.nav .logo img{height:52px;width:auto;display:block}
.nav .menu{display:flex;gap:26px;font-size:14px;align-items:center}
.nav .menu a.lk{color:var(--ink-2);transition:color .25s}.nav .menu a.lk:hover{color:var(--ink)}
/* current section. Colour only, and it rides the .25s transition already on .lk, so the highlight
   crossfades from one item to the next instead of snapping. The hover rule is untouched and still
   wins while the pointer is down on a link, which is what keeps hover feeling live on the item
   you are already on. */
.nav .menu a.lk.active{color:var(--blue)}
/* the contact form's submit shares these declarations outright rather than re-stating them, so
   the two really are one component — any future change to the header CTA moves both. */
.nav .cta,.contact .actions .cta{font-size:14px;font-weight:500;padding:10px 18px;border-radius:5px;background:var(--blue);color:#fff;
  transition:transform .4s cubic-bezier(.32,.72,0,1),background .3s}
.nav .cta:hover,.contact .actions .cta:hover{transform:translateY(-1px);background:#162FE0}
/* hamburger + drop panel — the panel is a sibling of the pill so it spans the same width,
   and repeats the pill's fill/border/radius/blur so the two read as one component */
.nav .burger{display:none;width:38px;height:38px;padding:0;border:0;background:transparent;cursor:pointer;
  flex-direction:column;align-items:center;justify-content:center;gap:5px}
.nav .burger span{display:block;width:18px;height:1.8px;border-radius:2px;background:var(--ink);transition:transform .3s ease,opacity .3s ease}
.nav .burger[aria-expanded="true"] span:first-child{transform:translateY(3.4px) rotate(45deg)}
.nav .burger[aria-expanded="true"] span:last-child{transform:translateY(-3.4px) rotate(-45deg)}
/* full-page takeover — fixed inset:0 so it covers the whole viewport, but padding-top
   matches the old pill+8px offset so the links/CTA land at the exact same on-screen
   position they held in the small dropdown, they just now sit over a full-height panel */
.navdrop{display:none;flex-direction:column;
  position:fixed;inset:0;margin:0;z-index:1;
  padding:calc(var(--navh,80px) + 16px) var(--edge) 24px;
  /* solid too, for the same reason and to the same value as the pill above it — a 70% panel
     under an opaque pill would have made the two read as different components */
  background:#fff;border:0;border-radius:0;
  box-shadow:none;overflow-y:auto}
/* Everything on .navdrop is mobile-only WITHOUT a media query of its own: the panel is
   display:none until the max-width:760px block below turns it on, so these rules can only ever
   paint on a phone. The desktop and tablet bar is .nav .menu, a different set of rules entirely,
   and is untouched by all of this.

   Centred, and 30% up on 15px = 19.5px. Family, weight, colour, hover colour, active colour and
   the .2s transition all stay exactly as they were — only the size and the alignment move. The
   vertical padding goes 13 → 15px, not because it was asked for but because 13px around 15px type
   and 13px around 19.5px type are not the same rhythm; this keeps the space BETWEEN items reading
   as it does now rather than tightening as the text grows. */
.navdrop .lk{padding:15px 14px;font-size:19.5px;text-align:center;color:var(--ink-2);border-radius:6px;
  transition:background .2s,color .2s}
.navdrop .lk:hover{background:rgba(25,53,255,.07);color:var(--ink)}
/* same treatment in the phone panel, riding its own .2s colour transition */
.navdrop .lk.active{color:var(--blue)}
/* the CTA keeps its own type size — it is a button, not a menu item, and the 30% above is for the
   navigation items. What changes is the box: the width is pinned to half the panel's content box
   and centred with align-self rather than auto margins, because the panel is a flex column.
   margin-top 6 → 20px so a button this much taller still reads as separate from the last link
   instead of butting against it. Fill, colour, weight, radius and centred label are unchanged. */
.navdrop .cta{margin-top:20px;font-weight:500;border-radius:6px;
  width:50%;align-self:center;
  background:var(--blue);color:#fff;text-align:center}
/* SIZE, and why it needs the extra .nav in the selector. The panel lives INSIDE <nav class="nav">,
   so `.nav .cta` in the max-width:640px block below matches this button too — at identical
   specificity and later in the file, which means it was already winning. The panel's own
   font-size:15px/padding:13px never reached a phone; what a phone actually rendered was that
   block's 13px/9px. So "double the current mobile padding" is 9 → 18px, not 13 → 26px, and the
   type stays at the 13px it is today rather than jumping to a value it never had.
   `.nav .navdrop` outranks `.nav` on specificity, so this now holds regardless of source order,
   and it holds across the WHOLE range the panel appears in (≤760px) instead of the button being
   one size on a small phone and another on a large one. */
.nav .navdrop .cta{font-size:13px;padding:18px 14px}
@keyframes navdropIn{from{opacity:0}to{opacity:1}}
@media(max-width:760px){
  .nav{flex-wrap:wrap}
  .nav .menu .lk,.nav .menu .cta{display:none}
  .nav .burger{display:flex}
  .navdrop:not([hidden]){display:flex;animation:navdropIn .3s ease-out}
}
@media(max-width:640px){
  .nav{padding:12px 2vw}
  /* 8 → 10px, the phone's share of the same padding bump the wider pill gets below */
  .nav .in{padding:10px 8px 10px 14px}
  .nav .logo img{height:39px}   /* 30% up on 30px */
  .nav .cta,.contact .actions .cta{font-size:13px;padding:9px 14px}
}
/* desktop + tablet only — mobile keeps its own padding above.
   Vertical padding 11.23 → 14px. The pill's height is the logo plus these two, so the 40 → 52px
   logo alone would have taken it from 64.46px to 76.46px with the air around the mark unchanged —
   it would have looked stuffed rather than taller. 14px lands the pill at 80px and keeps the
   space above and below the mark equal and proportional to what it was. */
@media(min-width:641px){
  .nav .in{padding-top:14px;padding-bottom:14px}
}

.btn{display:inline-flex;align-items:center;gap:11px;font-weight:500;font-size:15px;padding:14px 16px 14px 26px;
  border-radius:5px;background:var(--blue);color:#fff;transition:transform .45s cubic-bezier(.32,.72,0,1),background .3s}
.btn .ic{width:28px;height:28px;border-radius:50%;background:rgba(255,255,255,.2);display:grid;place-items:center;transition:transform .45s cubic-bezier(.32,.72,0,1)}
/* round caps and joins, matching the four line icons that already had them (.chk, the
   WhatsApp mark, the rail arrows, Net Banking). Three were missing them and rendered with
   butt ends, so the same drawn language came out sharp in some places and rounded in others —
   most visibly on the CTA arrow, which appears on every primary button. Weights are left
   alone: 1.7-2.4 across 12-55px icons is optical scaling, not drift. */
.btn .ic svg{width:13px;height:13px;stroke:#fff;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.btn:hover{transform:translateY(-2px);background:#162FE0}.btn:hover .ic{transform:translateX(3px)}
.btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--line)}
.btn.ghost .ic{background:rgba(11,18,32,.06)}.btn.ghost .ic svg{stroke:var(--ink)}
.btn.ghost:hover{background:rgba(255,255,255,.6)}

section{position:relative}

/* HERO */
/* top pad only has to clear the fixed nav now that the ticker is gone; it stays larger than
   the bottom so the block reads optically centred underneath the nav rather than measured */
/* the hero owns the fold: it stretches to whatever is left after the gap and the 20px sliver of
   blue, so the panel below reads as a hairline at the bottom edge rather than a 160px band.
   min-height, not height — if the copy ever outgrows the box the hero simply pushes the panel
   off-screen, which still satisfies "no more than 20px". */
.hero{min-height:calc(100svh - var(--foldgap) - var(--foldpeek));
  display:flex;flex-direction:column;justify-content:center;align-items:center;
  text-align:center;padding:116px 20px 56px;position:relative}
.hero .eyebrow{margin-bottom:24px}
.hero h1{font-family:var(--disp);font-weight:400;letter-spacing:-.035em;line-height:1.12;
  font-size:clamp(32px,5.1vw,70px);color:var(--ink);max-width:none}
.hero h1 .ln{display:block;overflow:hidden;padding-bottom:.1em;margin-bottom:-.08em}
@media(min-width:760px){.hero h1 .ln{white-space:nowrap}}
.hero h1 .ln i{display:inline-block;font-style:normal;will-change:transform}
.hero h1 em{font-style:normal;color:var(--blue)}
.hero h1 .wc-mask{display:inline-block;overflow:hidden;vertical-align:top}
.hero h1 .wc{display:inline-block;will-change:transform,opacity}
.hero .sub{margin-top:26px;font-size:clamp(16px,1.7vw,21px);color:var(--ink-2);max-width:46ch;line-height:1.5}
.hero .actions{margin-top:66px;display:flex;gap:14px;flex-wrap:wrap;justify-content:center}
/* hero copy runs 30% larger from tablet up. Layered as an override rather than edited into the
   base clamps so phones keep the original curve exactly — 641px is the site's own phone/tablet
   line (the same one .flabel uses). Every stop is the base value x1.3. */
@media(min-width:641px){
  .hero h1{font-size:clamp(41.6px,6.63vw,91px)}
  .hero .sub{font-size:clamp(20.8px,2.21vw,27.3px)}
}
/* the hero CTA runs ~20% larger than the .btn base so it carries the fold on its own */
.lead-cta{font-size:18px;padding:17px 19px 17px 31px;gap:13px;
  background-image:linear-gradient(90deg,var(--blue) 0%,var(--blue-soft) 35%,var(--blue-deep) 65%,var(--blue) 100%);
  background-size:300% 100%;background-position:0% 0;background-repeat:no-repeat}
.lead-cta .ic{width:34px;height:34px}
.lead-cta .ic svg{width:16px;height:16px}
/* sweep the gradient left→right on hover instead of swapping the fill; background-position
   is the only animated property so it stays cheap and reads as a slow sheen, not a flash.
   background-image is restated because .btn:hover's `background` shorthand would reset it. */
.lead-cta:hover{background-color:var(--blue);
  background-image:linear-gradient(90deg,var(--blue) 0%,var(--blue-soft) 35%,var(--blue-deep) 65%,var(--blue) 100%);
  background-size:300% 100%;animation:ctaSweep 3.2s linear infinite}
@keyframes ctaSweep{from{background-position:0% 0}to{background-position:-300% 0}}

/* GALLERY (portfolio showcase) — no panel: the fold sits straight on the page tint. What is left
   of .fold2card is pure geometry, and every line of it still earns its place — the --foldgap top
   margin holds this fold's separation from the pillars above, the 2vw side margins hold the
   content to the same 96vw span the panel occupied, and overflow:hidden is what the pin spacer
   is measured inside. Only the fill, the radius and the drop shadow are gone.
   Every white colour below went with the fill; see .gallery h2 / .note / .eyebrow. */
.fold2card{position:relative;z-index:1;margin:var(--foldgap) 2vw 0;overflow:hidden}
/* 78svh, down from 94. This is the number that actually governs the fold's height — the padding
   below is smaller than it on any normal-height screen — so it is what halves the section's dead
   air: at 1280×860 the box held 527px of content in 809px, i.e. 282px of emptiness; 78svh makes
   the box 671px and leaves 141px, exactly half. The same figure lands within a percent on a phone
   (245px → 122px at 375×812), so one value serves both and no breakpoint exception is needed.

   The pin start below moved 6% → 11% in step. 94svh + a 6% offset put the section's bottom edge on
   the viewport's; at 78svh that same offset would have left 16% of bare page under the cards and
   only 6% above it. 11% is (100-78)/2, so the shorter fold sits centred while pinned instead of
   riding high. */
/* padding halved by request — every stop of both clamps, top and bottom (48/6vw/68 → 24/3vw/34,
   54/7vw/84 → 27/3.5vw/42). Note what this does and does not move: on a normal-height viewport
   the min-height above is the larger of the two and sets the box, so the fold keeps its height and
   justify-content:center simply re-centres the same content in it. The padding only becomes the
   binding number on a SHORT viewport (roughly under 720px tall, where 94svh drops below what the
   content plus padding needs) — there this is a real reduction. */
.gallery{min-height:78svh;display:flex;flex-direction:column;justify-content:center;padding:clamp(24px,3vw,34px) 0 clamp(27px,3.5vw,42px);
  background:transparent}
.gallery .lead{display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px;margin:0 auto 56px}
/* the eyebrow's white-on-blue override is gone with the panel — the base .eyebrow pill (blue on
   a 9% blue wash) applies again untouched, exactly as it does in every other section.
   The heading, the accent stop and the note follow the same rule: each is back on the token the
   rest of the page uses on a light ground, not a new colour invented for this fold. */
.gallery h2{font-family:var(--disp);font-weight:400;letter-spacing:-.035em;line-height:1.02;font-size:var(--h2);max-width:16ch;color:var(--ink)}
.gallery .note{font-size:15px;color:var(--ink-2);max-width:46ch;line-height:1.5;text-wrap:pretty}
.gallery .viewport{perspective:2200px;overflow:hidden}
/* the side padding centres the first/last card, so it has to track the card width — at a
   fixed 420px it went negative (clamped to 0) below an 840px viewport and cards sat flush
   left. 50% resolves against .viewport, not the viewport, so the card lands dead centre
   even though the whole fold is inset by the card margin. */
.gallery{--cardw:420px}
.gallery .track{display:flex;align-items:flex-start;gap:22px;width:max-content;padding:20px calc(50% - var(--cardw)/2);transform-style:preserve-3d;will-change:transform}
.card{flex:0 0 var(--cardw);background:#fff;border:1px solid var(--line);border-radius:22px;
  padding:21px;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  transform-style:preserve-3d;
  display:flex;flex-direction:column}
@media(max-width:900px){.gallery{--cardw:min(82vw,420px)}}
.card .k{font-size:12px;font-weight:600;letter-spacing:.02em;color:var(--blue);text-transform:uppercase}
.card .num{margin-left:auto;font-size:12px;color:var(--ink-3);font-variant-numeric:tabular-nums}
.card .top{display:flex;align-items:center;gap:8px}
.card .q{margin-top:14px;font-family:var(--disp);font-weight:500;font-size:21px;letter-spacing:-.02em;line-height:1.22;color:var(--ink);text-wrap:balance}
.card .a{margin-top:10px;font-size:14.5px;color:var(--ink-2);line-height:1.5}
/* cap the text instead of letting a card grow when an entry runs long: questions at three
   lines, answers at four — or three where the question already takes three, which is what
   keeps that card at the height the design had. Overflow ends in an ellipsis. */
.card .q,.card .a{display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden}
.card .q{-webkit-line-clamp:3}
.card .a{-webkit-line-clamp:4}
.card.long-q .a{-webkit-line-clamp:3}
.card .cites{margin-top:14px;padding-top:13px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.card .cite{font-size:12px;font-weight:500;color:var(--blue);border:1px solid rgba(25,53,255,.28);border-radius:100px;
  padding:5px 11px;display:inline-flex;align-items:center;gap:6px;font-variant-numeric:tabular-nums}
.card .cite svg{width:12px;height:12px;stroke:var(--blue);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.gallery .rail{margin:32px auto 0;width:min(90vw,520px);height:3px;border-radius:3px;background:var(--line);overflow:hidden}
.gallery .rail i{display:block;height:100%;width:24%;background:var(--blue);border-radius:3px;will-change:transform}

/* PILLARS — compact feature cards */
.pillars{padding:clamp(54px,7vw,88px) 0}
.pillars .head{display:flex;align-items:flex-end;justify-content:space-between;gap:30px;flex-wrap:wrap}
.pillars h2{font-family:var(--disp);font-weight:400;letter-spacing:-.035em;font-size:var(--h2);line-height:1.05;max-width:24ch;text-wrap:balance}
.pillars .hsub{font-size:15px;color:var(--ink-2);max-width:46ch;line-height:1.5;text-wrap:pretty}
.pillars{--pcard-h:clamp(300px,30vw,390px);min-height:100vh;display:flex;flex-direction:column;justify-content:center;padding:140px 0 clamp(54px,7vw,88px)}
/* this section sits directly under the hero, so it inherits the fold contract the gallery card
   used to hold: clearance above it, then --foldpeek of itself showing on the first fold.
   Without it the hero's min-height calc would leave 92px of dead space instead.

   HALF of --foldgap, written out rather than taken from the token. The token itself is deliberately
   untouched: --foldgap is also the figure the hero subtracts in its own min-height, and the figure
   .fold2card uses for the gallery's top clearance, so halving it centrally would shorten the hero
   (a change to the section's height) and pull the gallery up too (a different section boundary).
   This rule is the ONLY thing standing between the two sections — hero's margin-bottom is 0, and
   their shared parent is a plain block with no gap — so halving it here is the whole change.

   All three stops are halved, not just the ends. 5vh is the term actually in play at ordinary
   window heights (it governs from 800px to 1440px of viewport), so leaving it and moving only the
   40/72 bounds would have left the gap unchanged on almost every real screen. Halved this way the
   reduction is exactly 50% at every viewport height, and the value stays a clamp — still fluid,
   still bounded, never collapsing below 20px on a short window. */
.pillars{margin-top:clamp(20px,2.5vh,36px)}
/* the deck's resting rungs are 16px apart, so the container needs one rung per card behind the
   front — four cards means 48px of headroom instead of 32px. Card box itself is unchanged. */
.pillars .stack{position:relative;margin-top:clamp(40px,4vw,54px);height:calc(var(--pcard-h) + 48px)}
.pillars .p{background:#fff;border-radius:var(--r-panel);padding:clamp(32px,3.5vw,44px);
  box-shadow:0 4px 24px -6px rgba(11,18,32,.08),0 24px 60px -24px rgba(11,18,32,.22);
  position:absolute;top:0;left:0;width:100%;height:var(--pcard-h);display:flex;align-items:center;gap:clamp(28px,4vw,56px);overflow:visible;
  transition:box-shadow .4s}
.pillars .p:nth-child(1){z-index:1}
.pillars .p:nth-child(2){z-index:2}
.pillars .p:nth-child(3){z-index:3}
.pillars .p:nth-child(4){z-index:4}
.pillars .p:hover{box-shadow:0 8px 30px -6px rgba(11,18,32,.12),0 30px 70px -24px rgba(11,18,32,.28)}
/* BRAND CARD — the deck's closing statement. Identical box to the other three (same height,
   radius, padding, shadow, deck timing); only the fill and the type change. */
.pillars .p.brand{background:var(--ink);justify-content:center;text-align:center}
/* icon + statement stack as one centred group, mirroring the tick-above-heading order on the
   other three cards. .bwrap also owns the hover lift (see below). */
.pillars .p.brand .bwrap{width:100%;display:flex;flex-direction:column;align-items:center;
  transition:transform .5s cubic-bezier(.32,.72,0,1)}
/* the tick is the card's opening beat, so it runs 2.5x the 22px used on the other three and takes
   a much wider gap before the statement. Clamped rather than a flat 55px so it keeps tracking the
   statement's own 5vw curve down to phone widths instead of dwarfing an 18px line. */
.pillars .p.brand .chk{width:clamp(30px,4.3vw,55px);height:clamp(30px,4.3vw,55px);
  margin-bottom:clamp(22px,2.6vw,34px)}
/* one unbroken line: nowrap plus a vw-tracked size calibrated so the sentence always lands just
   inside the card's inner width. The cap is what the 1400px-capped .wrap allows at its widest. */
.pillars .p.brand .btxt{width:100%;white-space:nowrap;
  font-family:var(--disp);font-weight:500;letter-spacing:-.04em;line-height:1.12;
  font-size:clamp(15px,5vw,74px);color:#fff}
.pillars .p.brand .bl,.pillars .p.brand .cur{display:inline-block}
/* --blue-soft, not --blue. This accent sits on the dark --ink card, and #1935FF measures 2.67:1
   there — short of the 3:1 WCAG floor even at this display size. --blue-soft is the token the
   sheet ALREADY uses for blue on a dark ground (the pricing panel's eyebrow, 5.28:1), so this is
   the established pairing rather than a new colour: --blue on light, --blue-soft on dark. It also
   replaces the last two hard-coded #1935FF literals with the token. */
.pillars .p.brand .dot{color:var(--blue-soft)}
/* only the words "AI Junior" carry the accent — the full stop that closes them stays white,
   which is why it lives in the following run rather than in .ai */
.pillars .p.brand .ai{color:var(--blue-soft)}
/* characters stay plain inline: an inline-block here would let the browser break the line between
   letters and would make VoiceOver treat each one as its own word */
.pillars .p.brand .ch{display:inline}
/* the caret only exists once the sentence has finished landing — .typed is added by the reveal's
   onComplete and taken off again the moment it scrubs backwards */
.pillars .p.brand .cur{color:#fff;margin-left:.08em;font-weight:400;opacity:0}
.pillars .p.brand.typed .cur{animation:caret 1.15s ease-in-out infinite}
@keyframes caret{0%,100%{opacity:1}50%{opacity:0}}
/* GSAP owns this card's inline transform on desktop and the reveal owns .chk's, so the lift/scale
   rides .bwrap — the one element in the chain with no inline transform on it. The glow rides
   box-shadow, which nothing else touches. */
.pillars .p.brand:hover .bwrap{transform:translateY(-5px) scale(1.015)}
.pillars .p.brand:hover{box-shadow:0 8px 34px -6px rgba(25,53,255,.32),0 30px 70px -24px rgba(11,18,32,.5)}
.pillars .p .txt{flex:1 1 48%;min-width:0;display:flex;flex-direction:column;justify-content:center;align-self:stretch}
/* border-box, NOT content-box: the 14px inset frame has to come out of the declared width,
   otherwise the gif measures width + 28px and breaks out of the card (worst at width:100%) */
.pillars .p .gif{flex:0 0 42%;width:42%;aspect-ratio:25/16;display:block;border-radius:12px;object-fit:contain;background:#F1F5FF;padding:14px;box-sizing:border-box}
/* 12% up on the previous clamp(20px,2.3vw,25px) at every stop on the curve. No longer a flex row —
   the tick sits above the heading now, so the h3 is back to a plain block. */
.pillars .p h3{font-family:var(--disp);font-weight:500;font-size:clamp(22px,2.58vw,28px);letter-spacing:-.02em;color:var(--ink);margin-bottom:11px}
.pillars .p p{color:var(--ink-2);font-size:15.5px;line-height:1.58;max-width:38ch}
/* mobile-only kicker above the heading; hidden from 641px up */
.pillars .p .flabel{display:none}
/* filled tick: solid brand disc with the check knocked out in white, sized to sit above the
   heading as its own element rather than inline beside it */
.pillars .p .chk{width:22px;height:22px;flex:0 0 auto;display:block;margin-bottom:12px}
.pillars .p .chk circle{fill:var(--blue);stroke:none}
.pillars .p .chk path{fill:none;stroke:#fff;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
@media(max-width:860px){
  /* layout only. The padding this rule used to carry was a viewport-specific spacing exception;
     the section-spacing system at the end of the base sheet owns the vertical gap now. */
  .pillars{min-height:auto;display:block}
  .pillars .head{display:block}
  .pillars .head .hsub{margin-top:16px}
  .pillars .stack{height:auto}
  /* the deck animation is skipped below 860px, but a desktop→mobile resize leaves its
     inline transform/autoAlpha behind, so force every card back to a plain stacked block */
  .pillars .p{position:relative;top:auto;left:auto;width:auto;height:auto;
    transform:none!important;opacity:1!important;visibility:visible!important;
    flex-direction:column;align-items:stretch;padding:clamp(24px,5vw,36px);margin-bottom:20px;border-radius:24px}
  /* the desktop `flex:1 1 48%` grows against the card's *height* once the card is a column,
     which opens a dead gap between the copy and the gif */
  .pillars .p .txt{flex:0 0 auto;align-self:auto}
  .pillars .p .gif{width:100%;height:auto;aspect-ratio:25/16;flex:0 0 auto;margin-top:20px;padding:10px}
  .pillars .p p{max-width:none}
  /* the stacked-block rule above sets align-items:stretch, so re-centre the statement and give
     it the same generous air it has on desktop */
  .pillars .p.brand{align-items:center;padding:clamp(38px,9vw,54px) clamp(24px,5vw,36px)}
}
/* mobile only — 640px is the site's phone breakpoint, so the kicker never reaches tablet */
@media(max-width:640px){
  /* the 62% tint lives in the colour's alpha, not in `opacity` — the reveal animates opacity to 1
     and an inline style would win, flattening the label back to full strength */
  .pillars .p .flabel{display:block;font-family:var(--disp);font-size:11px;font-weight:600;
    letter-spacing:.14em;text-transform:uppercase;color:rgba(11,18,32,.62);margin-bottom:6px}
}

/* COVERAGE — no panel: the section sits straight on the page tint. With the fill gone there is no
   difference between margin and padding here, so the two are folded back into one padding pair.
   The sums are the ones the panel version rendered — top = its old 96/10vw/150 margin plus its
   76/8vw/112 padding, bottom the same collapse — so removing the background changes the colour
   and nothing about where this section sits.
   perspective is what lets the .wrap flip in; it mirrors .contact .wrap exactly (see the COVERAGE
   reveal in the script). Every text colour is the same token .pillars uses. */
/* the -50px rides on the clamp rather than being folded into its stops: subtracting it from the
   min and the max would leave the middle of the curve — every width where the 18vw term is the
   one in play — exactly where it was, and the section would only move at the extremes. */
.coverage{padding:calc(clamp(172px,18vw,256px) - 50px) 0 clamp(124px,12vw,176px);overflow:hidden;perspective:1500px}
.coverage .chead{text-align:center}
/* 15% up on the previous clamp(24px,3.6vw,50px), applied to all three stops so the heading grows
   by the same proportion at every width instead of hitting its cap earlier. Family, weight,
   -.035em tracking, 1.05 leading and the centred alignment are untouched. */
/* the measure was 24ch when the heading shared its row with the cylinder; the fold is one centred
   column now and the new wording is a third the length, so the cap only has to be wide enough to
   hold the three words on one line at the top of the size curve. text-wrap:balance still splits
   them evenly on a phone, where one line will not fit at any readable size. */
.coverage h2{font-family:var(--disp);font-weight:400;letter-spacing:-.035em;line-height:1.05;font-size:var(--h2);max-width:17em;margin:0 auto;text-wrap:balance;color:var(--ink)}
/* one word of the heading in brand blue. var(--blue) IS #1935FF — the token rather than the
   literal, so it stays in step with the rest of the page. Colour only: it inherits the h2's
   family, weight, size and tracking, which is what keeps it part of the same line rather than
   an inserted span with its own metrics. */
.coverage h2 .acc{color:var(--blue)}
/* the two one-line sentences are now a single paragraph, so 60ch stops being a "hold one line"
   figure and becomes a plain measure: wide enough not to look cramped under a 57px heading, far
   short of the 1400px .wrap, which is what keeps it reading as a deliberate centred block rather
   than copy stretched across the fold. Type, colour, leading and the heading gap are unchanged. */
.coverage .lead{margin:clamp(24px,2.4vw,34px) auto 0;max-width:60ch;color:var(--ink-2);font-size:15px;line-height:1.5;text-wrap:pretty}
/* the emphasised spans are the coverage itself. 600 rather than the browser's 700: it is the
   weight the rest of the page emphasises with, and at 15px it separates from the 400 around it
   without turning four phrases into four black blocks. */
.coverage .lead strong{font-weight:600;color:var(--ink)}
/* the coverage lists, formerly two scrolling rows. The margin is the one the marquee held: the
   air between the supporting copy and this block is what stops the two halves of the section
   reading as one dense paragraph, and it is unchanged by the rows becoming chips.
   The two groups are stacked, each one label + its own wrapped set. Nothing here is nowrap, so
   every item is on the page at every width — no scroll, no carousel, no clipping. */
.coverage .cgroups{margin-top:clamp(56px,7vw,88px);display:flex;flex-direction:column;gap:clamp(30px,3.4vw,44px)}
/* the label tier. Small, uppercase and tracked rather than large and bold: the hierarchy under a
   57px display heading comes from scale, and a second big weight would compete with it. --ink-2
   rather than --ink-3 because this sits on the lavender backdrop, not on white — 6.1:1 against
   the #CFE0FF the aurora holds here, where --ink-3 would fall to 3.5:1. */
.coverage .clabel{font-family:var(--disp);font-weight:600;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);text-align:center}
/* wrap is the whole responsive story: the same rule holds seven chips on two centred lines at
   1440 and one per line on a 375 phone, with no breakpoint, no horizontal scroll and nothing
   hidden. The row gap is the tighter of the two so wrapped lines group as one block. */
.coverage .chips{list-style:none;margin-top:clamp(14px,1.4vw,18px);display:flex;flex-wrap:wrap;justify-content:center;gap:9px 10px}
/* translucent white rather than a fixed tint: the page backdrop under this section is scrubbed
   through the aurora's lavender/blue range, so a chip that lets it through stays in relation to
   whatever the backdrop is at that moment, where a baked #EDF2FF would drift against it.
   12px radius, not 100px — the brief rules out anything that reads as a button, and a fully
   round end on a wide label is exactly that. No shadow, no icon, no hover: these are informational.
   The border is the section's own blue at 10%, which is what keeps them from floating. */
.coverage .chips li{background:rgba(255,255,255,.66);border:1px solid rgba(25,53,255,.11);border-radius:12px;
  padding:9px 15px;font-size:14px;font-weight:500;letter-spacing:-.005em;line-height:1.25;color:var(--ink)}

/* ── FEATURES — five capability cards ──────────────────────────────────────────────────────────
   Nothing here is a new visual language: the fill, the 1px --line border and the radius are the
   gallery card's, the two-layer shadow is the pillars card's, the heading curve and the .period
   stop are the ones every other h2 on the page uses, and the pill is the shared .eyebrow. The
   only thing this section invents is the grid that arranges them. */
.feat{padding:clamp(54px,7vw,88px) 0}
/* the head is a centred column, matching the gallery's .lead block above it */
.feat .fhead{display:flex;flex-direction:column;align-items:center;text-align:center;gap:16px}
.feat h2{font-family:var(--disp);font-weight:400;letter-spacing:-.035em;line-height:1.05;font-size:var(--h2);max-width:20ch;color:var(--ink);text-wrap:balance}
.feat .flead{font-size:15px;color:var(--ink-2);max-width:62ch;line-height:1.5;text-wrap:pretty}

/* The 16/10 screenshot frame that used to close every card is gone, and with it about 250px per
   row. What is left is the card's actual content — mark, title, one short paragraph — so the tile
   is sized by its copy instead of by a reserved picture box.

   ONE set of cards serves both arrangements. Below 1000px .fgrid is a snap rail: the cards keep
   their document order and their styling and simply overflow, scrolled by the arrows below them.
   At 1000px the same element becomes a five-track grid and the arrows go away. Nothing is
   duplicated for a breakpoint and no card is ever removed from the DOM. */
.feat .fgrid{display:flex;gap:14px;margin-top:clamp(26px,3.2vw,38px);
  overflow-x:auto;scroll-snap-type:x mandatory;
  /* the rail is driven by the arrows and by a finger; a scrollbar under five tiles would read as
     a second, competing control. The overflow itself stays real — this hides the bar, not the
     scrolling, so a trackpad swipe still works. */
  scrollbar-width:none;-ms-overflow-style:none;
  /* the active card's ring is drawn outside its border box, so the rail needs a little room or the
     ring is clipped at the top and bottom of the scrollport */
  padding:4px 0}
.feat .fgrid::-webkit-scrollbar{display:none}
/* MOBILE: 78% of the rail, so one card is whole and roughly a fifth of the next is showing. That
   sliver IS the affordance — it is why the arrows are not the only sign more features exist. */
.feat .f{flex:0 0 78%;scroll-snap-align:start}
/* TABLET: two whole cards and a slice of the third */
@media(min-width:641px){ .feat .f{flex-basis:40%} }
/* DESKTOP: all five at once, equal tracks, so every card is the same width and — grid's default
   align-items:stretch — the same height, without any of it being maintained by hand. */
@media(min-width:1000px){
  .feat .fgrid{display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(13px,1.15vw,18px);
    overflow:visible;padding:0}
  .feat .f{flex:none}
}

/* the fill, the 1px --line border and the radius are still the gallery card's — this is the same
   card, drawn smaller. The shadow is the one place it departs: the old two-layer stack was built
   for a 630px panel and reads as weight on a 200px tile, so both layers are pulled in and lightened. */
.feat .f{background:#fff;border:1px solid var(--line);border-radius:18px;
  padding:clamp(17px,1.4vw,21px);
  box-shadow:0 2px 10px -4px rgba(11,18,32,.07),0 12px 30px -18px rgba(11,18,32,.16);
  display:flex;flex-direction:column;
  transition:border-color .45s ease,box-shadow .45s ease,background-color .45s ease}
/* THE ACTIVE CARD. Border, ring and fill only — deliberately no transform. "Stronger border, glow,
   elevation or background treatment" is satisfied by drawing, and drawing cannot move a tile,
   reflow the row or make anything jump, which the brief rules out flatly. The 450ms transition
   against a 2.2s step is what keeps the emphasis a drift rather than a blink.
   On the rail this marks whichever card the reader has snapped to; on desktop the cycle below
   walks it 1 -> 5. Same class, same styling, two sources. */
.feat .f.on{border-color:rgba(25,53,255,.32);background:#FDFDFF;
  box-shadow:0 0 0 3px rgba(25,53,255,.065),0 3px 14px -5px rgba(11,18,32,.10),0 16px 38px -20px rgba(25,53,255,.24)}
/* hover only where there is a real pointer: on a touch screen :hover latches after a tap and a
   tile would stay emphasised long after the finger has gone. Same treatment as .on, so pointing at
   a card and the cycle arriving at it look identical rather than fighting for the same box. */
@media(hover:hover){
  .feat .f:hover{border-color:rgba(25,53,255,.32);
    box-shadow:0 0 0 3px rgba(25,53,255,.065),0 3px 14px -5px rgba(11,18,32,.10),0 16px 38px -20px rgba(25,53,255,.24)}
}
/* 20px stroke mark — two down from the old 22, in step with the tile */
.feat .f .ficon{width:20px;height:20px;display:block;margin-bottom:11px;
  stroke:var(--blue);fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.feat .f h3{font-family:var(--disp);font-weight:500;font-size:clamp(15.5px,1.15vw,17px);letter-spacing:-.02em;line-height:1.25;color:var(--ink)}
/* a flat 7px, NOT margin-top:auto. Auto bottom-aligns the copy, and since the five descriptions are
   four to seven lines long, the slack it creates lands in the MIDDLE of the shorter cards as a
   visible hole between title and paragraph. Top-aligned, the block reads as one unit and the slack
   collects at the base of the tile, where it is white on white and invisible. */
.feat .f p{margin-top:7px;color:var(--ink-2);font-size:13.5px;line-height:1.5;text-wrap:pretty}

/* ARROWS — a compact pair directly under the rail, centred, and gone entirely at desktop where
   there is nothing to scroll. Buttons, not divs: keyboard and screen-reader behaviour comes free
   and correct. Built in the same script that builds the cards, so a control never outlives the
   thing it controls. */
.feat .fnav{display:flex;justify-content:center;gap:10px;margin-top:16px}
.feat .fnav button{width:38px;height:38px;border-radius:50%;background:#fff;border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--ink);
  box-shadow:0 2px 8px -3px rgba(11,18,32,.10);
  transition:border-color .2s,color .2s,opacity .2s,box-shadow .2s}
.feat .fnav button svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
@media(hover:hover){ .feat .fnav button:hover:not([disabled]){border-color:rgba(25,53,255,.42);color:var(--blue)} }
.feat .fnav button:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
/* at an end of the rail: dimmed and inert, so the control tells the reader where they are rather
   than silently doing nothing */
.feat .fnav button[disabled]{opacity:.36;cursor:default;box-shadow:none}
/* AFTER the .fnav rules above, not up in the desktop grid block: same specificity, so whichever
   comes last in the sheet wins, and up there `display:flex` would have overruled it. */
@media(min-width:1000px){ .feat .fnav{display:none} }
/* Two lines reserved for the title, and ONLY where the five-across row exists. Across that row
   "Summary of Judgments" and "Save Bookmarks with Notes" wrap while the other three do not, so
   without a reserve the five descriptions start on three different baselines — the raggedness that
   makes a tile row look assembled rather than designed. On the rail it would be dead space instead:
   one card is on screen at a time, there is no neighbour to align to, and the reserve would just
   open a hole under a one-line title. */
@media(min-width:1000px){ .feat .f h3{min-height:2.5em} }

/* PRICING */
.plan{padding:clamp(58px,7vw,88px) 0;text-align:center}
.plan .wrap{perspective:1500px}
.plan .eyebrow{justify-content:center}
.plan h2{font-family:var(--disp);font-weight:400;letter-spacing:-.035em;font-size:var(--h2-lead);line-height:1;margin-top:14px}
.plan .lead{margin:18px auto 0;max-width:42ch;color:var(--ink-2);font-size:17px}
.pcard{max-width:560px;margin:clamp(34px,5vw,54px) auto 0;background:rgba(255,255,255,.72);border:1px solid var(--line);
  border-radius:28px;padding:40px;text-align:left;box-shadow:0 50px 100px -60px rgba(11,18,32,.45);position:relative;overflow:hidden;
  transform-style:preserve-3d;transform-origin:center 85%;will-change:transform}
.pcard .glow{position:absolute;inset:-30% -20% auto -20%;height:70%;background:radial-gradient(60% 100% at 50% 0%,rgba(25,53,255,.14),transparent 70%);pointer-events:none}
.pcard .row1{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;position:relative}
.pcard .plabel{font-weight:500;font-size:17px;color:var(--ink)}
.pcard .psub{font-size:14px;color:var(--ink-3);margin-top:4px}
.pcard .fee{font-family:var(--disp);font-weight:400;font-size:clamp(40px,6vw,64px);letter-spacing:-.035em;line-height:.9;color:var(--ink);font-variant-numeric:tabular-nums}
.pcard .fee .rs{font-size:.72em;position:relative;top:-.06em;margin-right:.02em;color:var(--ink-2)}
.pcard .per{font-size:13px;color:var(--ink-3);text-align:right;margin-top:6px}
.pcard ul{list-style:none;margin:22px 0;padding:20px 0 0;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:12px;position:relative}
.pcard li{display:flex;align-items:center;gap:11px;font-size:15px;color:var(--ink-2)}
.pcard li svg{width:17px;height:17px;stroke:var(--blue);fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto}
.pcard .btn{width:100%;justify-content:center;padding-left:26px;position:relative}

/* ── PRICING, DARK PANEL ───────────────────────────────────────────────────────────────────────
   The dark surface rides .plan .wrap — the element that already wraps this section's contents —
   rather than .plan itself or a new div. Two reasons. The section's own padding is the standardised
   section gap, and painting THAT dark would swallow the whitespace either side and butt the panel
   against its neighbours; and .wrap already exists, so the panel costs no markup change.

   WIDTH — the same construction the header pill uses, not a copy of its number. .nav sets
   `padding:18px 2vw` on a full-bleed bar and .nav .in takes `width:100%;max-width:none`, so the
   pill is 100vw - 2*2vw = 96vw, centred by the gutters rather than by a width and auto margins.
   This is that arithmetic exactly: kill .wrap's 1400px cap the same way .nav .in kills it, then
   let a 2vw gutter on each side define the box. Both are therefore 96vw at every viewport, and
   both stay centred without either knowing about the other. The header is untouched.

   #0B1220 is var(--ink) — this site's own darkest token, the one the body type is set in and the
   one the WhatsApp band already uses as a surface. That is what keeps this a myPara section rather
   than a dark rectangle: it is the palette inverted, not a second palette. */
/* the panel's own top/bottom breathing room, halved by request (44/5vw/72 → 22/2.5vw/36). Only the
   VERTICAL half of the shorthand moves: the side padding is what holds the pricing card off the
   panel's left and right edges, and the section's outer padding — the standardised section gap —
   is a different property on .plan and is deliberately untouched. */
.plan .wrap{max-width:none;margin:0 2vw;
  padding:clamp(22px,2.5vw,36px) clamp(22px,4vw,64px);
  background:var(--ink);
  /* one step larger than the 28px card it contains, so the panel reads as the outer box; both
     values are already in this sheet's radius vocabulary (18/22/28/32) */
  border-radius:clamp(24px,2.4vw,32px);
  /* the hairline the WhatsApp card uses on the same fill — at 7% it is a lit edge, not a border */
  border:1px solid rgba(255,255,255,.07);
  box-shadow:0 4px 24px -6px rgba(11,18,32,.10),0 40px 90px -40px rgba(11,18,32,.45)}
/* the two light tones are not new: they are the pair the dark WhatsApp card already established,
   reused here so the site has ONE dark treatment rather than two that nearly match. */
.plan h2{color:#F8FAFF}
.plan .lead{color:#B8C4D8}
/* the pill keeps its shape, its dot and its blue identity; only the tone moves, because --blue on
   9% --blue is a brand colour on a dark ground and unreadable. --blue-soft is the palette's own
   lighter blue — 6.4:1 on this fill, 5.3:1 inside the pill. */
.plan .eyebrow{color:var(--blue-soft);background:rgba(79,151,255,.14)}
.plan .eyebrow::before{background:var(--blue-soft)}
/* the card is the focal point, so it stops being 72% translucent. Over a light page that milkiness
   read as depth; over #0B1220 it would strain the dark through and turn the card grey-blue. Solid
   #fff is what every other card on this page already uses. Structure, radius, padding, type, the
   blue ticks and the CTA are all untouched — this is fill and depth only, and the shadow is deeper
   because a light shadow does no work on a dark ground. */
.pcard{background:#fff;box-shadow:0 30px 70px -35px rgba(0,0,0,.5)}

/* ── LATEST JUDGEMENTS ─────────────────────────────────────────────────────────────────────────
   Same section rhythm as Pricing above and the FAQ below (identical padding clamp), same 960px
   list measure the FAQ uses, and the card is the FAQ item's box — white, one --line hairline,
   18px radius — so the fold reads as the third in a run rather than a new kind of thing. */
.judg{padding:clamp(58px,7vw,88px) 0}
.judg .head{text-align:center}
/* the FAQ's heading curve, not Pricing's: this section is a list of items like the FAQ, and the
   two now sit back to back, so they carry the same weight */
.judg h2{font-family:var(--disp);font-weight:400;letter-spacing:-.035em;font-size:var(--h2);line-height:1.05;text-wrap:balance}
/* MOBILE FIRST: one card per row. The two branches below only ever change the column count —
   the measure, the gap and the card box are the ones this list already had, so the three cards
   keep their exact edges against the WhatsApp card and the FAQ list further down the page.
   Grid rather than flex, because grid's default align-items:stretch is what makes "equal height"
   structural: three cards on one row are the height of the tallest, whatever their copy does. */
.judg .jlist{max-width:960px;margin:clamp(34px,5vw,54px) auto 0;display:grid;grid-template-columns:1fr;gap:14px}
/* tablet: two per row, the third dropping to the next row on its own */
@media(min-width:641px){ .judg .jlist{grid-template-columns:repeat(2,1fr)} }
/* desktop: the three latest side by side */
@media(min-width:1000px){ .judg .jlist{grid-template-columns:repeat(3,1fr)} }

/* the whole card IS the anchor. That is what makes "the entire card is clickable" and "the card
   is keyboard accessible" the same fact rather than two features — one tab stop, one Enter, no
   click handler standing in for a link. It also rules out nesting a second anchor inside for the
   ICO number or READ MORE: those are spans that take the link's colour on hover and focus. */
/* flex column so the hairline can be pinned to the card's base: on a row of three, grid stretches
   every card to the tallest, and without this the rule would sit under its own copy at three
   different heights inside three boxes that are the same height. Fill, border, radius, padding,
   shadow and transition are all unchanged. */
.judg .j{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:18px;
  padding:clamp(22px,2.4vw,30px) clamp(20px,2.6vw,30px) 0;
  box-shadow:0 4px 24px -6px rgba(11,18,32,.08),0 24px 60px -24px rgba(11,18,32,.22);
  transition:transform .2s cubic-bezier(.32,.72,0,1),box-shadow .2s cubic-bezier(.32,.72,0,1),border-color .2s}
.judg .j:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
/* pointer devices only: on a touch screen :hover latches after a tap and the card would stay
   lifted and blue for as long as the reader stayed on the page */
@media(hover:hover){
  .judg .j:hover{transform:translateY(-3px);border-color:rgba(25,53,255,.42);
    box-shadow:0 8px 30px -6px rgba(11,18,32,.12),0 30px 70px -24px rgba(11,18,32,.28)}
  .judg .j:hover .ico,.judg .j:hover .more b{color:var(--blue)}
}
/* keyboard parity: focusing the card recolours exactly what hovering it does */
.judg .j:focus-visible .ico,.judg .j:focus-visible .more b{color:var(--blue)}
/* h3 — the section's h2 is the only level above it, so the outline stays h2 → h3 with no skip */
.judg .ico{font-family:var(--disp);font-weight:600;font-size:clamp(19px,1.9vw,23px);letter-spacing:-.02em;line-height:1.2;color:var(--ink);transition:color .2s}
/* a shade darker than --ink-3, which is the muted grey this label would otherwise take: at 12px
   that token measures 3.6:1 on white and the brief asks for WCAG-compliant contrast, so the tone
   is pulled down just far enough to clear the 4.5:1 floor for small text. Scoped here, not a new
   global token. */
.judg .court{margin-top:7px;font-size:12px;font-weight:500;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3)}
/* the clamp is a height, not a line count: .hn is capped at exactly --hn-lines lines and the
   script measures against that box when it decides where to cut the headnote. Both have to agree,
   which is why the number lives in one place. */
.judg .j{--hn-lines:5}
/* margin-bottom:auto hands any slack the stretch created to the space BELOW the headnote, so the
   rule drops to the base of the card while keeping its own clamp as the minimum gap above it */
.judg .hn{margin-top:16px;margin-bottom:auto;font-size:15px;line-height:1.62;color:var(--ink-2);
  max-height:calc(var(--hn-lines)*1.62em);overflow:hidden}
/* the ellipsis and READ MORE sit inline at the end of the cut text, exactly as in the reference —
   which is why the truncation is done in the script rather than with -webkit-line-clamp: a clamp
   puts its own ellipsis at the end of the box and leaves nothing to hang a link off. */
.judg .more{white-space:nowrap}
/* same tone as .court, and for the same reason: --ink-3 is the grey this label wants but measures
   3.6:1 on white, and at 13px the floor is 4.5:1. Blue on hover and focus, per the brief. */
.judg .more b{font-weight:500;font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);transition:color .2s}
/* the hairline under each card, as in the reference. It rides the card's own padding so it stops
   short of the rounded corners instead of running edge to edge. */
.judg .rule{margin-top:clamp(18px,2vw,24px);height:1px;background:var(--line)}
/* the bottom padding lives below the rule rather than on the card, so the gap under the line is
   the same optical weight as the gap above it */
.judg .j .rule{margin-bottom:clamp(16px,1.8vw,20px)}
/* .ghost, not the solid fill: Pricing's CTA sits directly above this fold, and two saturated CTAs
   back to back would read as the page asking twice. Named by position rather than by label, since
   the label has already changed once ("Start now" became the Contact Sales number) and the reason
   this button is a ghost had nothing to do with what the one above it said. The ghost variant already
   exists in the button block and carries the same --line hairline the cards above it use, so
   this is the secondary weight the position calls for rather than a new kind of button. */
.judg .jmore{display:flex;justify-content:center;margin-top:clamp(28px,3.4vw,40px)}

/* ── WHATSAPP COMMUNITY ────────────────────────────────────────────────────────────────────────
   No vertical padding, deliberately. Judgements above closes with its own 58-88px and the FAQ
   below opens with the same, so this band drops into air the page already had and the card ends
   up sitting an equal distance from both — the section rhythm is untouched rather than added to. */
.wacta{padding:0}
/* the judgement list's measure and box — same 960px, same radius, same two-layer shadow — but
   inverted. The fill is var(--ink), which IS #0B1220: the palette's own ink, the colour every
   heading on the page is set in, so this is the design system turned over rather than a dark mode
   bolted on. Nothing about the geometry changes; only the three colours below and the hairline.
   That hairline cannot stay --line (#DDE6F3) — a near-white ring on near-black would read as a
   drawn outline rather than an edge — so it becomes the same idea at dark-on-light's alpha. */
.wacta .wacard{max-width:960px;margin:0 auto;background:var(--ink);border:1px solid rgba(255,255,255,.09);border-radius:22px;
  padding:clamp(24px,2.8vw,34px) clamp(24px,3.2vw,40px);
  box-shadow:0 4px 24px -6px rgba(11,18,32,.08),0 24px 60px -24px rgba(11,18,32,.22);
  display:flex;align-items:center;justify-content:space-between;gap:clamp(22px,3vw,40px);
  transition:transform .25s cubic-bezier(.32,.72,0,1),box-shadow .25s cubic-bezier(.32,.72,0,1)}
@media(hover:hover){
  .wacta .wacard:hover{transform:translateY(-3px);
    box-shadow:0 8px 30px -6px rgba(11,18,32,.12),0 30px 70px -24px rgba(11,18,32,.28)}
}
/* an h2 semantically — it is this section's heading — but sized as a card title, because a fold
   headline's clamp(30px,4.4vw,58px) inside a band this shallow would read as a second Pricing */
/* the light counterparts of the two tokens these lines used to carry: --ink becomes #F8FAFF and
   --ink-2 becomes #B8C4D8, the same two-step hierarchy at the same interval, read the other way
   up. Family, weight, size, tracking and leading are all untouched — only the colour flips. */
.wacta h2{font-family:var(--disp);font-weight:500;font-size:clamp(19px,2vw,25px);letter-spacing:-.025em;line-height:1.22;color:#F8FAFF;text-wrap:balance}
.wacta p{margin-top:9px;font-size:15px;line-height:1.55;color:#B8C4D8;max-width:52ch;text-wrap:pretty}
/* the button keeps its intrinsic width against a flexible text column, and never wraps mid-label */
.wacta .btn{flex:0 0 auto;white-space:nowrap}
/* the glyph is a filled logo, not one of the site's stroked arrows, so it needs the inverse of
   the .btn .ic svg rule. White on the button's own blue rather than WhatsApp green: the mark is
   recognisable by shape, and green here would be both off-palette and — at 1.98:1 on a white
   disc — the least legible way to render it. */
.wacta .btn .ic svg{width:14px;height:14px;fill:#fff;stroke:none}

/* tablet: one column, centred, button under the text. 900px is where the row runs out of room
   for a 34-character heading and a 200px button side by side. */
@media(max-width:900px){
  .wacta .wacard{flex-direction:column;text-align:center;gap:clamp(20px,3vw,26px)}
  .wacta p{margin-left:auto;margin-right:auto}
}

/* FAQ */
.faq{padding:clamp(58px,7vw,88px) 0}
.faq .head{text-align:center}
.faq .eyebrow{justify-content:center}
.faq h2{font-family:var(--disp);font-weight:400;letter-spacing:-.035em;font-size:var(--h2);line-height:1.05;margin-top:14px;text-wrap:balance}
.faq .lead{margin:18px auto 0;max-width:46ch;color:var(--ink-2);font-size:17px}
.faq .list{max-width:960px;margin:clamp(34px,5vw,54px) auto 0;display:flex;flex-direction:column;gap:14px}
.faq .item{background:rgba(255,255,255,.72);border:1px solid var(--line);border-radius:18px;
  box-shadow:0 26px 54px -46px rgba(11,18,32,.45);
  transition:border-color .3s ease,box-shadow .45s cubic-bezier(.32,.72,0,1),transform .45s cubic-bezier(.32,.72,0,1)}
.faq .item:hover{border-color:rgba(25,53,255,.42);box-shadow:0 34px 66px -42px rgba(11,18,32,.5);transform:translateY(-2px)}
.faq .item.open{border-color:rgba(25,53,255,.55)}
.faq h3{margin:0;font:inherit}
/* the button is the whole row so the touch target spans the full card width */
.faq .q{width:100%;display:flex;align-items:center;justify-content:space-between;gap:20px;
  background:transparent;border:0;cursor:pointer;text-align:left;color:var(--ink);
  font-weight:500;font-size:clamp(16px,1.5vw,19px);letter-spacing:-.012em;line-height:1.4;
  padding:clamp(20px,2.4vw,26px) clamp(20px,2.6vw,30px);border-radius:18px}
.faq .q:focus-visible{outline:2px solid var(--blue);outline-offset:-3px}
/* two bars stacked; the vertical one rotates flat, turning + into − */
.faq .ic{position:relative;flex:0 0 auto;width:22px;height:22px}
.faq .ic span{position:absolute;left:50%;top:50%;width:13px;height:1.8px;border-radius:2px;background:var(--blue);
  transform:translate(-50%,-50%);transition:transform .45s cubic-bezier(.32,.72,0,1)}
.faq .ic span:last-child{transform:translate(-50%,-50%) rotate(90deg)}
.faq .item.open .ic span:last-child{transform:translate(-50%,-50%) rotate(0deg)}
/* collapsed by default so there is no open-then-snap flash before the script runs;
   <noscript> below re-opens them all when JS never arrives */
.faq .ans{height:0;overflow:hidden}
.faq .ans .inner{padding:0 clamp(20px,2.6vw,30px) clamp(22px,2.6vw,28px)}
.faq .ans p{font-size:16px;line-height:1.7;color:var(--ink-2);max-width:74ch;text-wrap:pretty}

/* DOWNLOAD myPARA
   Nothing here is a new visual idea. The centred head is .feat .fhead's construction, the heading
   is .feat h2's exact curve (same face, weight, tracking, line-height and clamp), the eyebrow is
   the shared pill untouched, and the vertical rhythm comes from the section-spacing rule below —
   .dl was added to that selector list rather than given padding of its own, which is how a new
   fold is supposed to join the system.

   The badges are artwork, so they get no myPara chrome: no border, no radius, no shadow of ours.
   Apple's and Google's badges carry their own 1px light stroke and rounded corners, and drawing a
   second frame around them would both look wrong and breach their brand guidelines. What the
   anchor DOES get is the site's own interaction language — the same lift-and-settle the cards use,
   and the same focus ring every other link on the page has. */
.dl .wrap{display:flex;flex-direction:column;align-items:center;text-align:center;gap:16px}
.dl h2{font-family:var(--disp);font-weight:400;letter-spacing:-.035em;line-height:1.05;
  font-size:var(--h2);max-width:20ch;color:var(--ink);text-wrap:balance}
/* the two badges are one group. gap is the only thing holding them apart, so the mobile block can
   restack them by changing nothing but flex-direction. */
.dl .dlrow{margin-top:clamp(18px,2.2vw,28px);display:flex;flex-wrap:wrap;justify-content:center;
  align-items:center;gap:14px}
/* height drives the size and width follows the artwork's own 400:137, so the badges can never be
   stretched out of proportion. Both PNGs are the same pixel size, so one height sizes both. */
.dl .dlbadge{display:block;border-radius:var(--r-control);
  transition:transform .35s cubic-bezier(.32,.72,0,1),filter .35s ease}
.dl .dlbadge img{display:block;height:clamp(46px,4.4vw,54px);width:auto}
.dl .dlbadge:hover{transform:translateY(-2px);filter:brightness(1.08)}
.dl .dlbadge:focus-visible{outline:2px solid var(--blue);outline-offset:4px}

/* CLOSE */
/* the eyebrow is gone, so the block lost ~56px: min-height comes down to match and the padding
   is now symmetric, which keeps the heading + CTA optically centred without opening a gap */
.close{min-height:68svh;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;
  padding:64px 20px;position:relative;overflow:hidden}
/* the blue bloom + white shelf that used to sit under the CTA is gone — it read as a hard seam
   between this fold and Contact, so the section now runs straight into the page tint */
.close .in{position:relative;z-index:1}
/* same face/weight/tracking/alignment as before, scaled 20%: 30→36, 4.4→5.28vw, 58→69.6 */
.close h2{font-family:var(--disp);font-weight:400;letter-spacing:-.035em;font-size:var(--h2-lead);line-height:1.05;color:var(--ink);text-wrap:balance}
.close .actions{margin-top:34px;display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

/* CONTACT */
.contact{padding:clamp(58px,7vw,92px) 0;text-align:center}
/* matches .plan .wrap — the flip-in needs a perspective host or the rotationX reads as a squash */
.contact .wrap{perspective:1500px}
.contact .eyebrow{justify-content:center}
.contact h2{font-family:var(--disp);font-weight:400;letter-spacing:-.035em;font-size:var(--h2);
  line-height:1.05;margin-top:14px;color:var(--ink)}
.contact .lead{margin:18px auto 0;max-width:56ch;color:var(--ink-2);font-size:17px;line-height:1.6;text-wrap:pretty}
/* same card treatment as the pricing panel so the form reads as part of the same system */
.contact .fwrap{max-width:760px;margin:clamp(34px,5vw,54px) auto 0;text-align:left;
  background:rgba(255,255,255,.72);border:1px solid var(--line);border-radius:28px;
  padding:clamp(24px,4vw,44px);box-shadow:0 50px 100px -60px rgba(11,18,32,.45)}
.contact .grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.contact .field{display:flex;flex-direction:column;gap:8px;min-width:0}
.contact .field.full{grid-column:1/-1}
.contact label{font-size:13px;font-weight:500;color:var(--ink-2);letter-spacing:.01em}
.contact .req{color:var(--blue)}
.contact input,.contact select{width:100%;font-size:15px;color:var(--ink);background:#fff;
  border:1px solid var(--line);border-radius:10px;padding:13px 14px;
  transition:border-color .25s,box-shadow .25s;appearance:none;-webkit-appearance:none}
.contact input::placeholder{color:var(--ink-3)}
.contact input:hover,.contact select:hover{border-color:rgba(25,53,255,.4)}
.contact input:focus,.contact select:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(25,53,255,.14)}
/* flag an invalid field with a ring, but never by colour alone — the status line carries the message */
.contact [aria-invalid="true"]{border-color:var(--blue);box-shadow:0 0 0 3px rgba(25,53,255,.14)}
/* appearance:none strips the native arrow, so draw one in the site's stroke style */
.contact .sel{position:relative;display:block}
.contact .sel::after{content:"";position:absolute;right:15px;top:50%;width:8px;height:8px;pointer-events:none;
  border-right:1.7px solid var(--ink-3);border-bottom:1.7px solid var(--ink-3);
  transform:translateY(-70%) rotate(45deg)}
.contact select{padding-right:34px;cursor:pointer}
.contact .phone{display:grid;grid-template-columns:104px 1fr;gap:10px}
.contact .actions{margin-top:28px;display:flex;justify-content:center}
/* a <button> does not inherit the page font or lose its chrome on its own */
/* only what a <button> needs that an <a> gets for free — everything visual comes from the
   shared .nav .cta rule above */
.contact .actions .cta{border:0;cursor:pointer}
.contact .status{margin-top:14px;text-align:center;font-size:14px;color:var(--ink-2);min-height:1.3em}
.contact .status.ok{color:var(--blue)}
.contact .status.err{color:var(--ink);font-weight:500}

/* FOOTER — transparent so the page's own #bgtint reads straight through, per the reference */
.foot{position:relative;z-index:1;background:transparent;color:var(--ink-2);
  padding:clamp(52px,6vw,86px) 0 clamp(30px,3vw,44px)}
/* content container only — .foot itself stays full-bleed. 67.2vw is the old 96vw content span
   less 30%, auto margins keeping the gutters equal. Released back to the full 2vw gutters below
   860px, where 67.2vw would be ~250px and the address column would shred. */
/* …with a ceiling. 67.2vw is a pure percentage, so it kept growing after the content stopped
   needing it: at 1920 it made the measure 1290px to hold 765px of brand + information, which put a
   300px hole between RuPay and the right edge — the same "too spread out" problem, just relocated
   to the end of the row. 1000px is where the content is comfortably served (it leaves the payment
   marks ~29px of slack on one line), and it is not an arbitrary number: at 1440 the measure is
   968px against a 1400px page, and this keeps that same footer-to-page proportion at every larger
   viewport instead of letting the footer stretch to 92% of the page while its content stays put.
   Below ~1490px nothing changes — 67.2vw is the smaller value and still wins. */
.foot > .wrap{max-width:min(67.2vw,1000px);padding:0;margin-inline:auto}
@media(max-width:860px){.foot > .wrap{max-width:none;padding:0 2vw}}
/* 1px rule closing off Get in Touch. It spans the footer's content area rather than the viewport,
   so it lines up with the logo on the left and the payment column on the right. The air above it
   is .foot's own top padding stacked on .contact's bottom padding; the air below is this margin. */
.foot .fdiv{height:1px;background:#E4ECFE;margin-bottom:clamp(40px,5vw,72px)}
/* the logo and the legal links are one left-aligned stack now, not a row with the links pushed to
   the far edge. Mobile already stacked them (the 640 block just centres the same column), so this
   is a desktop/tablet change that leaves the phone layout exactly where it was. */
/* the gap IS the logo-to-link distance. It was sized when this row held FOUR links, which read as
   a band with real weight under the mark; one short link needed the same space closed up, or it
   floats. Tightened so the link sits as the logo's own caption line — the two are one navigation
   block, and the larger gap below (.fcols margin-top) is what separates that block from the
   information columns. Within-group tighter than between-group is the whole hierarchy here.
   align-items:flex-start keeps the link flush with the logo's left edge. */
.foot .frow{display:flex;flex-direction:column;align-items:flex-start;gap:clamp(16px,1.9vw,22px)}
.foot .flogo{display:inline-flex;align-items:center}
/* 66px is the phone's size and stays the phone's size — the 30% bump to 86px is applied in the
   min-width:641px block, because the mobile footer is not to change. Only the height is ever
   set, so the SVG keeps its own aspect ratio at both sizes. */
.foot .flogo img{height:66px;width:auto}   /* the asset already carries the YOUR AI JUNIOR tag */
/* padding-top:14px existed to baseline the links against a logo sitting beside them; stacked
   underneath it, the gap is .frow's job and the padding would only double it */
.foot .flinks{display:flex;gap:clamp(18px,2.6vw,40px);flex-wrap:wrap;align-items:center}
/* Type, size and colour are untouched — this is the same footer link it always was. What is new is
   a RESTING underline. Four links in a row read as navigation by grouping alone; one link on its
   own line had no affordance at rest and sat there looking like a stray line of body copy, which
   is the actual complaint. A hairline at 22% ink states "link" without competing with the labels
   below. The blue hover bar still animates in over it — the resting rule hands its colour to
   transparent on hover so the two never stack into a double underline. */
.foot .flinks a{position:relative;font-size:14.5px;color:var(--ink);
  text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px;
  text-decoration-color:rgba(11,18,32,.22);
  transition:color .25s,text-decoration-color .25s}
/* underline grows from the left on hover and retracts to the right on exit */
.foot .flinks a::after{content:"";position:absolute;left:0;right:0;bottom:-5px;height:1px;background:var(--blue);
  transform:scaleX(0);transform-origin:right;transition:transform .32s cubic-bezier(.32,.72,0,1)}
.foot .flinks a:hover{color:var(--blue);text-decoration-color:transparent}
.foot .flinks a:hover::after{transform:scaleX(1);transform-origin:left}
.foot .flinks a:focus-visible{outline:2px solid var(--blue);outline-offset:4px;border-radius:2px}
/* this margin is the ONLY thing between the legal link and the ADDRESS label — measured, the gap
   and this value are the same number — so it is the whole of that spacing and the right place to
   set it.

   It was clamp(41.4px,5.4vw,82.8px), a deliberate tripling of the original, and that was the right
   call for a row of four links: a band with weight needs room beneath it. With ONE link the same
   number left 78px of nothing under an 18px line, which is the empty area this change removes.
   Brought back to a value that still separates the logo/link block from the columns — it stays
   roughly double the gap ABOVE the link, so the link keeps reading as part of the block above it
   rather than as a heading for the columns below. The column gap is untouched: that sets the
   horizontal rhythm, not this one. */
.foot .fcols{display:flex;align-items:flex-start;gap:clamp(20px,3vw,48px);flex-wrap:wrap;
  margin-top:clamp(30px,3.4vw,52px)}
.foot .fcol{min-width:0}
/* 14px → 10px. The label and its value are ONE unit, and at 14px they did not read as one: the
   value's own half-leading (14.5px type at 1.7) adds ~5px on top, so the optical gap under a 12px
   label was ~19px — the same order as the 22-30px that separates one group from the next, which is
   what made the groups read as six loose lines instead of four blocks. At 10px the optical gap is
   ~15px, comfortably inside the between-group spacing. The phone already used 10px, so this simply
   makes every viewport agree. */
.foot .flabel{font-family:inherit;font-size:12px;font-weight:700;letter-spacing:.13em;color:var(--ink);
  text-transform:uppercase;margin-bottom:10px}
.foot .fval{font-size:14.5px;color:var(--ink-2);line-height:1.7}
.foot .fcol-addr .fval{max-width:19ch}
.foot .flink,.foot .fmail{color:var(--ink-2);transition:color .25s}
.foot .flink:hover,.foot .fmail:hover{color:var(--blue)}
.foot .fmail:hover{text-decoration:underline;text-underline-offset:3px}
/* payment marks are monochrome ink wordmarks in the reference, not coloured chips */
.foot .fpay{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;max-width:210px}
.foot .pay{display:inline-flex;align-items:center;gap:4px;color:var(--ink);font-size:14px;font-weight:800;
  letter-spacing:.01em;line-height:1}
.foot .pay-upi{font-style:italic;letter-spacing:.06em}
.foot .pay-visa{font-style:italic;font-size:15px;letter-spacing:.02em}
.foot .pay-mc i{width:14px;height:14px;border-radius:50%;display:inline-block;background:var(--ink)}
.foot .pay-mc i:first-child{margin-right:-6px}
.foot .pay-mc i:last-child{opacity:.55}
.foot .pay-nb{font-size:10.5px;font-weight:700;letter-spacing:.02em}
.foot .pay-nb svg{width:13px;height:13px;fill:none;stroke:var(--ink);stroke-width:1.7;stroke-linecap:round}
.foot .pay-rupay{font-style:italic}
/* a sibling of .fcols rather than a column inside it, so it sits on its own line as the footer's
   final row. Centred here is the PHONE's treatment and stays untouched; the min-width:641px block
   below pulls it left onto the column grid. nowrap holds it to one line; phones may break it. */
.foot .fcopy{margin:clamp(26px,3vw,42px) auto 0;font-size:14.5px;color:var(--ink-2);line-height:1.7;
  text-align:center;white-space:nowrap}

/* ══ SECTION SPACING — the single rule that owns every gap between major sections ═══════════════
   Placed here, at the end of the base sheet, deliberately: every one of these sections declares its
   own padding shorthand further up, and this list has the same specificity as each of them, so
   source order is what decides. Last wins, and this is last.

   LONGHANDS, never the padding shorthand. Several of these sections carry horizontal padding that
   is theirs alone — .close has 20px, .gallery pads its rail — and a shorthand here would silently
   reset it to zero. Touching only padding-top and padding-bottom means this rule cannot reach
   anything but the vertical gap it is responsible for.

   .gallery is deliberately ABSENT. It is the only section wrapped in another element (.fold2card,
   a visually distinct rounded card), so its own padding is INSIDE that card — internal spacing, not
   a section gap. The boundary above and below it belongs to .fold2card's margins, set below.

   .hero and .foot are also absent, and both are out of scope by instruction. That leaves two
   boundaries outside the system, called out honestly rather than quietly bent to fit:
     hero -> why       hero's padding is fixed, and .pillars' top margin here is the halved value
                       set in the previous request; forcing this to --sec-gap would nearly triple it.
     contact -> footer footer padding is untouched, so this lands short of --sec-gap.
   Every other boundary on the page is exactly --sec-gap. */
.pillars,.coverage,.feat,.plan,.judg,.wacta,.faq,.dl,.close,.contact{
  padding-top:var(--sec-pad);padding-bottom:var(--sec-pad)
}
/* the gallery's card, not the gallery. Both margins are half-gaps, so .feat's bottom + this top and
   this bottom + .plan's top each come to exactly --sec-gap, while the card's own inner padding —
   which is what actually frames the rail — is left completely alone. The 2vw sides are unchanged. */
.fold2card{margin-top:var(--sec-pad);margin-bottom:var(--sec-pad)}

/* ---------- FOOTER, DESKTOP + TABLET ONLY ----------
   Deliberately a min-width block in an otherwise desktop-first sheet: it is the only construction
   that makes "do not touch the mobile footer" structurally true rather than a promise. Everything
   in here stops existing at 640px, where the stacked, centred phone layout is the base cascade. */
@media(min-width:641px){
  /* three columns of equal width. The five .fcol boxes keep their source order (that order IS the
     mobile stack) and are placed by name, which is what lets Mobile/Email/CIN share column 2
     without nesting them in a wrapper the phone layout would then have to undo.
     Four tracks became three when FOLLOW was removed. Dropping a track rather than leaving an
     empty one is the whole of the spacing fix here: with repeat(4,1fr) the three remaining groups
     would have kept their old widths and a quarter of the footer would have been a hole between
     CIN and the payment marks. At repeat(3,1fr) the same content is re-divided across the same
     measure, so the gutters stay even and PAYMENT — the widest group, and the one that was always
     short of room — gains the freed width instead of it turning into air. */
  /* row-gap tightened 30 → 24px. It is the Mobile→Email→CIN spacing (those three are the only
     stacked rows), and it now sits clearly above the 10px that binds a label to its own value and
     clearly below the column gutter, so the contact column reads as three grouped pairs. */
  .foot .fcols{display:grid;grid-template-columns:repeat(3,1fr);align-items:start;
    column-gap:clamp(16px,3vw,48px);row-gap:clamp(18px,1.8vw,24px)}
  /* columns 1 and 3 span all three rows rather than sitting in row 1. If they occupied only
     row 1 they would set its height — the address block is 127px tall — and column 2's own
     Mobile→Email gap would inflate to ~100px while Email→CIN stayed at the row gap. Spanning
     leaves the three row heights to column 2 alone, so its stack is evenly spaced, and
     align-items:start still pins the spanning columns to the top of the grid. */
  .foot .fcol-addr  {grid-column:1;grid-row:1/4}
  .foot .fcol-mob   {grid-column:2;grid-row:1}
  .foot .fcol-mail  {grid-column:2;grid-row:2}
  .foot .fcol-cin   {grid-column:2;grid-row:3}
  .foot .fcol-pay   {grid-column:3;grid-row:1/4}
  /* the 210px cap was sized for a free-flowing flex row; inside a 1fr track it would strand the
     marks in the left half of the column at wide viewports */
  .foot .fpay{max-width:none}
  /* 30% up on the phone's 66px */
  .foot .flogo img{height:86px}
  /* final row, flush with the grid's left edge and therefore with the logo above it */
  .foot .fcopy{margin-inline:0;text-align:left}
}

/* ---------- FOOTER COLUMNS, DESKTOP ONLY ----------
   1000px is this sheet's own desktop line (the features row and the judgement grid both turn on
   there), so the 641-999px tablet footer keeps the four equal tracks and the wider gutter it has
   always had. Nothing above is edited; this only adds.

   The columns read as scattered because the tracks were equal and the content is not. Measured at
   1440, inside identical tracks: Address needs 163px, the Mobile/Email/CIN column 132px, and Payment
   Methods 259px — Payment is the only one genuinely short of room, and with equal tracks its chips
   wrapped to a second row while the shorter groups floated in space they had no use for. Reducing
   the gutter alone cannot fix that: with 1fr tracks the freed pixels go straight back into the
   tracks and the content stays exactly as far apart.

   So the tracks are weighted to what each column actually carries, which is what "optical balance
   rather than one arbitrary value" means here — every column ends up with a similar margin of air
   around its content instead of a similar width. The weights are relative, so the row still spans
   the footer's full measure: the footer's width, alignment and vertical rhythm are all untouched,
   and the blocks simply sit closer together.

   Checked at the ends of the range: at 1024 every column still clears its content, and at 1920 the
   proportions hold because the weights are relative, not fixed. */
@media(min-width:1000px){
  /* the .6fr track was FOLLOW's, sized down because a single 18px icon needed almost nothing.
     It is gone rather than redistributed by hand: the three surviving weights are the ones they
     always were, so the RATIO between address, contact and payment is unchanged and only the
     divisor moves (4.3 → 3.7). Every column therefore grows by the same proportion and the
     footer's rhythm is preserved instead of being re-tuned. */
  .foot .fcols{
    grid-template-columns:minmax(0,1.15fr) minmax(0,1fr) minmax(0,1.55fr);
    column-gap:clamp(20px,2vw,34px)}
}

/* ---------- FOOTER BODY, WIDE DESKTOP ONLY ----------
   The brand block and the information grid stop being two stacked bands and become two columns of
   one row. Everything below is placement; not one element, link, label or value is added, removed,
   reordered or restyled, and the markup is untouched — .wrap already holds the four children this
   grid places.

   WHY, in the numbers that were actually measured at 1440:
     · the footer's measure is 968px and the four groups carry 624px of content, so 344px is pure
       gutter — 115px between each pair of columns. That is the "too spread out" complaint: the
       groups are not far apart because the gutter was set large, they are far apart because a
       fixed amount of content was stretched across a much wider box.
     · the brand block is 128px wide and the row it sits on is 968px, so 840px x 126px of the
       footer was empty. That is the "excessive empty space", and it is also why the footer stood
       663px tall: two full-width bands stacked where one row would do.
   Putting the brand in the left column spends that void on the thing that was short of room. The
   information grid now sits in ~776px instead of 968px, and its gutters fall from 115px to ~52px
   WITHOUT any group losing width — the space comes out of the air, not the content.

   1200px, not 1000, and the threshold is derived rather than picked: below it the measure has no
   surplus to give (at 1000px the measure is 672px against 624px of content), so the stacked layout
   is already correct there and is left exactly as it is. The two-column form only turns on once
   there is genuinely more width than the content needs.

   TRACKS. The information columns become auto-sized instead of fractional. With 1fr tracks every
   column got an equal share regardless of what it held — a short group such as the old FOLLOW ended
   up in a track wider than the address. auto gives each group the width of its own content, and the
   last track takes the remainder, so the payment marks get every pixel left over: one row of five on
   a wide screen, two tidy rows when the viewport tightens. Nothing overlaps, because no track can be
   narrower than what it holds. Removing FOLLOW took the count from four tracks to three; because the
   first tracks are content-sized, the width it used to occupy falls through to the remainder track
   rather than being shared out as extra gutter, which is why the row does not spread back out. */
@media(min-width:1200px){
  .foot > .wrap{display:grid;
    grid-template-columns:minmax(0,auto) minmax(0,1fr);
    /* brand-to-information is a BETWEEN-group distance, so it stays roughly double the gutter that
       separates one information column from the next. That ratio is the hierarchy. */
    column-gap:clamp(48px,5vw,80px);
    align-items:start}
  /* the rule still spans the whole measure, so it keeps closing off Get in Touch exactly as before */
  .foot .fdiv{grid-column:1/-1;grid-row:1}
  .foot .frow{grid-column:1;grid-row:2}
  /* margin-top was the gap between the two stacked bands. They are no longer stacked, so it goes:
     the two columns now share a top edge, which is what puts the ADDRESS label on the logo's line. */
  /* the gutter is what pays for the payment column. The five marks need 265px to sit on one line;
     with a 52px gutter the remainder track was 226px and RuPay dropped to a second row on its own.
     Taking the gutter to ~35px hands those pixels to the only column that was short, so from about
     1400px up the marks hold one row, and below that they fall into a tidy 3 + 2 rather than an
     orphan. No column lost width to fund it — the space came out of the air between them. */
  .foot .fcols{grid-column:2;grid-row:2;margin-top:0;
    grid-template-columns:auto auto minmax(0,1fr);
    column-gap:clamp(28px,2.4vw,42px)}
  /* the copyright stays the footer's own base line, spanning both columns and flush with the logo */
  .foot .fcopy{grid-column:1/-1;grid-row:3}
}

/* ---------- MOBILE ---------- */
@media(max-width:640px){
  /* SECTION HEADINGS — this block used to set seven of them by hand at 33.6px, with .coverage
     given 38.6px because its own base clamp had started larger. Both rules are gone: 33.6px is
     now the MINIMUM of --h2, so every section heading resolves to exactly the same 33.6px here
     without an override, and .coverage joins the other six instead of running 15% ahead of them.
     The +40% those numbers came from is untouched — 33.6 is still 24 x 1.4, it is just expressed
     once in the token rather than seven times in a media query.
     .plan h2 stays below because it uses --h2-lead, whose minimum is 36px; on a phone it is meant
     to sit with the section headings, not above them.
     .close h2 keeps its own 28.8px further down, exactly as before. */
  .plan h2{font-size:33.6px}

  /* HERO — top pad follows the shorter mobile nav pill.
     min-height:auto is the whole of the height fix. The base rule derives the hero's height from
     the viewport (100svh minus the fold gap and the 20px peek), which is what produced the large
     empty band under the CTA: the box was a screen tall whether or not the content needed it, and
     the next section could only ever show 20px of itself. On a phone the hero is now sized by what
     is in it, and the padding below is what keeps it from feeling cramped. Nothing here is a scroll
     animation or a pin — the hero has neither — so there is no motion to disable, and the fold
     contract this replaces is only replaced BELOW 640px. Desktop and tablet keep the derived
     height exactly. */
  /* top padding: 96px cleared the fixed nav pill (which ends at 85px on a phone) and left the
     eyebrow 11px under it; +50px by request takes that clearance to 61px.
     The bottom stays at 22px. It looks tight written down and is not: the section below contributes
     its own half-gap, so the real distance from the CTA to the next heading is ~130px. Keeping it
     there is also what lets the next section's content clear its scroll-reveal threshold and paint
     at rest instead of sitting at opacity 0 just below the trigger line — and the 50px added above
     spends most of the margin that was holding it there. See the note in the handover. */
  .hero{min-height:auto;padding:146px 18px 22px}
  /* the display size. 14.9vw is not a guess: the longest word measures 161px at the base 32px, so
     one point of font-size buys 5.03px of word, and 0.75 x viewport / 5.03 lands on 14.9vw. That
     holds the longest word at ~75% of the screen at every phone width rather than at one of them.
     Bounded both ways — capped at 64px so the 431-640px band (small tablets, folded phones) does
     not run away, floored at 44px so a 320px screen still reads as a display heading. */
  .hero h1{font-size:clamp(44px,14.9vw,64px)}
  /* RESERVE THE LONGEST WORD. --wc-w is measured in script at the live font size; the mask is
     otherwise shrink-to-fit, so swapping an 11-character word for a 9-character one re-flowed the
     whole heading and shunted the lines under it. Reserving the widest of the four makes the swap
     a change of glyphs only. Applied here and nowhere else: on desktop the heading is one nowrap
     line whose tail genuinely does shift with the word, and that is existing behaviour to leave be.
     text-align:center because the reserved box is wider than every word but the longest, and
     without it a shorter word would sit against the left edge of its own reservation. */
  .hero h1 .wc-mask{min-width:var(--wc-w,0px);text-align:center}
  .hero .eyebrow{margin-bottom:18px}
  .hero .sub{margin-top:20px;max-width:34ch}
  /* 60px was breathing room inside a box that was a screen tall regardless. With the hero sized by
     its content that gap is real space, and 34px keeps the CTA clearly separate without re-opening
     the emptiness this change exists to remove. */
  .hero .actions{margin-top:28px}
  /* keep the CTA's step-up in proportion on a phone, where the base .btn is already large */
  .lead-cta{font-size:16.5px;padding:15px 17px 15px 27px}
  .lead-cta .ic{width:31px;height:31px}

  /* GALLERY */
  .gallery{padding:22px 0 26px}
  .gallery .lead{margin-bottom:34px;padding:0 20px}
  .gallery .viewport{perspective:1200px}
  .gallery .track{gap:14px}
  .card{padding:18px;border-radius:18px}
  .card .q{font-size:19px}
  .card .a{font-size:14px}
  /* the card narrows to 82vw here, so everything wraps more. Give the question a fourth line
     so none is cut, let the answer run to six (card 1 needs all six), and take the truncation
     out of the long entries' answers — the fold's tallest card stays 315px, as before. */
  .card .q{-webkit-line-clamp:4}
  .card .a{-webkit-line-clamp:6}
  .card.long-q .a{-webkit-line-clamp:3}

  /* COVERAGE — the chips carry the whole list on a phone, so they lose a little of their padding
     and a half-point of type to keep the block from running long. Nothing wraps out of view. */
  .coverage .cgroups{gap:26px}
  .coverage .chips{gap:8px}
  .coverage .chips li{padding:8px 13px;font-size:13.5px}

  /* DOWNLOAD — stacked, because two 3:1 badges side by side on a phone would each have to shrink
     below the size either store allows before they fit. Stacked they keep a comfortable tap height
     instead. The badge is capped at 240px so it does not become a full-bleed slab on a wide phone,
     and at min(72vw,240px) it can never reach the viewport edge, so nothing here can overflow.
     The row gap opens from 14 to 16px: side by side that space reads as a divider between two
     things, stacked it is the space a thumb has to miss in. */
  .dl .dlrow{flex-direction:column;gap:16px}
  .dl .dlbadge img{height:auto;width:min(72vw,240px)}

  /* PRICING — label and price have no room to sit side by side */
  .pcard{padding:26px 22px;border-radius:22px}
  .pcard .row1{flex-direction:column;gap:12px}
  .pcard .per{text-align:left}
  .pcard ul{margin:18px 0}
  .plan .lead{font-size:16px}

  /* LATEST JUDGEMENTS — the same phone treatment the FAQ list below takes: the section padding
     and heading come down to the shared 48px/24px, and the gap between cards closes to 12px.
     The headnote stays at four lines rather than five: a phone line carries roughly half the
     words a desktop one does, so five lines here is a wall of type rather than a preview, and
     the script re-cuts against whatever this number is.
     The section padding that used to open this block is gone — a phone-only 48px was exactly the
     per-breakpoint exception the spacing system replaces. Everything below is internal. */
  .judg .jlist{gap:12px}
  .judg .j{--hn-lines:4;padding:22px 20px 0}
  .judg .hn{font-size:14.5px}

  /* WHATSAPP COMMUNITY — the card takes the phone padding and radius the pricing card takes, and
     the button goes full width using the same three declarations .pcard .btn uses for it. */
  .wacta .wacard{padding:26px 22px;border-radius:18px}
  .wacta .btn{width:100%;justify-content:center;padding-left:26px}

  /* FAQ — section padding removed; the spacing system owns the gap. Internal type only here. */
  .faq .lead{font-size:16px}
  .faq .list{gap:12px}
  .faq .q{font-size:16px;gap:14px}
  .faq .ans p{font-size:15px}

  /* CLOSE — keeps its phone min-height and its own 18px side padding; the vertical padding is the
     spacing system's, so it is set as longhands here and left to that rule. */
  .close{min-height:auto;padding-left:18px;padding-right:18px}
  .close .actions{margin-top:28px}
  .close h2{font-size:28.8px}   /* 24 + 20% */

  /* CONTACT — single column, full-width tap targets. Section padding removed for the same reason. */
  .contact .lead{font-size:16px}
  .contact .fwrap{padding:22px;border-radius:22px}
  .contact .grid{grid-template-columns:1fr;gap:16px}
  .contact .phone{grid-template-columns:92px 1fr}
  .contact input,.contact select{padding:14px}

  /* SPLASH — 42vw is barely legible on a phone */
  .splash-logo-wrap{width:min(320px,66vw)}

  /* FOOTER — everything stacks and centres */
  .foot{padding:44px 0 30px}
  /* the phone gets the same hierarchy as the wider footer, on its own numbers: the link sits close
     under the logo (45 → 26px) so the two read as one centred block, and the larger gap below is
     what hands off to the stacked information columns. Top-heavy before — 45 above and 33 below
     left the link nearer the columns than the mark it belongs to. Everything is centred here, so
     the link cannot collide with anything: it is one line in a single-column stack. */
  /* The phone footer is left-aligned now, not centred. Centred, the six information blocks formed a
     ribbon with a different left edge on every line, which is the opposite of the "consistent left
     edges" this pass is for; and because a centred block cannot share a row with anything, all six
     had to stack, which is what made the phone footer so tall. Left-aligned, one edge runs from the
     logo through the link, every label, every value and the copyright, and the short blocks can
     pair up (see .fcols below). Same type, same colours, same sizes — only the axis changed. */
  .foot .frow{align-items:flex-start;text-align:left;gap:20px}
  .foot .flogo{align-self:flex-start}
  .foot .flinks{justify-content:flex-start;gap:14px 22px}
  /* thumb target. The link's own box is a 18px-tall line of 14.5px type, which is fine to read and
     mean to hit, so an invisible ::before is stretched past its edges to ~44px. It is a pseudo
     ELEMENT, not padding: padding would grow the anchor's box, push the ::after hover underline
     down with it, and add its own height to the gaps either side that were just balanced. This
     changes the hit area and nothing else. */
  .foot .flinks a::before{content:"";position:absolute;left:-10px;right:-10px;top:-13px;bottom:-13px}
  /* the same treatment, extended to the two footer links that never got it. Measured on a phone
     they were the smallest targets on the site: the phone number and the email are 18px-tall lines
     of text — well under the 44px a thumb needs and under even the 24px WCAG 2.2 asks for. The
     pseudo-element grows the HIT AREA only: using padding would change each element's box and
     reflow the two-column information grid above. */
  .foot .flink,.foot .fmail{position:relative}
  .foot .flink::before,.foot .fmail::before{content:"";position:absolute;left:-8px;right:-8px;top:-13px;bottom:-13px}
  /* the phone's own separation between the logo/link block and the columns. Only the margin lives
     here — the 28px stack gap between ADDRESS/MOBILE/EMAIL/CIN is the spacing WITHIN the contact
     block and stays exactly as it was. */
  /* Two columns, so the short blocks pair off instead of each taking a whole row. The source
     order does the placement on its own — address, mobile, email, CIN, payment — once the wide
     ones are told to span:
         ADDRESS  ADDRESS
         MOBILE   EMAIL
         CIN      CIN
         PAYMENT  PAYMENT
     Five rows become four. CIN spans because FOLLOW used to be its partner on that line; left in a
     single track it would sit in the left half with a dead 139px beside it, which is the one place
     removing FOLLOW would otherwise have shown as a hole. Spanning also puts it in the same
     full-width family as ADDRESS and PAYMENT, so the phone stack reads as three bands with one
     paired row rather than a broken grid — and because CIN is a single short line, the row it
     occupies is no taller than before.
     Measured at the narrowest phone width this site supports, 320px: the content box is 307px, so
     each column is ~139px against a 122px email — every value still fits its own column without
     wrapping, and the three spanning rows have the full 307px. The payment marks need 265px, so
     they stay on ONE clean row rather than wrapping. Nothing here can overflow: every track is a
     fraction of the container. */
  .foot .fcols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
    align-items:start;text-align:left;
    column-gap:22px;row-gap:26px;margin-top:34px}
  .foot .fcol-addr{grid-column:1/-1}
  .foot .fcol-cin {grid-column:1/-1}
  .foot .fcol-pay {grid-column:1/-1}
  .foot .flabel{margin-bottom:10px}
  /* 26ch was the measure for a centred block in a single column. Spanning the full width the
     address has room to run, and a longer measure means fewer, more even lines. */
  .foot .fcol-addr .fval{max-width:34ch}
  .foot .fpay{justify-content:flex-start;max-width:none}
  /* the only place the line is allowed to break; left-aligned onto the same edge as everything above */
  .foot .fcopy{white-space:normal;text-align:left;margin-inline:0}
}

@media (prefers-reduced-motion:reduce){
  *{scroll-behavior:auto!important}
  .hero h1 .ln i,.reveal{opacity:1!important;transform:none!important}
  .lead-cta:hover{animation:none!important}
  .pillars .pin,.pillars .stage{height:auto!important}
  .pillars .panel{position:relative!important;opacity:1!important;margin:40px 0}
  /* the reveal never runs here, so .typed is never set — show a steady caret instead of none */
  .pillars .p.brand .cur{opacity:1;animation:none!important}
  #pcard{opacity:1!important;transform:none!important}
  /* the feature row's sequential emphasis never starts here (its timeline is below the reduce
     return), so no card is ever .on and there is nothing to cross-fade. Cutting the transition too
     means the rail's snap-to-active mark appears at once instead of easing in — the arrows still
     work, they just move the rail without animating it. */
  .feat .f{transition:none!important}
  .splash{display:none!important}
  .nav{opacity:1!important}
}

/* SPLASH — intro loader (nav's opacity is set to 0 by JS only once the animated
   handoff is actually running, so a blocked/failed script leaves the real nav visible).
   .splash is a pure perspective host; .splash-panel is the actual loader "face" that
   tips up and away like a cube turning, hinged at its top edge, handing off to the
   hero rising into place from above on the same axis. */
.splash{position:fixed;inset:0;z-index:200;pointer-events:none;perspective:1800px}
/* flat fill, no gradient — the wordmark's white stroke and marks sit on one even ground */
.splash-panel{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:var(--ink);
  transform-origin:50% 0%;backface-visibility:hidden;will-change:transform}
.splash-logo-wrap{width:min(320px,42vw);will-change:transform;transform-origin:50% 50%}
.splash-logo{width:100%;height:auto;display:block;overflow:visible}
.splash-logo #splashOutline{fill:none;stroke:#fff;stroke-width:1.6}
#hero{transform-origin:50% 0%;will-change:transform}

/* ══════════════════════════════════════════════════════════════════════════════════════════════
   POLICY PAGES — one alignment system, shared by all four documents.
   ══════════════════════════════════════════════════════════════════════════════════════════════
   THE CONTENT BOUNDARY. Every text block on these pages — heading group, body, tables, contact —
   starts on one vertical line, and that line is set in exactly one place: --pmeasure.

   It is a rem, and that is the fix rather than a preference. The previous rules gave .phead,
   .pbody and .pfoot the same declaration, max-width:78ch, and got three DIFFERENT widths from it:
   ch resolves against each element's OWN font-size, so at 16px the head and contact blocks came
   out 799.76px while the 16.5px body came out 824.75px. Three widths centred in one container
   means three left edges — measured at 1440 they sat at 320px, 308px and 351px. A rem resolves
   against the root, so one number now means one width for every block, whatever its type size.

   --pindent is the list step, and the only deliberate offset on the page. Everything else meets
   the boundary flush; nothing introduces a left inset of its own. */
.policy{--pmeasure:51.5rem;--pindent:22px}

.policy{padding-top:var(--sec-pad);padding-bottom:var(--sec-pad)}
/* clears the fixed nav pill on the first screen, where a policy page opens at the very top and has
   no hero above it to do that job */
.policy{padding-top:calc(var(--navh,80px) + clamp(48px,6vw,84px))}

/* every block, one measure, one left edge. The tab strip and the per-policy title and date joined
   this list rather than getting widths of their own — that is the whole point of the boundary: a
   new component aligns by being added here, not by being positioned. */
.policy .phead,
.policy .ptabs,
.policy .ptitle,
.policy .ppanel .pmeta,
.policy .pbody{max-width:var(--pmeasure);margin-inline:auto}

.policy .phead{margin-bottom:clamp(34px,4vw,52px)}
.policy .phead .eyebrow{margin-bottom:18px}
/* the h2 curve every other fold uses, one notch down: this is an h1 on a page with no hero, so it
   should read as a page title rather than compete with the homepage headline */
.policy h1{font-family:var(--disp);font-weight:400;letter-spacing:-.035em;line-height:1.05;
  font-size:clamp(33.6px,4.4vw,58px);color:var(--ink);text-wrap:balance}
.policy .pmeta{margin-top:14px;font-size:15px;color:var(--ink-3)}

/* ── THE TAB STRIP ─────────────────────────────────────────────────────────────────────────────
   Four documents on one page. Nothing here is a new visual idea: the resting pill is the coverage
   chip (same translucent white, same 11%-blue hairline), the active pill is the site's --blue with
   white type, and the focus ring is the one the footer links already use. Only the radius is new
   to this block, and 100px is the .eyebrow pill's own value.

   Flex-wrap, not a scroller: the brief rules out horizontal overflow, and a wrapped row keeps all
   four names readable at every width. min-height 44px is the touch target, and it is on the base
   rule rather than a mobile override so a tablet with a finger gets it too. */
.policy .ptabs{display:flex;flex-wrap:wrap;gap:9px 10px;margin-bottom:clamp(34px,4vw,52px)}
.policy .ptab{appearance:none;-webkit-appearance:none;cursor:pointer;
  font-family:var(--disp);font-weight:500;font-size:15px;letter-spacing:-.005em;line-height:1.25;
  min-height:44px;padding:11px 18px;border-radius:100px;
  background:rgba(255,255,255,.66);border:1px solid rgba(25,53,255,.11);color:var(--ink-2);
  transition:background-color .28s ease,border-color .28s ease,color .28s ease}
.policy .ptab:hover{border-color:rgba(25,53,255,.3);color:var(--ink)}
.policy .ptab:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
/* the selected state is driven by aria-selected, so the attribute that tells a screen reader which
   tab is current is the same one that paints it — they cannot drift apart */
.policy .ptab[aria-selected="true"]{background:var(--blue);border-color:var(--blue);color:#fff}
.policy .ptab[aria-selected="true"]:hover{color:#fff}

.policy .ppanel[hidden]{display:none}
.policy .ppanel:focus-visible{outline:2px solid var(--blue);outline-offset:6px;border-radius:6px}
/* the document's own title, one notch under the page h1 so "Privacy and Terms" stays the page and
   this reads as the document inside it */
.policy .ptitle{font-family:var(--disp);font-weight:400;letter-spacing:-.03em;line-height:1.1;
  font-size:clamp(25.2px,3vw,36px);color:var(--ink);text-wrap:balance}
.policy .ppanel .pmeta{margin-top:12px}
.policy .ppanel .pbody{margin-top:clamp(28px,3.2vw,40px)}

/* the reading column */
.policy .pbody{color:var(--ink-2);font-size:16.5px;line-height:1.72}
.policy .pbody > * + *{margin-top:18px}
/* clause headings. Generous space ABOVE, tight below, so each numbered clause reads as a unit
   rather than as evenly spaced lines. The clause NUMBERS live in the heading text ("1. Eligibility"),
   so the numbered sequence aligns on the boundary like every other heading — there is no <ol> whose
   markers could sit outside the measure. */
.policy .pbody h2{font-family:var(--disp);font-weight:500;font-size:clamp(21px,2.1vw,26px);
  letter-spacing:-.025em;line-height:1.25;color:var(--ink);margin-top:clamp(38px,4vw,54px)}
.policy .pbody h2 + *{margin-top:14px}
.policy .pbody h3{font-family:var(--disp);font-weight:600;font-size:16px;letter-spacing:.01em;
  color:var(--ink);margin-top:clamp(24px,2.6vw,32px)}
.policy .pbody h3 + *{margin-top:10px}
.policy .pbody strong{font-weight:600;color:var(--ink)}
.policy .pbody a{color:var(--blue);text-decoration:underline;text-underline-offset:2px;
  text-decoration-thickness:1px;
  /* a long address or URL wraps inside the measure instead of pushing the column wide */
  overflow-wrap:anywhere}
.policy .pbody a:hover{text-decoration-thickness:2px}

/* LISTS — one step in, at every level. The rule is on the li, so a nested list inherits it and
   lands exactly one more step in (22px, then 44px) without a second rule inventing its own number.
   padding-left on the li, never margin on the ul, so the marker and the text move together. */
.policy .pbody ul{list-style:none;padding:0;margin:0}
.policy .pbody li{position:relative;padding-left:var(--pindent);margin-top:9px}
.policy .pbody li ul{margin-top:9px}
/* the same blue the tick marks and accents use, as a small dot rather than a bullet glyph */
.policy .pbody li::before{content:"";position:absolute;left:4px;top:.72em;width:5px;height:5px;
  border-radius:50%;background:var(--blue);opacity:.55}

/* TABLES — ruled rows, not a panel. A bordered, padded card would inset the first column's text
   away from the boundary every paragraph above it sits on, and the only ways back are a negative
   margin (which overflows the viewport on a phone, where the measure IS the container) or a
   breakpoint-specific exception (which is exactly the per-viewport inconsistency this system
   removes). Ruled rows need neither: the first column has no left padding, so its text meets the
   boundary flush at every width, and the separation between columns comes from the gap on the
   second column instead. The wrapper still scrolls on its own if a table ever outgrows the column,
   so the page itself never scrolls sideways. */
.policy .ptable{overflow-x:auto;margin-top:16px}
.policy table{border-collapse:collapse;width:100%;font-size:15.5px}
.policy th,.policy td{text-align:left;padding:13px 0;border-bottom:1px solid var(--line);
  vertical-align:top}
.policy th + th,.policy td + td{padding-left:28px}
.policy th{font-weight:600;color:var(--ink)}
.policy td{color:var(--ink-2)}
.policy tr:last-child th,.policy tr:last-child td{border-bottom:0}


@media(max-width:640px){
  /* the measure is already wider than the viewport here, so the container governs the boundary and
     every block still shares it. Type only — no alignment exception. */
  .policy .pbody{font-size:16px;line-height:1.68}
  .policy .pmeta{font-size:14.5px}
  .policy table{font-size:14.5px}
  .policy th,.policy td{padding:11px 0}
  .policy th + th,.policy td + td{padding-left:18px}

  /* TABS ON A PHONE — a 2×2 grid rather than free wrapping. Left to flex-wrap at this width the
     four pills fall into three ragged rows, because "Subscription Usage Policy" is wide enough to
     take a row to itself and leave a hole beside it. Two equal columns give a tidy block, equal
     touch targets, and room for the long label to take two lines inside its own pill. Still no
     scroller and still no hidden names — every policy stays on screen and readable. */
  .policy .ptabs{display:grid;grid-template-columns:1fr 1fr;gap:9px}
  .policy .ptab{font-size:14.5px;padding:10px 12px;text-align:center;
    display:flex;align-items:center;justify-content:center}
}