/* planwell.digital: the public pages (home, privacy, AI statement). */
:root {
  --bg: #FAF6EC; --panel: #FFFFFF; --ink: #21201B; --muted: #6B6960; --faint: #9A978C;
  --line: #E4DED0; --line-strong: #CFC8B6; --teal: #0E6E56; --teal-dark: #0B5A46; --teal-soft: #E3F0EA;
  --display: "Bricolage Grotesque", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --sans: "Bricolage Grotesque", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --attended: #ECE6D6; --red: #C9463B; --amber: #D9A441; --green: #0E6E56;
  --ease: cubic-bezier(0.32, 0.72, 0, 1);
  --amber-soft: #F6EBD2;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 16px/1.6 var(--sans); }
a { color: var(--teal); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
.wrap { max-width: 1040px; margin: 0 auto; padding: 0 24px; }

.top { border-bottom: 1px solid var(--line); background: var(--bg); }
.top-in { display: flex; align-items: center; gap: 24px; padding: 18px 0; flex-wrap: wrap; }
.wordmark { font-family: var(--display); font-size: 22px; font-weight: 600; letter-spacing: -0.01em; color: var(--ink); line-height: 1; }
.wordmark:hover { text-decoration: none; }
.top nav { display: flex; align-items: center; gap: 4px 18px; flex-wrap: wrap; margin-left: auto; font-size: 15px; }
.top nav a { color: var(--muted); }
.top nav a:hover { color: var(--ink); text-decoration: none; }
.top nav a.on { color: var(--ink); }
.top nav a.signin { color: var(--ink); border: 1px solid var(--line-strong); border-radius: 8px; padding: 6px 12px; margin-left: 6px; }
.top nav a.signin:hover { background: var(--panel); }
.who { color: var(--muted); font-size: 14px; }

.hero { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 48px; align-items: start; padding: 72px 0 64px; }
.hero h1 { font-family: var(--display); font-weight: 600; font-size: clamp(40px, 6vw, 72px); line-height: 1; letter-spacing: -0.035em; font-variation-settings: "opsz" 96; margin: 0 0 26px; }
.hero h1 .w { display: inline-block; opacity: 0; transform: translateY(0.35em); animation: rise 900ms var(--ease) forwards; }
.hero h1 .w:nth-child(2) { animation-delay: 110ms; }
.hero h1 .w:nth-child(3) { animation-delay: 220ms; }
.hero h1 .stop { color: var(--teal); }
.hero .lede { font-size: 20px; line-height: 1.5; margin: 0 0 10px; opacity: 0; animation: rise 900ms var(--ease) 420ms forwards; }
.hero .aside { color: var(--muted); font-size: 17px; margin: 0 0 32px; opacity: 0; animation: rise 900ms var(--ease) 520ms forwards; }
.actions { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; opacity: 0; animation: rise 900ms var(--ease) 640ms forwards; }
.btn { display: inline-flex; align-items: center; gap: 10px; background: var(--teal); color: #fff; border-radius: 10px; padding: 13px 20px; font-weight: 600; font-size: 16px; line-height: 1; transition: transform 500ms var(--ease), background 300ms; }
.btn:hover { background: var(--teal-dark); text-decoration: none; transform: translateY(-1px); }
.btn.quiet { background: transparent; color: var(--ink); border: 1px solid var(--line-strong); }
.btn.quiet:hover { background: var(--panel); }
@keyframes rise { to { opacity: 1; transform: none; } }

/* Every Lesson Counts: one pupil's week. Days across, periods down. Each square is a lesson. */
.scene { max-width: 460px; width: 100%; justify-self: end; opacity: 0; animation: rise 900ms var(--ease) 300ms forwards; }
.scene .who { display: flex; justify-content: space-between; align-items: baseline; font-size: 14px; color: var(--muted); margin-bottom: 10px; }
.scene .who b { color: var(--ink); font-weight: 600; }
.week { display: grid; grid-template-columns: 28px repeat(5, 1fr); gap: 6px; }
.week .d { font-size: 12px; color: var(--muted); text-align: center; letter-spacing: .04em; transition: color 500ms; }
.week .d.absent { color: var(--ink); font-weight: 600; }
.week .p { font-size: 12px; color: var(--muted); align-self: center; }
.cell { position: relative; aspect-ratio: 1 / .78; border: 0; border-radius: 8px; padding: 0; background: var(--attended); cursor: default; font: inherit; opacity: 0; transform: scale(.6);
  transition: opacity 800ms var(--ease), transform 800ms var(--ease), background 600ms var(--ease), box-shadow 400ms var(--ease); }
.cell.in { opacity: 1; transform: none; }
.cell.red { background: var(--red); }
.cell.amber { background: var(--amber); }
.cell.green { background: var(--green); }
.cell svg { position: absolute; inset: 0; margin: auto; width: 46%; height: 46%; stroke: #fff; stroke-width: 3; fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 24; stroke-dashoffset: 24; transition: stroke-dashoffset 500ms var(--ease) 150ms; }
.cell.green svg { stroke-dashoffset: 0; }
.key { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; color: var(--muted); margin-top: 12px; }
.key i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; }
.detail { margin-top: 16px; border-top: 1px solid var(--line); padding-top: 14px; min-height: 128px; font-size: 14.5px; line-height: 1.5; color: var(--muted); }
.detail .h { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; margin-bottom: 6px; }
.detail .h b { color: var(--ink); font-weight: 600; font-size: 15px; }
.detail .st { font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; padding: 2px 9px; border-radius: 999px; color: #fff; white-space: nowrap; }
.detail .st.red { background: var(--red); } .detail .st.amber { background: var(--amber); } .detail .st.green { background: var(--green); }
.detail .work { color: var(--ink); margin: 0 0 8px; }
.detail .line { display: grid; grid-template-columns: 96px 1fr; gap: 10px; }
.detail .line span:first-child { color: var(--muted); }
.detail .line span:last-child { color: var(--ink); }
.detail .line.off span:last-child { color: var(--muted); }
.detail .hint { color: var(--muted); }
.detail .msg { opacity: 0; transform: translateY(6px); animation: rise 500ms var(--ease) forwards; }
@media (max-width: 860px) { .hero { grid-template-columns: 1fr; gap: 40px; } .scene { justify-self: start; max-width: 420px; } }

/* Scroll reveal for the ledger rows and cards */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity 800ms var(--ease), transform 800ms var(--ease); }
.reveal.on { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .hero h1 .w, .hero .lede, .hero .aside, .actions, .scene, .detail .msg { animation: none; opacity: 1; transform: none; }
  .cell, .cell svg, .reveal, .waffle i { transition: none; opacity: 1; transform: none; }
  .motif, .motif *, .lesson, .chip, .mini i { transition: none !important; opacity: 1 !important; transform: none !important; }
  .mini i.r { background: var(--red); } .mini i.a { background: var(--amber); } .mini i.g { background: var(--green); } .mini i.g::after { transform: rotate(45deg) scale(1); }
  .waffle i.f { background: var(--red); }
}

.band { border-top: 1px solid var(--line); padding: 64px 0; }
.band h2 { font-family: var(--display); font-weight: 600; font-size: 30px; letter-spacing: -0.015em; line-height: 1.15; margin: 0 0 12px; }
.band .intro { color: var(--muted); font-size: 17px; max-width: 46em; margin: 0 0 40px; }
.band .intro a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line-strong); }
.band .intro .ext { width: 12px; height: 12px; margin: 0 1px 0 3px; vertical-align: -1px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

.strip { margin: 0; }
.strip .area { font-family: var(--display); font-weight: 600; font-size: 24px; letter-spacing: -0.015em; color: var(--teal); margin: 0 0 16px; line-height: 1.2; }
.strip + .strip { margin-top: 44px; }
.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.fcard { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 20px 22px 22px; display: flex; flex-direction: column; min-width: 0; }
.fcard .share { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 14px; }
.fcard .share .n { font-family: var(--display); font-size: 36px; font-weight: 600; line-height: 1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.fcard .share .n small { display: block; font-family: var(--sans); font-size: 12px; font-weight: 400; color: var(--muted); letter-spacing: 0; margin-top: 6px; line-height: 1.3; max-width: 11em; }
.waffle { display: grid; grid-template-columns: repeat(10, 1fr); gap: 2px; width: 70px; flex: none; }
.waffle i { display: block; aspect-ratio: 1; border-radius: 1.5px; background: var(--attended); transition: background 350ms var(--ease); }
.waffle i.f.on { background: var(--red); }
.fcard h4 { font-size: 17px; font-weight: 600; margin: 0 0 10px; line-height: 1.3; }
.fcard blockquote { margin: 0 0 10px; padding: 0 0 0 12px; border-left: 2px solid var(--line-strong); color: var(--muted); font-size: 14.5px; line-height: 1.5; }
.fcard .src { font-size: 13px; margin-bottom: 16px; }
.fcard .src a { color: var(--muted); }
.fcard .pw { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.fcard .pw .k { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--teal); font-weight: 600; margin-bottom: 6px; }
.fcard .pw p { margin: 0; font-size: 15px; line-height: 1.5; }
@media (max-width: 820px) {
  .cards { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px; margin: 0 -24px; padding: 0 24px 6px; scrollbar-width: none; }
  .cards::-webkit-scrollbar { display: none; }
  .fcard { flex: 0 0 84%; scroll-snap-align: start; }
}

/* Free, for every school */
.pair{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.card{border:1px solid var(--line);border-radius:16px;padding:28px 30px;display:flex;flex-direction:column;gap:12px;transition:transform 500ms var(--ease),border-color 300ms}
.card:hover{transform:translateY(-2px);border-color:var(--line-strong)}
.card.demo{background:var(--teal-soft);border-color:transparent}
.card.insp{background:var(--panel)}
.card h3{font-family:var(--display);font-weight:600;font-size:24px;margin:0;letter-spacing:-0.01em;color:var(--ink)}
.card p{margin:0;color:var(--muted);font-size:16px}
.pills{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
.pill{font-size:13px;font-weight:500;padding:5px 11px;border-radius:999px;background:rgba(255,255,255,.7);color:var(--teal-dark)}
.figs{display:flex;gap:22px;margin-top:4px}
.figs b{display:block;font-family:var(--display);font-size:24px;font-weight:600;line-height:1.1;letter-spacing:-0.02em}
.figs span{font-size:12px;color:var(--muted)}
.card .go{margin-top:auto;padding-top:10px;font-weight:600;color:var(--teal);display:inline-flex;align-items:center;gap:8px}
.card .go svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform 400ms var(--ease)}
.card:hover .go svg{transform:translateX(3px)}
@media (max-width:720px){.pair{grid-template-columns:1fr}}

/* Everything in Planwell: bento */
.bento{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:16px}
.tile{border:1px solid var(--line);border-radius:16px;padding:24px 26px;background:var(--panel);min-width:0}
.tile.tint{background:var(--teal-soft);border-color:transparent}
.tile.cream{background:transparent;border-color:var(--line-strong);border-style:dashed}
.s8{grid-column:span 8}.s4{grid-column:span 4}
.tile{display:flex;flex-direction:column}
.motif{height:84px;display:flex;align-items:flex-start}
.tile.s8 .motif{height:auto}
.tile .hd{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.tile .ic{width:38px;height:38px;border-radius:10px;background:rgba(14,110,86,.1);display:grid;place-items:center;flex:none}
.tile.tint .ic{background:#fff}
.tile .ic svg{width:20px;height:20px;stroke:var(--teal);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.tile h3{font-family:var(--display);font-weight:600;font-size:19px;letter-spacing:-0.01em;margin:0;line-height:1.2}
.tile ul{margin:0;padding:0;list-style:none}
.tile li{font-size:14.5px;line-height:1.5;padding:6px 0;border-top:1px solid rgba(33,32,27,.08)}
.tile li:first-child{border-top:0;padding-top:0}
/* the lesson, shown as the unit */
.lesson{background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:14px 16px;margin:4px 0 16px}
.lesson .t{font-weight:600;font-size:14px;margin-bottom:8px}
.lesson .t span{color:var(--muted);font-weight:400}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{font-size:12px;padding:3px 9px;border-radius:999px;background:var(--teal-soft);color:var(--teal-dark);opacity:0;transform:translateY(5px);transition:opacity 450ms var(--ease),transform 450ms var(--ease)}
.play .chip{opacity:1;transform:none}
.chip:nth-child(1){transition-delay:150ms}.chip:nth-child(2){transition-delay:210ms}.chip:nth-child(3){transition-delay:270ms}.chip:nth-child(4){transition-delay:330ms}.chip:nth-child(5){transition-delay:390ms}.chip:nth-child(6){transition-delay:450ms}.chip:nth-child(7){transition-delay:510ms}.chip:nth-child(8){transition-delay:570ms}.chip:nth-child(9){transition-delay:630ms}.chip:nth-child(10){transition-delay:690ms}.chip:nth-child(11){transition-delay:750ms}.chip:nth-child(12){transition-delay:810ms}
.lesson{opacity:0;transform:translateY(6px);transition:opacity 500ms var(--ease),transform 500ms var(--ease)}
.play .lesson{opacity:1;transform:none}
/* the week, shown as the motif */
.mini{display:grid;grid-template-columns:repeat(5,1fr);gap:4px;width:150px;margin:4px 0 16px}
.mini i{display:block;aspect-ratio:1/.8;border-radius:4px;background:var(--attended);position:relative;opacity:.5;transform:scale(.6);transition:opacity 500ms var(--ease),transform 500ms var(--ease),background 400ms var(--ease)}
.mini i:nth-child(1){transition-delay:0ms}.mini i:nth-child(2){transition-delay:40ms}.mini i:nth-child(3){transition-delay:80ms}.mini i:nth-child(4){transition-delay:120ms}.mini i:nth-child(5){transition-delay:160ms}.mini i:nth-child(6){transition-delay:200ms}.mini i:nth-child(7){transition-delay:240ms}.mini i:nth-child(8){transition-delay:280ms}.mini i:nth-child(9){transition-delay:320ms}.mini i:nth-child(10){transition-delay:360ms}.mini i:nth-child(11){transition-delay:400ms}.mini i:nth-child(12){transition-delay:440ms}.mini i:nth-child(13){transition-delay:480ms}.mini i:nth-child(14){transition-delay:520ms}.mini i:nth-child(15){transition-delay:560ms}
.play .mini i{opacity:1;transform:none}
.play .mini i.r{background:var(--red);transition-delay:700ms}.play .mini i.a{background:var(--amber);transition-delay:900ms}.play .mini i.g{background:var(--green);transition-delay:1100ms}
.mini i.g::after{content:"";position:absolute;left:30%;top:22%;width:28%;height:48%;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg) scale(0);transition:transform 350ms var(--ease) 1350ms}
.play .mini i.g::after{transform:rotate(45deg) scale(1)}
@media (max-width:860px){.s4,.s8{grid-column:span 12}}
.s12{grid-column:span 12}
.tile.byo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px;align-items:center}
.tile.byo>*{min-width:0}
.tile.byo .motif{height:auto;display:block;margin:0}
.m-byo .k{display:flex;align-items:center;gap:10px;font-size:12px;margin-bottom:10px}
.m-byo .k>span{display:inline-flex;align-items:center;height:28px;line-height:1;margin:0}
.m-byo .apikey{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;padding:0 10px;border-radius:6px;background:var(--bg);border:1px solid var(--line);color:var(--muted);transition:border-color 400ms,color 400ms}
.m-byo .or{color:var(--muted)}
.m-byo .paste{padding:0 10px;border-radius:6px;background:var(--teal-soft);color:var(--teal-dark);font-weight:600;opacity:.5;transition:opacity 400ms;transition-delay:200ms}
.play .m-byo .apikey{border-color:var(--teal);color:var(--teal-dark)}
.play .m-byo .paste{opacity:1}
.m-byo pre{margin:0;padding:12px 14px;border-radius:10px;background:#1E2422;color:#DCE6E1;font:12px/1.55 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;overflow:hidden;white-space:pre-wrap;word-break:break-word}
.m-byo pre span{display:block;opacity:0;transform:translateY(4px);transition:opacity 400ms var(--ease),transform 400ms var(--ease);transition-delay:calc(var(--d) + 400ms);overflow:hidden;text-overflow:ellipsis}
.play .m-byo pre span{opacity:1;transform:none}
.m-byo .st{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--muted);margin-top:10px;opacity:0;transition:opacity 400ms var(--ease) 1300ms}
.play .m-byo .st{opacity:1}
.m-byo .tick{width:16px;height:16px;border-radius:50%;background:var(--teal);position:relative;flex:none}
.m-byo .tick::after{content:"";position:absolute;left:5px;top:2px;width:4px;height:8px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
@media (max-width:860px){.s12{grid-column:span 12}.tile.byo{grid-template-columns:1fr}}


/* Motifs: each plays when its tile is half on screen and resets when it leaves */
.motif{margin:4px 0 16px;--d:0ms}
.m-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:4px;width:150px}
.m-grid i{display:block;aspect-ratio:1/.8;border-radius:4px;background:var(--attended);transform:scale(.6);opacity:.5;transition:transform 500ms var(--ease),opacity 500ms var(--ease),background 400ms;transition-delay:var(--d)}
.play .m-grid i{transform:none;opacity:1}
.play .m-grid i.on{background:var(--teal)}
.m-bars{display:grid;gap:6px;width:200px}
.m-bars div{display:grid;grid-template-columns:28px 1fr;gap:8px;align-items:center;font-size:11px;color:var(--muted)}
.m-bars b{display:block;height:10px;border-radius:3px;background:var(--teal);transform-origin:left;transform:scaleX(0);transition:transform 900ms var(--ease);transition-delay:var(--d)}
.m-bars.gov div{grid-template-columns:52px 1fr}
.m-bars b.alt{background:var(--amber)}.m-bars b.grey{background:var(--line-strong)}
.play .m-bars b{transform:scaleX(var(--w))}
.m-list{display:grid;gap:6px;width:220px}
.m-list div{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--ink);opacity:0;transform:translateX(-8px);transition:opacity 500ms var(--ease),transform 500ms var(--ease);transition-delay:var(--d)}
.play .m-list div{opacity:1;transform:none}
.m-list i{width:16px;height:16px;border-radius:4px;border:1.5px solid var(--line-strong);display:grid;place-items:center;flex:none;position:relative;transition:background 300ms,border-color 300ms;transition-delay:calc(var(--d) + 500ms)}
.m-list i::after{content:"";width:5px;height:9px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg) scale(0);position:relative;top:-1px;transition:transform 300ms var(--ease);transition-delay:calc(var(--d) + 600ms)}
.play .m-list i.t{background:var(--teal);border-color:var(--teal)}
.play .m-list i.t::after{transform:rotate(45deg) scale(1)}
.m-list .tag{margin-left:auto;font-size:10px;padding:1px 7px;border-radius:999px;background:var(--teal-soft);color:var(--teal-dark)}
.m-cal{display:grid;grid-template-columns:repeat(10,1fr);gap:3px;width:200px}
.m-cal i{display:block;aspect-ratio:1;border-radius:3px;background:var(--attended);position:relative}
.m-cal i::after{content:"";position:absolute;inset:3px;border-radius:2px;background:var(--c);transform:scale(0);transition:transform 450ms var(--ease);transition-delay:var(--d)}
.play .m-cal i::after{transform:scale(1)}
.m-cal i.wk::after{inset:0;border-radius:3px;background:var(--teal-soft)}
.m-phone{width:112px;border:2px solid var(--line-strong);border-radius:14px;padding:10px 8px;display:grid;gap:5px;background:#fff}
.m-phone span{display:block;height:7px;border-radius:3px;background:var(--attended);opacity:0;transform:translateY(4px);transition:opacity 400ms var(--ease),transform 400ms var(--ease);transition-delay:var(--d)}
.m-phone span.r{background:var(--red);width:60%}.m-phone span.g{background:var(--teal);width:75%}
.play .m-phone span{opacity:1;transform:none}
.m-roles{display:flex;gap:6px;flex-wrap:wrap;width:230px}
.m-roles span{font-size:11px;padding:3px 9px;border-radius:999px;border:1px solid var(--line-strong);color:var(--muted);transition:background 350ms,color 350ms,border-color 350ms;transition-delay:var(--d)}
.play .m-roles span{background:var(--teal);border-color:var(--teal);color:#fff}
.m-plan{display:grid;gap:6px;width:230px;font-size:11px;color:var(--muted)}
.m-plan div{display:grid;grid-template-columns:1fr 70px;gap:8px;align-items:center}
.m-plan b{display:block;height:6px;border-radius:3px;background:var(--line);overflow:hidden;position:relative}
.m-plan b::after{content:"";position:absolute;inset:0;background:var(--teal);transform-origin:left;transform:scaleX(0);transition:transform 900ms var(--ease);transition-delay:var(--d)}
.play .m-plan b::after{transform:scaleX(var(--w))}
.m-plan em{font-style:normal;padding:1px 7px;border-radius:999px;font-size:10px;background:var(--line);color:var(--muted);transition:background 300ms,color 300ms;transition-delay:calc(var(--d) + 700ms)}
.play .m-plan em.ok{background:var(--teal-soft);color:var(--teal-dark)}

.price { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 20px; align-items: stretch; }
.price .big { font-family: var(--display); font-weight: 600; font-size: 26px; letter-spacing: -0.015em; line-height: 1.2; margin: 0 0 14px; }
.price ul { margin: 0; padding: 0; list-style: none; }
.price li { font-size: 16px; line-height: 1.5; padding: 9px 0; border-top: 1px solid var(--line); }
.price li:first-child { border-top: 0; padding-top: 0; }
.quote { background: var(--teal-soft); border-radius: 16px; padding: 28px 30px; display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.quote h3 { font-family: var(--display); font-weight: 600; font-size: 22px; margin: 0; letter-spacing: -0.01em; }
.quote p { margin: 0 0 6px; color: var(--muted); font-size: 15.5px; }
@media (max-width: 760px) { .price { grid-template-columns: 1fr; } }
html { scroll-behavior: smooth; }

footer { border-top: 1px solid var(--line); padding: 32px 0 48px; color: var(--muted); font-size: 14px; }
footer .foot-in { display: flex; gap: 8px 22px; flex-wrap: wrap; align-items: baseline; }
footer a { color: var(--muted); }
footer .right { margin-left: auto; }

/* Text pages */
.doc { padding: 56px 0 40px; max-width: 720px; }
.doc h1 { font-family: var(--display); font-weight: 600; font-size: 40px; letter-spacing: -0.02em; line-height: 1.1; margin: 0 0 8px; }
.doc .meta { color: var(--muted); margin: 0 0 40px; font-size: 15px; }
.doc h2 { font-family: var(--display); font-weight: 600; font-size: 22px; letter-spacing: -0.01em; margin: 44px 0 12px; }
.doc p, .doc li { font-size: 16.5px; line-height: 1.6; }
.doc ul { padding-left: 22px; }
.doc li { margin: 6px 0; }
.doc table { width: 100%; border-collapse: collapse; font-size: 15px; margin: 12px 0 8px; }
.doc th, .doc td { text-align: left; vertical-align: top; padding: 9px 12px 9px 0; border-bottom: 1px solid var(--line); }
.doc th { color: var(--muted); font-weight: 600; font-size: 13px; }