/* cleanwithcrumb.com home page (with css/crumb.css). The hero is a live Crumb window driven by
   js/hero.js; small scenes play once as their section comes into view (js/delights.js). */
/* ── Home: hero ── */
.hero { padding: 64px 0 40px; overflow: hidden; }
.hero .wrap { display: block; }
.hero-copy { max-width: 820px; }
.hero .hw { max-width: 1000px; margin: 56px auto 0; }
.cta-note { margin: 14px 0 0; font-size: 14px; color: var(--dim); }
.cta-note a { color: var(--dim); }


/* ── Home: facts strip ── */
.facts { padding: 8px 0 72px; }
.facts ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.facts li { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; line-height: 1.45; color: var(--text); }
.facts b { display: block; color: var(--ink); font-weight: 650; margin-bottom: 2px; }
.tile { flex: 0 0 auto; width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; color: #fff; background: var(--hue, var(--navy)); box-shadow: 0 1px 0 rgba(255, 255, 255, .25) inset, 0 2px 6px rgba(20, 24, 48, .14); }
.tile svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.tile.lg { width: 48px; height: 48px; border-radius: 13px; }
.tile.lg svg { width: 26px; height: 26px; }


/* ── Sections ── */
.sec { padding: 88px 0; }
.sec + .sec { border-top: 1px solid var(--hair); }
.sec-head { max-width: 660px; margin-bottom: 44px; }
.h-section { font-size: clamp(28px, 3.4vw, 40px); line-height: 1.12; letter-spacing: -.028em; }
.sec-head p { margin: 14px 0 0; font-size: 18px; color: var(--text); }

.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; counter-reset: s; }
.steps li { background: var(--card); border-radius: var(--r-lg); padding: 26px 24px 24px; box-shadow: var(--shadow); }
.steps .n { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--sunk); color: var(--ink); font-weight: 700; font-size: 14px; margin-bottom: 18px; }
.steps h3 { font-size: 20px; margin-bottom: 8px; }
.steps p { margin: 0; font-size: 16px; }

.tools { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 40px; }
.tool { display: flex; gap: 16px; padding: 20px 0; border-bottom: 1px solid var(--hair); }
.tool h3 { font-size: 18px; margin: 2px 0 4px; }
.tool p { margin: 0; font-size: 16px; }

.compare { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--card); border-radius: var(--r-lg); box-shadow: var(--shadow); overflow: hidden; font-size: 16px; }
.compare th, .compare td { text-align: left; padding: 16px 20px; border-bottom: 1px solid var(--hair); vertical-align: top; }
.compare tr:last-child td { border-bottom: 0; }
.compare thead th { background: var(--sunk); color: var(--ink); font-size: 14px; font-weight: 650; }
.compare td:first-child { color: var(--ink); font-weight: 600; width: 34%; }
.compare td:last-child { color: var(--ink); }
.yes { color: var(--ok); font-weight: 650; }

.trust { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.trust div { display: flex; gap: 16px; background: var(--card); border-radius: var(--r-lg); padding: 24px; box-shadow: var(--shadow); }
.trust h3 { font-size: 18px; margin: 2px 0 6px; }
.trust p { margin: 0; font-size: 16px; }

.topics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.topic { display: flex; gap: 14px; align-items: flex-start; padding: 18px; border-radius: var(--r-lg); background: var(--card); box-shadow: var(--shadow); text-decoration: none; color: var(--text); transition: transform .3s cubic-bezier(.3, 1.4, .5, 1), box-shadow .2s; }
.topic:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); }
.topic b { display: block; color: var(--ink); font-weight: 650; font-size: 16px; margin-bottom: 2px; }
.topic span { font-size: 14.5px; line-height: 1.45; color: var(--dim); }
.topic em { display: block; margin-top: 6px; font-style: normal; font-size: 13px; color: var(--dim); }

