/* AwayDesk website: a leave register. Warm paper, the app's navy ink, an
   ochre accent for actions, Instrument Serif for headings, IBM Plex for text
   and figures (the same family as the app). Light or dark from the device. */

:root {
  --paper: #F4EFE4;
  --paper-2: #ECE5D5;
  --card: #FBF8F1;
  --ink: #12263F;
  --ink-2: #3E4C5E;
  --ink-3: #6A7482;
  --rule: #D6CCB7;
  --rule-soft: #E4DCCB;
  --accent: #C9671C;
  --accent-hover: #AE5612;
  --accent-ink: #FFFFFF;
  --leave: #2F7D5B;
  --closed: #12263F;
  --hol: #C9671C;
  --stamp: #A8322A;
  --band: #12263F;
  --band-text: #E9E3D4;
  --band-muted: #A9B4C2;
  --serif: 'Instrument Serif', 'Times New Roman', serif;
  --sans: 'IBM Plex Sans', 'Segoe UI', system-ui, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, Consolas, monospace;
  --wrap: 1160px;
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.35  0 0 0 0 0.3  0 0 0 0 0.2  0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #0F1720;
    --paper-2: #131D28;
    --card: #17222F;
    --ink: #ECE5D5;
    --ink-2: #C3BBAA;
    --ink-3: #8F96A0;
    --rule: #2D3A49;
    --rule-soft: #223040;
    --accent: #E58A3C;
    --accent-hover: #F09D55;
    --accent-ink: #1A1006;
    --leave: #5DBB8E;
    --closed: #ECE5D5;
    --hol: #E58A3C;
    --stamp: #E0675C;
    --band: #0A1118;
    --band-text: #ECE5D5;
    --band-muted: #8F9AA8;
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 80px; }
body {
  margin: 0;
  background: var(--paper) var(--grain);
  color: var(--ink);
  font: 400 17px/1.6 var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { display: block; }
a { color: inherit; }
h1, h2, h3 { margin: 0; font-weight: 400; }
p { margin: 0 0 1em; }
em { font-style: italic; }
.wrap { width: min(var(--wrap), 100% - 40px); margin-inline: auto; }
.muted { color: var(--ink-3); }
.small { font-size: 14px; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--ink); color: var(--paper); padding: 8px 14px; z-index: 50; }
.skip:focus { left: 8px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }

.eyebrow {
  font: 500 12px/1 var(--mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 18px;
  display: flex; align-items: center; gap: 10px;
}
.eyebrow::before { content: ''; width: 22px; height: 1px; background: currentColor; }

/* ───────── Buttons ───────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px 22px;
  font: 500 15px/1 var(--sans);
  text-decoration: none;
  border-radius: 3px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background .2s, color .2s, transform .2s, border-color .2s;
}
.btn:active { transform: translateY(1px); }
.btn-accent { background: var(--accent); color: var(--accent-ink); }
.btn-accent:hover { background: var(--accent-hover); }
.btn-ink { background: var(--ink); color: var(--paper); }
.btn-ink:hover { background: var(--ink-2); }
.btn-line { border-color: var(--ink); color: var(--ink); background: transparent; }
.btn-line:hover { background: var(--ink); color: var(--paper); }
.btn.wide { width: 100%; }
.link-quiet { text-decoration: none; font-weight: 500; font-size: 15px; color: var(--ink-2); }
.link-quiet:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }

/* ───────── Header ───────── */
.top {
  position: sticky; top: 0; z-index: 20;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--rule-soft);
}
.top-row { display: flex; align-items: center; gap: 28px; height: 68px; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font: 400 26px/1 var(--serif); margin: 0; }
.brand.small { font-size: 20px; gap: 8px; }
.nav { display: flex; gap: 26px; margin-left: 14px; }
.nav a { text-decoration: none; font-size: 15px; color: var(--ink-2); position: relative; }
.nav a::after { content: ''; position: absolute; left: 0; right: 100%; bottom: -4px; height: 1px; background: var(--accent); transition: right .25s; }
.nav a:hover { color: var(--ink); }
.nav a:hover::after { right: 0; }
.top-cta { margin-left: auto; display: flex; align-items: center; gap: 20px; }
.top-cta .btn { padding: 10px 16px; font-size: 14px; }

