/* The landing page: hero, headline figures, how it works. */

.hero{padding-block:var(--space-5) var(--space-4)}
.hero .shell{display:grid; gap:var(--space-5); align-items:center}
@media (min-width:60em){
  .hero .shell{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); gap:var(--space-6)}
}
.hero h1{font-size:var(--step-4); line-height:1.04; letter-spacing:-.022em; max-width:15ch}
.lede{margin-top:var(--space-3); font-size:var(--step-1); color:var(--ink-soft);
      max-width:var(--measure); text-wrap:pretty}
.actions{display:flex; flex-wrap:wrap; gap:var(--space-2); margin-top:var(--space-4)}

/* The one moment of motion on the page: coverage inking in, once, on load. */
.outline{width:100%; height:auto; display:block; overflow:visible; aspect-ratio:1000/640}
.outline .b{fill:var(--uncovered); stroke:var(--paper); stroke-width:1.1; stroke-linejoin:round}
.outline .b.covered{fill:var(--covered)}
@media (prefers-reduced-motion: no-preference){
  .outline .b.covered{animation:ink .5s cubic-bezier(.2,.7,.3,1) backwards}
}
@keyframes ink{ from{fill:var(--uncovered)} to{fill:var(--covered)} }
.caption{margin-top:var(--space-2); font-size:var(--step--1); color:var(--slate)}

.figures{border-block:1px solid var(--rule); background:var(--paper-raised)}
.figures dl{display:grid; gap:var(--space-4); padding-block:var(--space-4); margin:0}
@media (min-width:40em){ .figures dl{grid-template-columns:repeat(3,1fr)} }
.figure{display:flex; flex-direction:column-reverse; justify-content:flex-end}
.figure dd{margin:0; font-size:var(--step-3); font-weight:600; line-height:1.1;
           font-variant-numeric:tabular-nums lining-nums; letter-spacing:-.02em}
.figure dt{margin-top:var(--space-1); font-size:var(--step--1); color:var(--slate); max-width:28ch}

.how{padding-block:var(--space-5)}
.how h2{font-size:var(--step-2); letter-spacing:-.015em}
.stages{list-style:none; margin:var(--space-4) 0 0; padding:0; display:grid; gap:var(--space-3);
        counter-reset:stage}
@media (min-width:48em){ .stages{grid-template-columns:repeat(4,1fr)} }
.stage{padding-top:var(--space-2); border-top:2px solid var(--rule); counter-increment:stage}
.stage:first-child{border-top-color:var(--marigold)}
.stage h3{font-size:var(--step-1); letter-spacing:-.01em}
.stage h3::before{content:counter(stage) ". "; color:var(--slate); font-weight:400}
.stage p{margin-top:var(--space-1); font-size:var(--step--1); color:var(--ink-soft)}
.note-wide{margin-top:var(--space-4); max-width:var(--measure);
           font-size:var(--step--1); color:var(--ink-soft)}
.note-wide strong{color:var(--ink); font-weight:600}

/* ---- sign-in ------------------------------------------------------------ */
.signin{padding-block:var(--space-6); display:grid; place-items:center}
.signin .panel{width:100%; max-width:24rem; padding:var(--space-4)}
.signin h1{font-size:var(--step-2); letter-spacing:-.015em}
.signin p{margin-top:var(--space-2); color:var(--ink-soft); font-size:var(--step--1)}
.signin form{margin-top:var(--space-3); display:grid; gap:var(--space-2)}
.signin .btn{width:100%; margin-top:var(--space-1)}
.form-error{padding:var(--space-2); border-radius:var(--radius); background:var(--bad-bg);
            color:var(--bad); font-size:var(--step--1)}