:root{
  --indigo:#1E1A4D;
  --indigo-lift:#2D2772;
  --indigo-soft:#CFCBF0;
  --gold:#FFC53D;
  --gold-deep:#F2B01E;
  --mist:#F2F1FA;
  --white:#FFFFFF;
  --ink:#17152E;
  --soft:#57557A;
  --line:#DFDDF0;
  --ok:#0B6B45;   --ok-bg:#DBF4E6;
  --wait:#7D4A00; --wait-bg:#FFEDC2;
  --no:#A82A25;   --no-bg:#FCE1DE;
  --display:"Bricolage Grotesque", "Segoe UI", Arial, sans-serif;
  --text:"Atkinson Hyperlegible Next", "Segoe UI", Arial, sans-serif;
  --wrap:1160px;
  --r-xl:36px; --r-l:24px; --r-m:16px;
}
*{box-sizing:border-box}
::selection{background:transparent;color:inherit}
::-moz-selection{background:transparent;color:inherit}
input::selection,textarea::selection{background:var(--indigo-soft);color:var(--ink)}
html{scroll-behavior:smooth;scroll-padding-top:96px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}
body{
  margin:0;background:var(--mist);color:var(--ink);
  font-family:var(--text);font-size:1.125rem;line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
a{color:inherit}
:focus-visible{outline:3px solid var(--indigo);outline-offset:3px;border-radius:6px}
.on-dark :focus-visible{outline-color:var(--gold)}

h1,h2,h3{font-family:var(--display);margin:0;letter-spacing:-0.025em;font-weight:700}
h1{font-size:clamp(2.5rem,5.2vw,4.25rem);line-height:1.02;letter-spacing:-0.035em;font-weight:800}
h2{font-size:clamp(2rem,3.8vw,3rem);line-height:1.08}
h3{font-size:1.35rem;line-height:1.2;letter-spacing:-0.015em}
p{margin:0}
.lede{font-size:1.25rem;line-height:1.55;color:var(--soft);max-width:34em}

/* header */
.top{position:sticky;top:0;z-index:10;background:rgba(242,241,250,.86);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;height:76px}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;font-family:var(--display);font-size:1.5rem;font-weight:800;letter-spacing:-0.035em;color:var(--indigo)}
.brand svg{width:34px;height:34px;flex:none}
.top nav{display:flex;align-items:center;gap:6px;font-size:1rem;font-weight:600}
.top nav a{text-decoration:none;padding:10px 16px;border-radius:999px;transition:background .15s}
.top nav a:hover{background:rgba(30,26,77,.08)}
.top nav a.pill{background:var(--indigo);color:#fff;padding:10px 20px}
.top nav a.pill:hover{background:var(--indigo-lift)}
@media (max-width:820px){.top nav a.hide-s{display:none}}

/* buttons */
.btn{
  font-family:var(--text);font-weight:700;font-size:1.05rem;line-height:1.2;
  display:inline-block;padding:16px 26px;border-radius:999px;cursor:pointer;
  border:2px solid var(--indigo);background:var(--indigo);color:#fff;text-decoration:none;
  transition:background .15s,border-color .15s,transform .15s;
}
.btn:hover{background:var(--indigo-lift);border-color:var(--indigo-lift)}
.btn:active{transform:translateY(1px)}
.btn.gold{background:var(--gold);border-color:var(--gold);color:var(--ink)}
.btn.gold:hover{background:var(--gold-deep);border-color:var(--gold-deep)}
.btn.ghost{background:transparent;border-color:rgba(255,255,255,.45);color:#fff}
.btn.ghost:hover{background:rgba(255,255,255,.1);border-color:#fff}

/* hero */
.hero-shell{padding:8px 16px 0}
.hero{
  max-width:1360px;margin:0 auto;background:var(--indigo);color:#fff;border-radius:var(--r-xl);
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:64px;align-items:center;
  padding:80px clamp(24px,6vw,88px);
}
.hero h1{margin-bottom:26px}
.hero .lede{color:var(--indigo-soft)}
.hero .actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:36px}
@media (max-width:980px){.hero{grid-template-columns:1fr;gap:44px;padding:56px 24px 28px}}

/* the written list */
.list{background:var(--white);color:var(--ink);border-radius:var(--r-l);padding:30px 30px 14px;box-shadow:0 30px 60px -20px rgba(8,6,40,.55)}
.list-head{padding-bottom:18px}
.list-head h2{font-size:1.4rem;line-height:1.2;letter-spacing:-0.02em}
.list-head p{font-size:.95rem;color:var(--soft);margin-top:4px}
.list ul{list-style:none;margin:0;padding:0}
.list li{padding:15px 0;border-top:1px solid var(--line)}
.line{display:flex;align-items:center;justify-content:space-between;gap:8px 14px;flex-wrap:wrap}
.item{font-weight:700;font-size:1.08rem;line-height:1.3}
.out{font-size:.88rem;font-weight:700;white-space:nowrap;padding:5px 12px 5px 10px;border-radius:999px;display:inline-flex;align-items:center;gap:7px}
.out::before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor}
.out.ok{color:var(--ok);background:var(--ok-bg)}
.out.wait{color:var(--wait);background:var(--wait-bg)}
.out.no{color:var(--no);background:var(--no-bg)}
.note{font-size:.98rem;line-height:1.4;color:var(--soft);margin-top:3px}
@media (max-width:480px){.list{padding:24px 20px 8px}}

/* sections */
.band{padding:112px 0}
.band.white{background:var(--white)}
.band-head{margin-bottom:52px}
.band-head .lede{margin-top:18px}
@media (max-width:700px){.band{padding:72px 0}.band-head{margin-bottom:36px}}

/* founder note */
.letter{max-width:860px}
.letter p{font-family:var(--display);font-weight:500;font-size:clamp(1.5rem,2.9vw,2.2rem);line-height:1.28;letter-spacing:-0.022em}
.letter p + p{margin-top:.8em}
.letter .from{display:flex;align-items:center;gap:12px;font-family:var(--text);font-size:1.02rem;font-weight:600;letter-spacing:0;color:var(--soft);margin-top:32px}
.letter .from::before{content:"L";display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--indigo);color:var(--gold);font-family:var(--display);font-weight:800;font-size:1.2rem}