.price-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; max-width: 860px; }
.plan { background: var(--card); border-radius: var(--r-xl); padding: 32px; box-shadow: var(--shadow); display: flex; flex-direction: column; }
.plan.featured { box-shadow: 0 0 0 2px var(--navy), var(--shadow-lift); }
.plan .pname { font-size: 20px; }
.price { font-size: 46px; font-weight: 750; letter-spacing: -.03em; color: var(--ink); margin: 14px 0 4px; }
.price .per { font-size: 16px; font-weight: 500; color: var(--dim); letter-spacing: 0; margin-left: 4px; }
.plan ul { list-style: none; margin: 18px 0 26px; padding: 0; }
.plan li { padding: 7px 0 7px 28px; position: relative; font-size: 16px; }
.plan li::before { content: ""; position: absolute; left: 2px; top: 13px; width: 14px; height: 8px; border-left: 2px solid var(--ok); border-bottom: 2px solid var(--ok); transform: rotate(-45deg); }
.plan .btn { margin-top: auto; }
.fine { font-size: 14px; color: var(--dim); margin: 14px 0 0; }

.faq { max-width: 820px; }
.faq details { border-bottom: 1px solid var(--hair); }
.faq summary { list-style: none; cursor: pointer; padding: 22px 40px 22px 0; position: relative; font-size: 18px; font-weight: 650; color: var(--ink); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; position: absolute; right: 6px; top: 30px; width: 9px; height: 9px; border-right: 2px solid var(--dim); border-bottom: 2px solid var(--dim); transform: rotate(45deg); transition: transform .25s; }
.faq details[open] summary::after { transform: rotate(-135deg); top: 34px; }
.faq .a { padding: 0 0 22px; max-width: 70ch; }

