/* offsheetclasses.com: the Offsheet Classes design system (design/DESIGN.md), as a marketing page.
   Fonts are served from this site; nothing loads from anywhere else. */
@font-face{font-family:"Schibsted Grotesk"; font-weight:400 900; font-display:swap; src:url(/fonts/schibsted-grotesk.woff2) format("woff2");}
@font-face{font-family:"Inter"; font-weight:100 900; font-display:swap; src:url(/fonts/inter.woff2) format("woff2");}
@font-face{font-family:"IBM Plex Mono"; font-weight:500; font-display:swap; src:url(/fonts/plex-mono-500.woff2) format("woff2");}

:root{
  --ink:#131b28; --ink-soft:#4c566b; --ink-faint:#616d83;
  --ground:#ffffff; --soft:#f4f6fa; --hair:#e3e9f2;
  --select:#2d5bd8; --select-dark:#2349b3;
  --slab:#151b26; --slab-2:#1d2533; --slab-line:rgba(255,255,255,.10); --on-slab-soft:#a7b1c4; --on-slab-blue:#8aa6ff;
  --paid:#1f7a4d; --paid-soft:#e2f0e8; --warn:#8c5f12; --warn-soft:#f7efdd;
  --display:"Schibsted Grotesk","Segoe UI",system-ui,-apple-system,Roboto,sans-serif;
  --body:"Inter","Segoe UI",system-ui,-apple-system,Roboto,sans-serif;
  --mono:"IBM Plex Mono",Consolas,"Courier New",monospace;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto;}}
body{margin:0; background:var(--ground); color:var(--ink); font-family:var(--body); font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased;}
a{color:var(--select);}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid var(--select); outline-offset:3px;}
.wrap{max-width:1040px; margin:0 auto; padding:0 24px;}
.narrow{max-width:560px;}
section{padding:96px 0;}
section.wrap{padding:96px 24px;}
h1,h2,h3{font-family:var(--display); color:var(--ink); margin:0; text-wrap:balance;}
h1{font-size:clamp(44px,8vw,84px); font-weight:800; letter-spacing:-.045em; line-height:.98; max-width:12ch; margin:0 auto;}
h2{font-size:clamp(32px,5vw,48px); font-weight:800; letter-spacing:-.035em; line-height:1.05; text-align:center; max-width:18ch; margin:0 auto;}
h3{font-size:19px; font-weight:700; letter-spacing:-.015em;}
.mono{font-family:var(--mono); font-weight:500; font-size:12px; letter-spacing:.06em;}
.eyebrow{font-family:var(--mono); font-weight:500; font-size:14px; letter-spacing:.06em; color:var(--ink-faint); text-align:center; margin:0 0 20px;}
.eyebrow.blue{color:var(--select);}
.lede{font-size:19px; color:var(--ink-soft); text-align:center; max-width:36em; margin:20px auto 0;}
.fine{font-size:14px; color:var(--ink-faint); text-align:center; margin:14px 0 0;}
.fine.light{color:var(--on-slab-soft);}

/* buttons: 48px tall, so they're easy to tap */
.btn{display:inline-flex; align-items:center; justify-content:center; min-height:52px; padding:0 30px; border-radius:999px;
  font-family:var(--display); font-weight:700; font-size:17px; text-decoration:none; border:none; cursor:pointer; letter-spacing:-.01em;}
