@layer base, components, responsive;
@layer base {
  :root { --paper:#fff7e9; --ink:#252323; --orange:#f95d32; --pink:#ffc6d3; --lime:#d9ee98; --lilac:#ded4f3; --line:#d8cdbb; --muted:#665f57; --radius:18px; }
  * { box-sizing:border-box; } html { scroll-behavior:smooth; scroll-padding-top:28px; }
  [hidden] { display:none!important; }
  body { margin:0; background:var(--paper); color:var(--ink); font-family:"Trebuchet MS",Arial,sans-serif; font-size:17px; line-height:1.6; }
  a { color:inherit; } button,input,select { font:inherit; } button,a,input,select { -webkit-tap-highlight-color:transparent; }
  button { cursor:pointer; } button:disabled { cursor:default; } a { text-decoration:none; }
  h1,h2,h3,p { margin-top:0; } h1,h2,h3 { letter-spacing:-.045em; line-height:1.06; }
  h1,h2 { font-family:"Arial Black","Trebuchet MS",Arial,sans-serif; font-weight:900; } h2 { font-size:clamp(36px,4.4vw,61px); }
  h3 { font-size:23px; letter-spacing:-.025em; } p { margin-bottom:1.15em; }
  svg { display:block; } :focus-visible { outline:3px solid #416ee5; outline-offset:5px; } ::selection { background:var(--pink); }
  .wrap { width:min(1200px,calc(100% - 96px)); margin-inline:auto; } .section-space { padding-block:100px; }
  .sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
  .skip-link { position:fixed; left:15px; top:-100px; z-index:20; background:var(--ink); color:white; padding:10px 18px; border-radius:10px; } .skip-link:focus { top:10px; }
  .handwritten { font-family:"Segoe Print","Comic Sans MS",cursive; font-weight:700; letter-spacing:-.04em; } .ink-orange { color:#d84621; }
  .fine-print,.preview-note { color:var(--muted); font-size:13px; line-height:1.65; } .eyebrow,.section-kicker,.demo-tag { font-family:Arial,sans-serif; font-size:11px; font-weight:800; letter-spacing:.14em; }
}
@layer components {
  .site-header { display:flex; align-items:center; gap:32px; justify-content:space-between; padding-block:29px; border-bottom:1px solid var(--line); }
  .brand { display:flex; gap:10px; align-items:center; line-height:.94; font-size:19px; font-weight:900; letter-spacing:-.055em; flex-shrink:0; }
  .brand-second { display:block; margin-top:3px; } .brand-dot { color:var(--orange); } .brand-mark { width:43px; height:43px; background:var(--orange); border-radius:50%; padding:5px; fill:var(--paper); stroke:var(--ink); stroke-width:2; stroke-linejoin:round; }
  .site-header nav { display:flex; gap:28px; font-size:13px; font-weight:700; } .site-header nav a { border-bottom:2px solid transparent; padding-block:8px; } .site-header nav a:hover { border-color:var(--orange); }
  .button { display:inline-flex; align-items:center; justify-content:center; gap:26px; padding:16px 25px; border:2px solid var(--ink); border-radius:10px; color:var(--ink); background:var(--orange); box-shadow:4px 4px 0 var(--ink); font-size:15px; font-weight:800; line-height:1.2; transition:transform .18s,box-shadow .18s,background .18s; }
  .button:hover { transform:translate(-2px,-2px); box-shadow:6px 6px 0 var(--ink); background:#ff784f; } .button:active { transform:translate(3px,3px); box-shadow:1px 1px 0 var(--ink); }
  .button span { font-size:24px; line-height:1; } .button.small { padding:12px 17px; font-size:12px; gap:15px; box-shadow:3px 3px 0 var(--ink); }
  .hero { display:grid; grid-template-columns:1.12fr 1fr; gap:65px; padding-top:65px; padding-bottom:72px; }
  .hero .eyebrow { display:flex; align-items:center; gap:9px; margin-bottom:28px; font-size:10px; }
  .status-dot { width:8px; height:8px; border-radius:50%; background:var(--orange); flex-shrink:0; } .eyebrow-rule { width:17px; height:1px; background:var(--ink); }
  h1 { font-size:clamp(65px,7.5vw,105px); line-height:.99; margin-bottom:30px; letter-spacing:-.07em; }
  .cold-word { position:relative; display:inline-block; font-family:"Segoe Print","Comic Sans MS",cursive; font-size:1.03em; font-weight:900; transform:rotate(-5deg); color:#d84621; }
  .cold-word svg { position:absolute; width:100%; height:20px; bottom:-6px; left:0; fill:none; stroke:var(--orange); stroke-width:4; stroke-linecap:round; } .orange-period { color:var(--orange); }
  .hero-lede { font-size:21px; font-weight:700; line-height:1.4; margin-bottom:18px; } .hero-description { max-width:465px; font-size:16px; line-height:1.65; color:var(--muted); }
  .hero-actions { display:flex; align-items:center; gap:22px; margin-top:27px; } .hero-aside { max-width:160px; font-size:13px; line-height:1.4; transform:rotate(-5deg); }
  .preview-note { margin-top:20px; max-width:420px; font-size:11px; }
  .hero-art { position:relative; min-height:580px; margin-top:14px; background-image:radial-gradient(#c5bbaa 1px,transparent 1px); background-size:17px 17px; border-radius:90px 25px 30px 90px; }
  .art-label { text-align:center; padding-top:16px; font-size:9px; font-weight:800; letter-spacing:.13em; }
  .inquiry-slip { position:absolute; top:62px; left:4%; width:88%; padding:20px 24px 16px; border:2px solid var(--ink); background:var(--paper); box-shadow:6px 7px 0 #decfba; transform:rotate(-5deg); }
  .slip-top { display:flex; gap:7px; align-items:center; font-size:8px; font-weight:800; letter-spacing:.08em; } .slip-top>span:last-child { margin-left:auto; font-size:10px; color:var(--muted); font-weight:400; letter-spacing:0; }
  .mini-dot { width:7px; height:7px; background:var(--orange); border-radius:50%; } .inquiry-slip strong { display:block; font-size:31px; font-weight:900; letter-spacing:-.05em; margin-block:16px 20px; line-height:1.15; }
  .slip-bottom { display:flex; align-items:center; justify-content:space-between; font-size:9px; font-weight:800; letter-spacing:.1em; border-top:1px dashed var(--line); padding-top:10px; }
  .slip-bottom svg { width:20px; fill:none; stroke:var(--ink); stroke-width:2; } .doodle-arrow { position:absolute; top:226px; left:0; width:95px; fill:none; stroke:var(--ink); stroke-width:3; stroke-linecap:round; stroke-linejoin:round; }
  .human-note { position:absolute; top:248px; left:17%; right:0; display:flex; align-items:center; gap:15px; background:var(--lime); padding:20px 22px; border:2px solid var(--ink); box-shadow:5px 6px 0 #c1c79d; transform:rotate(4deg); }
  .human-note span:not(.tape) { display:block; font-size:8px; font-weight:800; letter-spacing:.1em; } .human-note strong { display:block; margin-top:7px; font-size:23px; letter-spacing:-.035em; line-height:1.16; }
  .note-avatar { width:50px; height:50px; border:2px solid var(--ink); border-radius:50%; font-size:36px; line-height:45px; text-align:center; background:var(--paper); }
  .human-note .note-check { font-size:28px!important; margin-left:auto; } .tape { position:absolute; width:77px; height:21px; left:34%; top:-12px; background:#fff9e8c9; transform:rotate(-8deg); }
  .mascot-card { position:absolute; top:360px; left:4%; width:70%; height:220px; } .mascot { width:220px; margin:auto; transition:transform .3s; } .mascot-line,.mascot-arm { fill:none; stroke:var(--ink); stroke-width:4; stroke-linecap:round; } .mascot-eye { transform-origin:center; animation:blink 7s infinite; }
  .mascot-speech { position:absolute; left:158px; top:16px; width:147px; padding:12px; font-size:12px; line-height:1.4; background:white; border:2px solid var(--ink); border-radius:14px 14px 14px 2px; transform:rotate(4deg); }
  .bell-button { position:absolute; top:141px; right:-110px; width:132px; background:transparent; border:0; font-size:11px; transform:rotate(-9deg); padding:5px; }
  .bell-button svg { width:37px; height:37px; margin:0 auto 5px; fill:#ffbd57; stroke:var(--ink); stroke-width:2; } .bell-button:hover svg { animation:bell .4s 2; }
  .spark { position:absolute; z-index:2; color:var(--orange); font-size:55px; line-height:1; } .spark-one { top:28px; right:-14px; transform:rotate(9deg); } .spark-two { bottom:75px; left:-18px; font-size:40px; color:var(--ink); }
  .art-aside { position:absolute; bottom:35px; right:0; transform:rotate(-7deg); font-size:14px; } .art-caption { position:absolute; bottom:8px; left:25%; font-size:10px; color:var(--muted); }
  .hero-art.ringing .mascot { animation:hop .5s 2; } .hero-art.ringing .bell-button svg { animation:bell .4s 2; }
  .belief-strip { border-block:2px solid var(--ink); background:var(--lilac); padding:24px 0; }
  .belief-strip .wrap { display:flex; align-items:center; justify-content:center; gap:38px; font-size:21px; font-weight:700; letter-spacing:-.025em; } .belief-strip svg { width:40px; stroke:var(--ink); fill:none; stroke-width:2.5; }
  .section-kicker { display:flex; align-items:center; justify-content:space-between; margin-bottom:38px; font-size:10px; } .section-kicker .handwritten { font-size:17px; letter-spacing:-.05em; font-weight:500; text-transform:none; }
  .problem-grid { display:grid; grid-template-columns:1.1fr 1fr; gap:95px; } .problem-grid h2 { margin-bottom:0; } .problem-copy { font-size:18px; line-height:1.7; padding-top:3px; }
  .notes-row { display:grid; grid-template-columns:repeat(3,1fr); gap:32px; margin-top:65px; }
  .mini-note { position:relative; padding:28px 28px 35px; border:2px solid var(--ink); min-height:205px; box-shadow:4px 5px 0 var(--ink); }
  .mini-note:first-child { transform:rotate(-2deg); } .mini-note:nth-child(2) { transform:rotate(1.5deg); margin-top:9px; } .mini-note:last-child { transform:rotate(-1deg); }
  .note-lime { background:var(--lime); } .note-pink { background:var(--pink); } .note-lilac { background:var(--lilac); }
  .note-number { font-size:11px; font-weight:800; display:block; margin-bottom:24px; } .mini-note h3 { margin-bottom:12px; } .mini-note p { font-size:14px; max-width:235px; margin-bottom:0; }
  .mini-note svg { position:absolute; width:39px; height:35px; top:16px; right:20px; fill:none; stroke:var(--ink); stroke-width:3; stroke-linecap:round; }
  .play-section { border-block:1px solid var(--line); background:#f0ebdf; }
  .demo-tag { display:inline-block; border:1px solid currentColor; padding:4px 7px; font-size:8px; letter-spacing:.09em; border-radius:4px; }
  .section-heading { display:flex; justify-content:space-between; align-items:end; margin-bottom:38px; } .section-heading h2 { margin-bottom:24px; } .section-heading p { font-size:17px; margin-bottom:0; }
  .play-aside { font-size:18px; position:relative; transform:rotate(-7deg); margin-right:40px; margin-bottom:0; } .play-aside svg { width:80px; height:60px; margin-left:25px; stroke:var(--ink); stroke-width:3; fill:none; stroke-linecap:round; stroke-linejoin:round; }
  .team-section { background:var(--lilac); border-bottom:1px solid var(--ink); } .team-grid { display:grid; grid-template-columns:.87fr 1.2fr; gap:65px; align-items:center; }
  .demo-footnote { font-size:12px; color:var(--muted); max-width:850px; margin:24px 0 0; }
  .product-callouts { list-style:none; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:24px; margin:0 0 35px; font-size:14px; }
  .product-callouts li { border-left:4px solid var(--orange); padding:4px 0 4px 16px; } .product-callouts strong { display:block; margin-bottom:3px; }
  .product-demo { border:2px solid var(--ink); border-radius:13px; box-shadow:8px 9px 0 var(--ink); overflow:hidden; background:#fff; color:#33475b; }
  .demo-app-chrome { display:flex; align-items:center; gap:12px; padding:17px 23px; background:#253342; color:#fff; font-size:15px; } .demo-app-chrome strong span { font-weight:400; color:#d7e3ec; } .demo-app-chrome .demo-tag { margin-left:auto; color:var(--ink); background:var(--paper); }
  .hubspot-dot { color:#ff7a59; font-size:29px; line-height:1; } .demo-app-tabs { display:flex; gap:7px; align-items:center; padding:16px 22px; background:#f5f8fa; border-bottom:1px solid #dfe3eb; flex-wrap:wrap; }
  .demo-app-tabs>button { border:1px solid #cbd6e2; border-radius:5px; color:#33475b; background:#fff; padding:9px 12px; font-size:12px; font-weight:700; } .demo-app-tabs>button.active { border-color:#ff7a59; background:#ffede8; color:#813c29; } .demo-app-tabs #demo-reset { border:0; background:none; margin-left:auto; padding-inline:0; font-size:11px; }
  .demo-app-body { padding:28px; } .demo-panel-heading { display:flex; justify-content:space-between; align-items:center; gap:20px; margin-bottom:22px; } .demo-panel-heading .eyebrow { font-size:8px; color:#52677d; } .demo-panel-heading h3 { font-family:"Trebuchet MS",Arial,sans-serif; font-size:25px; margin:9px 0 0; letter-spacing:-.03em; } .demo-panel-heading p { font-size:14px; margin:10px 0 0; } .demo-account-label { font-size:10px; color:#52677d; }
  .demo-settings-grid { display:grid; grid-template-columns:1fr 1fr; gap:32px; margin:28px 0; } .demo-form-list { border:1px solid #cbd6e2; border-radius:5px; padding:18px; margin:0; font-size:14px; } .demo-form-list legend { padding:0 8px; font-weight:700; } .demo-form-list label { display:block; padding:12px 0; } .demo-form-list input { accent-color:#ff7a59; margin-right:8px; } .demo-form-list small { display:block; padding-left:24px; font-size:11px; color:#52677d; }
  .demo-settings-values { font-size:13px; } .demo-settings-values label { display:block; margin-bottom:8px; font-weight:700; } .demo-settings-values p { margin-top:18px; font-size:13px; } .demo-settings-values small { font-size:11px; }
  .demo-app-body select { padding:8px 11px; color:#33475b; background:#fff; border:1px solid #cbd6e2; border-radius:4px; font-size:12px; min-width:160px; } .demo-small-button { font-size:12px; border-radius:5px; padding:11px 16px; box-shadow:2px 3px 0 var(--ink); }
  .demo-report-filters { display:flex; gap:18px; flex-wrap:wrap; margin-bottom:22px; } .demo-report-filters label { display:flex; flex-direction:column; gap:5px; font-size:11px; font-weight:700; }
  .demo-report-stats { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; } .demo-report-stats>div { border:1px solid #dfe3eb; background:#f5f8fa; border-radius:5px; padding:18px 14px; } .demo-report-stats span { font-size:10px; display:block; } .demo-report-stats strong { display:block; font-size:29px; line-height:1.2; margin-top:7px; letter-spacing:-.04em; }
  .demo-cohort-note { font-size:11px; margin:16px 0; color:#52677d; } .demo-table-scroll { overflow-x:auto; border:1px solid #dfe3eb; border-radius:5px; } .demo-inquiries { width:100%; border-collapse:collapse; font-size:12px; text-align:left; } .demo-inquiries th { font-size:10px; background:#f5f8fa; padding:12px; font-weight:700; white-space:nowrap; } .demo-inquiries td { border-top:1px solid #dfe3eb; padding:11px 12px; } .demo-inquiries td small { display:block; font-size:10px; color:#52677d; }
  .demo-status { display:inline-block; padding:4px 7px; border-radius:4px; font-size:9px; white-space:nowrap; } .demo-status.done { background:#e0efcc; } .demo-status.late { background:#ffded0; } .demo-status.waiting { background:#fff0c8; } .demo-status.unknown { background:#e8e2f5; } .demo-evidence-button { background:#fff; border:1px solid #cbd6e2; color:#007a8c; border-radius:4px; padding:5px 9px; font-size:11px; font-weight:700; }
  .demo-detail { margin-top:20px; border:1px solid #99c2ce; border-left:5px solid #00a4bd; background:#f1f8fa; border-radius:5px; padding:21px; } .demo-detail .eyebrow { font-size:8px; } .demo-detail h4 { font-size:16px; margin:9px 0; line-height:1.4; } .demo-detail p { font-size:12px; line-height:1.65; max-width:750px; }
  .demo-reward { position:fixed; right:24px; bottom:24px; z-index:60; max-width:480px; display:flex; align-items:center; gap:18px; background:#fff4c9; border:2px solid #bd8100; border-radius:8px; box-shadow:5px 6px 0 #25232360; padding:20px; color:var(--ink); } .reward-star { font-size:54px; line-height:1; color:#eda600; text-shadow:1px 2px 0 #975800; animation:gold-star .7s ease-out; } .demo-reward strong { font-size:15px; } .demo-reward p { font-size:12px; margin:6px 0 0; } .demo-reward button { margin-left:auto; border:0; background:none; font-size:25px; } @keyframes gold-star { from { transform:scale(.2) rotate(-90deg); } to { transform:scale(1) rotate(0deg); } }
  @media(max-width:760px) { .product-callouts { grid-template-columns:1fr; gap:17px; } .demo-app-body { padding:20px; } .demo-app-chrome { padding:15px; gap:8px; font-size:12px; } .demo-app-chrome .demo-tag { font-size:7px; } .demo-app-tabs { padding:13px; } .demo-app-tabs>button { font-size:10px; padding:8px; } .demo-settings-grid { grid-template-columns:1fr; gap:22px; } .demo-report-stats { grid-template-columns:1fr 1fr; } .demo-report-stats strong { font-size:25px; } .demo-account-label { display:none; } .demo-inquiries { min-width:650px; } .demo-reward { left:16px; right:16px; bottom:16px; max-width:none; padding:15px; gap:12px; } .reward-star { font-size:39px; } .demo-reward strong { font-size:13px; } .demo-detail { padding:17px; } }
  .manager-intro { display:grid; grid-template-columns:1.3fr 1fr; gap:80px; align-items:center; margin-bottom:45px; }
  .manager-intro .team-copy p { max-width:560px; } .manager-intro .plain-checks { margin-bottom:0; }
  .manager-quote { position:relative; background:var(--pink); border:2px solid var(--ink); box-shadow:6px 7px 0 var(--ink); padding:36px 42px; margin:0 10px; transform:rotate(4deg); border-radius:5px; }
  .manager-quote::before { content:''; position:absolute; width:95px; height:26px; background:#fff7e9b0; top:-14px; left:35%; transform:rotate(-6deg); }
  .manager-quote p { font-size:clamp(32px,3.4vw,48px); font-weight:900; letter-spacing:-.05em; line-height:1.08; margin:0 0 20px; }
  .manager-quote cite { font-style:normal; font-size:15px; font-weight:700; } .manager-quote small { display:block; margin-top:10px; font-size:11px; } .quote-doodle { position:absolute; right:25px; top:18px; font-size:75px; line-height:1; color:#a54668; }
  .team-section .team-board { transform:none; } .board-stats.manager-stats { grid-template-columns:repeat(4,1fr); }
  .rep-search { display:flex; gap:9px; align-items:center; font-size:11px; } .rep-search input { border:1px solid var(--ink); border-radius:5px; padding:8px 10px; width:170px; background:#fffaf1; }
  .board-context { margin:0; padding:0 22px 16px; font-size:11px; color:var(--muted); } .team-section .team-table { font-size:14px; } .team-section .team-table th { font-size:10px; padding-block:12px; }
  .rep-bar { display:block; width:120px; height:5px; background:#e9dfce; border-radius:5px; margin-top:6px; overflow:hidden; } .rep-bar-fill { display:block; height:100%; background:var(--orange); }
  .team-section .person-meta small { font-size:10px; } .waiting-tag { font-size:10px; padding:4px 7px; background:var(--pink); border-radius:4px; display:inline-block; }
  @media(max-width:760px) { .manager-intro { grid-template-columns:1fr; gap:40px; } .manager-quote { max-width:410px; margin:0 12px 8px; padding:30px; } .manager-quote p { font-size:40px; } .board-stats.manager-stats { grid-template-columns:1fr 1fr; gap:22px; } .team-section .board-toolbar { flex-wrap:wrap; gap:14px; } .rep-search { width:100%; } .rep-search input { flex:1; width:auto; min-width:0; } .team-section .team-table { min-width:510px; } .board-context { padding-inline:16px; } .rep-bar { width:80px; } }
  .team-copy h2 { font-size:clamp(35px,4vw,55px); margin-bottom:27px; } .outline-word { color:transparent; -webkit-text-stroke:1.3px var(--ink); }
  .team-copy p { font-size:16px; max-width:395px; } .plain-checks { list-style:none; padding:0; margin:26px 0 34px; font-size:13px; }
  .plain-checks li { display:flex; gap:10px; margin:10px 0; } .plain-checks li::before { content:"↗"; font-size:18px; line-height:1.3; }
  .mini-stamp { display:inline-block; border:2px solid var(--ink); border-radius:5px; font-size:9px; font-weight:900; letter-spacing:.12em; padding:9px 14px; transform:rotate(-6deg); line-height:1.4; }
  .team-board { background:var(--paper); border:2px solid var(--ink); border-radius:12px; box-shadow:7px 8px 0 var(--ink); transform:rotate(1deg); overflow:hidden; }
  .board-heading { display:flex; align-items:center; gap:11px; padding:16px 20px; border-bottom:1.5px solid var(--ink); font-size:8px; font-weight:800; letter-spacing:.08em; background:#fffaf1; } .board-heading>.demo-tag { margin-left:auto; font-size:7px; }
  .board-window-dots { display:flex; gap:4px; } .board-window-dots i { width:6px; height:6px; border:1px solid var(--ink); border-radius:50%; background:var(--pink); } .board-window-dots i:nth-child(2) { background:var(--lime); } .board-window-dots i:last-child { background:var(--lilac); }
  .board-stats { display:grid; grid-template-columns:1fr 1fr; padding:24px 22px; gap:10px; } .board-stats span { display:block; font-size:10px; color:var(--muted); } .board-stats strong { display:block; font-size:35px; letter-spacing:-.06em; margin-top:4px; line-height:1.15; }
  .board-toolbar { display:flex; align-items:center; justify-content:space-between; padding:0 20px 13px; gap:5px; } .board-tabs { display:flex; gap:4px; } .board-tabs button { border:0; background:transparent; font-size:10px; font-weight:700; padding:7px 9px; border-radius:5px; }
  .board-tabs button.active { background:var(--ink); color:var(--paper); } .board-tabs button span { background:var(--pink); color:var(--ink); border-radius:4px; padding:1px 4px; margin-left:2px; }
  .text-button { border:0; background:transparent; padding:3px 0; font-size:12px; font-weight:700; border-bottom:1px solid currentColor; color:inherit; } .text-button:hover { color:#a63b20; } .board-toolbar .text-button { font-size:10px; }
  .board-table-scroll { overflow-x:auto; } .team-table { width:100%; border-collapse:collapse; font-size:11px; text-align:left; }
  .team-table th { background:#efe6d5; padding:9px 15px; font-size:8px; letter-spacing:.025em; } .team-table th:first-child { padding-left:22px; }
  .team-table td { padding:12px 15px; border-bottom:1px solid #d8cdbb85; } .team-table td:first-child { padding-left:22px; }
  .team-person { display:flex; align-items:center; gap:9px; } .avatar { width:27px; height:27px; font-size:10px; border:1px solid var(--ink); border-radius:50%; text-align:center; line-height:25px; flex-shrink:0; }
  .avatar.lime { background:var(--lime); } .avatar.pink { background:var(--pink); } .avatar.orange { background:#ffb881; } .avatar.lilac { background:var(--lilac); }
  .person-meta strong { display:block; line-height:1.2; } .person-meta small { display:block; margin-top:3px; color:var(--muted); font-size:8px; }
  .row-time { font-weight:800; white-space:nowrap; } .row-status { display:inline-block; border-radius:4px; padding:3px 6px; font-size:8px; white-space:nowrap; }
  .row-status.green { background:#e1edbf; } .row-status.orange { background:#ffdabd; } .row-status.pink { background:var(--pink); } .row-status.lilac { background:var(--lilac); }
  .board-footnote { margin:14px 22px 8px; font-size:9px; color:var(--muted); } .board-explain { margin:0 22px 19px; font-size:10px; }
  .team-disclaimer { margin:35px 0 0; font-size:11px; text-align:right; }
  .how-grid { display:grid; grid-template-columns:1fr 1fr; gap:100px; } .how-grid h2 { font-size:clamp(38px,4.2vw,58px); }
  .steps { list-style:none; padding:0; margin:0; } .steps li { display:flex; gap:19px; padding:0 0 30px; } .steps li:last-child { padding-bottom:0; }
  .steps li>span { width:36px; height:36px; border:1.5px solid var(--ink); background:var(--pink); border-radius:50%; text-align:center; line-height:33px; font-weight:800; flex-shrink:0; transform:rotate(-9deg); }
  .steps li:nth-child(2)>span { background:var(--lime); } .steps li:nth-child(3)>span { background:var(--lilac); } .steps h3 { font-size:21px; line-height:1.3; margin-bottom:8px; } .steps p { font-size:14px; color:var(--muted); margin-bottom:0; line-height:1.65; }
  .closing { position:relative; background:var(--orange); border:2px solid var(--ink); box-shadow:7px 8px 0 var(--ink); border-radius:18px; padding:65px 80px; margin-bottom:95px; }
  .closing h2 { font-size:clamp(52px,6vw,82px); line-height:1.02; margin-bottom:22px; letter-spacing:-.065em; } .closing h2 .handwritten { display:inline-block; transform:rotate(-7deg); color:var(--paper); }
  .closing p:not(.eyebrow) { font-size:18px; line-height:1.5; } .closing .eyebrow { font-size:9px; margin-bottom:23px; max-width:440px; }
  .closing-actions { display:flex; align-items:center; gap:26px; margin-top:30px; } .dark-button { background:var(--ink); color:var(--paper); box-shadow:4px 4px 0 var(--paper); }
  .dark-button:hover { background:#423630; box-shadow:6px 6px 0 var(--paper); } .closing-spark { position:absolute; right:60px; top:45px; font-size:130px; line-height:1; transform:rotate(10deg); color:var(--paper); }
  .closing-doodle { position:absolute; font-size:145px; line-height:1; right:110px; bottom:75px; transform:rotate(14deg); }
  .site-footer { border-top:1px solid var(--line); padding-block:35px 45px; display:flex; align-items:center; justify-content:space-between; gap:30px; }
  .footer-brand { font-size:17px; } .site-footer p { font-size:12px; margin:0; color:var(--muted); } .site-footer>div { display:flex; flex-direction:column; align-items:end; gap:5px; font-size:9px; color:var(--muted); } .site-footer .text-button { font-size:10px; }
  dialog { max-width:530px; width:calc(100% - 40px); padding:38px; background:var(--paper); border:2px solid var(--ink); border-radius:18px; box-shadow:9px 10px 0 #25232380; color:var(--ink); }
  dialog::backdrop { background:#25232390; backdrop-filter:blur(3px); } dialog h2 { font-size:36px; margin:25px 0 20px; } dialog p { font-size:15px; } dialog .button { margin-top:14px; }
  .dialog-close { position:absolute; top:12px; right:16px; border:0; background:transparent; font-size:29px; color:var(--ink); }
  .noscript-note { padding:20px; text-align:center; border-top:1px solid var(--line); font-size:14px; }
  .confetti-layer { pointer-events:none; position:fixed; inset:0; overflow:hidden; z-index:30; } .confetti-piece { position:absolute; width:8px; height:14px; top:34%; left:75%; animation:confetti 1s ease-out forwards; }
  @keyframes blink { 0%,46%,49%,100% { ry:8; } 47%,48% { ry:1; } } @keyframes bell { 0%,100% { transform:rotate(0); } 25% { transform:rotate(-17deg); } 75% { transform:rotate(17deg); } }
  @keyframes hop { 0%,100% { transform:translateY(0) rotate(0); } 50% { transform:translateY(-14px) rotate(-7deg); } }
  @keyframes confetti { to { transform:translate(var(--x),var(--y)) rotate(var(--r)); opacity:0; } }
}
@layer responsive {
  @media(min-width:1500px) { .hero { padding-top:80px; gap:100px; } .hero-art { margin-top:38px; } }
  @media(max-width:1050px) { .wrap { width:calc(100% - 64px); } .hero { gap:28px; grid-template-columns:1.12fr 1fr; } .site-header { gap:20px; } .site-header nav { gap:15px; } .header-cta { display:none; } .hero-art { transform:scale(.9); transform-origin:top center; } .hero-actions { align-items:start; } .hero-aside { display:none; } .problem-grid { gap:50px; } .team-grid { gap:36px; } .sim-controls,.sim-result { padding:28px; } .how-grid { gap:45px; } .closing-doodle { right:60px; font-size:115px; } .closing-spark { font-size:100px; right:45px; } }
  @media(max-width:760px) { .wrap { width:calc(100% - 40px); } .section-space { padding-block:65px; } .site-header { padding-block:21px; } .brand { font-size:17px; } .brand-mark { width:36px; height:36px; } .site-header nav { gap:14px; font-size:11px; } .site-header nav a:first-child { display:none; } .hero { display:flex; flex-direction:column; padding-top:42px; padding-bottom:46px; gap:16px; } h1 { font-size:clamp(64px,13vw,96px); max-width:550px; margin-bottom:24px; } .hero-lede { font-size:20px; } .hero-description { font-size:15px; max-width:500px; } .hero .eyebrow { font-size:9px; margin-bottom:23px; } .hero-actions { margin-top:22px; } .preview-note { font-size:11px; } .hero-art { height:570px; min-height:570px; width:min(450px,100%); margin:8px auto -26px; transform:scale(.94); } .hero-aside { display:block; max-width:135px; } .bell-button { right:-93px; }
    .belief-strip .wrap { gap:16px; font-size:15px; line-height:1.3; } .belief-strip .wrap span,.belief-strip .wrap strong { width:40%; } .belief-strip svg { width:25px; flex-shrink:0; } .section-kicker { gap:14px; font-size:9px; margin-bottom:30px; } .section-kicker .handwritten { font-size:12px; text-align:right; }
    .problem-grid,.team-grid,.how-grid { grid-template-columns:1fr; gap:30px; } h2 { font-size:clamp(38px,7.9vw,56px); } .problem-copy { font-size:16px; max-width:550px; } .notes-row { gap:18px; margin-top:30px; } .mini-note { padding:22px 18px; min-height:205px; } .mini-note h3 { font-size:19px; } .mini-note p { font-size:12px; } .mini-note svg { width:27px; right:12px; } .note-number { margin-bottom:25px; }
    .section-heading { align-items:start; } .section-heading p { font-size:15px; } .play-aside { display:none; } .simulator { grid-template-columns:1fr; box-shadow:4px 5px 0 var(--ink); } .sim-controls { border-right:0; border-bottom:2px solid var(--ink); padding:27px; } .sim-result { padding:27px; } .big-time { font-size:83px; } .sim-timestamps { margin-top:10px; } .team-grid { gap:45px; } .team-copy p { max-width:100%; } .team-board { transform:none; } .team-copy h2 { font-size:45px; } .team-disclaimer { text-align:left; } .how-grid { gap:30px; } .how-grid h2 { font-size:45px; } .closing { padding:45px 35px; margin-bottom:65px; width:calc(100% - 45px); } .closing h2 { font-size:58px; } .closing-spark { font-size:75px; right:28px; top:70px; } .closing-doodle { display:none; } .closing .eyebrow { max-width:250px; font-size:8px; } .closing p:not(.eyebrow) { font-size:16px; max-width:360px; } .closing-actions { align-items:start; flex-direction:column; gap:23px; } .site-footer { flex-wrap:wrap; gap:22px; padding-block:28px; } .site-footer>div { align-items:start; width:100%; } .site-footer p { font-size:11px; }
  }
  @media(max-width:440px) { .wrap { width:calc(100% - 36px); } .site-header nav { gap:10px; font-size:10px; } .site-header nav a:last-child { display:none; } .hero-aside { display:none; } .hero-art { transform:scale(.86); height:565px; min-height:565px; margin-top:-4px; margin-bottom:-53px; } .inquiry-slip strong { font-size:28px; } .mascot-speech { left:144px; width:133px; font-size:11px; } .bell-button { right:-92px; } .art-aside { bottom:23px; } .art-caption { bottom:0; left:20%; } .notes-row { grid-template-columns:1fr; gap:22px; } .mini-note { min-height:0; padding:24px; } .mini-note:nth-child(2) { margin:0; } .mini-note h3 { font-size:22px; } .mini-note p { max-width:100%; font-size:14px; } .note-number { margin-bottom:15px; } .mini-note svg { width:37px; right:22px; } .section-kicker .handwritten { display:none; } .range-label { flex-wrap:wrap; gap:6px; } .sim-controls,.sim-result { padding:24px; } .board-heading { padding:14px; gap:7px; font-size:7px; } .board-heading .demo-tag { font-size:6px; padding:3px; } .board-window-dots { display:none; } .board-stats { padding:20px 16px; } .board-stats strong { font-size:32px; } .board-stats span { font-size:9px; } .board-toolbar { padding-inline:13px; } .board-tabs button { font-size:9px; padding:6px; } .team-table td { padding:11px 8px; font-size:10px; } .team-table td:first-child,.team-table th:first-child { padding-left:14px; } .team-table th { font-size:7px; padding-inline:8px; } .avatar { width:23px; height:23px; line-height:21px; } .team-person { gap:7px; } .row-status { font-size:7px; padding:3px 4px; } .closing { padding:38px 27px; } .closing h2 { font-size:50px; } .closing-spark { font-size:45px; right:25px; top:77px; } dialog { padding:29px; } dialog h2 { font-size:30px; } }
  @media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *,*::before,*::after { animation:none!important; transition:none!important; } .confetti-layer { display:none; } }
}