/* steps */
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:32px;counter-reset:s}
.steps li{counter-increment:s;position:relative}
.steps li::before{
  content:counter(s);display:grid;place-items:center;width:52px;height:52px;border-radius:50%;
  background:var(--gold);color:var(--ink);font-family:var(--display);font-weight:800;font-size:1.4rem;margin-bottom:22px;position:relative;z-index:1;
}
.steps li::after{content:"";position:absolute;top:25px;left:52px;right:-32px;height:2px;background:var(--line)}
.steps li:last-child::after{display:none}
.steps h3{margin-bottom:8px}
.steps p{font-size:1.05rem;color:var(--soft)}
@media (max-width:980px){.steps{grid-template-columns:repeat(2,minmax(0,1fr));gap:40px 32px}.steps li::after{display:none}}
@media (max-width:540px){.steps{grid-template-columns:1fr}}

/* limits */
.scope{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.scope > div{border-radius:var(--r-l);padding:30px 30px 28px}
.scope .can{background:var(--ok-bg)}
.scope .ask{background:var(--wait-bg)}
.scope .cannot{background:var(--no-bg)}
.scope h3{display:flex;align-items:center;gap:12px;margin-bottom:18px}
.scope h3 svg{width:36px;height:36px;flex:none;border-radius:50%;padding:8px;background:var(--white)}
.scope .can h3 svg{color:var(--ok)} .scope .ask h3 svg{color:var(--wait)} .scope .cannot h3 svg{color:var(--no)}
.scope ul{list-style:none;margin:0;padding:0;font-size:1.08rem}
.scope li{padding:9px 0;border-top:1px solid rgba(23,21,46,.12);line-height:1.4}
.scope p{margin-top:16px;font-size:1rem;line-height:1.5;color:#3A3852}
@media (max-width:920px){.scope{grid-template-columns:1fr}}

/* prices */
.group{font-family:var(--display);font-size:1.35rem;font-weight:700;letter-spacing:-0.015em;margin:56px 0 18px}
.group.first{margin-top:0}
.tiers{display:grid;gap:14px}
.tier{
  display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,.6fr) minmax(220px,auto);gap:32px;align-items:center;
  padding:30px 32px;border-radius:var(--r-l);background:var(--mist);
}
.tier h3{margin-bottom:6px;font-size:1.5rem}
.tier p{color:var(--soft);font-size:1.05rem;max-width:32em}
.price{font-family:var(--display);font-size:2.1rem;line-height:1.1;font-weight:800;letter-spacing:-0.03em}
.price small{display:block;font-family:var(--text);font-size:.92rem;font-weight:400;letter-spacing:0;color:var(--soft);margin-top:6px}
.tier .btn{text-align:center}
.tier.main{background:var(--indigo);color:#fff}
.tier.main p,.tier.main .price small{color:var(--indigo-soft)}
@media (max-width:900px){
  .tier{grid-template-columns:1fr;gap:14px;padding:26px 24px}
  .tier .btn{justify-self:start;margin-top:6px}
}

/* questions */
.faq{max-width:820px;display:grid;gap:10px}
.faq details{background:var(--white);border-radius:var(--r-m)}
.faq summary{cursor:pointer;padding:22px 64px 22px 26px;font-family:var(--display);font-weight:600;font-size:1.25rem;letter-spacing:-0.015em;list-style:none;position:relative;border-radius:var(--r-m)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";position:absolute;right:22px;top:50%;width:30px;height:30px;margin-top:-15px;border-radius:50%;
  background:var(--mist) linear-gradient(var(--indigo),var(--indigo)) center/12px 2px no-repeat;transition:transform .2s;
}
.faq summary::before{
  content:"";position:absolute;right:36px;top:50%;width:2px;height:12px;margin-top:-6px;background:var(--indigo);z-index:1;transition:transform .2s,opacity .2s;
}
.faq details[open] summary::before{transform:rotate(90deg);opacity:0}
.faq details p{padding:0 26px 26px;color:var(--soft);font-size:1.08rem;max-width:38em}

/* footer */
.foot-shell{padding:0 16px 16px}
footer{max-width:1360px;margin:0 auto;background:var(--indigo);color:var(--indigo-soft);border-radius:var(--r-xl);padding:44px clamp(24px,6vw,88px);font-size:.98rem;display:flex;flex-wrap:wrap;gap:14px 32px;justify-content:space-between;align-items:center}
footer .brand{color:#fff}

/* dialog */
dialog{border:0;border-radius:var(--r-l);padding:0;width:min(540px,calc(100vw - 32px));background:var(--white);color:var(--ink);box-shadow:0 40px 80px -20px rgba(8,6,40,.6)}
dialog::backdrop{background:rgba(23,19,64,.7);backdrop-filter:blur(3px)}
.dlg{padding:38px 36px 32px}
.dlg h2{font-size:1.8rem;margin-bottom:10px;padding-right:36px}
.dlg > p{color:var(--soft);font-size:1.08rem;line-height:1.5;margin-bottom:26px}
.dlg label{display:block;font-weight:700;font-size:1rem;margin-bottom:7px}
.dlg label span{font-weight:400;color:var(--soft)}
.dlg input,.dlg textarea{
  width:100%;font-family:var(--text);font-size:1.05rem;padding:14px 16px;border:2px solid var(--line);border-radius:12px;
  background:var(--white);color:var(--ink);margin-bottom:20px;transition:border-color .15s;
}
.dlg input:focus,.dlg textarea:focus{outline:0;border-color:var(--indigo)}
.dlg textarea{min-height:104px;resize:vertical;line-height:1.45}
.dlg .err{color:var(--no);font-weight:600;font-size:.98rem;margin:0}
.dlg .err:not(:empty){margin-bottom:16px}
.dlg .small{font-size:.9rem;color:var(--soft);margin:18px 0 0;line-height:1.45}
.x{position:absolute;right:16px;top:16px;width:40px;height:40px;border-radius:50%;background:var(--mist);border:0;font-size:1.5rem;line-height:1;cursor:pointer;color:var(--indigo)}
.x:hover{background:var(--line)}

/* links */
.more{display:inline-block;margin-top:12px;font-weight:700;color:var(--indigo);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px;text-decoration-color:var(--gold-deep)}
.more:hover{text-decoration-color:var(--indigo)}
.tier.main .more{color:#fff;text-decoration-color:var(--gold)}
.tier.main .more:hover{text-decoration-color:#fff}

/* what a tier includes, on the home page */
.inc{list-style:none;margin:14px 0 0;padding:0;font-size:1rem;line-height:1.4;max-width:32em}
.inc li{position:relative;padding:4px 0 4px 26px}
.inc li::before{content:"";position:absolute;left:2px;top:.62em;width:12px;height:7px;border-left:2.5px solid var(--ok);border-bottom:2.5px solid var(--ok);transform:rotate(-45deg)}
.tier.main .inc li::before{border-color:var(--gold)}

/* what the family receives */
.pack{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:64px;align-items:center}
.pack h2 + .lede{margin-top:18px}
.pack .lede + .lede{margin-top:1em}
.drive{background:var(--white);border-radius:var(--r-l);padding:12px 28px}
.band.white .drive{background:var(--mist)}
.drive ul{list-style:none;margin:0;padding:0}
.drive li{display:grid;grid-template-columns:44px minmax(0,1fr);gap:16px;align-items:start;padding:18px 0;border-top:1px solid var(--line)}
.drive li:first-child{border-top:0}
.drive svg{width:44px;height:44px;padding:10px;border-radius:12px;background:var(--indigo);color:var(--gold)}
.drive b{display:block;font-family:var(--display);font-size:1.15rem;letter-spacing:-0.015em}
.drive span{display:block;color:var(--soft);font-size:1rem;line-height:1.45}
@media (max-width:920px){.pack{grid-template-columns:1fr;gap:36px}}

/* service pages */
.page-hero{grid-template-columns:minmax(0,1.25fr) minmax(280px,.75fr);padding-top:64px;padding-bottom:64px}
.page-hero h1{font-size:clamp(2.4rem,4.6vw,3.7rem)}
.crumb{display:inline-block;margin-bottom:22px;font-weight:600;font-size:1rem;color:var(--indigo-soft);text-decoration:none}
.crumb::before{content:"";display:inline-block;width:8px;height:8px;margin-right:10px;border-left:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-1px)}
.crumb:hover{color:#fff}
.buy{background:var(--white);color:var(--ink);border-radius:var(--r-l);padding:30px;box-shadow:0 30px 60px -20px rgba(8,6,40,.55)}
.buy .price{font-size:2.6rem}
.buy p{color:var(--soft);font-size:1rem;line-height:1.5;margin:14px 0 22px}
.buy .btn{display:block;width:100%;text-align:center}
.buy .buy-signin{margin:16px 0 0;font-size:.95rem}
.buy-signin a,footer a{color:inherit;text-decoration-thickness:2px;text-underline-offset:3px}
@media (max-width:980px){.page-hero{grid-template-columns:1fr;padding-bottom:28px}}

.gets{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.gets li{background:var(--mist);border-radius:var(--r-l);padding:28px 30px}
.band:not(.white) .gets li{background:var(--white)}
.gets h3{margin-bottom:8px}
.gets p{color:var(--soft);font-size:1.05rem}
@media (max-width:760px){.gets{grid-template-columns:1fr}}

.steps.n3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:980px){.steps.n3{grid-template-columns:1fr}}

.pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.pair > div{border-radius:var(--r-l);padding:32px 32px 26px;background:var(--white)}
.pair > div.not{background:var(--no-bg)}
.pair > div.cost{background:var(--wait-bg)}
.pair h2{font-size:1.6rem;margin-bottom:16px}
.pair ul{list-style:none;margin:0;padding:0;font-size:1.06rem}
.pair li{padding:11px 0;border-top:1px solid rgba(23,21,46,.12);line-height:1.45}
@media (max-width:860px){.pair{grid-template-columns:1fr}}

.others{display:grid;gap:12px}
.others a{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 24px;align-items:center;padding:24px 28px;border-radius:var(--r-l);background:var(--mist);text-decoration:none;transition:background .15s}
.others a:hover{background:var(--line)}
.others b{font-family:var(--display);font-size:1.3rem;letter-spacing:-0.015em}
.others span{color:var(--soft);font-size:1.02rem;grid-column:1}
.others em{font-style:normal;font-family:var(--display);font-weight:800;font-size:1.3rem;letter-spacing:-0.02em;grid-column:2;grid-row:1 / span 2}
@media (max-width:560px){.others a{grid-template-columns:1fr}.others em{grid-column:1;grid-row:auto}}

/* sections that swap background keep their inner panels readable */
.band:not(.white) .tier:not(.main){background:var(--white)}
.band.white .faq details{background:var(--mist)}
.band.white .faq summary::after{background-color:var(--white)}

/* header state */
.top{transition:box-shadow .2s}
.top.scrolled{box-shadow:0 1px 0 var(--line),0 10px 30px -18px rgba(8,6,40,.35)}
.top nav a[aria-current="true"]:not(.pill){background:rgba(30,26,77,.1)}

/* check what you have */
.check{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:40px;align-items:start}
.picks fieldset{border:0;margin:0 0 26px;padding:0}
.picks legend{font-family:var(--display);font-weight:700;font-size:1.15rem;letter-spacing:-0.015em;padding:0;margin-bottom:12px}
.pick{display:inline-flex;margin:0 8px 10px 0;cursor:pointer}
.pick input{position:absolute;opacity:0;width:1px;height:1px}
.pick span{display:inline-flex;align-items:center;gap:10px;padding:11px 18px 11px 14px;border-radius:999px;border:2px solid var(--line);background:var(--white);font-weight:600;font-size:1rem;line-height:1.25;transition:background .15s,border-color .15s,color .15s}
.pick span::before{content:"";flex:none;width:18px;height:18px;border-radius:50%;border:2px solid #A9A6C8;background:var(--white) center/12px no-repeat;transition:background-color .15s,border-color .15s}
.pick:hover span{border-color:var(--indigo)}
.pick input:checked + span{background:var(--indigo);border-color:var(--indigo);color:#fff}
.pick input:checked + span::before{border-color:var(--gold);background-color:var(--gold);background-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 12 12%22%3E%3Cpath d=%22M2.5 6.4l2.4 2.4 4.6-5.3%22 fill=%22none%22 stroke=%22%2317152E%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22/%3E%3C/svg%3E")}
.pick input:focus-visible + span{outline:3px solid var(--indigo);outline-offset:3px}
.check-out{position:sticky;top:100px;background:var(--mist);border-radius:var(--r-l);padding:28px 28px 26px}
.check-out h3{margin-bottom:6px}
.check-empty{color:var(--soft);font-size:1.02rem;padding:10px 0 4px}
.check-out ul{list-style:none;margin:0;padding:0}
.check-out li{padding:14px 0;border-top:1px solid var(--line);animation:row-in .35s cubic-bezier(.2,.8,.2,1) both}
.check-out li:first-child{border-top:0}
.check-sum{border-top:2px solid var(--indigo);margin-top:6px;padding-top:18px}
.check-sum p{font-size:1.02rem;color:var(--soft);margin-bottom:10px}
.check-sum p:first-child{color:var(--ink);font-weight:700}
.check-sum .btn{margin-top:8px}
@media (max-width:920px){.check{grid-template-columns:1fr}.check-out{position:static}}

/* motion. Everything below is switched off for people who ask for less motion. */
@keyframes row-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes chip-in{from{opacity:0;transform:scale(.7)}to{opacity:1;transform:none}}
@keyframes hand-on{from{transform:translate(-10.96px,10.96px) scale(.55)}to{transform:none}}
@media (prefers-reduced-motion:reduce){.check-out li{animation:none}}
@media (prefers-reduced-motion:no-preference){
  /* the mark: the dot leaves the ring once, when the page opens */
  .top .brand svg circle{transform-box:fill-box;transform-origin:center;animation:hand-on .9s cubic-bezier(.3,1.3,.5,1) .25s both}

  /* the hero list is written out line by line */
  .js .hero .list li{animation:row-in .5s cubic-bezier(.2,.8,.2,1) both}
  .js .hero .list li .out{animation:chip-in .4s cubic-bezier(.3,1.4,.5,1) both}
  .js .hero .list li:nth-child(1){animation-delay:.35s} .js .hero .list li:nth-child(1) .out{animation-delay:.75s}
  .js .hero .list li:nth-child(2){animation-delay:.6s}  .js .hero .list li:nth-child(2) .out{animation-delay:1s}
  .js .hero .list li:nth-child(3){animation-delay:.85s} .js .hero .list li:nth-child(3) .out{animation-delay:1.25s}
  .js .hero .list li:nth-child(4){animation-delay:1.1s} .js .hero .list li:nth-child(4) .out{animation-delay:1.5s}
  .js .hero .list li:nth-child(5){animation-delay:1.35s}.js .hero .list li:nth-child(5) .out{animation-delay:1.75s}
  .js .hero .list li:nth-child(6){animation-delay:1.6s} .js .hero .list li:nth-child(6) .out{animation-delay:2s}

  /* groups of things arrive together, once, as they scroll into view */
  .js [data-reveal] > *{opacity:0;transform:translateY(16px);transition:opacity .55s ease,transform .55s cubic-bezier(.2,.8,.2,1)}
  .js [data-reveal].in > *{opacity:1;transform:none}
  .js [data-reveal].in > :nth-child(2){transition-delay:.08s}
  .js [data-reveal].in > :nth-child(3){transition-delay:.16s}
  .js [data-reveal].in > :nth-child(4){transition-delay:.24s}
  .js [data-reveal].in > :nth-child(5){transition-delay:.32s}
  .js [data-reveal].in > :nth-child(6){transition-delay:.4s}
  .js [data-reveal].in > :nth-child(7){transition-delay:.48s}
  /* once arrived, a card answers the pointer straight away */
  .js [data-reveal].done > *{transition:transform .2s,box-shadow .2s,background .15s;transition-delay:0s}
  .js [data-reveal].done > .tier:hover,.js .gets.done > li:hover{transform:translateY(-2px);box-shadow:0 14px 30px -18px rgba(8,6,40,.35)}

  /* the steps: each number lands, then the line runs on to the next */
  .js .steps li::before{transform:scale(.4);opacity:0;transition:transform .45s cubic-bezier(.3,1.5,.5,1),opacity .3s}
  .js .steps li::after{transform:scaleX(0);transform-origin:left;transition:transform .5s ease}
  .js .steps li > *{opacity:0;transition:opacity .5s}
  .js .steps.in li::before{transform:none;opacity:1}
  .js .steps.in li::after{transform:none;background:var(--gold)}
  .js .steps.in li > *{opacity:1}
  .js .steps.in li:nth-child(1)::after{transition-delay:.25s}
  .js .steps.in li:nth-child(2)::before,.js .steps.in li:nth-child(2) > *{transition-delay:.6s}
  .js .steps.in li:nth-child(2)::after{transition-delay:.85s}
  .js .steps.in li:nth-child(3)::before,.js .steps.in li:nth-child(3) > *{transition-delay:1.2s}
  .js .steps.in li:nth-child(3)::after{transition-delay:1.45s}
  .js .steps.in li:nth-child(4)::before,.js .steps.in li:nth-child(4) > *{transition-delay:1.8s}

  /* things that answer a tap */
  :root{interpolate-size:allow-keywords}
  .faq details::details-content{block-size:0;overflow:clip;opacity:0;transition:block-size .3s ease,opacity .3s ease,content-visibility .3s allow-discrete}
  .faq details[open]::details-content{block-size:auto;opacity:1}
  dialog{opacity:0;transform:translateY(14px) scale(.98);transition:opacity .22s ease,transform .22s cubic-bezier(.2,.8,.2,1),overlay .22s allow-discrete,display .22s allow-discrete}
  dialog[open]{opacity:1;transform:none}
  @starting-style{dialog[open]{opacity:0;transform:translateY(14px) scale(.98)}}
  dialog::backdrop{opacity:0;transition:opacity .22s,overlay .22s allow-discrete,display .22s allow-discrete}
  dialog[open]::backdrop{opacity:1}
  @starting-style{dialog[open]::backdrop{opacity:0}}
}