/* ───────── Hero ───────── */
.hero { padding: 76px 0 84px; position: relative; overflow: hidden; }
.hero::before {
  /* the faint ruled lines of a register page */
  content: ''; position: absolute; inset: 0;
  background: repeating-linear-gradient(to bottom, transparent 0 31px, var(--rule-soft) 31px 32px);
  mask-image: linear-gradient(to bottom, transparent, #000 25%, #000 70%, transparent);
  opacity: .55; pointer-events: none;
}
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: 64px; align-items: center; position: relative; }
.hero h1 {
  font: 400 clamp(46px, 6.4vw, 86px)/.98 var(--serif);
  letter-spacing: -.015em;
  margin-bottom: 26px;
}
.hero h1 em { color: var(--accent); }
.lead { font-size: 19px; color: var(--ink-2); max-width: 34em; margin-bottom: 32px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 34px; }
.hero-notes { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px 26px; font: 400 13px/1.4 var(--mono); color: var(--ink-3); }
.hero-notes li::before { content: '✓'; color: var(--leave); margin-right: 8px; }

.hero-copy > * { animation: rise .8s cubic-bezier(.2, .7, .2, 1) both; }
.hero-copy > :nth-child(2) { animation-delay: .08s; }
.hero-copy > :nth-child(3) { animation-delay: .16s; }
.hero-copy > :nth-child(4) { animation-delay: .24s; }
.hero-copy > :nth-child(5) { animation-delay: .32s; }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* The register card */
.register {
  margin: 0; position: relative;
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: 26px 28px 20px;
  box-shadow: 0 1px 0 var(--rule), 0 30px 60px -30px rgba(18, 38, 63, .35), 10px 10px 0 -1px var(--paper-2), 10px 10px 0 0 var(--rule);
  transform: rotate(-1.2deg);
  animation: settle 1s cubic-bezier(.2, .7, .2, 1) .15s both;
}
@keyframes settle { from { opacity: 0; transform: rotate(-4deg) translate(20px, 26px); } to { opacity: 1; transform: rotate(-1.2deg); } }
.reg-head { display: flex; justify-content: space-between; align-items: flex-end; border-bottom: 2px solid var(--ink); padding-bottom: 12px; margin-bottom: 14px; }
.reg-kicker { font: 500 11px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 6px; }
.reg-title { font: 400 34px/1 var(--serif); margin: 0; }
.reg-who { margin: 0; text-align: right; font: 500 14px/1.35 var(--sans); }
.reg-who span { font: 400 12px var(--mono); color: var(--leave); }