.btn-ink{background:var(--ink); color:#fff;} .btn-ink:hover{background:#000;}
.btn-blue{background:var(--select); color:#fff;} .btn-blue:hover{background:var(--select-dark);}
.btn-white{background:#fff; color:var(--ink);} .btn-white:hover{background:#e9edf5;}
.btn-block{width:100%;}
.btn[disabled]{opacity:.6; cursor:wait;}

/* nav */
.nav{position:sticky; top:0; z-index:10; background:rgba(255,255,255,.94); backdrop-filter:blur(8px); border-bottom:1px solid var(--hair);}
.nav-row{display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:68px;}
.nav nav{display:flex; align-items:center; gap:22px; flex-wrap:wrap;}
.nav nav a{color:var(--ink-soft); text-decoration:none; font-size:15px; min-height:44px; display:inline-flex; align-items:center;}
.nav nav a:hover{color:var(--ink);}
.nav nav a.nav-cta{color:var(--select); font-weight:600;}
.cellmark{position:relative; display:inline-block; white-space:nowrap; font-family:var(--display); font-weight:800; font-size:20px; letter-spacing:-.03em;
  color:var(--ink); text-decoration:none; padding:3px 10px 4px; border:2px solid var(--select);}
.cellmark i{font-style:normal; font-weight:600; color:var(--select);}
.cellmark::after{content:""; position:absolute; right:-4px; bottom:-4px; width:7px; height:7px; background:var(--select); border:1.6px solid #fff;}
@media (max-width:640px){ section{padding:72px 0;} section.wrap{padding:72px 20px;} section.hero{padding-top:72px; padding-bottom:72px;} .wrap{padding:0 20px;} .hide-sm{display:none !important;} .nav nav{gap:16px;} .cellmark{font-size:17px;} }

/* hero */
section.hero{text-align:center; padding-top:110px; padding-bottom:110px;}
.hero .lede{margin-bottom:36px;}
.notfound{margin-top:40px;}

/* dark sections */
.dark{background:var(--slab); color:#fff;}
.dark h2{color:#fff;}
.signs{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:56px;}
.sign{background:var(--slab-2); border:1px solid var(--slab-line); border-radius:16px; padding:24px; display:flex; flex-direction:column; min-height:270px;}
.num-tag{font-family:var(--mono); font-size:13px; color:var(--on-slab-blue);}
.sign-art{flex:1; display:flex; align-items:center; padding:20px 0;}
.sign p{margin:0; font-size:18px; line-height:1.45; color:#fff;}
.tabs-art{display:flex; gap:4px; border-bottom:2px solid #333d4d; width:100%;}
.tabs-art span{font-family:var(--mono); font-size:12px; padding:7px 9px; background:#283142; color:var(--on-slab-soft); border-radius:6px 6px 0 0;}
.tabs-art span.on{background:var(--select); color:#fff;}
.grid-art{display:grid; grid-template-columns:1fr 1fr; gap:5px; width:100%;}
.grid-art i{height:24px; background:#283142; border-radius:5px; font-style:normal; text-align:center; font-family:var(--mono); font-size:12px; color:#8b95a8; line-height:24px;}
.grid-art i.warn{background:#4a3a1c; color:#f0b44c;}
.bars-art{display:flex; align-items:flex-end; gap:6px; height:90px; width:100%;}
.bars-art i{flex:1; background:#2c3546; border-radius:3px 3px 0 0;}
.bars-art i.on{background:var(--select);}
.bars-art i:nth-child(1){height:18%} .bars-art i:nth-child(2){height:28%} .bars-art i:nth-child(3){height:40%}
.bars-art i:nth-child(4){height:58%} .bars-art i:nth-child(5){height:78%} .bars-art i:nth-child(6){height:100%}
.dark-note{color:var(--on-slab-soft); text-align:center; max-width:40em; margin:56px auto 0; font-size:17px;}
.dark-lede{color:var(--on-slab-soft); text-align:center; font-size:18px; margin:18px 0 32px;}
@media (max-width:820px){ .signs{grid-template-columns:1fr;} .sign{min-height:0;} }

/* demo */
.demo-sec{text-align:center;}
.device{background:var(--slab); border-radius:22px; padding:0 14px 14px; margin:52px auto 0; max-width:880px; text-align:left;
  box-shadow:0 30px 60px rgba(19,27,40,.18);}
.device-bar{display:flex; justify-content:space-between; gap:12px; padding:14px 6px; font-family:var(--mono); font-size:12px; letter-spacing:.06em; color:var(--on-slab-soft); flex-wrap:wrap;}
.live{color:#fff; display:inline-flex; align-items:center; gap:8px;}
.live i{width:8px; height:8px; border-radius:50%; background:#3ecf7a;}
.screen{background:#fff; border-radius:12px; overflow:hidden;}
.browser{display:flex; align-items:center; gap:12px; padding:10px 14px; background:var(--soft); border-bottom:1px solid var(--hair);}
.dots{display:flex; gap:6px;} .dots i{width:11px; height:11px; border-radius:50%; background:#f25f58;} .dots i:nth-child(2){background:#f8bc2f;} .dots i:nth-child(3){background:#30c748;}
.url{flex:1; font-family:var(--mono); font-size:12.5px; color:var(--ink-soft); background:#fff; border:1px solid var(--hair); border-radius:999px; padding:5px 14px;}
.demo-head{display:flex; justify-content:space-between; align-items:center; gap:10px; padding:16px 22px; border-bottom:1px solid var(--hair); flex-wrap:wrap;}
.demo-head b{font-family:var(--display); font-size:19px; letter-spacing:-.02em;}
.demo-head b span{font-weight:500; color:var(--ink-faint);}
.demo-head .mono{color:var(--ink-faint);}
.demo-tabs{display:flex; gap:8px; padding:16px 22px 4px; flex-wrap:wrap;}
.demo-tabs button{min-height:44px; padding:0 18px; border-radius:999px; border:none; background:var(--soft); color:var(--ink-soft); font:inherit; font-size:15px; cursor:pointer;}
.demo-tabs button[aria-selected="true"]{background:var(--ink); color:#fff;}
.demo-panel{padding:4px 22px 0; overflow-x:auto;}
.demo-table{width:100%; border-collapse:collapse; font-size:15px; min-width:460px;}
.demo-table th{font-family:var(--mono); font-weight:500; font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-faint); text-align:left; padding:12px 8px 8px 0; border-bottom:1px solid var(--hair);}
.demo-table td{padding:13px 8px 13px 0; border-bottom:1px solid var(--hair); vertical-align:middle;}
.demo-table .r{text-align:right; padding-right:0;}
.demo-table small{display:block; color:var(--ink-faint); font-size:13px;}
.demo-table .warn{color:var(--warn);}
.pill{min-height:36px; padding:0 14px; border-radius:999px; font:inherit; font-size:14px; cursor:pointer; border:1.5px solid;}
.pill.paid{background:var(--paid-soft); color:var(--paid); border-color:#bfe0cd;}
.pill.due{background:#fff; color:var(--warn); border-color:#e6cf9e;}
.pill.due:hover{background:var(--warn-soft);}
.statement{padding:6px 0 0;}
.st-head{display:flex; justify-content:space-between; align-items:flex-start; gap:10px; padding:8px 0 10px;}
.st-head b{display:block; font-family:var(--display); font-size:18px;}
.st-head span{color:var(--ink-faint); font-size:14px;}
.st-due{font-family:var(--display); font-weight:700; font-size:17px; text-align:right; margin:12px 0 0;}
.demo-totals{display:grid; grid-template-columns:repeat(3,1fr); margin:18px 22px 22px; border:1px solid var(--hair); border-radius:12px;}
.demo-totals div{padding:14px 18px;}
.demo-totals div + div{border-left:1px solid var(--hair);}
.demo-totals .mono{display:block; color:var(--ink-faint); text-transform:uppercase;}
.demo-totals b{font-family:var(--body); font-weight:700; font-size:26px; letter-spacing:-.02em; font-variant-numeric:tabular-nums;}
.paid{color:var(--paid);} .owed{color:var(--warn);}
@media (max-width:640px){
  .demo-totals{grid-template-columns:1fr;} .demo-totals div + div{border-left:none; border-top:1px solid var(--hair);}
  .device{padding:0 8px 8px; border-radius:18px;} .demo-head,.demo-tabs,.demo-panel{padding-left:14px; padding-right:14px;} .demo-totals{margin:14px;}
}

/* steps & principles */
.soft{background:var(--soft);}
.steps{list-style:none; padding:0; margin:56px 0 0; display:grid; grid-template-columns:repeat(3,1fr); gap:36px;}
.step-n{display:block; font-family:var(--display); font-weight:800; font-size:44px; color:#cfd7e4; line-height:1; margin-bottom:14px;}
.steps p,.principles p{color:var(--ink-soft); margin:10px 0 0;}
.principles{display:grid; grid-template-columns:1fr 1fr; gap:40px 48px; margin-top:56px;}
@media (max-width:820px){ .steps,.principles{grid-template-columns:1fr; gap:28px;} }

/* pricing */
.plans{display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:48px;}
.plan{background:#fff; border:1px solid var(--hair); border-radius:18px; padding:32px; display:flex; flex-direction:column;}
.plan-tag{color:var(--ink-faint); text-transform:uppercase;}
.plan-tag.blue{color:var(--on-slab-blue);}
.plan-price{font-family:var(--display); font-weight:800; font-size:40px; letter-spacing:-.035em; margin:10px 0 0; line-height:1.1;}
.plan-sub{color:var(--ink-faint); margin:6px 0 18px;}
.plan ul{list-style:none; padding:0; margin:0 0 26px; flex:1;}
.plan li{padding:6px 0; color:var(--ink-soft);}
.plan li::before{content:"✓"; color:var(--select); font-weight:700; margin-right:10px;}
.plan-foot{font-size:14px; color:var(--ink-faint); margin:14px 0 0; text-align:center;}
.plan-dark{background:var(--slab); border-color:var(--slab); color:#fff;}
.plan-dark .plan-price{color:#fff;} .plan-dark .plan-sub,.plan-dark li{color:var(--on-slab-soft);}
.plan-dark li::before{color:var(--on-slab-blue);}
@media (max-width:820px){ .plans{grid-template-columns:1fr;} }

/* faq */
.faq{margin:48px 0 0;}
.faq > div{display:grid; grid-template-columns:1fr 1fr; gap:24px; padding:24px 0; border-top:1px solid var(--hair);}
.faq > div:last-child{border-bottom:1px solid var(--hair);}
.faq dt{font-family:var(--display); font-weight:700; font-size:19px; letter-spacing:-.015em;}
.faq dd{margin:0; color:var(--ink-soft);}
@media (max-width:720px){ .faq > div{grid-template-columns:1fr; gap:8px;} }

/* quote form */
.quote{display:flex; flex-direction:column;}
.quote label{font-size:14px; font-weight:600; color:#dfe5ef; margin:14px 0 6px;}
.quote .opt{font-weight:400; color:var(--on-slab-soft);}
.quote input,.quote select,.quote textarea{width:100%; min-height:52px; padding:12px 18px; border-radius:16px; border:1.5px solid #364056;
  background:var(--slab-2); color:#fff; font:inherit; font-size:16px;}
.quote textarea{resize:vertical; min-height:96px;}
.quote input::placeholder{color:#8590a5;}
.quote .btn{margin-top:22px;}
.form-msg{min-height:24px; margin:12px 0 0; text-align:center; color:#ffb4ab;}
.form-msg.ok{color:#8fe3b0;}
.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden;}
.alt{text-align:center; color:var(--on-slab-soft); margin:32px 0 0;}
.alt a{color:#fff; font-weight:600;}

/* footer */
.foot{display:flex; justify-content:space-between; align-items:flex-start; gap:20px; padding-top:40px; padding-bottom:48px; flex-wrap:wrap;}
.foot-brand{display:block; font-family:var(--display); font-weight:800; font-size:18px; letter-spacing:-.02em;}
.foot-sub{color:var(--ink-faint);}
.foot nav{display:flex; gap:20px; flex-wrap:wrap;}
.foot nav a{color:var(--ink-soft); text-decoration:none; min-height:44px; display:inline-flex; align-items:center;}
.foot nav a:hover{color:var(--ink);}

/* phones: keep the header on one line, and fit the demo tables without sideways scrolling */
@media (max-width:480px){
  .nav nav a:not(.nav-cta){display:none;}
  .demo-table{min-width:0;}
  #demo-payments th:nth-child(2), #demo-payments td:nth-child(2){display:none;}
  #demo-schedule th:nth-child(4), #demo-schedule td:nth-child(4){display:none;}
  .demo-head{flex-direction:column; align-items:flex-start; gap:4px;}
}

/* "?count=off" confirmation */
.count-note{position:fixed; left:50%; bottom:20px; transform:translateX(-50%); z-index:20; margin:0; padding:12px 20px;
  border-radius:999px; background:var(--ink); color:#fff; font-size:15px; box-shadow:0 8px 24px rgba(19,27,40,.25);}

/* privacy page */
main.prose{max-width:720px; padding-top:56px; padding-bottom:40px;}
.prose-title{font-size:clamp(32px,5vw,44px); max-width:none; margin:0;}
.prose h2{text-align:left; font-size:22px; max-width:none; margin:36px 0 10px;}
.prose p{color:var(--ink-soft);}
.fine.left{text-align:left;}