/* ═══════════════════════════════════════════════════════════════════════════
   sk2-page.css — Daylight, section styles + responsive
   Loaded after sk2-tokens.css. See that file's header for the namespace
   rationale. Covers every screen in the locked artifact (home, product,
   company, legal, auth, /start/, demo, thanks) so later phases of this build
   only add templates, not new CSS files.

   The artifact ran inside a review harness that gave it a `container-type`
   ancestor, so its responsive rules were written twice — once as @container,
   once as an @media fallback "in case the render path did not give a working
   container-query context". A real Django page has no such ancestor, so only
   the @media form is ported here; the @container half would simply never
   fire and is dead weight in production.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── nav ───────────────────────────────────────────────────────────── */
/* Daylight's own navbar, mega-menu and mobile drawer CSS lived here and has
   been REMOVED, not commented out. Founder call 2026-09-02, comparing both
   side by side: keep the real public navbar (`{% sk_navbar %}` + sk-nav.css),
   which looks better and is generated from landing/site_nav.py rather than
   being a second hand-typed copy of the same nav. Every Daylight screen still
   to be built uses that component too, so this block has no future caller.
   The tokens that make it match this page live in sk2-tokens.css (body.sk2).
   Do not re-add a page-local navbar here. */

/* ── hero ──────────────────────────────────────────────────────────── */
/* padding-top clears the navbar, which is `position:fixed` (sk-nav.css) and
   so takes no space in flow. Read from --sk-nav-h rather than typed, because
   that token already steps 68 -> 56 -> 54px at the shared breakpoints; the
   hero's own gradient still starts at y=0 and shows through the frosted bar,
   which is the glass effect the founder pointed at on the live site. */
.sk2 .hero { position:relative; padding:calc(var(--sk-nav-h) + 76px) 0 0; }
.sk2 .hero::before { content:""; position:absolute; left:50%; top:-280px; width:1500px; height:820px; transform:translateX(-50%);
                background:radial-gradient(48% 46% at 50% 50%, rgba(109,94,248,.16), rgba(109,94,248,0) 72%),
                           radial-gradient(38% 40% at 22% 46%, rgba(46,155,214,.13), transparent 70%),
                           radial-gradient(34% 38% at 78% 40%, rgba(139,79,214,.13), transparent 70%);
                pointer-events:none; filter:blur(6px); }