.cal { display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px; }
.dow { font: 500 11px/1 var(--mono); color: var(--ink-3); text-align: center; padding-bottom: 4px; }
.d {
  position: relative;
  height: 38px; display: grid; place-items: center;
  font: 400 14px/1 var(--mono);
  border: 1px solid var(--rule-soft); border-radius: 2px;
  background: var(--card);
  animation: pop .35s ease-out both;
}
.d.out { color: var(--ink-3); opacity: .55; }
.d.lv { background: color-mix(in srgb, var(--leave) 16%, var(--card)); border-color: color-mix(in srgb, var(--leave) 45%, transparent); color: var(--leave); font-weight: 500; }
.d.lv::after { content: ''; position: absolute; left: -1px; right: -1px; bottom: -1px; height: 3px; background: var(--leave); transform-origin: left; animation: draw .5s ease-out both; }
.d.cl {
  color: var(--paper); border-color: var(--closed);
  background: repeating-linear-gradient(135deg, var(--closed) 0 6px, color-mix(in srgb, var(--closed) 82%, var(--card)) 6px 9px);
}
@media (prefers-color-scheme: dark) { .d.cl { color: #0F1720; } }
.d.hol { color: var(--hol); border: 1px dashed var(--hol); background: transparent; }
.d.hol::before { content: ''; position: absolute; top: 4px; right: 4px; width: 5px; height: 5px; border-radius: 50%; background: var(--hol); }
/* staggered entrance, row by row */
.cal > :nth-child(n+6) { animation-delay: .35s; }
.cal > :nth-child(n+11) { animation-delay: .45s; }
.cal > :nth-child(n+16) { animation-delay: .55s; }
.cal > :nth-child(n+21) { animation-delay: .65s; }
.cal > :nth-child(n+26) { animation-delay: .75s; }
.d.lv::after { animation-delay: .9s; }
@keyframes pop { from { opacity: 0; transform: scale(.9); } to { opacity: 1; transform: none; } }
@keyframes draw { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.reg-key { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 12px 0 16px; font: 400 11.5px/1.3 var(--mono); color: var(--ink-3); }
.reg-key i { display: inline-block; width: 10px; height: 10px; margin-right: 6px; vertical-align: -1px; border-radius: 1px; }
.k-lv { background: var(--leave); }
.k-cl { background: repeating-linear-gradient(135deg, var(--closed) 0 3px, transparent 3px 5px); border: 1px solid var(--closed); }
.k-hol { border: 1px dashed var(--hol); }

.ledger { margin: 0; font: 400 14px/1 var(--mono); }
.ledger div { display: flex; align-items: baseline; gap: 8px; padding: 8px 0; }
.ledger dt { flex: 0 1 auto; color: var(--ink-2); }
.ledger div::after { content: ''; order: 2; flex: 1; border-bottom: 1px dotted var(--rule); transform: translateY(-3px); }
.ledger dd { order: 3; margin: 0; font-variant-numeric: tabular-nums; }
.ledger .total { border-top: 2px solid var(--ink); margin-top: 4px; padding-top: 12px; }
.ledger .total dt, .ledger .total dd { color: var(--ink); font-weight: 500; }

.stamp-mark {
  position: absolute; right: -12px; bottom: 14px;
  font: 500 15px/1 var(--mono); letter-spacing: .22em; text-transform: uppercase;
  color: var(--stamp); border: 2px solid var(--stamp); border-radius: 4px;
  padding: 8px 12px 7px; margin: 0;
  transform: rotate(-11deg);
  mix-blend-mode: multiply;
  opacity: .88;
  animation: stamp .45s cubic-bezier(.3, 1.6, .5, 1) 1.25s both;
}
@media (prefers-color-scheme: dark) { .stamp-mark { mix-blend-mode: normal; } }
.stamp-mark.static { position: static; display: inline-block; animation-delay: .1s; margin-bottom: 18px; }
@keyframes stamp { from { opacity: 0; transform: rotate(-11deg) scale(1.9); } to { opacity: .88; transform: rotate(-11deg) scale(1); } }
.register figcaption { margin-top: 14px; font: 400 11px var(--mono); color: var(--ink-3); }

/* ───────── Rules strip ───────── */
.rules { border-block: 1px solid var(--ink); background: var(--card); }
.rules-row { display: grid; grid-template-columns: repeat(4, 1fr); }
.rules p { margin: 0; padding: 20px 22px; font-size: 14px; color: var(--ink-2); border-left: 1px solid var(--rule); }
.rules p:first-child { border-left: 0; padding-left: 0; }
.rules span { display: block; font: 400 21px/1.15 var(--serif); color: var(--ink); margin-bottom: 4px; }

/* ───────── Sections ───────── */
.section { padding: 104px 0; }
.section-head { margin-bottom: 52px; max-width: 760px; }
.section-head h2, .payroll-grid h2, .demo h2 {
  font: 400 clamp(36px, 4.6vw, 58px)/1.02 var(--serif);
  letter-spacing: -.01em;
}
.section-head h2 em, .payroll-grid h2 em, .demo h2 em { color: var(--accent); }
.section-head .muted { margin-top: 16px; }

/* Numbered ledger entries */
.entries {
  list-style: none; padding: 0; margin: 0;
  counter-reset: entry;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 64px;
  border-top: 1px solid var(--ink);
}
.entries li {
  counter-increment: entry;
  display: grid; grid-template-columns: 56px 1fr; column-gap: 8px;
  padding: 28px 0 26px;
  border-bottom: 1px solid var(--rule);
}
.entries li::before {
  content: counter(entry, decimal-leading-zero);
  grid-row: span 2;
  font: 500 13px/1.9 var(--mono); color: var(--accent);
}
.entries h3 { font: 400 27px/1.15 var(--serif); margin-bottom: 8px; }
.entries p { margin: 0; color: var(--ink-2); font-size: 16px; }

/* Payroll band */
.ink { background: var(--band) var(--grain); color: var(--band-text); }
.ink .eyebrow { color: var(--hol); }
.ink p { color: var(--band-muted); }
.ink h2 em { color: var(--hol); }
.payroll-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 64px; align-items: center; }
.payroll-grid h2 { margin-bottom: 22px; color: var(--band-text); }
.sheet {
  background: #FBF8F1; color: #12263F;
  border-radius: 4px; overflow: hidden;
  box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .6);
  transform: rotate(.8deg);
}
.sheet-bar { display: flex; align-items: center; gap: 6px; padding: 10px 14px; background: #E7E0CF; border-bottom: 1px solid #D6CCB7; }
.sheet-bar span { width: 9px; height: 9px; border-radius: 50%; background: #C9BFA9; }
.sheet-bar b { margin-left: 10px; font: 500 12px var(--mono); color: #3E4C5E; }
.sheet table { width: 100%; border-collapse: collapse; font: 400 13px/1.2 var(--mono); }
.sheet th { text-align: left; font-weight: 500; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: #6A7482; padding: 10px 12px; border-bottom: 2px solid #12263F; }
.sheet td { padding: 11px 12px; border-bottom: 1px solid #E4DCCB; white-space: nowrap; }
.sheet .n { text-align: right; font-variant-numeric: tabular-nums; }
.sheet tr.hl td { background: #F6E6D5; }
.sheet tr.hl td:first-child { box-shadow: inset 3px 0 0 #C9671C; }
.sheet-note { margin: 0; padding: 10px 14px; font: 400 11px var(--mono); color: #6A7482 !important; }

.shutdown {
  margin-top: 88px; padding-top: 44px;
  border-top: 1px solid color-mix(in srgb, var(--band-text) 20%, transparent);
  display: grid; grid-template-columns: auto 1fr; gap: 56px; align-items: center;
}
.shutdown-num { font: 400 clamp(54px, 8vw, 110px)/1 var(--serif); color: var(--band-text); white-space: nowrap; letter-spacing: -.02em; }
.shutdown-num span { color: var(--hol); font-style: italic; margin: 0 .12em; }
.shutdown h3 { font: 400 32px/1.1 var(--serif); color: var(--band-text); margin-bottom: 12px; }
.shutdown p { margin: 0; max-width: 40em; }

/* Steps */
.steps { list-style: none; padding: 0; margin: 0 0 72px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; }
.steps li { padding: 0 32px 0 0; position: relative; }
.steps li + li { padding-left: 32px; border-left: 1px solid var(--rule); }
.step-n { display: block; font: 400 88px/.9 var(--serif); color: var(--accent); margin-bottom: 14px; }
.steps h3 { font: 400 26px/1.15 var(--serif); margin-bottom: 8px; }
.steps p { color: var(--ink-2); margin: 0; font-size: 16px; }
.trust { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.trust > div { background: var(--card); border: 1px solid var(--rule); border-radius: 4px; padding: 24px 24px 22px; }
.trust h3 { font: 500 16px/1.3 var(--sans); margin-bottom: 8px; }
.trust p { margin: 0; color: var(--ink-2); font-size: 15px; }

/* Pricing */
.paper-2 { background: var(--paper-2) var(--grain); border-block: 1px solid var(--rule); }
.pricing-grid { display: grid; grid-template-columns: 1fr minmax(320px, 420px); gap: 64px; align-items: center; }
.pricing-grid .section-head { margin: 0; }
.price-card {
  position: relative;
  background: var(--card); border: 1px solid var(--ink); border-radius: 4px;
  padding: 36px 34px 28px;
  box-shadow: 8px 8px 0 var(--ink);
}
.provisional {
  position: absolute; top: -15px; right: 22px;
  font: 500 12px/1 var(--mono); letter-spacing: .18em; text-transform: uppercase;
  background: var(--stamp); color: #fff; padding: 8px 12px 7px; border-radius: 2px;
  transform: rotate(3deg);
}
.price { font: 400 96px/.9 var(--serif); margin: 0; letter-spacing: -.02em; }
.price .cur { font-size: .45em; vertical-align: .9em; margin-right: 4px; color: var(--ink-3); }
.per { font: 400 14px var(--mono); color: var(--ink-3); margin: 6px 0 22px; }
.price-card ul { list-style: none; padding: 18px 0 0; margin: 0 0 26px; border-top: 1px solid var(--rule); }
.price-card li { padding: 6px 0 6px 26px; position: relative; font-size: 15.5px; }
.price-card li::before { content: '✓'; position: absolute; left: 0; color: var(--leave); font-weight: 600; }
.fine { font-size: 13px; color: var(--ink-3); margin: 16px 0 0; }

/* FAQ */
.faq-grid { display: grid; grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr); gap: 64px; align-items: start; }
.faq-grid .section-head { position: sticky; top: 110px; }
.faq { border-top: 1px solid var(--ink); }
.faq details { border-bottom: 1px solid var(--rule); }
.faq summary {
  list-style: none; cursor: pointer;
  display: flex; justify-content: space-between; align-items: center; gap: 20px;
  padding: 22px 0; font: 400 24px/1.2 var(--serif);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; font: 300 26px/1 var(--sans); color: var(--accent); transition: transform .25s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { margin: -6px 0 22px; color: var(--ink-2); max-width: 44em; }

/* Demo form */
.demo { border-top: 1px solid var(--rule); }
.demo-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 64px; align-items: start; }
.demo h2 { margin-bottom: 20px; }
.demo-copy p { color: var(--ink-2); }
.demo-form, .demo-done {
  background: var(--card); border: 1px solid var(--rule); border-radius: 4px;
  padding: 32px; box-shadow: 0 30px 60px -40px rgba(18, 38, 63, .45);
}
.demo-form { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 20px; }
.demo-done { text-align: left; }
.demo-done h3 { font: 400 32px/1.1 var(--serif); margin-bottom: 8px; }
.span2 { grid-column: 1 / -1; }
.field label { display: block; font-size: 14px; font-weight: 500; margin-bottom: 6px; }
.field small { font-weight: 400; color: var(--ink-3); }
.field input, .field select, .field textarea {
  width: 100%; font: 400 16px/1.4 var(--sans); color: var(--ink);
  background: var(--paper); border: 1px solid var(--rule); border-radius: 3px;
  padding: 11px 12px;
  transition: border-color .2s, box-shadow .2s;
}
.field textarea { resize: vertical; min-height: 90px; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent); }
.field input[aria-invalid="true"] { border-color: var(--stamp); }
.consent { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; color: var(--ink-2); cursor: pointer; }
.consent input { width: 18px; height: 18px; margin-top: 3px; accent-color: var(--accent); flex: none; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-error { margin: 0; color: var(--stamp); font-size: 15px; min-height: 0; }
.form-error:empty { display: none; }
.demo-form button[disabled] { opacity: .65; cursor: progress; }

/* Footer */
.foot { border-top: 1px solid var(--ink); padding: 34px 0 44px; font-size: 14px; }
.foot-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; }
.foot-row p { margin: 0; }
.foot nav { margin-left: auto; display: flex; gap: 22px; }
.foot nav a { text-decoration: none; color: var(--ink-2); }
.foot nav a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }

/* ───────── Legal pages ───────── */
.doc { padding: 64px 0 96px; }
.doc .wrap { max-width: 760px; }
.doc h1 { font: 400 clamp(40px, 5vw, 60px)/1 var(--serif); margin-bottom: 14px; }
.doc h2 { font: 400 28px/1.15 var(--serif); margin: 40px 0 12px; }
.doc p, .doc li { color: var(--ink-2); }
.doc ul { padding-left: 20px; }
.doc li { margin-bottom: 6px; }
.draft-banner {
  border: 2px solid var(--stamp); color: var(--stamp);
  background: color-mix(in srgb, var(--stamp) 7%, var(--card));
  border-radius: 4px; padding: 16px 20px; margin: 22px 0 36px; font-size: 15px;
}
.draft-banner b { font: 500 13px var(--mono); letter-spacing: .16em; text-transform: uppercase; display: block; margin-bottom: 4px; }
.todo { background: color-mix(in srgb, var(--accent) 22%, transparent); padding: 0 4px; border-radius: 2px; color: var(--ink); }

/* ───────── Smaller screens ───────── */
@media (max-width: 980px) {
  .hero-grid, .payroll-grid, .pricing-grid, .faq-grid, .demo-grid { grid-template-columns: minmax(0, 1fr); gap: 48px; }
  .register { max-width: 520px; }
  .faq-grid .section-head { position: static; }
  .rules-row { grid-template-columns: repeat(2, 1fr); }
  .rules p:nth-child(3) { border-left: 0; padding-left: 0; }
  .rules p:nth-child(n+3) { border-top: 1px solid var(--rule); }
  .shutdown { grid-template-columns: minmax(0, 1fr); gap: 20px; }
}
@media (max-width: 760px) {
  body { font-size: 16px; }
  .nav { display: none; }
  .top-row { height: 60px; gap: 12px; }
  .top-cta { gap: 14px; }
  .hero { padding: 44px 0 56px; }
  .section { padding: 72px 0; }
  .entries { grid-template-columns: minmax(0, 1fr); }
  .entries li { grid-template-columns: 44px 1fr; }
  .steps, .trust { grid-template-columns: minmax(0, 1fr); }
  .steps li, .steps li + li { padding: 0 0 28px; border-left: 0; }
  .steps li + li { border-top: 1px solid var(--rule); padding-top: 24px; }
  .step-n { font-size: 64px; }
  .demo-form { grid-template-columns: minmax(0, 1fr); padding: 22px; }
  .register { padding: 20px 16px 16px; transform: rotate(-.6deg); }
  .stamp-mark { right: -6px; bottom: 10px; font-size: 13px; }
  .sheet { overflow-x: auto; transform: none; }
  .foot nav { margin-left: 0; }
}
@media (max-width: 420px) {
  .top-cta .link-quiet { display: none; }
  .rules-row { grid-template-columns: minmax(0, 1fr); }
  .rules p, .rules p:nth-child(3) { border-left: 0; padding-left: 0; border-top: 1px solid var(--rule); }
  .rules p:first-child { border-top: 0; }
  .d { height: 32px; font-size: 13px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
  .register { transform: rotate(-1.2deg); }
}