/* sections.css: the home page's lower sections (How it works, Docs, FAQ) and the shared footer.
   Loaded after style.css (and makeover.css on the home page). Uses the site's own palette, the Permanent Marker
   face and the #crayon filter that every page defines in its hidden svg. */

/* ---------- section heads ---------- */
.hw{margin-top:72px;container-type:inline-size}
.hw-head{margin-bottom:22px}
.sec h2.hw-title{position:relative;display:inline-block;font-size:clamp(32px,4.2vw,44px);font-weight:900;letter-spacing:-.02em;line-height:1.05;color:#13224f;padding-bottom:6px}
.hw-ul{position:absolute;left:-2%;bottom:-8px;width:104%;height:12px;overflow:visible;pointer-events:none}
.hw-ul path{fill:none;stroke:#e8453c;stroke-width:7px;stroke-linecap:round;vector-effect:non-scaling-stroke;filter:url(#crayon)}
.hw-sub{margin-top:14px;font-size:17px;font-weight:500;color:#13224f}

/* shared card skin: cream paper, thick crayon outline drawn on a ::before so the grain never touches the text */
.hw-card,.hw-doc,.fq{position:relative;background:var(--paper);border-radius:16px 10px 18px 12px;box-shadow:4px 5px 0 rgba(43,53,80,.16)}
.hw-card::before,.hw-doc::before,.fq::before{content:"";position:absolute;inset:0;border:3px solid var(--crayon-ink);border-radius:inherit;filter:url(#crayon);pointer-events:none}

/* ---------- How it works ---------- */
.hw-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:minmax(0,1fr);gap:40px}
.hw-card{padding:16px 18px 20px;display:flex;flex-direction:column}
.hw-card:nth-child(odd){transform:rotate(-.4deg)}
.hw-card:nth-child(even){transform:rotate(.4deg)}
.hw-num{display:grid;place-items:center;width:38px;height:38px;border-radius:50% 46% 52% 48%;background:#ffd84a;border:2.8px solid var(--crayon-ink);font-family:var(--marker);font-size:19px;line-height:1;color:var(--crayon-ink)}
.hw-art{width:100%;max-width:124px;height:auto;margin:-14px auto 6px;overflow:visible}
.hw-art *{stroke:var(--crayon-ink);stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round}
.hw-art .sp *{stroke-width:3}
.hw-art .sp path[stroke="#e8453c"]{stroke:#e8453c}
.hw-art .sp path[stroke="#e8b400"]{stroke:#e8b400}
.hw-art path[stroke="#c8302a"]{stroke:#c8302a}
.hw-card h3{font-size:21px;font-weight:900;color:#13224f;margin-bottom:6px}
.hw-card p{font-size:15px;line-height:1.45;color:#26303a}
/* the dashed hand drawn arrow to the next card: points down while the cards are stacked */
.hw-arrow{position:absolute;left:50%;bottom:-36px;width:40px;height:18px;margin-left:-20px;transform:rotate(90deg);overflow:visible;pointer-events:none}
.hw-arrow path{fill:none;stroke:var(--crayon-ink);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.hw-arrow .dash{stroke-dasharray:4 4}
@container (min-width:560px){
  .hw-art{max-width:150px}
  .hw-steps{grid-template-columns:repeat(2,minmax(0,1fr));gap:34px 40px}
  .hw-arrow{left:auto;right:-38px;top:50%;bottom:auto;margin:-9px 0 0;transform:none}
  .hw-card:nth-child(2) .hw-arrow{display:none}
}
@container (min-width:860px){
  .hw-steps{grid-template-columns:repeat(4,minmax(0,1fr));gap:40px}
  .hw-card:nth-child(2) .hw-arrow{display:block}
}

/* ---------- Docs ---------- */
.hw-docs{display:grid;grid-template-columns:minmax(0,1fr);gap:16px}
@container (min-width:720px){.hw-docs{grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}}
.hw-doc{display:flex;align-items:center;gap:14px;padding:16px 16px 16px 14px;transition:transform .15s ease,box-shadow .15s ease}
.hw-doc:hover{transform:translateY(-3px) rotate(-.4deg);box-shadow:5px 8px 0 rgba(43,53,80,.18);background:#fffbe8}
.hw-ico{flex:none;width:48px;height:48px;overflow:visible}
.hw-ico *{stroke:var(--crayon-ink);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.hw-ico path[stroke="#e8453c"]{stroke:#e8453c}
.hw-doc-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.hw-doc-txt b{font-size:17px;font-weight:900;color:#13224f}
.hw-doc-txt span{font-size:14px;line-height:1.35;color:#3a4350}
.hw-go{flex:none;width:22px;height:22px;fill:none;stroke:var(--crayon-ink);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;transition:transform .15s}
.hw-doc:hover .hw-go{transform:translateX(3px)}

/* ---------- FAQ ---------- */
.hw-faq{display:flex;flex-direction:column;gap:14px}
details.fq{margin:0;padding:0;border:0;background:var(--paper)}
.fq summary{list-style:none;display:flex;align-items:center;gap:14px;padding:15px 20px;cursor:pointer;font-size:16px;font-weight:800;color:#13224f;border-radius:inherit}
.fq summary::-webkit-details-marker{display:none}
.fq summary::before{content:"";flex:none;width:0;height:0;border-style:solid;border-width:6px 0 6px 10px;border-color:transparent transparent transparent var(--crayon-ink);transition:transform .15s}
.fq[open] summary::before{transform:rotate(90deg)}
.fq summary::after{content:"+";margin-left:auto;flex:none;font-family:var(--marker);font-size:26px;line-height:.8;color:var(--crayon-ink)}
.fq[open] summary::after{content:"\2212"}
.fq summary:hover{background:#fffbe8}
.fq summary:focus-visible{outline:3px solid #ffd84a;outline-offset:2px}
.fq p{margin:0 20px;padding:12px 0 18px 24px;border-top:2px dashed #c9cfdb;font-size:15px;line-height:1.55;color:#26303a}
.hw-more{display:inline-flex;align-items:center;gap:8px;margin-top:18px;font-family:var(--marker);font-size:17px;color:var(--crayon-ink)}
.hw-more svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;transition:transform .15s}
.hw-more:hover svg{transform:translateX(3px)}

/* ---------- footer (home, docs, faq) ---------- */
.ft{padding-top:34px;padding-bottom:30px}
.ft-top{display:flex;flex-wrap:wrap;align-items:center;gap:18px 30px}
.ft-brand{display:flex;flex-direction:column;line-height:1}
.ft .foot-brand{font-size:38px}
.ft-chain{font-size:13px;color:#eadcc3;margin-top:2px}
.ft-nav{display:flex;flex-wrap:wrap;gap:8px 24px;font-size:15px;font-weight:600;color:#f3e7d1}
.ft-nav a:hover{color:#fff}
.ft-pill{display:inline-flex;align-items:center;gap:8px;padding:7px 14px;border-radius:999px;background:rgba(30,20,12,.55);border:1.6px solid rgba(255,243,218,.35);font-size:13px;color:#eadcc3;white-space:nowrap}
.ft-pill svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linejoin:round}
.ft-social{display:flex;gap:16px;margin-left:auto}
.ft-social a{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;color:#fff3da;transition:background .15s}
.ft-social a:hover{background:rgba(255,243,218,.14)}
.ft-social svg{width:22px;height:22px}
.ft-social .xf{fill:currentColor}
.ft-bottom{margin-top:22px;padding-top:14px;border-top:1.5px dashed rgba(234,220,195,.3)}
.ft .disclaimer{font-size:13px;opacity:.85}
@media (min-width:641px){.ft-pill{position:relative;margin-left:12px}.ft-pill::before{content:"";position:absolute;left:-22px;top:-6px;bottom:-6px;width:1.6px;background:rgba(255,243,218,.35)}}
@media (max-width:820px){.ft{padding-bottom:96px}}
@media (max-width:640px){
  .ft-top{flex-direction:column;align-items:flex-start;gap:16px}
  .ft-social{margin-left:0}
}

@media (prefers-reduced-motion:reduce){
  .hw-doc,.hw-go,.fq summary::before,.hw-more svg{transition:none}
}