.final { padding: 96px 0; background: radial-gradient(120% 140% at 85% 0%, #3a46a4 0%, #1b2263 55%, #0f1440 100%); color: #dfe3ff; text-align: center; }
.final img { width: 72px; height: 72px; margin: 0 auto 22px; border-radius: 18px; box-shadow: 0 10px 30px rgba(0, 0, 0, .35); }
.final h2 { color: #fff; }
.final p { max-width: 36em; margin: 16px auto 30px; font-size: 18px; color: #c9cff6; }
.final .btn-ink { background: #fff; color: #1b2263; box-shadow: 0 10px 30px rgba(0, 0, 0, .3); }
.final .cta-note { color: #aab2e8; }
.final .cta-note a { color: #dfe3ff; }


/* ── Home hero: a live Crumb window that scans, asks, and cleans (hero.js). Built at 880×560 and
   scaled to its column, so every part keeps the app's proportions. ── */
.hw { position: relative; margin: 0; }
.hw-fit { position: relative; aspect-ratio: 880 / 560; border-radius: 14px; box-shadow: var(--shadow-lift), 0 0 0 1px var(--hair); overflow: hidden; background: #fff; }
.hw-stage { position: absolute; left: 0; top: 0; width: 880px; height: 560px; transform: scale(var(--k, .6)); transform-origin: 0 0; display: flex; font: 400 13px/1.38 var(--font); color: rgba(0,0,0,.86); --hsky: #6f9bd6; }
.hw-side { width: 186px; flex: 0 0 auto; background: linear-gradient(180deg, #ecebf0, #e6e4ec); padding: 14px 10px; display: flex; flex-direction: column; gap: 2px; border-right: .5px solid rgba(0,0,0,.08); }
.hw-lights { display: flex; gap: 8px; margin: 0 0 26px 6px; }
.hw-lights i { width: 12px; height: 12px; border-radius: 50%; background: #ff5f57; }
.hw-lights i:nth-child(2) { background: #febc2e; } .hw-lights i:nth-child(3) { background: #28c840; }
.hw-nav { display: flex; align-items: center; gap: 9px; height: 30px; padding: 0 10px; border-radius: 8px; font-size: 13.5px; color: rgba(0,0,0,.8); }
.hw-nav img { width: 18px; height: 18px; }
.hw-nav.on { background: rgba(0,0,0,.07); }
.hw-h { font-size: 11.5px; font-weight: 600; color: rgba(0,0,0,.45); margin: 14px 10px 4px; }
.hw-main { position: relative; flex: 1; min-width: 0; display: flex; flex-direction: column; background: #fff; overflow: hidden; }
.hw-bar { position: relative; z-index: 3; height: 52px; flex: 0 0 auto; padding: 9px 20px; border-bottom: .5px solid rgba(0,0,0,.08); background: inherit; }
.hw-bar b { display: block; font-size: 15px; font-weight: 700; }
.hw-bar small { font-size: 11.5px; color: rgba(0,0,0,.5); }
.hw-disk { display: flex; align-items: center; gap: 18px; padding: 16px 20px 14px; border-bottom: .5px solid rgba(0,0,0,.08); background: linear-gradient(110deg, rgba(111,155,214,.09), rgba(168,139,216,.07) 55%, rgba(233,163,122,.08)); }
.hw-info { flex: 1; min-width: 0; }
.hw-top { display: flex; justify-content: space-between; font-size: 13px; margin-bottom: 8px; }
.hw-top b { font-weight: 600; } .hw-top span { color: rgba(0,0,0,.5); }
.hw-meter { display: flex; height: 12px; border-radius: 6px; overflow: hidden; background: #ececf1; }
.hw-meter i { flex: 0 0 auto; height: 100%; width: 0; transition: width .7s cubic-bezier(.3,1.25,.5,1); }
.hw-free { background: linear-gradient(180deg, #3a46a4, #293385); }
.hw-free + .hw-seg, .hw-seg + .hw-seg { box-shadow: inset 1px 0 0 rgba(255,255,255,.7); }
.hw-after { display: flex; justify-content: space-between; margin-top: 8px; font-size: 11.5px; color: rgba(0,0,0,.55); font-variant-numeric: tabular-nums; }
.hw-after b { color: rgba(0,0,0,.86); font-weight: 600; }
.hw-later { opacity: 0; transition: opacity .4s; } .hw.found .hw-later { opacity: 1; }
.hw-btn { flex: 0 0 auto; height: 38px; min-width: 156px; padding: 0 18px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; color: #fff; font: 600 14px var(--font); background: linear-gradient(180deg, #3a46a4, #293385); box-shadow: 0 1px 0 rgba(255,255,255,.2) inset, 0 4px 12px rgba(41,51,133,.3); transition: transform .45s cubic-bezier(.3,1.6,.5,1); font-variant-numeric: tabular-nums; }
.hw-btn.press { transform: scale(.93); transition-duration: .09s; }
.hw-spin { width: 13px; height: 13px; border-radius: 50%; border: 1.6px solid rgba(255,255,255,.35); border-top-color: #fff; animation: hwspin .7s linear infinite; }
.hw.found .hw-spin { display: none; }
@keyframes hwspin { to { transform: rotate(360deg); } }
.hw-list { flex: 1; padding: 6px 12px 0; overflow: hidden; }
.hw-sec { display: flex; gap: 8px; align-items: baseline; padding: 8px 8px 4px; font-size: 13px; opacity: 0; transition: opacity .4s; }
.hw-sec b { font-weight: 600; } .hw-sec span { font-size: 11.5px; color: rgba(0,0,0,.5); }
.hw.found .hw-sec { opacity: 1; }
.hw.done .hw-sec { opacity: 0; }
.hw-row { display: flex; align-items: center; gap: 10px; height: 46px; padding: 0 10px 0 22px; border-radius: 8px; opacity: 0; transform: translateY(8px); transition: opacity .35s, transform .5s cubic-bezier(.3,1.3,.5,1), height .38s cubic-bezier(.4,0,.2,1), margin .38s; overflow: hidden; }
.hw-row.in { opacity: 1; transform: none; }
.hw-row.gone { height: 0; opacity: 0; transform: translateX(-12px); }
.hw-cb { width: 16px; height: 16px; flex: 0 0 auto; border-radius: 4.5px; background: #293385; display: grid; place-items: center; transform: scale(.4); opacity: 0; transition: transform .4s cubic-bezier(.3,1.8,.5,1), opacity .2s; }
.hw-row.in .hw-cb { transform: none; opacity: 1; transition-delay: .25s; }
.hw-cb svg { width: 11px; height: 11px; fill: none; stroke: #fff; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.hw-ic { width: 24px; height: 24px; flex: 0 0 auto; }
.hw-tile { display: grid; place-items: center; border-radius: 6px; background: var(--hue); box-shadow: 0 1px 0 rgba(255,255,255,.3) inset, 0 1px 2px rgba(0,0,0,.15); }
.hw-tile svg { width: 15px; height: 15px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.hw-t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.hw-t b { font-weight: 500; font-size: 13.5px; } .hw-t i { font-style: normal; font-size: 11.5px; color: rgba(0,0,0,.5); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hw-sz { font-size: 12.5px; color: rgba(0,0,0,.6); font-variant-numeric: tabular-nums; }
.hw-done { position: absolute; left: 0; right: 0; top: 150px; bottom: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; opacity: 0; pointer-events: none; transition: opacity .4s; }
.hw-done b { font-size: 34px; font-weight: 750; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.hw-done span { font-size: 13px; color: rgba(0,0,0,.55); }
.hw.done .hw-done { opacity: 1; }
.hw-cookie { width: 74px; height: 74px; margin-bottom: 8px; overflow: visible; transform: scale(.3) rotate(-30deg); opacity: 0; }
.hw.done .hw-cookie { opacity: 1; transform: none; transition: transform .8s cubic-bezier(.3,1.45,.45,1) .1s, opacity .25s .1s; animation: hwchomp .32s ease-in-out 1.05s; }
.hw-cookie .bite { transform-box: fill-box; transform-origin: center; transform: scale(0); }
.hw.done .hw-cookie .bite { transform: scale(1); transition: transform .14s cubic-bezier(.3,1.7,.5,1) var(--bd); }
@keyframes hwchomp { 50% { transform: scale(.94) rotate(-4deg); } }
.hw-scrim { position: absolute; inset: 52px 0 0; background: rgba(20,22,40,.18); opacity: 0; transition: opacity .3s; pointer-events: none; }
.hw-sheet { position: absolute; z-index: 2; left: 50%; top: 52px; width: 330px; margin-left: -165px; padding: 18px 18px 14px; border-radius: 0 0 14px 14px; background: rgba(250,250,252,.96); box-shadow: 0 18px 40px rgba(0,0,0,.22), 0 0 0 .5px rgba(0,0,0,.12); transform: translateY(-110%); transition: transform .42s cubic-bezier(.3,1.15,.5,1); }
.hw-sheet b { display: block; font-size: 13.5px; font-weight: 650; margin-bottom: 6px; }
.hw-sheet p { margin: 0 0 12px; font-size: 11.5px; line-height: 1.45; color: rgba(0,0,0,.6); }
.hw-sheet div { display: flex; justify-content: flex-end; gap: 8px; }
.hw-sheet span { height: 26px; padding: 0 13px; border-radius: 6px; display: inline-flex; align-items: center; font-size: 12.5px; font-weight: 500; }
.hw-cancel { background: #fff; box-shadow: 0 0 0 .5px rgba(0,0,0,.18), 0 1px 1px rgba(0,0,0,.05); }
.hw-ok { color: #fff; background: linear-gradient(180deg, #3a46a4, #293385); transition: transform .4s cubic-bezier(.3,1.6,.5,1); }
.hw-ok.press { transform: scale(.92); transition-duration: .08s; }
.hw.asking .hw-scrim { opacity: 1; } .hw.asking .hw-sheet { transform: none; }
.hw-cursor { position: absolute; left: 0; top: 0; width: 22px; height: 22px; opacity: 0; transform: translate(560px, 520px); transition: transform 1s cubic-bezier(.55,.05,.25,1), opacity .3s; z-index: 5; filter: drop-shadow(0 2px 3px rgba(0,0,0,.3)); }
.hw-fly { position: fixed; z-index: 60; pointer-events: none; }
.hw-replay { position: absolute; right: 12px; bottom: 12px; height: 30px; padding: 0 13px; border: 0; border-radius: 999px; font: 600 12.5px var(--font); color: var(--ink); background: color-mix(in srgb, var(--card) 88%, transparent); box-shadow: 0 0 0 1px var(--hair), var(--shadow); cursor: pointer; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
@media (prefers-color-scheme: dark) {
  .hw-fit { background: #1e1e1f; }
  .hw-stage { color: rgba(255,255,255,.88); }
  .hw-side { background: linear-gradient(180deg, #2a2a30, #26262c); border-right-color: rgba(255,255,255,.07); }
  .hw-nav { color: rgba(255,255,255,.82); } .hw-nav.on { background: rgba(255,255,255,.1); } .hw-h { color: rgba(255,255,255,.45); }
  .hw-nav img { filter: invert(1) brightness(1.4); } .hw-nav.on img { filter: none; }
  .hw-main { background: #1e1e1f; }
  .hw-bar, .hw-disk { border-bottom-color: rgba(255,255,255,.08); }
  .hw-bar small, .hw-top span, .hw-after, .hw-sec span, .hw-t i, .hw-done span { color: rgba(255,255,255,.55); }
  .hw-after b { color: rgba(255,255,255,.9); } .hw-sz { color: rgba(255,255,255,.65); }
  .hw-meter { background: #2e2e33; }
  .hw-free { background: linear-gradient(180deg, #6f7be6, #5a66d8); }
  .hw-sheet { background: rgba(44,44,48,.97); } .hw-sheet p { color: rgba(255,255,255,.65); } .hw-cancel { background: #3a3a3f; }
}

/* ── Delights: small scenes that play once when their section comes into view (delights.js
   adds .in). Each one shows what its words say. Reduce Motion shows the end state. ── */
.tool .tile, .topic .tile { transition: transform .5s cubic-bezier(.3,1.8,.5,1); }
.tool:hover .tile, .topic:hover .tile { transform: scale(1.1) rotate(-4deg); }
.sv { height: 54px; margin-bottom: 16px; border-radius: 12px; background: var(--sunk); position: relative; overflow: hidden; }
.sv-scan i { position: absolute; left: 14px; height: 6px; border-radius: 3px; background: var(--hair); }
.sv-scan i:nth-child(1) { top: 12px; width: 62%; } .sv-scan i:nth-child(2) { top: 24px; width: 48%; } .sv-scan i:nth-child(3) { top: 36px; width: 70%; }
.sv-scan svg { position: absolute; top: 9px; left: 8px; width: 36px; height: 36px; fill: rgba(111,155,214,.18); stroke: var(--sky); stroke-width: 2; stroke-linecap: round; }
[data-reveal].in .sv-scan svg { animation: svscan 2.2s cubic-bezier(.45,.05,.4,1) .2s both; }
@keyframes svscan { 0% { transform: translateX(0); } 60% { transform: translateX(150px); } 100% { transform: translateX(110px); } }
.sv-tick { display: flex; flex-direction: column; justify-content: center; gap: 6px; padding: 0 14px; }
.sv-tick span { display: flex; align-items: center; gap: 8px; }
.sv-tick b { width: 11px; height: 11px; border-radius: 3px; box-shadow: inset 0 0 0 1.5px var(--hair); background: var(--card); transition: background .2s, box-shadow .2s, transform .45s cubic-bezier(.3,1.9,.5,1); }
.sv-tick i { height: 6px; border-radius: 3px; background: var(--hair); width: 55%; }
.sv-tick span:nth-child(2) i { width: 40%; } .sv-tick span:nth-child(3) i { width: 64%; }
[data-reveal].in .sv-tick span:not(:nth-child(2)) b { background: var(--navy); box-shadow: none; transform: scale(1.12); }
[data-reveal].in .sv-tick span:nth-child(1) b { transition-delay: .5s; } [data-reveal].in .sv-tick span:nth-child(3) b { transition-delay: .8s; }
.sv-fill { display: flex; align-items: center; gap: 12px; padding: 0 14px; }
.sv-fill div { flex: 1; display: flex; height: 10px; border-radius: 5px; overflow: hidden; background: var(--hair); }
.sv-fill i { height: 100%; transition: width .7s cubic-bezier(.3,1.25,.5,1); }
.sv-fill .f { width: 28%; background: linear-gradient(180deg, #3a46a4, #293385); }
.sv-fill .a { width: 30%; background: var(--sky); } .sv-fill .b { width: 22%; background: var(--peach); } .sv-fill .c { width: 20%; background: var(--lilac); }
.sv-fill em { font-style: normal; font-size: 13px; font-weight: 700; color: var(--ok); opacity: 0; transition: opacity .3s 1.6s; font-variant-numeric: tabular-nums; }
[data-reveal].in .sv-fill .f { width: 100%; transition-delay: 1s; transition-duration: .9s; }
[data-reveal].in .sv-fill .a { width: 0; transition-delay: 1s; } [data-reveal].in .sv-fill .b { width: 0; transition-delay: 1.1s; } [data-reveal].in .sv-fill .c { width: 0; transition-delay: 1.2s; }
[data-reveal].in .sv-fill em { opacity: 1; }
.compare .ck { width: 15px; height: 15px; margin: 0 8px -2px 0; fill: none; stroke: var(--ok); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 16; stroke-dashoffset: 16; }
.compare.in .ck { stroke-dashoffset: 0; transition: stroke-dashoffset .5s cubic-bezier(.3,1,.5,1); }
.compare.in tr:nth-child(2) .ck { transition-delay: .12s; } .compare.in tr:nth-child(3) .ck { transition-delay: .24s; } .compare.in tr:nth-child(4) .ck { transition-delay: .36s; } .compare.in tr:nth-child(5) .ck { transition-delay: .48s; }
.fin-cookie { width: 84px; height: 84px; margin: 0 auto 22px; display: block; overflow: visible; filter: drop-shadow(0 12px 22px rgba(0,0,0,.35)); }
.fin-cookie .bite { transform-box: fill-box; transform-origin: center; transform: scale(0); }
.final.in .fin-cookie { animation: hwchomp .32s ease-in-out 1.1s; }
.final.in .fin-cookie .bite { transform: scale(1); transition: transform .14s cubic-bezier(.3,1.7,.5,1) var(--bd); }
.crumb-bit { position: absolute; width: 5px; height: 5px; border-radius: 2px; background: #e6bb72; pointer-events: none; }
@media (prefers-reduced-motion: reduce) {
  .sv-tick span:not(:nth-child(2)) b { background: var(--navy); box-shadow: none; }
  .sv-fill .f { width: 100%; } .sv-fill .a, .sv-fill .b, .sv-fill .c { width: 0; } .sv-fill em { opacity: 1; }
  .compare .ck { stroke-dashoffset: 0; }
  .fin-cookie .bite { transform: scale(1); }
}

.plan { position: relative; }
.plan .badge { position: absolute; top: -12px; right: 24px; padding: 5px 11px; border-radius: 999px; background: var(--navy); color: #fff; font-size: 12.5px; font-weight: 650; }
@media (prefers-color-scheme: dark) { .plan .badge { color: #11143a; } }
.plan .price { display: flex; align-items: baseline; gap: 6px; }
.plan .amt { font-family: var(--font); }
.plan .blurb { margin: 0; }
.plan .cta-wrap { margin-top: auto; }
.plan .plan-fine { margin: 14px 0 0; font-size: 14px; color: var(--dim); }
.pricing .sec-head, .faq-sec .sec-head { margin-bottom: 36px; }
.faq-list { max-width: 820px; }
.faq-list details { border-bottom: 1px solid var(--hair); }
.faq-list details:first-child { border-top: 1px solid var(--hair); }
.faq-list summary { list-style: none; cursor: pointer; padding: 22px 40px 22px 0; position: relative; font-size: 18px; font-weight: 650; color: var(--ink); }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: ""; position: absolute; right: 6px; top: 30px; width: 9px; height: 9px; border-right: 2px solid var(--dim); border-bottom: 2px solid var(--dim); transform: rotate(45deg); transition: transform .25s; }
.faq-list details[open] summary::after { transform: rotate(-135deg); top: 34px; }
.faq-list .ans { padding: 0 0 22px; max-width: 70ch; line-height: 1.7; }
.faq-list details[open] .ans { animation: faqIn .35s cubic-bezier(.3, 1, .5, 1); }
.hero-dl .dl-row { gap: 12px 14px; }
.hero-fine { margin: 14px 0 0; font-size: 14px; color: var(--dim); }
.hero-fine a { color: var(--dim); }
.hero .proof { margin: 26px 0 0; padding-top: 22px; border-top: 1px solid var(--hair); }
.sec-more { margin: 22px 0 0; font-weight: 600; }
.final .meta { margin: 18px auto 0; font-size: 14px; color: #aab2e8; }
.final .dl-row { justify-content: center; }
.final p { margin-left: auto; margin-right: auto; }
.hero .lede { margin: 22px 0 30px; font-size: 19px; }
@media (max-width: 720px) { .hero .lede { font-size: 17px; } }