/* The ContentSling site shell: tokens, typography, topbar, footer and the
 * marketing page primitives. Extracted from landing.html so /features,
 * /pricing and /contact are the same site rather than four look-alikes that
 * drift apart.
 *
 * Served from the root by main._ROOT_FILES, which is an explicit whitelist:
 * a new file here is a 404 until it is added there.
 */
  :root{
    --bg:#FBFAF8; --surface:#FFFFFF;
    --ink:#16161D; --dim:#5F5F69; --faint:#9997A2; --line:#E7E4DF; --hair:#F0EDE8;
    --v1:#4F46E5; --v2:#6D5AE8; --v3:#8B7BF0; --v-deep:#3B2FA8; --v-soft:#EEEDFC;
    --on-accent:#FFFFFF; --glow:rgba(109,90,232,.14); --band:#C2410C;
    --shadow:0 18px 40px -22px rgba(30,22,90,.45);
  }
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){
      --bg:#0F0E15; --surface:#191826;
      --ink:#F2F1F6; --dim:#A7A4B8; --faint:#6F6C84; --line:#2B2842; --hair:#211F33;
      --v1:#8B7BF0; --v2:#A08EF7; --v3:#C3B6FF; --v-deep:#C9BEFF; --v-soft:#241F42;
      --on-accent:#14102B; --glow:rgba(139,123,240,.22); --band:#E8763A;
      --shadow:0 18px 40px -22px rgba(0,0,0,.8);
    }
  }
  :root[data-theme="dark"]{
    --bg:#0F0E15; --surface:#191826;
    --ink:#F2F1F6; --dim:#A7A4B8; --faint:#6F6C84; --line:#2B2842; --hair:#211F33;
    --v1:#8B7BF0; --v2:#A08EF7; --v3:#C3B6FF; --v-deep:#C9BEFF; --v-soft:#241F42;
    --on-accent:#14102B; --glow:rgba(139,123,240,.22); --band:#E8763A;
    --shadow:0 18px 40px -22px rgba(0,0,0,.8);
  }

  *{box-sizing:border-box}
  body{
    margin:0; background:var(--bg); color:var(--ink);
    font-family:Manrope,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
    font-weight:500; font-size:17px; line-height:1.62; -webkit-font-smoothing:antialiased;
  }
  /* One shell, two widths. Text stays near 34em for readability no matter how
     wide the window is; the SHELL gets wider so a desktop is not a 660px strip
     with two empty gutters. */
  .shell{max-width:1120px; margin:0 auto; padding:0 28px}

  .topbar{border-bottom:1px solid var(--hair); background:var(--bg)}
  .topbar-in{display:flex; align-items:center; justify-content:space-between;
             gap:18px; min-height:70px; flex-wrap:wrap}
  /* The brand sits in the bar on every page. The landing page also has its big
     centred lockup in the hero; that repetition is deliberate and normal. */
  .brand{display:inline-flex; align-items:center; gap:10px; text-decoration:none;
         color:var(--ink); font-family:"Schibsted Grotesk",Manrope,sans-serif;
         font-weight:700; font-size:19px; letter-spacing:-.03em}
  .brand img{display:block; border-radius:8px}
  .nav{display:flex; align-items:center; gap:22px; flex-wrap:wrap}
  .nav a{font-size:15.5px; font-weight:600; color:var(--dim); text-decoration:none}
  .nav a:hover{color:var(--ink)}
  .nav a[aria-current="page"]{color:var(--v1)}
  .nav a.login{color:var(--on-accent)}
  .nav a.login:hover{color:var(--on-accent)}
  .login{font-size:16px; font-weight:700; color:var(--on-accent); text-decoration:none;
         background:var(--v1); border:1px solid transparent;
         padding:12px 26px; border-radius:11px;
         transition:filter .15s, transform .15s}
  .login:hover{filter:brightness(1.08); transform:translateY(-1px)}
  .login:focus-visible{outline:2px solid var(--v1); outline-offset:3px}

  .split{display:block}
  h1,h2{font-family:"Schibsted Grotesk",Manrope,sans-serif; margin:0; text-wrap:balance; letter-spacing:-.03em; font-weight:700}
  p{margin:0}

  /* The fold is centred and stacked in importance order: who, what, then the
     one action. The previous two-column version put the platform chips at eye
     level opposite the name, so the first thing read on the right was detail,
     and the left column dead-ended in empty space. */
  .hero{padding:52px 0 60px; text-align:center}
  .hero > *{margin-left:auto; margin-right:auto}

  .lockup{display:inline-flex; align-items:center; gap:13px; margin-bottom:26px}
  .lockup .mark{width:52px; height:52px; display:block}
  .wordmark{font-family:"Schibsted Grotesk",Manrope,sans-serif; font-weight:700;
            font-size:29px; letter-spacing:-.035em; line-height:1}

  /* the value proposition is now the biggest thing on the page, which is what
     it should have been: the brand name was set at 72px and says nothing */
  /* the line breaks are written into the markup, so the box has to be wide
     enough to honour them: a ch-based cap re-wrapped it into four cramped lines */
  h1.tag{font-family:"Schibsted Grotesk",Manrope,sans-serif; font-weight:700;
         font-size:clamp(31px,4.6vw,50px); line-height:1.08; letter-spacing:-.03em;
         max-width:840px; margin:0 auto 20px}
  h1.tag span{color:var(--v1)}
  .lede{font-size:19px; color:var(--dim); max-width:52ch; margin-bottom:34px}

  .hero .offer{margin:0 auto; padding:0; border:0; max-width:560px}
  .spots{display:inline-flex; align-items:center; gap:7px; font-size:12px; font-weight:700;
         letter-spacing:.09em; text-transform:uppercase; color:var(--v1);
         background:var(--v-soft); border-radius:999px; padding:6px 14px; margin-bottom:16px}
  .hero .signup{justify-content:center; max-width:520px; margin:0 auto}
  .hero .note{text-align:center; max-width:46ch; margin-left:auto; margin-right:auto}
  .hero .done, .hero .err{margin-left:auto; margin-right:auto; text-align:center}

  /* platform lists */
  .plats{margin-top:44px}
  .plabel{font-size:11px; font-weight:700; letter-spacing:.15em; text-transform:uppercase; color:var(--faint); margin-bottom:10px}
  .plabel b{color:var(--v1); font-weight:700}
  .chips{display:flex; flex-wrap:wrap; gap:7px; padding:0; margin:0 0 22px; list-style:none;
         justify-content:center}
  .chips li{
    font-size:13.5px; font-weight:600; color:var(--ink); background:var(--surface);
    border:1px solid var(--line); border-radius:8px; padding:6px 12px;
    display:flex; align-items:center; gap:7px;
  }
  .chips.soon li{color:var(--faint); border-style:dashed; background:transparent}
  .dot{width:6px; height:6px; border-radius:50%; background:var(--v1); flex:none}
  .chips.soon .dot{background:var(--faint); opacity:.6}
  .chips .more{border:0; background:transparent; color:var(--faint); padding-left:4px; font-style:italic}

  /* waitlist */
  .offer{margin-top:28px; padding-top:26px; border-top:1px solid var(--hair)}
  .spots{display:inline-flex; align-items:center; gap:7px; font-size:12px; font-weight:700;
         letter-spacing:.09em; text-transform:uppercase; color:var(--v1);
         background:var(--v-soft); border-radius:999px; padding:5px 12px; margin-bottom:14px}
  .spots b{font-weight:800}
  .offer p b{color:var(--ink); font-weight:700}
  .offer h2{font-size:clamp(21px,3.2vw,26px); margin-bottom:8px}
  .offer p{color:var(--dim); max-width:32em; font-size:16px}
  .signup{display:flex; gap:9px; margin-top:20px; max-width:450px; flex-wrap:wrap}
  .signup input{
    flex:1 1 235px; min-width:0; font:inherit; font-size:15.5px; padding:14px 15px;
    border-radius:11px; border:1px solid var(--line); background:var(--surface); color:var(--ink);
  }
  .signup input::placeholder{color:var(--faint)}
  .signup input:focus{outline:2px solid var(--v1); outline-offset:1px; border-color:transparent}
  .signup button{
    font:inherit; font-weight:700; font-size:15.5px; cursor:pointer; padding:14px 22px;
    border-radius:11px; border:0; background:var(--v1); color:var(--on-accent);
    transition:filter .15s ease, transform .15s ease;
  }
  .signup button:hover:not(:disabled){filter:brightness(1.08); transform:translateY(-1px)}
  .signup button:disabled{opacity:.6; cursor:progress}
  .signup button:focus-visible{outline:2px solid var(--ink); outline-offset:2px}
  .note{font-size:13.5px; color:var(--faint); margin-top:11px}
  .done{margin-top:20px; padding:16px 18px; border-radius:12px; max-width:450px;
        background:var(--v-soft); color:var(--v-deep); font-size:15.5px; font-weight:600; border:1px solid var(--line)}
  .err{margin-top:11px; font-size:13.5px; color:#C2410C}
  :root[data-theme="dark"] .err{color:#FF9556}
  @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .err{color:#FF9556} }
  [hidden]{display:none !important}

  .beat{padding:64px 0; border-top:1px solid var(--hair)}
  .kicker{font-size:11px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--v1); margin-bottom:14px}
  h2{font-size:clamp(25px,4vw,32px); line-height:1.16; margin-bottom:13px}
  .body{color:var(--dim); max-width:33em}
  .body + .body{margin-top:14px}
  .value{list-style:none; padding:0; margin:22px 0 0; display:flex; flex-direction:column; gap:16px; max-width:33em}
  .value li{color:var(--dim); padding-left:20px; position:relative}
  .value li::before{content:""; position:absolute; left:0; top:.62em; width:7px; height:7px;
                    border-radius:50%; background:var(--v1)}
  .value b{color:var(--ink); font-weight:700}

  /* drawing */
  .stage{position:relative; margin-top:30px}
  .stage::before{content:""; position:absolute; inset:4% 6% 4% 2%;
    background:radial-gradient(58% 62% at 30% 50%, var(--glow), transparent 72%); pointer-events:none}
  .stage svg{position:relative; width:100%; height:auto; display:block; overflow:visible}
  .arm-u{fill:none; stroke:#8F3403; stroke-width:17; stroke-linecap:round; stroke-linejoin:round}
  .arm{fill:none; stroke:url(#tube); stroke-width:14; stroke-linecap:round; stroke-linejoin:round}
  .arm-far-u{fill:none; stroke:#6E2802; stroke-width:15; stroke-linecap:round; stroke-linejoin:round}
  .arm-far{fill:none; stroke:#C2560A; stroke-width:12; stroke-linecap:round; stroke-linejoin:round}
  .arm-h{fill:none; stroke:#FFD1A3; stroke-width:3.6; stroke-linecap:round; stroke-linejoin:round;
         opacity:.72; transform:translate(-3.4px,-1.6px)}
  .sheen{fill:none; stroke:#FFFFFF; stroke-width:3; stroke-linecap:round; opacity:.20}
  /* the bands were #1F2430 on a near-black ground, so they were invisible.
     A darker orange reads on both themes and still looks like sling rubber. */
  .band{fill:none; stroke:var(--v3); stroke-width:4.2; stroke-linecap:round}
  .pouch{fill:var(--v-deep); opacity:.9}
  .arm{fill:none; stroke:#F97316; stroke-width:14; stroke-linecap:round; stroke-linejoin:round}
  /* border first, fill on top: both use the round-join trick for soft corners */
  .play-b{fill:var(--v2); stroke:var(--v2); stroke-width:22; stroke-linejoin:round}
  .play{fill:#FFFFFF; stroke:#FFFFFF; stroke-width:15; stroke-linejoin:round}
  .cimg{fill:#D9D3F5} .cdot{fill:#F97316} .cline{fill:#CFCADF}
  .ray{stroke-linecap:round; opacity:.85}
  .pill{fill:var(--surface); stroke:var(--line); stroke-width:1.3}
  .pill-t{font-family:Manrope,sans-serif; font-size:13px; font-weight:700; fill:var(--ink)}
  @media (prefers-reduced-motion:no-preference){
    .ray{stroke-dasharray:var(--len); stroke-dashoffset:var(--len); opacity:0;
         animation:fire .55s cubic-bezier(.15,.8,.3,1) forwards var(--d)}
    .land{opacity:0; animation:ld .5s ease forwards var(--d)}
    @keyframes fire{0%{opacity:0} 35%{opacity:.9} 100%{opacity:.5; stroke-dashoffset:0}}
    @keyframes ld{from{opacity:0; transform:translateX(-10px)} to{opacity:1; transform:none}}
  }

  .q{border-bottom:1px solid var(--hair); padding:16px 0}
  .q:first-of-type{border-top:1px solid var(--hair); margin-top:26px}
  .q summary{list-style:none; cursor:pointer; display:flex; align-items:flex-start; gap:12px}
  .q summary::-webkit-details-marker{display:none}
  .q summary::after{content:"+"; margin-left:auto; color:var(--v1); font-weight:700; font-size:20px; line-height:1}
  .q[open] summary::after{content:"−"}
  .q h3{font-family:"Schibsted Grotesk",Manrope,sans-serif; font-weight:700; font-size:17.5px;
        letter-spacing:-.015em; margin:0; display:inline}
  .q p{margin:12px 0 2px; color:var(--dim); max-width:33em; font-size:16px}
  .q summary:focus-visible{outline:2px solid var(--v1); outline-offset:4px; border-radius:6px}
  footer{border-top:1px solid var(--hair); padding:24px 0 48px; display:flex; gap:18px; align-items:center; font-size:13.5px; color:var(--faint)}
  footer .sp{flex:1}
  footer a{text-decoration:none; color:var(--faint)}
  footer a:hover{color:var(--dim)}
  @media (max-width:620px){ .beat{padding:50px 0} .mark{width:88px;height:88px} }

  /* ── wide screens ─────────────────────────────────────────────────────── */
  @media (min-width:900px){
    .hero{padding:72px 0 78px}

    /* the fix reads as one idea: the sentence and the picture of it, side by side */
    .split{display:grid; grid-template-columns:1fr 1.05fr; column-gap:56px; align-items:center}
    .split .stage{margin-top:0}

    /* everything else stays a readable column rather than stretching to 1120px */
    .beat > .kicker, .beat > h2, .beat > .body, .beat > .value,
    .beat > .offer, .beat > .q{max-width:44em}
  }

/* ── content pages: features, pricing, contact ─────────────────────────────
   The landing page is a sequence of full-width beats. These are documents, so
   they get one narrower column and a heading block at the top. */
  .page{padding:56px 0 24px}
  .page h1{font-family:"Schibsted Grotesk",Manrope,sans-serif; font-weight:700;
           font-size:clamp(30px,4.2vw,44px); line-height:1.1; letter-spacing:-.03em;
           max-width:18ch; margin:0 0 16px}
  .page .lede{font-size:19px; color:var(--dim); max-width:56ch; margin:0}
  .prose{max-width:62ch}
  .prose h2{font-size:clamp(20px,3vw,25px); margin:38px 0 10px}
  .prose h3{font-size:17px; margin:24px 0 6px; letter-spacing:-.01em}
  .prose p{color:var(--dim); margin:0 0 12px}
  .prose ul{color:var(--dim); padding-left:20px; margin:0 0 12px}
  .prose li{margin:6px 0}
  .prose strong{color:var(--ink); font-weight:700}

/* pricing tiers */
  .tiers{display:grid; gap:18px; margin:38px 0 8px;
         grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
  .tier{background:var(--surface); border:1px solid var(--line); border-radius:16px;
        padding:26px 24px; display:flex; flex-direction:column}
  .tier.pop{border-color:var(--v1); box-shadow:var(--shadow)}
  .tier .badge{align-self:flex-start; font-size:11px; font-weight:700; letter-spacing:.14em;
               text-transform:uppercase; color:var(--v1); background:var(--v-soft);
               border-radius:999px; padding:5px 11px; margin-bottom:12px}
  .tier h2{font-size:19px; margin:0 0 4px}
  .tier .who{color:var(--faint); font-size:14px; margin:0 0 18px}
  .price{font-family:"Schibsted Grotesk",Manrope,sans-serif; font-weight:700;
         font-size:40px; letter-spacing:-.03em; line-height:1; color:var(--ink)}
  .price span{font-size:15px; font-weight:600; color:var(--faint); letter-spacing:0}
  .tier .trial{margin:9px 0 0; font-size:14px; font-weight:700; color:var(--v1)}
  .tier .trial span{font-weight:600; color:var(--faint)}
  .tier ul{list-style:none; padding:0; margin:20px 0 0; color:var(--dim); font-size:15px}
  .tier li{padding:7px 0 7px 22px; position:relative}
  .tier li::before{content:""; position:absolute; left:4px; top:15px; width:7px; height:7px;
                   border-radius:50%; background:var(--v1)}
  .tier .cta{margin-top:auto; padding-top:22px; margin-bottom:0}
  .tier .go{display:block; text-align:center; font-weight:700; font-size:15.5px;
            padding:13px 18px; border-radius:11px; text-decoration:none;
            border:1px solid var(--line); color:var(--ink)}
  .tier.pop .go{background:var(--v1); color:var(--on-accent); border-color:transparent}
  .tier .go:hover{filter:brightness(1.06)}
  .tier .addon{margin:11px 0 0; font-size:13px; color:var(--faint); text-align:center}
  .tier .addon b{color:var(--dim); font-weight:700}

/* the "what's in the trial" panel and other bordered notes */
  .panel{background:var(--surface); border:1px solid var(--line); border-radius:16px;
         padding:22px 24px; margin-top:26px}
  .panel h2{font-size:18px; margin:0 0 10px}
  .panel ul{margin:0; padding-left:20px; color:var(--dim); font-size:15px}
  .panel li{margin:6px 0}

/* On a phone the bar wraps to brand-then-nav. Tighten the nav so all four
   items share the second row instead of the Log in button taking a third. */
  @media (max-width:560px){
    .topbar-in{gap:10px; padding-bottom:12px}
    .nav{gap:14px; width:100%}
    .nav a{font-size:14.5px}
    .nav a.login{margin-left:auto; padding:9px 16px; border-radius:9px}
  }

/* ── the comparison table ───────────────────────────────────────────────────
   Kept deliberately short. The failure mode for these is forty rows where
   every tier has a tick, which tells a buyer nothing and costs them the effort
   of reading it. Rows here earn their place by DIFFERING, plus a handful that
   say "even the cheapest plan gets this". Wide content scrolls in its own box
   rather than making the page scroll sideways. */
  .compare{margin:44px 0 0}
  .compare h2{font-size:clamp(20px,3vw,25px); margin:0 0 6px}
  .compare .sub{color:var(--dim); margin:0 0 18px}
  .tablewrap{overflow-x:auto; border:1px solid var(--line); border-radius:16px;
             background:var(--surface)}
  table.cmp{border-collapse:collapse; width:100%; min-width:520px; font-size:15px}
  table.cmp th, table.cmp td{padding:12px 16px; text-align:left; border-bottom:1px solid var(--hair)}
  table.cmp tr:last-child td{border-bottom:0}
  table.cmp thead th{font-size:13px; letter-spacing:.04em; text-transform:uppercase;
                     color:var(--faint); font-weight:700; background:var(--bg)}
  table.cmp thead th.plan{color:var(--ink); font-size:15px; text-transform:none; letter-spacing:0}
  table.cmp thead th.plan.pop{color:var(--v1)}
  table.cmp th[scope="row"]{font-weight:600; color:var(--dim)}
  table.cmp td{text-align:center; color:var(--dim); white-space:nowrap}
  table.cmp td.on{color:var(--v1); font-weight:700}
  table.cmp td.off{color:var(--faint)}
  table.cmp tbody tr:hover{background:var(--v-soft)}
  table.cmp .grp th{background:var(--bg); font-size:12px; letter-spacing:.12em;
                    text-transform:uppercase; color:var(--faint); font-weight:700}

/* Visually hidden, still read aloud. The tick alone means nothing to a screen
   reader, and a table of unlabelled symbols is unusable without this. */
  .sr{position:absolute; width:1px; height:1px; padding:0; margin:-1px;
      overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0}