.sk2 .hero::after { content:""; position:absolute; inset:0; pointer-events:none;
               background-image:linear-gradient(var(--sk2-line) 1px, transparent 1px), linear-gradient(90deg, var(--sk2-line) 1px, transparent 1px);
               background-size:72px 72px; opacity:.35;
               mask-image:radial-gradient(64% 56% at 40% 26%, #000 0%, transparent 76%);
               -webkit-mask-image:radial-gradient(64% 56% at 40% 26%, #000 0%, transparent 76%); }
.sk2 .hero__in { position:relative; z-index:2; max-width:var(--sk2-maxw); margin:0 auto; padding:0 var(--sk2-gut);
             display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.02fr); gap:48px; align-items:center; }
.sk2 .hero__copy { max-width:660px; }
.sk2 .hero h1 { margin-top:0; }
.sk2 .hero__copy h1:first-child { margin-top:0; }
.sk2 .hero__sub { margin-top:20px; max-width:580px; font-size:18.5px; line-height:1.6; color:var(--sk2-ink-2); }
.sk2 .hero__cta { display:flex; gap:10px; flex-wrap:wrap; margin-top:28px; }
.sk2 .hero__meta { display:flex; gap:6px 22px; flex-wrap:wrap; margin-top:20px; font-size:13.5px; color:var(--sk2-ink-3); font-weight:600; }
.sk2 .hero__meta i { font-style:normal; color:var(--sk2-good); margin-right:6px; font-weight:800; }
.sk2 .hero__price { margin-top:16px; font-size:14.5px; color:var(--sk2-ink-3); line-height:1.55; }
.sk2 .hero__price b { color:var(--sk2-ink); font-weight:800; font-size:16px; letter-spacing:-.02em; }
.sk2 .hero__price span { color:var(--sk2-ink-3); }

/* Compact + wider, per founder review: the panel is the hero's proof, so it
   earns width from the copy column, and the header rule sat too far from the
   text above it. */
.sk2 .hpanel { padding:16px 18px 14px; border-radius:var(--sk2-r3);
          background:linear-gradient(175deg,#FFFFFF 0%,#FBFAFF 100%);
          border:1px solid var(--sk2-line); box-shadow:var(--sk2-sh-3); }
.sk2 .hpanel__h { display:flex; align-items:center; gap:9px; font-family:var(--sk2-mono); font-size:12px; font-weight:700; letter-spacing:.1em;
             text-transform:uppercase; color:var(--sk2-ink-2); padding-bottom:10px; margin-bottom:0; border-bottom:1px solid var(--sk2-line); }
.sk2 .hpanel__h span:last-child { margin-left:auto; display:flex; align-items:center; gap:6px; color:var(--sk2-good); font-weight:700; letter-spacing:.04em; text-transform:none; font-size:12px; }
.sk2 .hstat { display:grid; grid-template-columns:28px minmax(0,1fr) 52px auto; gap:10px; align-items:center; padding:9px 0; border-bottom:1px solid var(--sk2-line); }
/* Rows arrive one after another once the panel reveals, so the eye is led
   down the list instead of the whole block appearing at once. */
.sk2 .hpanel .hstat { opacity:0; transform:translateY(6px);
                 transition:opacity .45s cubic-bezier(.16,1,.3,1), transform .45s cubic-bezier(.16,1,.3,1); }
.sk2 .hpanel.in .hstat { opacity:1; transform:none; }
.sk2 .hpanel.in .hstat:nth-of-type(1){ transition-delay:.16s }
.sk2 .hpanel.in .hstat:nth-of-type(2){ transition-delay:.26s }
.sk2 .hpanel.in .hstat:nth-of-type(3){ transition-delay:.36s }
.sk2 .hpanel.in .hstat:nth-of-type(4){ transition-delay:.46s }
.sk2 .hpanel.in .hstat:nth-of-type(5){ transition-delay:.56s }
.sk2 .hstat__spark { display:block; width:52px; height:20px; }
/* `:last-of-type` never matched: .hpanel__f is a div and so IS the last div
   child, so the final .hstat kept its bottom border and sat directly above
   the footer's own top border — the doubled line under "Tasks closed today".
   Matching on "the row followed by the footer" says what is actually meant. */
.sk2 .hstat:has(+ .hpanel__f) { border-bottom:0; padding-bottom:2px; }
.sk2 .hstat__ic { width:28px; height:28px; border-radius:9px; display:grid; place-items:center; font-size:12px; line-height:1; flex:none; }
.sk2 .hstat__ic--n { background:var(--sk2-brand-wash); color:var(--sk2-brand); }
.sk2 .hstat__ic--r { background:var(--sk2-risk-wash); color:var(--sk2-risk); }
.sk2 .hstat__ic--w { background:var(--sk2-warn-wash); color:var(--sk2-warn); }
.sk2 .hstat b { font-size:14.5px; font-weight:700; letter-spacing:-.01em; }
.sk2 .hstat small { display:block; font-size:12px; font-weight:700; letter-spacing:.08em; color:var(--sk2-ink-3); margin-top:3px; text-transform:uppercase; }
.sk2 .hstat__pill { display:inline-flex; align-items:center; justify-content:center; min-width:38px; height:30px; padding:0 11px;
               border-radius:99px; font-size:15.5px; font-weight:800; letter-spacing:-.02em; }
.sk2 .hstat__pill--n { background:var(--sk2-brand-wash); color:var(--sk2-brand); }
.sk2 .hstat__pill--r { background:var(--sk2-risk-wash); color:var(--sk2-risk); }
.sk2 .hstat__pill--w { background:var(--sk2-warn-wash); color:var(--sk2-warn); }
.sk2 .hstat__ic--g { background:var(--sk2-good-wash); color:var(--sk2-good); }
.sk2 .hstat__pill--g { background:var(--sk2-good-wash); color:var(--sk2-good); }
.sk2 .hpanel__f { padding-top:15px; margin-top:5px; border-top:1px dashed var(--sk2-line-2); font-size:12.5px; color:var(--sk2-ink-3); line-height:1.55; }
.sk2 .hpanel__f b { color:var(--sk2-ink); font-weight:700; }
.sk2 .hpanel__meta { display:flex; align-items:center; gap:6px; margin-top:9px; font-size:12px; color:var(--sk2-ink-3); font-weight:600; }
.sk2 .hpanel__meta i { font-style:normal; color:var(--sk2-brand); font-size:12px; }

.sk2 .stagewrap { max-width:var(--sk2-maxw-wide); margin:0 auto; padding:0 var(--sk2-gut); }

/* the scroll-revealed product shot */
.sk2 .reveal { position:relative; z-index:2; max-width:var(--sk2-maxw-shot); margin:56px auto 0; padding:0 var(--sk2-gut);
          perspective:2200px; perspective-origin:50% 0%; }
/* A .reveal supplies its own gutter because on the home page it sits directly
   in the section, outside any .wrap. Inside a .wrap — which the product page's
   annotated block is — that gutter lands on top of the wrap's own, so the frame
   came out 20px in from a card sitting 10px in. One frame, two left edges down
   the same column. The wrap already did the job; the reveal stands down. */
.sk2 .wrap .reveal { padding-left:0; padding-right:0; }
.sk2 .reveal__inner { transform-style:preserve-3d;
                 transform: rotateX(calc((1 - var(--p,0)) * 17deg)) scale(calc(.9 + var(--p,0) * .1)) translateY(calc((1 - var(--p,0)) * 26px));
                 opacity:calc(.55 + var(--p,0) * .45);
                 filter:blur(calc((1 - var(--p,0)) * 1.4px));
                 will-change:transform, opacity; }
.sk2 .reveal__glow { position:absolute; left:50%; bottom:-6%; width:74%; height:56%; transform:translateX(-50%) scale(calc(.7 + var(--p,0)*.3));
                background:radial-gradient(50% 50% at 50% 50%, rgba(42,31,168,calc(.30 * var(--p,0))), transparent 70%);
                filter:blur(46px); pointer-events:none; z-index:-1; }

/* ── product shot frame ────────────────────────────────────────────── */
/* Square, not rounded. Founder call 2026-09-02: "do not use a rounder shape,
   make it original." A 20px radius on the frame plus overflow:hidden was
   clipping the corners of the capture itself — the dark sidebar visibly cut
   away at the bottom left — so the page was showing an edited picture of the
   product rather than the product. The frame keeps its 1px border and its
   shadow, which is what still reads as "a screen"; the SHAPE is now the
   screenshot's own. Card-shaped rounding still applies where a shot sits
   flush inside a card, because that is the card's shape, not the image's. */
.sk2 .shot { border:1px solid var(--sk2-line-2); border-radius:0; overflow:hidden; background:var(--sk2-paper); box-shadow:var(--sk2-sh-4); }
.sk2 .shot--sm { border-radius:0; box-shadow:var(--sk2-sh-2); }

/* A frame sitting flush at the top of a card is part of that card, not a
   second one inside it — same rule as .demo-form. Expressed here rather than
   as inline styles on each instance, so the shared _sk2_shot.html partial
   stays the single definition of the frame. */
.sk2 .card > .shot { border:0; border-radius:0; box-shadow:none; }
/* Browser-frame chrome, kept deliberately thin — founder has now asked for
   this twice (48px -> 25px at artifact rev 1, thinner again here). The bar's
   height is padding + the tallest child, so line-height:1 matters as much as
   the padding: the url sits at the 12px type floor and would otherwise carry
   ~19px of leading and set the height on its own. One rule serves .shot and
   .shot--sm, so every frame on every screen stays in step. */
.sk2 .shot__bar { display:flex; align-items:center; gap:5px; padding:4px 10px; line-height:1;
                  background:var(--sk2-paper-2); border-bottom:1px solid var(--sk2-line); }
.sk2 .shot__bar i { width:6px; height:6px; border-radius:50%; background:var(--sk2-line-2); flex:none; }
.sk2 .shot__url { margin-left:10px; font-family:var(--sk2-mono); font-size:12px; line-height:1; color:var(--sk2-ink-3); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sk2 .shot__body { position:relative; }
.sk2 .shot__body img { width:100%; height:auto; display:block; }
/* No aspect-ratio + object-fit:cover on the small frames. The artifact used a
   fixed 16/10 crop because it was showing placeholder boxes, but with REAL
   screenshots that silently cuts the bottom off every shot, and the founder's
   standing rule is the whole uncropped screenshot (the same rule sk-mobile.css
   exists to enforce with object-fit:contain). The image sets the frame height
   instead, so nothing is ever cropped at any width. */

/* ── section shell ─────────────────────────────────────────────────── */
.sk2 .sec { padding:120px 0; position:relative; }
.sk2 .sec--sunk { background:var(--sk2-paper-2); }
.sk2 .sec--edge { border-top:1px solid var(--sk2-line); }
.sk2 .sec__head { max-width:700px; margin:0 auto 60px; text-align:center; }
.sk2 .sec__head h2 { margin-top:18px; }
.sk2 .sec__head p { margin-top:18px; font-size:18px; color:var(--sk2-ink-2); }
.sk2 .sec__head--l { margin-left:0; text-align:left; }

/* ── bento ─────────────────────────────────────────────────────────── */
/* Explicit rows, NOT grid-auto-rows:1fr. The bento is six equal tiles (rows 1
   and 2) followed by the full-width Synq panel (row 3), and that panel is ~4x
   a tile. Equalising every row would have stretched all six tiles to the
   panel's height. Naming the two tile rows as 1fr equalises exactly the rows
   that should match and leaves the panel on `auto`. */
.sk2 .bento { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); grid-template-rows:1fr 1fr auto auto; gap:18px; }
/* A flex column, so every tile's arrow sits on the bottom edge no matter how
   many lines its description wraps to, and the padding comes from the shared
   card token rather than a number of its own (it was 28 here and 26 on .mini,
   which is the "inconsistent padding" the founder saw). */
.sk2 .bt { grid-column:span 2; display:flex; flex-direction:column; padding:var(--sk2-card-pad);
      background:var(--sk2-paper); border:1px solid var(--sk2-line); border-radius:var(--sk2-r3);
      box-shadow:var(--sk2-sh-1); transition:transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s ease, border-color .3s ease; }
.sk2 .bt:hover { transform:translateY(-4px); box-shadow:var(--sk2-sh-3); border-color:var(--sk2-line-2); }
.sk2 .bt p:not(.tiernote) { font-size:14.5px; color:var(--sk2-ink-2); margin-top:12px; }
/* The description has to clear the arrow, or a long one collides with it. */
.sk2 .bt p:not(.tiernote) { padding-bottom:14px; }
.sk2 .bt:hover .card__go { background:var(--sk2-brand); color:#fff; transform:translateX(2px); }
.sk2 .bt--hero { grid-column:span 6; padding:0; overflow:hidden; border-color:var(--sk2-brand-line);
            background:linear-gradient(155deg,var(--sk2-brand-wash) 0%, var(--sk2-paper) 46%); }
.sk2 .bt--hero:hover { transform:none; }
.sk2 .bthero { display:grid; grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr); gap:40px; align-items:center; padding:36px; }
.sk2 .bthero h3 { font-size:clamp(22px,2.4cqi,30px); }
/* `:not(.tiernote)` matters, and it is the third time this shape has bitten
   this stylesheet. `.sk2 .bthero p` is (0,2,1) and beats `.sk2 .tiernote`
   at (0,2,0), so the plan chip inside the Automator panel silently took
   the panel's body size instead of its own. Exclude the child from the
   descendant rule rather than bumping the child — bumping starts an arms
   race the next component joins. */
.sk2 .bthero p:not(.tiernote) { font-size:16px; margin-top:12px; }

/* ── the flow: one record across five apps ─────────────────────────── */
.sk2 .flow { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:12px; position:relative; }
.sk2 .flow::before { content:""; position:absolute; left:4%; right:4%; top:52px; height:2px; border-radius:2px;
                background:linear-gradient(90deg,var(--sk2-brand-line),var(--sk2-brand),var(--sk2-brand-line)); opacity:.5;
                transform:scaleX(var(--p,0)); transform-origin:left; transition:transform 1.1s cubic-bezier(.16,1,.3,1); }
.sk2 .fl { position:relative; text-align:center; }
.sk2 .fl__n { width:44px; height:44px; margin:0 auto; border-radius:50%; display:grid; place-items:center;
         font-size:14px; font-weight:800; background:var(--sk2-paper); border:2px solid var(--sk2-line-2); color:var(--sk2-ink-3); position:relative; z-index:2;
         transition:border-color .4s ease,color .4s ease,background .4s ease,box-shadow .4s ease; }
.sk2 .fl.on .fl__n { border-color:var(--sk2-brand); color:#fff; background:var(--sk2-brand); box-shadow:0 0 0 6px var(--sk2-brand-wash); }
.sk2 .fl__app { display:inline-block; margin-top:18px; font-size:12px; font-weight:800; letter-spacing:.1em;
           color:var(--sk2-brand); background:var(--sk2-brand-wash); border-radius:99px; padding:4px 10px; }
.sk2 .fl h4 { font-size:15.5px; margin-top:12px; line-height:1.35; }
.sk2 .fl p { font-size:13.5px; color:var(--sk2-ink-2); margin-top:7px; }
.sk2 .fl__tag { display:inline-block; margin-top:12px; font-size:12px; font-weight:800; letter-spacing:.05em; border-radius:99px; padding:4px 10px; }
.sk2 .fl__tag--a { color:var(--sk2-good); background:var(--sk2-good-wash); }
.sk2 .fl__tag--y { color:var(--sk2-ink-3); background:var(--sk2-paper-3); }
.sk2 .guards { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); grid-auto-rows:1fr; gap:14px; margin-top:44px; }
.sk2 .gd { padding:20px; border-radius:var(--sk2-r2); background:var(--sk2-paper); border:1px solid var(--sk2-line); }
.sk2 .gd b { display:block; font-size:14.5px; }
.sk2 .gd span { display:block; font-size:13.5px; color:var(--sk2-ink-2); margin-top:6px; }

/* ── synq visual ───────────────────────────────────────────────────── */
.sk2 .synq { display:grid; grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr); gap:56px; align-items:center; }
.sk2 .synqpts { display:grid; gap:22px; margin-top:30px; }
.sk2 .spt { padding-left:20px; border-left:2px solid var(--sk2-brand-line); }
.sk2 .spt h4 { font-size:17.5px; }
.sk2 .spt p { font-size:14.5px; color:var(--sk2-ink-2); margin-top:7px; }
.sk2 .viz { padding:26px; background:var(--sk2-paper); border:1px solid var(--sk2-line); border-radius:var(--sk2-r3); box-shadow:var(--sk2-sh-3); }
/* The diagram has a fixed intent size (viewBox 560x320 / 340x480). Letting it
   stretch to fill a wide single-column layout (tablet, .synq collapses to
   one column at <=940px) scaled the app boxes up until they read as oversized
   buttons rather than small labels in a diagram. */
.sk2 .viz .vzh { max-width:440px; margin:0 auto; }
.sk2 .viz .vzv { max-width:270px; margin:0 auto; }
.sk2 .viz__h { display:flex; align-items:center; gap:10px; font-family:var(--sk2-mono); font-size:12px; letter-spacing:.1em; color:var(--sk2-ink-3); text-transform:uppercase; }
.sk2 .viz__h span:last-child { margin-left:auto; color:var(--sk2-brand); }
.sk2 .vzsrc g, .sk2 .vzline { transition:opacity .4s ease; }
.sk2 .vzsrc g.dim, .sk2 .vzline.dim { opacity:.28; }
.sk2 .vzcap { display:flex; align-items:baseline; gap:9px; margin-top:14px; padding:11px 14px; border-radius:var(--sk2-r1);
         background:var(--sk2-brand-wash); border:1px solid var(--sk2-brand-line); min-height:20px; }
.sk2 .vzcap__app { flex:none; font-family:var(--sk2-mono); font-size:12px; font-weight:800; letter-spacing:.08em; color:var(--sk2-brand); }
.sk2 .vzcap__txt { font-size:13px; color:var(--sk2-ink); font-weight:600; }
.sk2 .vizscroll { margin-top:14px; }
.sk2 .viz .vzv { display:none; }
.sk2 .viz .vzh { display:block; }
.sk2 .viz svg { width:100%; height:auto; display:block; }
.sk2 .sparks { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin-top:18px; }
.sk2 .spark { padding:12px 14px; border-radius:var(--sk2-r1); background:var(--sk2-paper-2); border:1px solid var(--sk2-line); }
.sk2 .spark b { display:block; font-size:12px; font-weight:800; letter-spacing:.09em; color:var(--sk2-ink-3); }
.sk2 .spark em { font-style:normal; display:block; font-size:22px; font-weight:800; letter-spacing:-.035em; margin-top:4px; }
.sk2 .spark svg { margin-top:6px; }
.sk2 .synqcard { margin-top:18px; border:1px solid var(--sk2-line-2); border-radius:var(--sk2-r2); overflow:hidden; background:var(--sk2-paper); box-shadow:var(--sk2-sh-2); }
.sk2 .synqcard__h { display:flex; padding:10px 14px; border-bottom:1px solid var(--sk2-line); font-family:var(--sk2-mono); font-size:12px; letter-spacing:.09em; color:var(--sk2-ink-3); }
.sk2 .synqcard__h span:last-child { margin-left:auto; }
.sk2 .synqcard__b { padding:15px 16px; }
.sk2 .synqcard__co { font-size:17px; font-weight:700; letter-spacing:-.025em; }
.sk2 .synqcard__d { font-size:13px; color:var(--sk2-ink-2); margin-top:3px; }
.sk2 .alert { display:flex; align-items:center; gap:10px; font-size:13.5px; font-weight:600; border-radius:9px; padding:10px 12px; margin-top:9px; }
.sk2 .alert span { margin-left:auto; font-family:var(--sk2-mono); font-size:12px; font-weight:400; opacity:.85; }
.sk2 .alert--r { color:var(--sk2-risk); background:var(--sk2-risk-wash); }
.sk2 .alert--w { color:var(--sk2-warn); background:var(--sk2-warn-wash); }
.sk2 .synqcard__f { padding:12px 16px; border-top:1px solid var(--sk2-line); font-size:13.5px; color:var(--sk2-ink-2); background:var(--sk2-paper-2); }
.sk2 .synqcard__f b { color:var(--sk2-ink); }

/* ── cost ──────────────────────────────────────────────────────────── */
.sk2 .cost { display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr); gap:22px; align-items:start; }
/* Denser on purpose (founder: high-density UI/UX). Every row still carries
   its label, its basis and its figure — nothing was removed, the air between
   them was. At 14px row padding plus a 1.6 body line-height the eight rows
   ran taller than a laptop viewport, so the comparison could not be read in
   one pass, which is the whole job of this section. */
/* Direction stated, not inherited from Bootstrap's .card — see the note on
   .xprod for the defect that dependency caused. */
.sk2 .costcard { display:flex; flex-direction:column; padding:6px 22px 16px; }
.sk2 .crow { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:16px; align-items:baseline; padding:9px 0; border-bottom:1px solid var(--sk2-line); line-height:1.3; }
.sk2 .crow small { display:block; font-size:12px; color:var(--sk2-ink-3); font-weight:500; margin-top:2px; line-height:1.35; }
.sk2 .crow b { font-weight:700; font-size:15.5px; }
.sk2 .crow--sum { border-top:2px solid var(--sk2-line-2); border-bottom:0; margin-top:4px; padding-top:11px; }
/* The GST row's own 1px bottom border sat directly under the summary row's
   2px top border, reading as two stacked rules. The summary's heavier line
   is the one that means something, so the row above it drops its border. */
.sk2 .crow:has(+ .crow--sum) { border-bottom:0; }
.sk2 .crow--sum b { font-size:20px; }
.sk2 .crow--ours { border-bottom:0; color:var(--sk2-brand); }
.sk2 .crow--ours b { color:var(--sk2-brand); font-size:20px; }
.sk2 .save { padding:30px; border-radius:var(--sk2-r3); color:#fff; position:relative; overflow:hidden;
        background:linear-gradient(150deg,#4F46E5 0%,#6D5EF8 46%,#8B4FD6 100%); box-shadow:var(--sk2-sh-4); }
.sk2 .save::after { content:""; position:absolute; inset:0; background:radial-gradient(60% 60% at 80% 10%, rgba(255,255,255,.22), transparent 70%); }
.sk2 .save > * { position:relative; }
.sk2 .save__k { font-size:12px; font-weight:800; letter-spacing:.13em; text-transform:uppercase; opacity:.82; }
.sk2 .save__fig { font-size:clamp(32px,4cqi,48px); font-weight:900; letter-spacing:-.05em; margin-top:12px; }
.sk2 .save__u { font-size:14.5px; opacity:.86; }
.sk2 .save__yr { margin-top:20px; padding-top:20px; border-top:1px solid rgba(255,255,255,.24); font-size:14.5px; opacity:.92; }
.sk2 .save__yr b { font-size:21px; font-weight:800; letter-spacing:-.03em; }
.sk2 .costnote { font-size:12.5px; color:var(--sk2-ink-3); margin-top:20px; line-height:1.6; }

.sk2 .teamsize { display:flex; align-items:center; justify-content:center; gap:14px; flex-wrap:wrap; margin:-8px 0 34px; }
.sk2 .teamsize__lab { font-family:var(--sk2-mono); font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--sk2-ink-3); }
.sk2 .teamsize__seg { display:flex; background:var(--sk2-paper); border:1px solid var(--sk2-line-2); border-radius:99px; padding:3px; box-shadow:var(--sk2-sh-1); }
.sk2 .teamsize__seg button { border:0; background:transparent; height:32px; padding:0 16px; border-radius:99px; font:inherit; font-size:14px;
                         font-weight:700; color:var(--sk2-ink-2); cursor:pointer; transition:background .15s ease,color .15s ease; }
.sk2 .teamsize__seg button:hover { color:var(--sk2-ink); }
.sk2 .teamsize__seg button[aria-pressed="true"] { background:var(--sk2-brand); color:#fff; }

.sk2 .costbars { display:grid; gap:14px; margin-bottom:22px; }
.sk2 .cbar { display:grid; grid-template-columns:150px minmax(0,1fr) 92px; gap:14px; align-items:center; }
.sk2 .cbar__lab { font-size:13px; font-weight:600; color:var(--sk2-ink-2); }
.sk2 .cbar__track { height:14px; border-radius:99px; background:var(--sk2-paper-3); overflow:hidden; }
.sk2 .cbar__fill { height:100%; border-radius:99px; width:0%; transition:width .6s cubic-bezier(.16,1,.3,1); }
.sk2 .cbar__fill--stack { background:linear-gradient(90deg,#C7C2DB,#A79FC7); }
.sk2 .cbar__fill--ours { background:linear-gradient(90deg,var(--sk2-brand),var(--sk2-plum)); }
.sk2 .cbar b { font-size:15px; font-weight:800; letter-spacing:-.02em; text-align:right; font-variant-numeric:tabular-nums; }
@keyframes sk2numpulse { 0%{ color:var(--sk2-brand); transform:scale(1.08); } 100%{ color:inherit; transform:scale(1); } }
.sk2 .num-pulse { display:inline-block; animation:sk2numpulse .4s ease-out; }

/* ── generic grids ─────────────────────────────────────────────────── */
/* `grid-auto-rows:1fr` is what makes a 3x2 of cards read as a grid rather than
   as two separate strips. Auto rows size to their own content, so the second
   row of a wrapped card grid came out shorter than the first whenever its copy
   was shorter — cards that are equal within a row but not down the column. In
   a grid whose own height is indefinite, `1fr` resolves every row to the
   tallest, so all cards match in both directions. The cards are flex columns
   (see .bt / .mini), so the extra height goes below the description and under
   the arrow, never into the middle of the copy. */
.sk2 .g4 { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); grid-auto-rows:1fr; gap:18px; }
.sk2 .g3 { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); grid-auto-rows:1fr; gap:18px; }
.sk2 .g2 { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); grid-auto-rows:1fr; gap:18px; }
/* Same padding token and same header row as .bt — a pillar card and a bento
   tile are the same object at two sizes, and they now say so. */
.sk2 .mini { padding:var(--sk2-card-pad); display:flex; flex-direction:column; }
.sk2 .mini h3 { font-size:18px; margin-top:16px; }
/* ...except when the heading is inside the shared header row, where the tile
   is its sibling on one line and a top margin would break the centring. */
.sk2 .mini .chd h3 { margin-top:0; }
.sk2 .mini p { font-size:14.5px; color:var(--sk2-ink-2); margin-top:12px; }
/* A labelled line inside a card: "Watches — …", "Does — …". The label is the
   card's own mono eyebrow reused at line level, so the catalogue reads as the
   same family as the numbered notes rather than as a table dropped in. */
/* `.sk2 .mini p.cat__l`, not `.sk2 .cat__l`: the latter is (0,2,0) and loses
   to `.sk2 .mini p` at (0,2,1), which is the family of bug this stylesheet has
   already been bitten by twice. No !important — landing/test_sk_css.py forbids
   it in this layer and specificity is the correct tool. */
.sk2 .mini p.cat__l { margin-top:14px; }
.sk2 .cat__l { padding-top:12px; border-top:1px solid var(--sk2-line); }
.sk2 .cat__l b { display:block; font-family:var(--sk2-mono); font-size:12px; font-weight:500; letter-spacing:.09em;
            text-transform:uppercase; color:var(--sk2-brand); margin-bottom:5px; }
.sk2 .mini__n { font-size:12px; font-weight:800; letter-spacing:.12em; color:var(--sk2-brand); }
.sk2 .mini__t { font-size:12px; font-weight:700; color:var(--sk2-ink-3); margin-left:10px; letter-spacing:.04em; }
.sk2 .soontag { display:inline-block; margin-top:16px; font-size:12px; font-weight:800; letter-spacing:.06em;
           color:var(--sk2-warn); background:var(--sk2-warn-wash); border-radius:99px; padding:5px 11px; }

/* ── pricing ───────────────────────────────────────────────────────── */
.sk2 .pricetoggle { display:flex; align-items:center; justify-content:center; gap:0; margin:-8px 0 30px; }
.sk2 .pricetoggle__seg { display:flex; background:var(--sk2-paper); border:1px solid var(--sk2-line-2); border-radius:99px; padding:3px; box-shadow:var(--sk2-sh-1); }
.sk2 .pricetoggle__seg button { display:flex; align-items:center; gap:7px; border:0; background:transparent; height:36px; padding:0 18px;
                            border-radius:99px; font:inherit; font-size:14.5px; font-weight:700; color:var(--sk2-ink-2); cursor:pointer;
                            transition:background .15s ease,color .15s ease; }
.sk2 .pricetoggle__seg button[aria-pressed="true"] { background:var(--sk2-brand); color:#fff; }
.sk2 .pricetoggle__save { font-size:12px; font-weight:800; letter-spacing:.03em; padding:2px 7px; border-radius:99px;
                      background:var(--sk2-good-wash); color:var(--sk2-good); }
.sk2 .pricetoggle__seg button[aria-pressed="true"] .pricetoggle__save { background:rgba(255,255,255,.22); color:#fff; }

.sk2 .plans { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; align-items:start; }
.sk2 .plan { padding:24px; display:flex; flex-direction:column; }
.sk2 .plan--hero { border-color:var(--sk2-brand); box-shadow:var(--sk2-sh-4); position:relative; }
.sk2 .plan--hero::before { content:"RECOMMENDED"; position:absolute; top:-11px; left:24px; font-size:12px; font-weight:800;
                      letter-spacing:.11em; color:#fff; background:var(--sk2-brand); border-radius:99px; padding:4px 12px; }
.sk2 .plan__top { display:flex; align-items:baseline; justify-content:space-between; gap:10px; }
/* The plan name now sits on its own line above the figure rather than sharing
   a flex row with it — that row is what squeezed the longest note
   ("Per active user, billed monthly · up to 100 users · GST included") on
   the Premium card. */
.sk2 .plan h3 { font-size:16px; font-weight:700; color:var(--sk2-ink-2); letter-spacing:.02em; text-transform:uppercase; }
.sk2 .plan .plan__fig { margin-top:10px; }
/* The campaign chip. Amber is reserved for a live offer, so it reads as an
   offer rather than as a warning, and it renders only while one runs. */
.sk2 .plan__promo { display:inline-block; margin-top:10px; padding:6px 11px; border-radius:99px;
              background:var(--sk2-warn-wash); color:var(--sk2-warn);
              font-size:12px; font-weight:600; line-height:1.4; }
.sk2 .plan__promo b { font-weight:800; }
.sk2 .plan__fig { font-size:30px; font-weight:800; letter-spacing:-.04em; line-height:1; }
.sk2 .plan__fig small { font-size:12.5px; font-weight:600; color:var(--sk2-ink-3); letter-spacing:0; margin-left:4px; }
.sk2 .plan__note { font-size:12.5px; color:var(--sk2-ink-3); margin-top:9px; line-height:1.5; }
.sk2 .plan__cyc--y { display:none; }
.sk2 .plan.show-y .plan__cyc--m { display:none; }
.sk2 .plan.show-y .plan__cyc--y { display:block; }
.sk2 .plan ul { list-style:none; margin:18px 0 22px; padding:0; display:grid; gap:9px; }
.sk2 .plan li { display:grid; grid-template-columns:16px minmax(0,1fr); gap:9px; font-size:13.5px; color:var(--sk2-ink-2); line-height:1.45; }
.sk2 .plan li i { font-style:normal; color:var(--sk2-good); font-weight:800; font-size:13px; }
.sk2 .plan li.soon i { color:var(--sk2-ink-3); }
.sk2 .plan li b { color:var(--sk2-ink); font-weight:700; }
.sk2 .plan .btn { margin-top:auto; }

/* ── founder, final, footer ────────────────────────────────────────── */
.sk2 .founder { display:grid; grid-template-columns:72px minmax(0,1fr); gap:24px; align-items:start; max-width:820px; margin:0 auto; }
.sk2 .founder__av { width:72px; height:72px; border-radius:50%; display:grid; place-items:center; font-weight:800; font-size:20px;
               color:var(--sk2-brand); background:var(--sk2-brand-wash); border:1px solid var(--sk2-brand-line); overflow:hidden; }
.sk2 .founder__av img { width:100%; height:100%; object-fit:cover; }
.sk2 .founder p { font-size:17px; color:var(--sk2-ink-2); }
.sk2 .founder p b { color:var(--sk2-ink); }
.sk2 .founder__sig { font-size:13.5px; font-weight:700; color:var(--sk2-ink-3); margin-top:14px; }

.sk2 .final { position:relative; padding:110px 0; text-align:center; overflow:hidden;
         background:linear-gradient(150deg,#3A2FC4 0%,#4F46E5 40%,#7B4FE0 100%); color:#fff; }
.sk2 .final::after { content:""; position:absolute; inset:0;
    background-image:linear-gradient(rgba(255,255,255,.09) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.09) 1px,transparent 1px);
    background-size:56px 56px; mask-image:radial-gradient(60% 60% at 50% 50%,#000,transparent 76%);
    -webkit-mask-image:radial-gradient(60% 60% at 50% 50%,#000,transparent 76%); }
.sk2 .final__in { position:relative; z-index:2; }
.sk2 .final p { font-size:18px; margin:20px auto 0; max-width:560px; opacity:.9; }
.sk2 .final .hero__cta, .sk2 .thanks .hero__cta { justify-content:center; }
.sk2 .final .btn--pri { background:#fff; color:var(--sk2-brand-deep); box-shadow:0 14px 34px -14px rgba(0,0,0,.5); }
.sk2 .final .btn--pri:hover { background:#F3F1FF; }
.sk2 .final .btn--out { background:transparent; color:#fff; border-color:rgba(255,255,255,.4); box-shadow:none; }
.sk2 .final .btn--out:hover { border-color:#fff; background:rgba(255,255,255,.08); }

.sk2 .foot { background:var(--sk2-paper-2); border-top:1px solid var(--sk2-line); }
/* `.brand` is now the FOOTER's lockup only — the navbar is the shared
   sk-nav component and brings its own. Height is capped on the img so the
   real logo asset cannot set the footer's row height. */
.sk2 .brand { display:inline-flex; align-items:center; gap:9px; font-weight:800; font-size:17px; letter-spacing:-.045em; color:var(--sk2-ink); }
.sk2 .brand img { height:22px; width:auto; flex:none; }
.sk2 .foot__in { max-width:var(--sk2-maxw); margin:0 auto; padding:34px var(--sk2-gut); display:flex; gap:14px 10px; flex-wrap:wrap; align-items:center; font-size:14px; color:var(--sk2-ink-3); }
.sk2 .foot__links { display:flex; gap:2px; flex-wrap:wrap; }
.sk2 .foot__links a { color:var(--sk2-ink-2); font-weight:600; font-size:13.5px; padding:7px 13px; border-radius:99px; border:1px solid transparent; transition:background .15s ease,border-color .15s ease,color .15s ease; }
.sk2 .foot__links a:hover { color:var(--sk2-ink); background:var(--sk2-paper); border-color:var(--sk2-line-2); }
.sk2 .foot__sp { flex:1 1 auto; }

/* ── product page ──────────────────────────────────────────────────── */
/* Clears the fixed navbar, same as .hero — see the note there. */
.sk2 .phero { padding:calc(var(--sk-nav-h) + 80px) 0 64px; text-align:center; position:relative; }
.sk2 .phero .hero__cta { justify-content:center; }
.sk2 .phero::before { content:""; position:absolute; left:50%; top:-160px; width:900px; height:520px; transform:translateX(-50%);
                 background:radial-gradient(46% 46% at 50% 50%, rgba(109,94,248,.13), transparent 72%); pointer-events:none; }
.sk2 .phero__in { position:relative; z-index:2; }
.sk2 .phero .lead { margin:20px auto 0; max-width:620px; }
/* The plan note under a hero, for a product that is not on every plan. Green,
   not amber: the sentence it carries is "you already have this on the trial",
   which is good news, and a warning colour would read as a paywall. */
.sk2 .tiernote { display:inline-flex; align-items:center; gap:9px; margin:18px auto 0; font-size:13.5px; font-weight:700;
            color:var(--sk2-good); background:var(--sk2-good-wash); border-radius:99px; padding:7px 16px; }
/* The trial hook under the hero CTA, and the rate lock on a pricing card.
   Both are green rather than amber on purpose: each one carries good news
   ("you already have this", "we will hold this rate"), and a warning colour
   would read as a restriction. Same treatment as .tiernote so the two read as
   one family wherever a reader meets them. */
/* NO 56ch clamp. The hero copy column is 596px; 56ch at 14px is 479, so the
   note was narrowed to four fifths of the space it had and wrapped to two
   lines while the price line beside it fitted on one (founder, 2026-09-05).
   The sentence was also too long to fit either way, so it was shortened
   rather than the type shrunk — 14px is already the floor for hero copy, and
   a claim nobody can read is worse than a claim on two lines. */
.sk2 .trialnote { display:inline-flex; align-items:flex-start; gap:10px; margin-top:18px;
             font-size:14px; line-height:1.5; color:var(--sk2-ink-2); }
.sk2 .trialnote i { color:var(--sk2-good); font-size:13px; line-height:1.6; flex:none; }
.sk2 .trialnote b { color:var(--sk2-ink); font-weight:800; }
.sk2 .plan__lock { display:flex; align-items:flex-start; gap:8px; margin-top:8px; font-size:12.5px; line-height:1.45;
              font-weight:600; color:var(--sk2-good); background:var(--sk2-good-wash);
              border-radius:var(--sk2-r1); padding:8px 11px; }
.sk2 .plan__lock i { font-size:12px; line-height:1.5; flex:none; }
.sk2 .pchips { display:flex; gap:9px; justify-content:center; flex-wrap:wrap; margin-top:26px; }
.sk2 .pchips span { font-size:13px; font-weight:600; color:var(--sk2-ink-2); background:var(--sk2-paper); border:1px solid var(--sk2-line-2); border-radius:99px; padding:7px 14px; }
.sk2 .ovw { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.15fr); gap:56px; align-items:center; padding:64px 0; border-top:1px solid var(--sk2-line); }
.sk2 .ovw:nth-child(even) > div:first-child { order:2; }
.sk2 .ovw h3 { font-size:clamp(21px,2.3cqi,30px); }
.sk2 .ovw p { font-size:16.5px; color:var(--sk2-ink-2); margin-top:14px; }
.sk2 .ovw__n { font-family:var(--sk2-mono); font-size:12px; color:var(--sk2-brand); letter-spacing:.12em; }
/* ── product page: cross-links + price strip ────────────────────────
   Neither is in the locked artifact's product screen, and neither is an
   invention: both already exist on the live product page and are carried
   across rather than dropped. The price strip in particular was added
   deliberately because these pages showed no price at all. */
/* `flex-direction:row` is not redundant — it is the fix for a real defect.
   base_public.html still loads Bootstrap, whose `.card { display:flex;
   flex-direction:column }` applies to every `.sk2 .card` that does not state
   its own. This row set `display:flex` and nothing else, so it inherited
   Bootstrap's COLUMN and the tile, the text and the arrow stacked vertically:
   a 178px-tall "compact row" with the icon marooned at the top on /product/*,
   /about/ and /joined/. Nothing in this stylesheet said `column`, which is
   why it survived several reads — it was found by printing the computed value
   and noticing the one stylesheet the CSSOM walk could not read
   (bootstrap.min.css is cross-origin, so its rules never appear in the audit).
   Every Daylight .card variant now declares its own direction for that reason;
   see .bt, .mini, .plan, .fcard and .costcard. */
/* `flex-start` + a title line-height equal to the tile, NOT `center`.
   Centring the tile on the WHOLE text block meant its offset from the title
   moved with the tagline: measured at +9.4px on /joined/, +18.8px on
   /product/*, +28.3px on /about/ — the same component reading differently on
   three pages purely because the copy wrapped to a different number of lines.
   Giving the title the tile's own height makes the two line boxes identical,
   so tile and title share a centre line at 0px offset on every page and at
   every width, the same relationship .chd gives a stacked card. */
.sk2 .xprod { display:flex; flex-direction:row; align-items:flex-start; gap:var(--sk2-chd-gap); padding:18px 20px; }
/* Size and skin come from the tile ladder in sk2-tokens.css. This component
   had its own 38px/11px/15px set, .bt__ic had 42/12/18 and .pr__ic had
   40/12/14 — three sizes for one object, which is what made the sections read
   as separately designed. */
.sk2 .xprod b { display:block; font-size:15.5px; line-height:var(--sk2-tile-sm); color:var(--sk2-ink); }
/* The plan tag on a cross-link that is not on every plan. It sits INSIDE the
   <b>, so `.sk2 .xprod b` above already owns its line height — this only
   changes the pill's own type and colour. */
.sk2 .xprod__tag { font-size:12px; font-weight:800; letter-spacing:.04em; vertical-align:1px;
              color:var(--sk2-brand); background:var(--sk2-brand-wash); border-radius:99px; padding:2px 8px; }
/* `:not(.xprod__ic)` matters. As a bare `.xprod span` this was (0,2,1) and
   beat `.xprod__ic`'s own (0,2,0) `display:grid`, so the icon box fell back to
   `display:block`, `place-items:center` stopped applying and every glyph sat
   in the top-left corner of its tile. The founder spotted it on three
   different pages, because the same shape is reused everywhere. */
.sk2 .xprod span:not(.xprod__ic) { display:block; font-size:13px; color:var(--sk2-ink-2); margin-top:3px; line-height:1.45; }
/* align-self keeps the arrow on the row's centre line now that the flex
   container aligns to flex-start for the tile's sake. */
.sk2 .xprod__go { margin-left:auto; align-self:center; flex:none; color:var(--sk2-ink-3); transition:transform .2s ease,color .2s ease; }
.sk2 a.card:hover .xprod__go { color:var(--sk2-brand); transform:translateX(3px); }

.sk2 .pxstrip { display:flex; align-items:center; gap:20px 28px; flex-wrap:wrap; padding:24px 28px;
           background:var(--sk2-brand-wash); border:1px solid var(--sk2-brand-line); border-radius:var(--sk2-r3); }
.sk2 .pxstrip b { display:block; font-size:16.5px; color:var(--sk2-ink); }
.sk2 .pxstrip span { display:block; font-size:14px; color:var(--sk2-ink-2); margin-top:5px; max-width:62ch; line-height:1.55; }
.sk2 .pxstrip a { margin-left:auto; flex:none; font-size:14px; font-weight:700; color:var(--sk2-brand); white-space:nowrap; }
.sk2 .pxstrip a:hover { text-decoration:underline; }

/* ── FAQ: categorised ───────────────────────────────────────────────
   A single undifferentiated run of questions with a bare <i> stuck beside
   each heading is what the founder called ugly. The questions are already
   grouped in the data (general, then one group per app), so the page now
   shows that structure: a jump row at the top, then each group behind a
   proper header with the icon in the SAME tile every other icon on the site
   uses. */
.sk2 .faqnav { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:8px; }
.sk2 .faqnav a { font-size:13.5px; font-weight:600; color:var(--sk2-ink-2);
            padding:8px 14px; border-radius:99px; border:1px solid var(--sk2-line-2);
            background:var(--sk2-paper); transition:background .15s ease,border-color .15s ease,color .15s ease; }
.sk2 .faqnav a:hover { color:var(--sk2-brand); border-color:var(--sk2-brand-line); background:var(--sk2-brand-wash); }
.sk2 .faqgroup { margin-top:52px; scroll-margin-top:calc(var(--sk-nav-h) + 20px); }
.sk2 .faqgroup__h { display:flex; align-items:center; gap:14px; margin-bottom:6px; }
.sk2 .faqgroup__h h2 { font-size:21px; letter-spacing:-.03em; }
.sk2 .faqgroup__h p { font-size:14px; color:var(--sk2-ink-2); margin-top:3px; }
.sk2 .faqgroup__h a { color:var(--sk2-brand); font-weight:600; }

.sk2 .faq { max-width:760px; margin:0 auto; }
/* Inside a group the list is left-aligned with the group header, not centred
   in the column — the header is the thing it belongs to. */
.sk2 .faqgroup .faq { max-width:none; margin:0; }
.sk2 .faqi { border-bottom:1px solid var(--sk2-line); }
.sk2 .faqi summary { list-style:none; cursor:pointer; padding:22px 40px 22px 0; font-size:17px; font-weight:700; position:relative; }
.sk2 .faqi summary::-webkit-details-marker { display:none; }
.sk2 .faqi summary::after { content:"+"; position:absolute; right:6px; top:20px; font-size:22px; font-weight:400; color:var(--sk2-ink-3); transition:transform .25s ease; }
.sk2 .faqi[open] summary::after { transform:rotate(45deg); }
.sk2 .faqi p { padding:0 40px 22px 0; font-size:15.5px; color:var(--sk2-ink-2); }

/* ── legal / doc page ──────────────────────────────────────────────── */
.sk2 .doc { display:grid; grid-template-columns:236px minmax(0,1fr); gap:56px; padding:64px 0 96px; align-items:start; }
.sk2 .toc { position:sticky; top:96px; }
.sk2 .toc b { display:block; font-size:12px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--sk2-ink-3); margin-bottom:14px; }
.sk2 .toc a { display:block; font-size:13.5px; color:var(--sk2-ink-2); padding:6px 0 6px 14px; border-left:2px solid var(--sk2-line); }
.sk2 .toc a:hover { color:var(--sk2-brand); border-left-color:var(--sk2-brand); }
/* Clears the fixed navbar, same as .hero / .phero — see the note on .hero. */
.sk2 .dochead { padding:calc(var(--sk-nav-h) + 64px) 0 8px; border-bottom:1px solid var(--sk2-line); }
.sk2 .dochead .lead { margin-top:16px; max-width:640px; }

/* ── company pages: fact strip + the founder story ──────────────────
   Neither is in the artifact's company screen, which was a plain
   heading/paragraph stack. Both already exist on /about/ and are carried
   across rather than dropped: the facts are the page's honest social proof
   and the story is the single source the homepage credit links to. */
.sk2 .facts { display:flex; flex-wrap:wrap; gap:10px 26px; margin-top:24px; list-style:none; padding:0; }
.sk2 .facts li { display:flex; align-items:center; gap:8px; font-size:14px; font-weight:600; color:var(--sk2-ink-2); }
.sk2 .facts i { color:var(--sk2-brand); font-size:14px; }

.sk2 .story { display:grid; grid-template-columns:minmax(0,1fr) 260px; gap:44px; align-items:start; margin-top:44px; }
.sk2 .story blockquote { margin:14px 0 0; padding-left:18px; border-left:3px solid var(--sk2-brand-line);
                    font-size:16.5px; line-height:1.65; color:var(--sk2-ink-2); }
.sk2 .story__sig { font-size:14px; color:var(--sk2-ink-3); margin-top:16px; }
.sk2 .story__sig b { color:var(--sk2-ink); }
.sk2 .story__sig a { color:var(--sk2-brand); font-weight:700; }
.sk2 .story img { width:100%; height:auto; border-radius:var(--sk2-r3); border:1px solid var(--sk2-line); box-shadow:var(--sk2-sh-2); }

/* The security page's "what we do not claim" panel. Deliberately NOT the
   warning palette: an honest disclosure is not an incident notice, and it is
   the section that makes the rest of the page believable. */
.sk2 .notyet { padding:26px 28px; background:var(--sk2-paper-2); border:1px solid var(--sk2-line); border-radius:var(--sk2-r3); }
.sk2 .notyet ul { margin:0; padding-left:20px; display:grid; gap:9px; }
.sk2 .notyet li { font-size:15.5px; color:var(--sk2-ink-2); line-height:1.55; }
.sk2 .notyet p { margin-top:18px; padding-top:16px; border-top:1px dashed var(--sk2-line-2); font-size:14.5px; color:var(--sk2-ink-3); }

/* ── the demo form ──────────────────────────────────────────────────
   Styled by descendant rather than by adding classes to the widgets:
   _demo_form.html renders `{{ field }}` straight from DemoRequestForm, and
   the view re-renders that same partial with a BOUND form when validation
   fails. Restyling from CSS keeps one copy of the markup, so the error state
   cannot drift from the clean state — which is the whole reason it is a
   partial — and leaves the form's binding and validation untouched. */
/* The card-inside-a-card the founder spotted. landing.css gives .demo-form
   its OWN white background, border, radius and shadow — correct when the form
   was the card, wrong now that it sits inside a Daylight .fcard. The outer
   card is the card; the form is just its contents. */
.sk2 .demo-form { background:none; border:0; border-radius:0; box-shadow:none; padding:0; margin-top:20px; }
.sk2 .demo-form__grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.sk2 .demo-field--wide { grid-column:1 / -1; }
.sk2 .demo-field label { display:block; font-size:13.5px; font-weight:700; margin-bottom:8px; color:var(--sk2-ink); }
.sk2 .demo-req { color:var(--sk2-risk); }
.sk2 .demo-form input, .sk2 .demo-form textarea, .sk2 .demo-form select {
  width:100%; height:46px; padding:0 14px; border-radius:var(--sk2-r1); border:1px solid var(--sk2-line-2);
  background:var(--sk2-paper); color:var(--sk2-ink); font:inherit; font-size:15.5px; box-shadow:var(--sk2-sh-1);
  transition:border-color .16s ease, box-shadow .16s ease;
}
.sk2 .demo-form textarea { height:auto; padding:13px 15px; line-height:1.5; resize:vertical; }
.sk2 .demo-form input::placeholder, .sk2 .demo-form textarea::placeholder { color:var(--sk2-ink-3); }
.sk2 .demo-form input:focus, .sk2 .demo-form textarea:focus, .sk2 .demo-form select:focus {
  border-color:var(--sk2-brand); box-shadow:var(--sk2-ring); outline:none;
}
.sk2 .demo-form__foot { margin-top:22px; }
.sk2 .demo-form__note { font-size:12.5px; color:var(--sk2-ink-3); margin-top:12px; line-height:1.6; }
.sk2 .demo-form__error, .sk2 .demo-field__error { font-size:13px; color:var(--sk2-risk); margin-top:6px; }
.sk2 .demo-form__error { padding:12px 14px; border-radius:var(--sk2-r1); background:var(--sk2-risk-wash); margin-bottom:16px; }
@media (max-width:720px){ .sk2 .demo-form__grid { grid-template-columns:minmax(0,1fr); } }
@media (max-width:720px){
  /* Photo above the words on a phone, never hidden: this is the founder's
     face on the page that exists to say who is behind the product. */
  .sk2 .story { grid-template-columns:minmax(0,1fr); gap:24px; }
  .sk2 .story img { max-width:220px; order:-1; }
}
.sk2 .docmeta { font-family:var(--sk2-mono); font-size:12px; color:var(--sk2-ink-3); margin-top:18px; }
.sk2 .docbody h2 { font-size:22px; margin:44px 0 14px; scroll-margin-top:96px; }
.sk2 .docbody h2:first-child { margin-top:0; }
.sk2 .docbody p { font-size:16px; color:var(--sk2-ink-2); margin-bottom:14px; max-width:70ch; }
.sk2 .docbody ul { margin:0 0 16px; padding-left:20px; color:var(--sk2-ink-2); font-size:16px; }
.sk2 .docbody li { margin-bottom:7px; }

/* ── auth ──────────────────────────────────────────────────────────── */
.sk2 .split { display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1fr); min-height:100vh; }
.sk2 .panel { position:relative; padding:48px; display:flex; overflow:hidden; color:#fff;
         background:linear-gradient(155deg,#3A2FC4 0%,#4F46E5 42%,#7B4FE0 100%); }
.sk2 .panel::after { content:""; position:absolute; inset:0;
    background-image:linear-gradient(rgba(255,255,255,.10) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.10) 1px,transparent 1px);
    background-size:52px 52px; mask-image:radial-gradient(70% 60% at 30% 40%,#000,transparent 78%);
    -webkit-mask-image:radial-gradient(70% 60% at 30% 40%,#000,transparent 78%); }
.sk2 .panel__in { position:relative; z-index:2; display:flex; flex-direction:column; width:100%; gap:24px; }
.sk2 .panel .brand { color:#fff; }
.sk2 .panel h2 { font-size:clamp(23px,2.9cqi,34px); font-weight:800; letter-spacing:-.04em; margin-top:auto; }
.sk2 .panel p { font-size:16.5px; opacity:.88; margin-top:14px; max-width:38ch; }
.sk2 .pchip { display:flex; flex-wrap:wrap; gap:8px; margin-top:24px; }
.sk2 .pchip span { font-size:12.5px; font-weight:600; border:1px solid rgba(255,255,255,.26); background:rgba(255,255,255,.12); border-radius:99px; padding:5px 12px; }
.sk2 .panel__t { margin-top:auto; padding-top:26px; border-top:1px solid rgba(255,255,255,.22); font-size:13.5px; opacity:.82; }

.sk2 .formcol { display:flex; align-items:center; justify-content:center; padding:56px var(--sk2-gut); background:var(--sk2-paper); }
.sk2 .fwrap { width:100%; max-width:430px; }
.sk2 .back { font-size:13.5px; font-weight:600; color:var(--sk2-ink-3); }
.sk2 .back:hover { color:var(--sk2-ink); }
.sk2 .fhead { margin-top:28px; }
.sk2 .fhead h1 { font-size:clamp(25px,3cqi,32px); font-weight:800; letter-spacing:-.04em; }
.sk2 .fhead p { font-size:15.5px; color:var(--sk2-ink-2); margin-top:11px; }
.sk2 .fhead p b { color:var(--sk2-ink); }
.sk2 .field { margin-top:20px; }
.sk2 .flab { display:flex; align-items:baseline; gap:8px; font-size:13.5px; font-weight:700; margin-bottom:8px; }
.sk2 .flab a { margin-left:auto; font-size:12.5px; font-weight:700; color:var(--sk2-brand); }
.sk2 .fopt { font-weight:500; color:var(--sk2-ink-3); font-size:12.5px; }
.sk2 .inp { width:100%; height:46px; padding:0 14px; border-radius:var(--sk2-r1); border:1px solid var(--sk2-line-2);
       background:var(--sk2-paper); color:var(--sk2-ink); font:inherit; font-size:15.5px; box-shadow:var(--sk2-sh-1);
       transition:border-color .16s ease, box-shadow .16s ease; }
.sk2 textarea.inp { height:auto; padding:13px 15px; line-height:1.5; resize:vertical; }
.sk2 select.inp { appearance:none; background-image:linear-gradient(45deg,transparent 50%,var(--sk2-ink-3) 50%),linear-gradient(135deg,var(--sk2-ink-3) 50%,transparent 50%);
             background-position:calc(100% - 20px) 20px, calc(100% - 15px) 20px; background-size:5px 5px,5px 5px; background-repeat:no-repeat; }
.sk2 .inp::placeholder { color:var(--sk2-ink-3); }
.sk2 .inp:focus { border-color:var(--sk2-brand); box-shadow:var(--sk2-ring); outline:none; }
.sk2 .fhint { font-size:12.5px; color:var(--sk2-ink-3); margin-top:8px; }
.sk2 .iwrap { position:relative; }
.sk2 .iwrap .reveal-btn { position:absolute; right:5px; top:6px; height:34px; padding:0 10px; border:0; background:transparent;
                     color:var(--sk2-ink-3); cursor:pointer; border-radius:7px; font-size:12px; font-weight:800; letter-spacing:.06em; }
.sk2 .iwrap .reveal-btn:hover { color:var(--sk2-brand); background:var(--sk2-brand-wash); }
.sk2 .chk { display:flex; align-items:center; gap:11px; font-size:14.5px; color:var(--sk2-ink-2); margin-top:20px; }
.sk2 .chk input { width:18px; height:18px; accent-color:var(--sk2-brand); }
.sk2 .oauth { display:flex; align-items:center; justify-content:center; gap:10px; width:100%; height:46px; cursor:pointer;
         border:1px solid var(--sk2-line-2); background:var(--sk2-paper); border-radius:var(--sk2-r1); font-size:15.5px; font-weight:700; margin-top:26px; box-shadow:var(--sk2-sh-1); }
.sk2 .oauth:hover { border-color:var(--sk2-ink-3); box-shadow:var(--sk2-sh-2); }
.sk2 .divider { display:flex; align-items:center; gap:14px; margin:24px 0 2px; font-size:12.5px; color:var(--sk2-ink-3); }
.sk2 .divider::before, .sk2 .divider::after { content:""; flex:1; height:1px; background:var(--sk2-line); }
.sk2 .ffoot { margin-top:26px; font-size:14.5px; color:var(--sk2-ink-2); text-align:center; }
.sk2 .ffoot a { color:var(--sk2-brand); font-weight:700; }
.sk2 .legal-note { font-size:12.5px; color:var(--sk2-ink-3); margin-top:22px; text-align:center; line-height:1.6; }

.sk2 .stepbar { display:flex; align-items:center; }
.sk2 .sb { display:flex; flex-direction:column; align-items:center; gap:8px; flex:none; }
.sk2 .sb__c { width:30px; height:30px; border-radius:50%; display:grid; place-items:center; font-size:13px; font-weight:800;
         border:1px solid var(--sk2-line-2); color:var(--sk2-ink-3); background:var(--sk2-paper); }
.sk2 .sb__l { font-size:12px; font-weight:700; color:var(--sk2-ink-3); }
.sk2 .sb.on .sb__c { background:var(--sk2-brand); border-color:var(--sk2-brand); color:#fff; box-shadow:0 0 0 5px var(--sk2-brand-wash); }
.sk2 .sb.on .sb__l { color:var(--sk2-ink); }
.sk2 .sb.done .sb__c { background:var(--sk2-good-wash); border-color:var(--sk2-good); color:var(--sk2-good); }
.sk2 .sbbar { flex:1 1 auto; height:2px; background:var(--sk2-line); margin:0 8px; position:relative; top:-11px; }
.sk2 .sbbar.done { background:var(--sk2-good); }
.sk2 .otp { display:flex; gap:10px; margin-top:20px; }
.sk2 .otp input { flex:1 1 0; min-width:0; height:60px; text-align:center; font-size:24px; font-weight:800; font-family:var(--sk2-mono);
             border-radius:var(--sk2-r1); border:1px solid var(--sk2-line-2); background:var(--sk2-paper); color:var(--sk2-ink); box-shadow:var(--sk2-sh-1); }
.sk2 .otp input:focus { border-color:var(--sk2-brand); box-shadow:var(--sk2-ring); outline:none; }
.sk2 .okrow { display:flex; align-items:center; gap:10px; padding:12px 15px; border-radius:var(--sk2-r1); font-size:14.5px; margin-top:22px;
         background:var(--sk2-good-wash); color:var(--sk2-ink); }
.sk2 .okrow b { margin-left:auto; color:var(--sk2-good); font-size:12px; font-weight:800; letter-spacing:.06em; }
.sk2 .meter { height:6px; border-radius:99px; background:var(--sk2-paper-3); margin-top:10px; overflow:hidden; }
.sk2 .meter i { display:block; height:100%; width:64%; background:var(--sk2-warn); border-radius:99px; }
.sk2 .substep { display:none; } .sk2 .substep.is-on { display:block; }

/* ── demo + thanks ─────────────────────────────────────────────────── */
/* Top padding clears the fixed navbar — see the note on .hero. */
.sk2 .demo { display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1fr); gap:60px; align-items:start; padding:calc(var(--sk-nav-h) + 72px) 0 100px; }
.sk2 .demo .lead { margin-top:20px; }
.sk2 .promises { display:grid; gap:16px; margin-top:34px; }
/* The column is the tile token, not a literal, so the promise row tracks the
   tile ladder with every other icon on the site. Size/skin: sk2-tokens.css. */
/* Same relationship as .xprod, same reason: `start` plus a title line box
   the height of the tile, so the tile centres on the title line rather than
   drifting down as the sub-line wraps. */
.sk2 .pr { display:grid; grid-template-columns:var(--sk2-tile) minmax(0,1fr); gap:var(--sk2-chd-gap); align-items:start; }
.sk2 .pr b { display:block; font-size:15.5px; line-height:var(--sk2-tile); }
.sk2 .pr span:not(.pr__ic) { display:block; font-size:13.5px; color:var(--sk2-ink-2); }
.sk2 .demoalt { margin-top:34px; padding-top:26px; border-top:1px solid var(--sk2-line); font-size:14.5px; color:var(--sk2-ink-2); }
.sk2 .demoalt a { color:var(--sk2-brand); font-weight:700; }
/* Direction stated, not inherited — see the note on .xprod. */
.sk2 .fcard { display:flex; flex-direction:column; padding:32px; }
.sk2 .fcard h2 { font-size:21px; }
.sk2 .fcard > p { font-size:14.5px; color:var(--sk2-ink-2); margin-top:9px; }
.sk2 .row2 { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
/* Top padding clears the fixed navbar — see the note on .hero. */
.sk2 .thanks { text-align:center; padding:calc(var(--sk-nav-h) + 96px) 0 96px; max-width:660px; margin:0 auto; }
.sk2 .thanks__ic { width:76px; height:76px; border-radius:50%; margin:0 auto; display:grid; place-items:center; font-size:30px;
              color:var(--sk2-good); background:var(--sk2-good-wash); border:1px solid var(--sk2-good); }
.sk2 .thanks p { font-size:17.5px; color:var(--sk2-ink-2); margin-top:18px; }
.sk2 .nextl { display:grid; gap:14px; margin-top:38px; text-align:left; }
.sk2 .nrow { display:grid; grid-template-columns:32px minmax(0,1fr); gap:16px; align-items:center; padding:17px 20px;
        border:1px solid var(--sk2-line); border-radius:var(--sk2-r2); background:var(--sk2-paper); box-shadow:var(--sk2-sh-1); }
.sk2 .nrow b { font-size:15px; }
.sk2 .nrow span { display:block; font-size:13.5px; color:var(--sk2-ink-2); }
.sk2 .nrow em { font-style:normal; font-family:var(--sk2-mono); font-size:12px; font-weight:500; color:var(--sk2-brand); }

/* ══════════ RESPONSIVE (media only — no container-query ancestor in production) ══════════ */
@media (max-width:1080px){
  .sk2 { --sk2-gut:26px; }
  .sk2 .synq, .sk2 .cost, .sk2 .demo, .sk2 .bthero, .sk2 .ovw{ gap:36px; }
  .sk2 .flow{ grid-template-columns:repeat(3,minmax(0,1fr)); row-gap:34px; }
  .sk2 .flow::before{ display:none; }
  .sk2 .guards{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .sk2 .doc{ grid-template-columns:200px minmax(0,1fr); gap:38px; }
  .sk2 .hero__in{ grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr); gap:36px; }
}
@media (max-width:940px){
  /* Once the hero stacks to one column the copy is centred, on the founder's
     call. Left-aligned text under a centred everything-else reads as a
     column that lost its second half; centred, the stack has an axis. The
     CTA row, the trust chips and the price line all follow the same axis —
     centring the headline alone is what looks unfinished. */
  .sk2 .hero__in{ grid-template-columns:minmax(0,1fr); gap:36px; }
  .sk2 .hero__copy{ max-width:none; text-align:center; }
  .sk2 .hero__sub{ max-width:none; margin-left:auto; margin-right:auto; }
  .sk2 .hero__cta{ justify-content:center; }
  .sk2 .hero__meta{ justify-content:center; }
  .sk2 .hero__copy .markstroke{ left:0; }
  .sk2 .viz .vzh{ display:none; } .sk2 .viz .vzv{ display:block; }
  .sk2 .sec{ padding:84px 0; }
  /* 2 tiles per row now, so 3 tile rows to equalise before the panel. */
  .sk2 .bento{ grid-template-columns:repeat(4,minmax(0,1fr)); grid-template-rows:1fr 1fr 1fr auto auto; }
  .sk2 .bt{ grid-column:span 2; } .sk2 .bt--hero{ grid-column:span 4; }
  .sk2 .bthero, .sk2 .synq, .sk2 .cost, .sk2 .demo, .sk2 .split, .sk2 .ovw{ grid-template-columns:minmax(0,1fr); }
  .sk2 .ovw:nth-child(even) > div:first-child{ order:0; }
  .sk2 .split{ min-height:0; }
  .sk2 .panel{ padding:36px var(--sk2-gut); } .sk2 .panel h2{ margin-top:0; } .sk2 .panel__t{ margin-top:24px; }
  .sk2 .g4{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  /* Three-up survived down to 720px, which left ~226px cards on a tablet —
     an icon, a heading and two lines of copy in a column too narrow for any
     of them. Two-up here, one-up at 720, so every step has room. */
  .sk2 .g3{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .sk2 .plans{ grid-template-columns:minmax(0,1fr); }
  .sk2 .plan--hero{ margin-top:14px; }
  .sk2 .doc{ grid-template-columns:minmax(0,1fr); }
  .sk2 .toc{ position:static; display:flex; gap:6px; flex-wrap:wrap; padding-bottom:8px; }
  .sk2 .toc b{ width:100%; margin-bottom:8px; }
  .sk2 .toc a{ border-left:0; border:1px solid var(--sk2-line); border-radius:99px; padding:6px 12px; font-size:12.5px; }
  .sk2 .reveal{ perspective:1200px; }
}
@media (max-width:720px){
  .sk2 { --sk2-gut:20px; }
  /* A fixed 150px label column left as little as 52px for the bar itself at
     narrow widths, so a 100% fill and a 53% fill both rendered as barely
     distinguishable slivers — reading as one bar, not two. Label on its own
     row, bar+figure below it, so the bar has real width to show the actual
     comparison. */
  /* grid-area lives HERE, with the grid-template-areas that defines it —
     never on the base rule. Declaring `grid-area:lab` while the ONLY
     `grid-template-areas` sat behind this media query meant that above
     720px the named areas did not exist, so all three children were
     auto-placed and the bars ended up crammed into the right-hand column. */
  .sk2 .cbar{ grid-template-columns:minmax(0,1fr) auto; grid-template-areas:"lab lab" "track val"; row-gap:8px; }
  .sk2 .cbar__lab{ grid-area:lab; }
  .sk2 .cbar__track{ grid-area:track; }
  .sk2 .cbar b{ grid-area:val; }
  .sk2 .hero{ padding-top:calc(var(--sk-nav-h) + 52px); }
  .sk2 .reveal{ margin-top:44px; }
  .sk2 .hero__sub{ font-size:17.5px; }
  /* One tile per row from here down: nothing to equalise, and forcing equal
     rows would only add empty space under the shorter taglines. */
  .sk2 .bento{ grid-template-columns:repeat(2,minmax(0,1fr)); grid-template-rows:none; }
  .sk2 .bt{ grid-column:span 2; } .sk2 .bt--hero{ grid-column:span 2; }
  .sk2 .bthero{ padding:26px; }
  .sk2 .flow{ grid-template-columns:minmax(0,1fr); row-gap:10px; }
  .sk2 .fl{ display:grid; grid-template-columns:44px minmax(0,1fr); gap:16px; text-align:left; align-items:start;
       padding:16px; border:1px solid var(--sk2-line); border-radius:var(--sk2-r2); background:var(--sk2-paper); }
  .sk2 .fl__n{ margin:0; } .sk2 .fl__app{ margin-top:0; } .sk2 .fl h4{ margin-top:8px; }
  /* Single column: equal rows would only pad every short card up to the
     tallest one's height. Cards size to their own content on a phone. */
  .sk2 .g3, .sk2 .g2, .sk2 .guards{ grid-template-columns:minmax(0,1fr); grid-auto-rows:auto; }
  .sk2 .row2{ grid-template-columns:minmax(0,1fr); }
  .sk2 .sparks{ grid-template-columns:minmax(0,1fr); }
  .sk2 .founder{ grid-template-columns:minmax(0,1fr); }
  .sk2 .sb__l{ display:none; } .sk2 .sbbar{ top:0; }
  .sk2 .crow{ grid-template-columns:minmax(0,1fr) auto; }
  .sk2 .sec__head{ margin-bottom:40px; }

  .sk2 .pchips { flex-direction:column; align-items:stretch; gap:8px; }
  .sk2 .pchips span { text-align:center; }
  .sk2 .ovw { text-align:center; padding:44px 0; }
  .sk2 .ovw > div:last-child { display:none; }
  .sk2 .hero .reveal, .sk2 #productBody .reveal { padding:0 8px; max-width:none; }
  .sk2 .hstat__spark { display:none; }
  .sk2 .hstat { grid-template-columns:26px minmax(0,1fr) auto; }
}
@media (max-width:470px){
  .sk2 { --sk2-gut:10px; }
  .sk2 .h-xl{ font-size:34px; letter-spacing:-.04em; }
  .sk2 .h-lg{ font-size:27px; }
  .sk2 .h-md{ font-size:21px; }
  .sk2 .hero__sub, .sk2 .lead{ font-size:16px; }
  .sk2 .sec__head p{ font-size:15.5px; }
  .sk2 .plan__fig{ font-size:36px; display:flex; flex-wrap:wrap; align-items:baseline; }
  .sk2 .plan__fig small{ flex-basis:100%; margin-left:0; margin-top:2px; }
  .sk2 .g4{ grid-template-columns:minmax(0,1fr); grid-auto-rows:auto; }
  .sk2 .bento{ grid-template-columns:minmax(0,1fr); }
  .sk2 .bt{ grid-column:span 1; padding:22px; } .sk2 .bt--hero{ grid-column:span 1; }
  .sk2 .hero__cta{ flex-direction:column; } .sk2 .hero__cta .btn, .sk2 .final .btn{ width:100%; }
  .sk2 .brand{ font-size:18px; }
  .sk2 .sec{ padding:64px 0; }
  .sk2 .otp input{ height:50px; font-size:19px; }
  .sk2 .otp{ gap:7px; }
  .sk2 .plan, .sk2 .fcard, .sk2 .mini, .sk2 .costcard, .sk2 .viz{ padding:14px; }
  .sk2 .save{ padding:24px; }
  .sk2 .thanks{ padding:72px 0; }
  .sk2 .formcol{ padding:34px var(--sk2-gut); }
}
/* ═══ MOBILE DENSITY PASS (founder review, 2026-09-02) ═══════════════
   Three things he flagged on a real phone, all of them measured before they
   were touched:

   1. "Too thick." The type scale barely stepped down for a 375px screen, so
      copy set for a 1440px column was wrapping to four and five lines. Body
      text was 14.5px/1.6 and card headings 18px everywhere. The sizes below
      are one step down with tighter leading — the 12px functional floor is
      still respected (landing/test_sk_css.py enforces it), and no font
      WEIGHT changes: the heavy headings are Daylight's locked look.

   2. Image frames were narrower than the cards beside them. Measured at 375:
      a card was 355px at left 10, the hero shot 334 at left 20, and a shot
      inside a bento panel 257 at left 59. Three different left edges down one
      column reads as a broken grid. Every frame now matches the card box.

   3. The RECOMMENDED badge hung off the top-left corner of the Premium card,
      overlapping its border and crowding the plan name underneath.
   ───────────────────────────────────────────────────────────────────── */
@media (max-width:470px){
  /* ── 1. density ───────────────────────────────────────────────────── */
  .sk2 .bt p:not(.tiernote), .sk2 .mini p, .sk2 .spt p, .sk2 .gd span, .sk2 .ovw p,
  .sk2 .xprod span:not(.xprod__ic), .sk2 .fl p{ font-size:13.5px; line-height:1.5; }
  .sk2 .bt p:not(.tiernote){ margin-top:9px; padding-bottom:10px; }
  .sk2 .mini p{ margin-top:9px; }
  .sk2 .chd > h3, .sk2 .chd > h4, .sk2 .bt h3, .sk2 .mini h3{ font-size:16.5px; }
  .sk2 .spt h4{ font-size:16px; }
  .sk2 .spt{ padding-left:14px; }
  .sk2 .synqpts{ gap:16px; margin-top:22px; }
  .sk2 .bthero h3{ font-size:20px; }
  .sk2 .bthero p:not(.tiernote){ font-size:14.5px; line-height:1.55; margin-top:9px; }
  .sk2 .trialnote{ font-size:13px; gap:8px; margin-top:14px; }
  .sk2 .tiernote{ font-size:12.5px; padding:6px 12px; }
  .sk2 .ovw h3{ font-size:20px; }
  .sk2 .ovw p{ margin-top:10px; }
  .sk2 .plan li{ font-size:13.5px; line-height:1.5; }
  .sk2 .plan__note{ font-size:12.5px; line-height:1.45; }
  .sk2 .gd{ padding:16px; }
  .sk2 .guards{ margin-top:28px; }

  /* ── 2. every frame gets the card's box ───────────────────────────── */
  /* The frame matches the CARD box, not the viewport: 355px at left 10 on a
     375px screen, the same edges as every card above and below it. A .reveal
     carried its own 8px inset ON TOP of the page gutter, which is where the
     odd 20px left edge came from; the gutter alone is the right answer. */
  .sk2 .hero .reveal, .sk2 #productBody .reveal, .sk2 .reveal{ padding:0 var(--sk2-gut); }
  /* Inside a bento panel the frame breaks out of the panel's padding and is
     clipped by the panel's own radius — .bt--hero already sets
     overflow:hidden, so the bottom corners round themselves. */
  /* `.bt--hero{padding:0}` is restated because the mobile `.sk2 .bt{padding:22px}`
     rule above has the same specificity and comes later in the file, so the
     hero panel had silently gained a second layer of padding on top of
     .bthero's own — which is why its frame measured 309px against a 355px
     card. Found by printing the panel's rect, not by reading the file. */
  .sk2 .bt--hero{ padding:0; }
  .sk2 .bthero{ padding:22px; }
  /* NOT bled to the card's edges. A frame inside a card keeps the card's own
     padding around it — founder call, 2026-09-02, reversing the full-bleed
     shipped in 1ae9653. The bleed was right while the shot carried browser
     chrome that could act as a dock at the bottom of the card; it is wrong
     for a bare image, which reads as spilling out of its container. */
  .sk2 .bthero .shot{ margin-top:4px; }
  /* Without the chrome the frame is just a border and a shadow, which is what
     still reads as "a screen" rather than an illustration. On a phone even
     that goes: at 355px a 3024px capture is texture, not a readable screen,
     and the founder's call was "just use simple images".
     These live HERE, not next to the base .shot rules, because `.shot__bar`
     is declared AFTER them in the file — at equal specificity the later rule
     wins, so an override placed above it silently does nothing. */
  .sk2 .shot{ border:0; box-shadow:none; }
  .sk2 .shot__bar{ display:none; }
  /* The panel's own call to action centres on a phone. `width:fit-content` is
     load-bearing: `display:flex` alone stretched it to the full card width,
     which is a different thing from centred. */
  .sk2 .bthero .btn{ display:flex; width:fit-content; margin-left:auto; margin-right:auto; }
  /* A product page's "what it does" screenshots were display:none below
     720px, so a phone got the words and never the product. They are the
     strongest proof on the page; they render now, full width. */
  .sk2 .ovw > div:last-child{ display:block; }
  .sk2 .ovw{ padding:34px 0; }

  /* ── 3. the RECOMMENDED badge ─────────────────────────────────────── */
  /* Static, not absolute. .plan is a flex column, so the pseudo-element
     becomes its first item and simply sits above the plan name instead of
     hanging over the border and crowding it. align-self stops it stretching
     to the full card width. */
  .sk2 .plan--hero::before{ position:static; align-self:flex-start; margin:0 0 12px;
                       font-size:12px; padding:5px 11px; letter-spacing:.09em; }
  .sk2 .plan--hero{ margin-top:0; }
}
@media (max-width:360px){
  .sk2 { --sk2-gut:8px; }
  .sk2 .hpanel{ padding:14px; }
  .sk2 .h-xl{ font-size:30px; }
  .sk2 .h-lg{ font-size:24px; }
  .sk2 .otp input{ height:44px; font-size:17px; }
  .sk2 .pr{ grid-template-columns:34px minmax(0,1fr); gap:12px; }
  .sk2 .pr__ic{ width:34px; height:34px; }
}