/* Site Unseen: paper, ink and safety yellow. Atkinson Hyperlegible type.
   Margin notes (.sr-says) show what a screen reader announces; they are aria-hidden. */
:root{
  --paper:#F3EFE4; --ink:#111111; --soft:#47443D; --signal:#FFD23F; --asphalt:#161616; --on-asphalt:#F3EFE4;
  --sans:"Atkinson Hyperlegible Next","Atkinson Hyperlegible",Arial,sans-serif;
  --mono:"Atkinson Hyperlegible Mono",Consolas,monospace;
  --braille:"Noto Sans Symbols 2","Segoe UI Symbol","Apple Braille",sans-serif;
}
@media (prefers-color-scheme: dark){
  :root{ --paper:#111111; --ink:#F3EFE4; --soft:#C4BFB2; --asphalt:#000000; }
}
*{box-sizing:border-box}
body{margin:0; background:var(--paper); color:var(--ink); font-family:var(--sans); font-size:1.25rem; line-height:1.6}
.wrap{max-width:72rem; margin:0 auto; padding:0 1.5rem}

a{color:inherit; text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:.2em}
a:hover{background:var(--signal); color:#111}
:focus-visible{outline:4px solid var(--ink); outline-offset:3px}
a:focus-visible{background:var(--signal); color:#111}

.skip{position:absolute; left:1rem; top:-10rem; z-index:10; background:var(--signal); color:#111; padding:.75rem 1rem; font-weight:700}
.skip:focus{top:1rem}

.braille{font-family:var(--braille); letter-spacing:.12em; line-height:1}

/* Top strip and header */
.strip{background:var(--asphalt); color:var(--on-asphalt); border-bottom:4px solid var(--signal); font-family:var(--mono); font-size:.95rem}
.strip p{margin:0; padding:.5rem 0}
.head{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1rem 2.5rem; padding-top:1.5rem; padding-bottom:1.5rem}
.mark{display:flex; flex-direction:column; gap:.35rem}
.brand{font-size:2.1rem; font-weight:800; letter-spacing:-.02em; text-decoration:none; line-height:1}
.mark .braille{font-size:1.6rem}
nav ul{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:.25rem 1.75rem}
nav a{display:inline-block; padding:.35rem 0; font-weight:700}

/* Opening */
.hero{padding-top:2.5rem; padding-bottom:3.5rem; border-top:3px solid var(--ink)}
h1,h2,h3{line-height:1.12; letter-spacing:-.015em}
h1{font-size:clamp(2.4rem, 6.2vw, 5rem); font-weight:800; max-width:17ch; margin:0 0 2rem}
.hl{background:var(--signal); color:#111; padding:0 .12em; -webkit-box-decoration-break:clone; box-decoration-break:clone}
.lead{font-size:1.45rem; max-width:40rem}

.heard{margin:2rem 0; max-width:44rem; background:var(--asphalt); color:var(--on-asphalt); border:3px solid var(--signal); padding:1.5rem 1.75rem}
.said{margin:0; font-family:var(--mono); font-size:1.35rem; color:var(--signal); line-height:1.7}
.said p{margin:0}
.heard figcaption{margin-top:1.25rem; font-size:1.05rem}
@media (prefers-reduced-motion: no-preference){
  .said span{animation:speak .2s ease-out both}
  .said span:nth-of-type(2){animation-delay:.4s} .said span:nth-of-type(3){animation-delay:.8s}
  .said span:nth-of-type(4){animation-delay:1.2s} .said span:nth-of-type(5){animation-delay:1.6s}
  .said span:nth-of-type(6){animation-delay:2s} .said span:nth-of-type(7){animation-delay:2.4s}
}
@keyframes speak{from{opacity:0}to{opacity:1}}

.actions{display:flex; flex-wrap:wrap; align-items:center; gap:1rem 2rem; margin:2rem 0}
.btn{display:inline-block; min-height:3.25rem; padding:.8rem 1.5rem; background:var(--ink); color:var(--paper); border:3px solid var(--ink); font-weight:800; text-decoration:none}
.btn:hover,.btn:focus-visible{background:var(--signal); color:#111; text-decoration:underline}

/* Screen reader layer switch */
.layer-note{display:none; margin-top:2.5rem; padding-top:1.5rem; border-top:2px dashed var(--soft); max-width:44rem}
.js .layer-note{display:block}
.layer-note p{margin:.5rem 0 0; color:var(--soft); font-size:1.05rem}
.layer-toggle{font:700 1.05rem var(--mono); color:var(--ink); background:transparent; border:3px solid var(--ink); padding:.6rem 1rem; min-height:3rem; cursor:pointer; display:inline-flex; align-items:center; gap:.7rem}
.layer-toggle::before{content:""; width:1.1em; height:1.1em; border:3px solid var(--ink); background:transparent; flex:none}
.layer-toggle[aria-pressed="true"]::before{background:var(--signal); box-shadow:inset 0 0 0 3px var(--paper)}
.layer-toggle:hover{background:var(--signal); color:#111}
.layer-toggle:hover::before{border-color:#111}
.layer-off .sr-says{display:none}

/* Numbered sections with a margin rail */
.block{display:grid; grid-template-columns:13rem minmax(0,1fr); gap:1rem 3rem; padding-top:2.5rem; padding-bottom:3rem; border-top:3px solid var(--ink)}
.rail{display:flex; flex-direction:column; gap:.6rem}
.num{font-family:var(--mono); font-weight:700; font-size:3.25rem; line-height:1}
.rail .braille{font-size:2.2rem}
.sr-says{margin-top:.75rem; font-family:var(--mono); font-size:.9rem; line-height:1.45; color:var(--soft); display:flex; flex-direction:column; gap:.4rem; border-left:4px solid var(--signal); padding-left:.75rem}
.sr-label{text-transform:uppercase; letter-spacing:.08em; font-weight:700; color:var(--ink)}
.body{max-width:46rem}
h2{font-size:clamp(2rem, 4vw, 2.9rem); font-weight:800; margin:0 0 1rem}
h3{font-size:1.5rem; font-weight:800; margin:2rem 0 .5rem}
.tag{display:inline-block; font-family:var(--mono); font-weight:700; font-size:1rem; text-transform:uppercase; letter-spacing:.06em; border:2px solid var(--ink); padding:.15rem .6rem; margin:0 0 1.25rem}
.tag.soon::before{content:""; display:inline-block; width:1.4em; height:.8em; margin-right:.5em; vertical-align:-.05em; background:repeating-linear-gradient(-45deg, #111 0 4px, var(--signal) 4px 8px)}

ul.marks{list-style:none; padding:0; margin:1rem 0}
ul.marks li{padding:.55rem 0 .55rem 1.5rem; border-bottom:1px solid var(--soft); position:relative}
ul.marks li::before{content:""; position:absolute; left:0; top:1.05em; width:.6rem; height:.6rem; background:var(--ink)}

ol.steps{list-style:none; counter-reset:step; padding:0; margin:1rem 0}
ol.steps li{counter-increment:step; display:grid; grid-template-columns:3.5rem 1fr; gap:1rem; padding:.9rem 0; border-bottom:1px solid var(--soft)}
ol.steps li::before{content:counter(step, decimal-leading-zero); font-family:var(--mono); font-weight:700; font-size:1.5rem; line-height:1.3}

/* Pricing, set like a receipt */
.ledger{list-style:none; padding:0; margin:1rem 0 0; border-top:3px solid var(--ink)}
.ledger li{display:flex; align-items:baseline; gap:.75rem; padding:1.1rem 0; border-bottom:1px solid var(--soft)}
.ledger .item{max-width:30rem}
.ledger .item strong{display:block; font-size:1.35rem}
.ledger .item span{display:block; color:var(--soft); font-size:1.05rem}
.ledger .fill{flex:1 1 2rem; border-bottom:3px dotted var(--ink); align-self:flex-start; margin-top:1.1rem}
.ledger .amt{font-family:var(--mono); font-weight:700; font-size:1.6rem; white-space:nowrap; align-self:flex-start}

.straight li{font-size:1.3rem}
.pull{font-size:1.75rem; font-weight:800; line-height:1.3; margin:1.5rem 0; padding-left:1.25rem; border-left:8px solid var(--signal)}
.email{display:inline-block; font-size:clamp(1.5rem, 5vw, 3rem); font-weight:800; overflow-wrap:anywhere; margin:.5rem 0 1rem}

/* Footer */
footer.site{background:var(--asphalt); color:var(--on-asphalt); border-top:4px solid var(--signal); margin-top:2rem; padding:2.5rem 0}
footer.site p{margin:.35rem 0}
footer.site .braille{font-size:2rem; color:var(--signal); margin-bottom:1rem; display:block}
footer.site a:focus-visible{outline-color:var(--signal)}

/* Phones and zoomed-in screens */
@media (max-width:48rem){
  body{font-size:1.15rem}
  .block{grid-template-columns:1fr; gap:.5rem}
  .rail{flex-direction:row; flex-wrap:wrap; align-items:center; gap:.5rem 1rem}
  .num{font-size:2.25rem}
  .sr-says{flex-basis:100%; margin-top:.25rem}
  .lead{font-size:1.25rem}
  .said{font-size:1.15rem}
  .ledger li{flex-wrap:wrap}
  .ledger .fill{display:none}
  .ledger .amt{flex-basis:100%}
}