/* Form Slots brand shell: tokens, type, nav, footer, controls.
   Shared by every page except index.html, which inlines the same tokens because
   it is the LCP-critical entry point. Keep the two in sync when tokens change. */

@font-face{
  font-family:"Schibsted Grotesk";
  src:url("/fonts/SchibstedGrotesk.woff2") format("woff2-variations");
  font-weight:100 900;
  font-style:normal;
  font-display:swap;
}

:root{
  --ink:#14161b;
  --ink-2:#343a44;
  --muted:#666e7b;
  --paper:#ffffff;
  --paper-2:#f5f6f4;
  --line:#e2e5e1;
  --accent:#5746e3;
  --accent-press:#4536c9;
  --accent-wash:#eeecfd;
  --on-accent:#ffffff;
  --r:10px;
  --shell:1180px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:"Schibsted Grotesk",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{color:inherit}
img{max-width:100%;display:block}
.shell{max-width:var(--shell);margin:0 auto;padding:0 24px}
.prose{max-width:760px}

h1,h2,h3{margin:0;font-weight:600;letter-spacing:-.022em;line-height:1.12}
h1{font-size:clamp(2rem,4vw,2.9rem)}
h2{font-size:1.3rem;margin:38px 0 10px}
h3{font-size:1.05rem}
p,li{color:var(--ink-2)}
.lede{color:var(--muted);font-size:1.09rem;line-height:1.55}
.sm{font-size:.92rem;color:var(--muted)}

.btn{
  display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;
  padding:12px 20px;border-radius:var(--r);
  font:inherit;font-weight:500;font-size:1rem;
  border:1px solid transparent;cursor:pointer;text-decoration:none;
  transition:background .18s ease,border-color .18s ease,transform .12s ease;
}
.btn-primary{background:var(--accent);color:var(--on-accent)}
.btn-primary:hover{background:var(--accent-press)}
.btn-primary:active{transform:translateY(1px)}
.btn-quiet{background:transparent;color:var(--ink);border-color:var(--line)}
.btn-quiet:hover{background:var(--paper-2)}
.btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.pill{
  display:inline-block;border-radius:999px;padding:3px 10px;
  font-size:.72rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;
  background:var(--accent-wash);color:var(--accent);
}

/* Nav: single line, 68px */
header{
  position:sticky;top:0;z-index:20;
  background:color-mix(in srgb,var(--paper) 88%,transparent);
  backdrop-filter:saturate(1.5) blur(10px);
  border-bottom:1px solid var(--line);
}
.nav{height:68px;display:flex;align-items:center;justify-content:space-between;gap:20px}
.brand{display:flex;align-items:center;gap:10px;font-weight:600;letter-spacing:-.02em;font-size:1.05rem;text-decoration:none}
.mark{width:22px;height:22px;flex:none}
.nav-right{display:flex;align-items:center;gap:26px}
.nav-right a.link{color:var(--muted);font-size:.95rem;text-decoration:none;transition:color .15s ease}
.nav-right a.link:hover{color:var(--ink)}

main{padding:52px 0 20px}
.page-head{margin-bottom:8px}
.updated{color:var(--muted);font-size:.9rem;margin:6px 0 30px}
.prose a{color:var(--accent);text-decoration:underline}
.prose ul{padding-left:22px}
.prose li{margin:6px 0}
.callout{
  background:var(--paper-2);border:1px solid var(--line);border-radius:var(--r);
  padding:16px 18px;margin:22px 0;font-size:.97rem;
}
table{border-collapse:collapse;width:100%;margin:16px 0;font-size:.92rem}
th,td{border:1px solid var(--line);padding:10px 12px;text-align:left;vertical-align:top}
th{background:var(--paper-2);font-weight:600}
code{background:var(--paper-2);border:1px solid var(--line);border-radius:5px;padding:1px 5px;font-size:.85em}
.tblwrap{overflow-x:auto}

footer{border-top:1px solid var(--line);margin-top:64px;padding:40px 0 52px;color:var(--muted);font-size:.9rem}
.foot-top{display:flex;justify-content:space-between;gap:28px;flex-wrap:wrap;align-items:center}
.foot-links{display:flex;gap:24px;flex-wrap:wrap}
.foot-links a{text-decoration:none}
.foot-links a:hover{color:var(--ink)}
.legal{margin-top:28px;padding-top:22px;border-top:1px solid var(--line);font-size:.82rem;line-height:1.7;max-width:88ch}
.legal a{color:var(--muted);text-decoration:underline}

@media (prefers-reduced-motion:reduce){
  .btn{transition:none}
  .btn:active{transform:none}
}
@media (max-width:680px){
  body{font-size:16px}
  .shell{padding:0 18px}
  .nav-right .link{display:none}
}

/* ---- Page components used by pricing / legal / support ---- */
.wrap{max-width:var(--shell);margin:0 auto;padding:0 24px}
main .wrap{max-width:820px}

.hero{padding:56px 0 4px;text-align:center}
.hero h1{margin-bottom:14px}
.lead{color:var(--muted);font-size:1.09rem;line-height:1.55;max-width:58ch;margin:0 auto}

/* Pricing plans. Class names and values are shared with the landing's pricing
   section, which inlines this same block. The plan cards are meant to be
   identical markup on both pages, so edit them together. */
.pricing{padding:84px 0;background:var(--paper-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.plans{display:grid;grid-template-columns:1fr 1fr;gap:16px;max-width:760px;margin:40px auto 0}
.plan{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:30px;display:flex;flex-direction:column}
.plan.up{border-color:var(--accent)}
.plan .name{font-weight:600;font-size:1.05rem}
.plan .cost{font-size:2.5rem;font-weight:600;letter-spacing:-.03em;margin:10px 0 2px;line-height:1}
.plan .cost span{font-size:1rem;font-weight:400;color:var(--muted);letter-spacing:0}
.plan .sub{color:var(--muted);font-size:.92rem;min-height:22px}
.plan ul{list-style:none;margin:20px 0 26px;padding:0}
.plan li{font-size:.97rem;padding:5px 0 5px 22px;position:relative;color:var(--ink-2)}
.plan li::before{content:"";position:absolute;left:0;top:12px;width:9px;height:9px;border-radius:2px;background:var(--accent)}
.plan .btn{width:100%;margin-top:auto}
.pay-note{text-align:center;color:var(--muted);font-size:.88rem;margin-top:22px}

/* FAQ disclosures */
.faq{padding:56px 0 10px}
.faq h2{text-align:center;margin:0 0 26px;font-size:1.6rem}
.faq details{border-bottom:1px solid var(--line);padding:16px 0}
.faq summary{font-weight:500;cursor:pointer;list-style:none;color:var(--ink)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";float:right;color:var(--muted)}
.faq details[open] summary::after{content:"\2013"}
.faq p{color:var(--muted);font-size:.97rem;margin:10px 0 0}

/* Support page contact block */
.contact{
  background:var(--accent-wash);border:1px solid transparent;border-radius:var(--r);
  padding:20px 22px;margin:10px 0 8px;
}
.contact a{color:var(--accent);font-weight:500}
.sub{color:var(--muted)}

@media (max-width:680px){
  .plans{grid-template-columns:1fr}
  .wrap{padding:0 18px}
}
.btn.is-soon{color:var(--muted);cursor:default;border-style:dashed}
.btn.is-soon:hover{background:transparent}