/* Huupa public site: components for the lean pages (home, hosting, learn, articles).
   These pages do NOT load the app stylesheet, so plain class names are safe here. The tokens,
   fonts, nav, footer and buttons come from site-base.css. */

.pub h1, .pub h2, .pub h3 { font-family: var(--f-display); letter-spacing: -.025em; line-height: 1.05; margin: 0; text-wrap: balance; font-weight: 700; }
.pub h1 { font-size: clamp(2.3rem, 6vw, 4.4rem); font-weight: 800; }
.pub h2 { font-size: clamp(1.8rem, 4.2vw, 3rem); }
.pub h3 { font-size: 1.2rem; letter-spacing: -.015em; line-height: 1.15; }
.pub p { margin: 0; }
.eyebrow { font: 500 12px var(--f-mono); letter-spacing: .09em; text-transform: uppercase; color: var(--mute); }
mark { background: linear-gradient(transparent 60%, var(--mint) 60% 90%, transparent 90%); color: var(--ink); padding: 0 .06em; }
.mono { font-family: var(--f-mono); }

.rise { animation: rise .7s cubic-bezier(.2, .7, .2, 1) both; }
.rise.d1 { animation-delay: .06s } .rise.d2 { animation-delay: .14s } .rise.d3 { animation-delay: .22s }
@keyframes rise { from { opacity: 0; transform: translateY(14px) } to { opacity: 1; transform: none } }
@keyframes fade { from { opacity: 0; transform: translateY(8px) } to { opacity: 1; transform: none } }

/* hero */
.hero { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(28px, 5vw, 64px); align-items: center; padding-block: clamp(28px, 6vw, 84px) clamp(40px, 7vw, 96px); }
.hero .lead { margin-top: 22px; font-size: clamp(1.05rem, 1.4vw + .7rem, 1.3rem); color: var(--mute); max-width: 34ch; }
.acts { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.facts { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 26px; font: 500 12.5px var(--f-mono); color: var(--mute); }
.facts span::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--ok); margin-right: 8px; vertical-align: 1px; }
.scene { position: relative; padding: 22px 0 34px; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow); }
.scan { padding: 20px; }
.scan header { display: flex; align-items: center; gap: 14px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.ring { width: 64px; height: 64px; flex: none; position: relative; }
.ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ring circle { fill: none; stroke-width: 6; }
.ring .bgc { stroke: var(--soft); }
.ring .fgc { stroke: var(--ok); stroke-linecap: round; stroke-dasharray: 176; stroke-dashoffset: 176; animation: dash 1.3s .5s ease-out forwards; }
@keyframes dash { to { stroke-dashoffset: 30; } }
.ring b { position: absolute; inset: 0; display: grid; place-items: center; font: 800 1.35rem var(--f-display); }
.scan header small { display: block; color: var(--mute); font: 400 12px var(--f-mono); overflow-wrap: anywhere; }
.scan header strong { font: 700 1.05rem var(--f-display); }
.srow { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 14.5px; animation: rise .5s both; }
.srow:last-child { border-bottom: 0; }
.srow:nth-child(1) { animation-delay: .5s } .srow:nth-child(2) { animation-delay: .65s } .srow:nth-child(3) { animation-delay: .8s } .srow:nth-child(4) { animation-delay: .95s }
.dot { width: 9px; height: 9px; border-radius: 50%; flex: none; background: var(--ok); }
.dot.warn { background: var(--warn); } .dot.bad { background: var(--bad); }
.srow .t { flex: 1; min-width: 0; }
.srow em { font: 500 12px var(--f-mono); font-style: normal; color: var(--mute); }
.pill { display: inline-block; font: 500 11.5px var(--f-mono); padding: 4px 9px; border-radius: 999px; background: var(--soft); color: var(--ink); white-space: nowrap; }
.pill.go { background: var(--brand); color: var(--brand-ink); }
.float { position: absolute; padding: 12px 14px; display: flex; gap: 12px; align-items: center; font-size: 13.5px; max-width: 250px; animation: rise .7s 1.2s both; }
.float .ico { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--soft); flex: none; }
.float .ico svg { width: 17px; height: 17px; }
.float b { display: block; font-weight: 600; }
.float small { color: var(--mute); font-size: 12px; display: block; }
.float.a { right: -14px; bottom: -4px; }
.float.b { left: -22px; top: -2px; animation-delay: 1.45s; }

/* sections */
.sec { padding-block: clamp(48px, 8vw, 108px); }
.sec.tight { padding-top: 0; }
.line-top { border-top: 1px solid var(--line); }
.shead { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 56px; align-items: end; margin-bottom: clamp(28px, 4vw, 52px); }
.shead p { color: var(--mute); font-size: 1.05rem; max-width: 46ch; }
.shead h2 { margin-top: 12px; }

/* toolkit */
.tools { display: grid; grid-template-columns: 300px 1fr; gap: 28px; align-items: start; }
.tablist { display: grid; gap: 4px; }
.tab { text-align: left; background: transparent; border: 0; border-left: 3px solid var(--line); padding: 14px 16px; cursor: pointer; color: var(--mute); font-family: var(--f-body); transition: border-color .2s, color .2s, background .2s; min-height: 56px; }
.tab b { display: block; font: 700 1.1rem var(--f-display); letter-spacing: -.015em; color: inherit; }
.tab span { font-size: 13.5px; }
.tab[aria-selected="true"] { border-left-color: var(--brand); color: var(--ink); background: var(--soft); }
.tab:hover { color: var(--ink); }
.panels { min-width: 0; }
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: 20px; padding: clamp(22px, 3.4vw, 40px); display: grid; grid-template-columns: 1fr 1fr; gap: 28px; align-items: center; min-height: 340px; box-shadow: var(--shadow); }
.panel + .panel { margin-top: 16px; }
.js .panel { display: none; }
.js .panel.on { display: grid; animation: fade .35s ease both; }
.panel h3 { font-size: clamp(1.5rem, 2.6vw, 2.1rem); letter-spacing: -.03em; }
.panel p { color: var(--mute); margin-top: 12px; }
.panel ul { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 8px; font-size: 14.5px; }
.panel li::before { content: ""; display: inline-block; width: 12px; height: 7px; border-left: 2px solid var(--ok); border-bottom: 2px solid var(--ok); transform: rotate(-45deg) translate(1px, -3px); margin-right: 11px; }
.mini { background: var(--bg); border: 1px solid var(--line); border-radius: 14px; padding: 16px; font-size: 14px; min-width: 0; }
.mini .cap { font: 500 11px var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--mute); padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.mini .r { display: flex; align-items: center; gap: 10px; padding: 11px 0; border-bottom: 1px solid var(--line); }
.mini .r:last-child { border-bottom: 0; }
.mini .r .t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bars { display: flex; align-items: flex-end; gap: 6px; height: 96px; padding: 14px 0 8px; }
.bars i { flex: 1; background: var(--brand); border-radius: 4px 4px 0 0; opacity: .85; height: var(--h); transform-origin: bottom; animation: grow .8s both; }
@keyframes grow { from { transform: scaleY(0) } to { transform: scaleY(1) } }
.composer { border: 1px solid var(--line); border-radius: 10px; padding: 12px; background: var(--surface); font-size: 14px; margin-top: 10px; }
.counter { display: flex; justify-content: space-between; gap: 8px; margin-top: 10px; font: 500 12px var(--f-mono); color: var(--mute); }

/* hosting plans */
.plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.plan { padding: 28px; display: flex; flex-direction: column; gap: 18px; }
.plan.pick { border-color: var(--ink); }
.plan .nm { font: 500 12px var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--mute); display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.price { font: 800 2.6rem/1 var(--f-display); letter-spacing: -.04em; }
.price small { font: 500 13px var(--f-body); letter-spacing: 0; color: var(--mute); margin-left: 4px; }
.plan ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; font-size: 14.5px; }
.plan li { display: flex; gap: 10px; }
.plan li::before { content: ""; flex: none; width: 5px; height: 5px; border-radius: 50%; background: var(--edge); margin-top: 9px; }
.plan .btn { margin-top: auto; }
.half { margin-top: 16px; display: grid; grid-template-columns: auto 1fr auto; gap: 18px 28px; align-items: center; padding: 22px 26px; border-radius: 18px; background: var(--soft); border: 1px solid var(--line); }
.half .big { font: 800 2.6rem/1 var(--f-display); letter-spacing: -.04em; }
.half p { color: var(--mute); }
.half p b { color: var(--ink); font-weight: 600; }
.half .sum { font: 500 14px var(--f-mono); text-align: right; }
.half .sum s { color: var(--mute); }

/* move band */
.move { background: var(--dark); color: var(--dark-ink); border-radius: 26px; padding: clamp(26px, 5vw, 64px); display: grid; grid-template-columns: 1.1fr .9fr; gap: 36px; align-items: center; }
.move h2 { color: var(--dark-ink); margin-top: 12px; }
.move .eyebrow { color: #9bbdb6; }
.move p { color: rgba(232, 241, 238, .72); margin-top: 16px; max-width: 44ch; }
.move .btn.primary { background: var(--edge); border-color: var(--edge); color: var(--dark); }
.move .btn.primary:hover { background: var(--mint); border-color: var(--mint); }
.move .cost { margin-top: 26px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 22px; }
.move .cost b { font: 800 1.9rem var(--f-display); letter-spacing: -.03em; }
.move .cost b small { font: 500 15px var(--f-body); letter-spacing: 0; opacity: .7; }
.move .cost span { font: 400 13px var(--f-mono); color: rgba(232, 241, 238, .6); }
.steps3 { display: grid; }
.steps3 > div { display: grid; grid-template-columns: 44px 1fr; gap: 14px; padding: 18px 0; border-bottom: 1px solid rgba(255, 255, 255, .12); }
.steps3 > div:last-child { border-bottom: 0; }
.steps3 i { font: 500 13px var(--f-mono); font-style: normal; width: 36px; height: 36px; border-radius: 50%; border: 1.5px solid var(--edge); color: var(--edge); display: grid; place-items: center; }
.steps3 b { font: 700 1.1rem var(--f-display); display: block; }
.steps3 span { font-size: 14px; color: rgba(232, 241, 238, .66); }

/* bring what you already have */
.bring { display: grid; grid-template-columns: 1.25fr 1fr; gap: 16px; align-items: stretch; }
.bring .move { grid-template-columns: 1fr; gap: 24px; padding: clamp(24px, 3.4vw, 44px); border-radius: 24px; align-content: start; }
.bring .move h2, .harden h2 { font-size: clamp(1.6rem, 3vw, 2.3rem); }
.harden { padding: clamp(24px, 3.4vw, 40px); border-radius: 24px; display: flex; flex-direction: column; gap: 14px; }
.harden h2 { margin-top: 0; }
.harden > p { color: var(--mute); }
.harden ul { list-style: none; margin: 4px 0 8px; padding: 0; display: grid; gap: 9px; font-size: 15px; }
.harden li::before { content: ""; display: inline-block; width: 12px; height: 7px; border-left: 2px solid var(--ok); border-bottom: 2px solid var(--ok); transform: rotate(-45deg) translate(1px, -3px); margin-right: 11px; }
.harden .btn { align-self: flex-start; margin-top: auto; }

/* three facts */
.three { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.three > div { padding: 30px 28px 30px 0; }
.three > div + div { padding-left: 28px; border-left: 1px solid var(--line); }
.three h3 { margin-bottom: 8px; }
.three p { color: var(--mute); font-size: 15px; max-width: 36ch; }

/* article cards */
.arts { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 16px; }
.arts.even { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.art { padding: 24px; display: flex; flex-direction: column; gap: 14px; min-height: 220px; text-decoration: none; transition: transform .2s, border-color .2s; }
.art:hover { transform: translateY(-3px); border-color: var(--ink); }
.arts:not(.even) .art:first-child { background: var(--dark); color: var(--dark-ink); border-color: var(--dark); }
.arts:not(.even) .art:first-child .eyebrow, .arts:not(.even) .art:first-child small { color: rgba(232, 241, 238, .6); }
.arts:not(.even) .art:first-child h3 { font-size: 1.75rem; }
.art h3 { font-size: 1.3rem; }
.art p { color: var(--mute); font-size: 15px; }
.art small { margin-top: auto; color: var(--mute); font: 400 12px var(--f-mono); }

/* in-page jump links */
.jump { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 26px; }
.jump a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border: 1.5px solid var(--line); border-radius: 999px; background: var(--surface); font: 600 14px var(--f-body); text-decoration: none; transition: border-color .18s, background .18s; }
.jump a:hover { border-color: var(--brand); background: var(--soft); }
.pub h2[id], .sec[id] { scroll-margin-top: 16px; }

/* closing call */
.close { text-align: center; padding-block: clamp(56px, 9vw, 120px); }
.close h2 { max-width: 16ch; margin: 0 auto; }
.close p { color: var(--mute); margin: 16px auto 0; max-width: 44ch; }
.urlbox { display: flex; gap: 8px; max-width: 540px; margin: 30px auto 0; padding: 7px; border: 1.5px solid var(--ink); border-radius: 999px; background: var(--surface); }
.pub .urlbox .input { flex: 1; min-width: 0; min-height: 44px; border: 0; background: transparent; padding: 0 16px; font: 500 16px var(--f-body); color: var(--ink); }
.pub .urlbox .input:focus-visible { outline: none; }
.urlbox:focus-within { box-shadow: 0 0 0 3px var(--mint); }
.sr { position: absolute; left: -9999px; }

/* hosting page */
.pagehead { padding-block: clamp(24px, 5vw, 64px) clamp(28px, 4vw, 48px); max-width: 860px; }
.pagehead p.lead { margin-top: 18px; color: var(--mute); font-size: clamp(1.05rem, 1.4vw + .7rem, 1.25rem); max-width: 46ch; }
.ctable { overflow-x: auto; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); }
.ctable table { border-collapse: collapse; width: 100%; min-width: 620px; font-size: 15px; }
.ctable th, .ctable td { padding: 14px 18px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
.ctable thead th { font: 500 11.5px var(--f-mono); letter-spacing: .07em; text-transform: uppercase; color: var(--mute); background: var(--soft); }
.ctable tbody th { font-weight: 600; color: var(--ink); }
.ctable tr:last-child th, .ctable tr:last-child td { border-bottom: 0; }
.incl { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 1px solid var(--line); }
.incl > div { padding: 26px 26px 26px 0; border-bottom: 1px solid var(--line); }
.incl > div:not(:nth-child(3n+1)) { padding-left: 26px; border-left: 1px solid var(--line); }
.incl h3 { margin-bottom: 8px; font-size: 1.1rem; }
.incl p { color: var(--mute); font-size: 15px; }
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; counter-reset: s; }
.steps > div { padding: 22px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); }
.steps > div::before { counter-increment: s; content: counter(s); display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--mint); font: 700 14px var(--f-mono); color: var(--ink); margin-bottom: 16px; }
.steps b { display: block; font: 700 1.1rem var(--f-display); margin-bottom: 6px; }
.steps span { color: var(--mute); font-size: 14.5px; }
.note { margin-top: 14px; color: var(--mute); font-size: 14px; }

/* article */
.crumbs { font: 400 12.5px var(--f-mono); color: var(--mute); padding-top: 8px; display: flex; flex-wrap: wrap; gap: 6px; }
.crumbs a { text-decoration: none; }
.crumbs a:hover { color: var(--ink); text-decoration: underline; }
.arthead { padding-block: 28px 34px; max-width: 860px; }
.arthead h1 { font-size: clamp(2rem, 4.4vw, 3.4rem); margin-top: 16px; }
.arthead .by { margin-top: 20px; display: flex; flex-wrap: wrap; gap: 6px 18px; font: 400 13px var(--f-mono); color: var(--mute); }
.hero-fig { margin: 0 0 40px; max-width: 960px; }
.hero-fig img { width: 100%; height: auto; display: block; border-radius: 22px; border: 1px solid var(--line); background: var(--soft); aspect-ratio: 1200 / 630; }
.thumb { width: 100%; height: auto; display: block; border-radius: 12px; aspect-ratio: 1200 / 630; background: var(--soft); object-fit: cover; }
.fig { margin: 1.8em 0; }
.fig img { width: 100%; height: auto; display: block; border-radius: 16px; border: 1px solid var(--line); background: var(--soft); }
.fig figcaption { font: 400 13px var(--f-mono); color: var(--mute); margin-top: 10px; line-height: 1.5; }
.ghana { border: 1px solid var(--line); border-left: 4px solid var(--brand); background: var(--surface); border-radius: 14px; padding: 18px 22px 20px; font-size: 1rem; line-height: 1.62; display: grid; gap: .7em; }
.ghana > * + * { margin-top: 0; }
.ghana-tag { font: 500 11px var(--f-mono); letter-spacing: .09em; text-transform: uppercase; color: var(--brand); }
.ghana p, .ghana ul, .ghana ol { color: var(--ink); }
.ghana ul, .ghana ol { padding-left: 1.2em; display: grid; gap: .35em; }
.sources { margin-top: 3em; padding-top: 1.6em; border-top: 1px solid var(--line); font-size: .98rem; line-height: 1.6; }
.sources h2 { font-size: 1.25rem; margin: 0 0 .5em; }
.sources p { color: var(--mute); }
.sources ul { padding-left: 1.2em; display: grid; gap: .4em; margin-top: .8em; }
.artgrid { display: grid; grid-template-columns: 240px minmax(0, 700px); gap: 56px; padding-bottom: 80px; }
.toc { position: sticky; top: 16px; align-self: start; font-size: 14px; }
.toc b { font: 500 11px var(--f-mono); letter-spacing: .09em; text-transform: uppercase; color: var(--mute); display: block; margin-bottom: 12px; }
.toc a { display: block; padding: 8px 0 8px 14px; border-left: 2px solid var(--line); color: var(--mute); text-decoration: none; }
.toc a:hover { color: var(--ink); border-left-color: var(--brand); }
.prose { font-size: 1.1rem; line-height: 1.72; min-width: 0; }
.prose > * + * { margin-top: 1.1em; }
.prose h2 { font-size: 1.9rem; margin-top: 2em; scroll-margin-top: 20px; }
.prose h3 { font-size: 1.35rem; margin-top: 1.6em; }
.prose p.first { font-size: 1.25rem; color: var(--mute); }
.prose ul, .prose ol { padding-left: 1.3em; display: grid; gap: .5em; }
.prose a { color: var(--brand); text-decoration: underline; text-underline-offset: 3px; }
.prose blockquote { margin-left: 0; padding: 4px 0 4px 20px; border-left: 3px solid var(--edge); color: var(--mute); }
.prose code { font: 400 .9em var(--f-mono); background: var(--soft); padding: 2px 6px; border-radius: 5px; }
.tablewrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.tablewrap table { border-collapse: collapse; width: 100%; min-width: 520px; font-size: 15px; line-height: 1.5; }
.tablewrap th, .tablewrap td { padding: 13px 16px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
.tablewrap th { font: 500 11.5px var(--f-mono); letter-spacing: .07em; text-transform: uppercase; color: var(--mute); background: var(--soft); }
.tablewrap tr:last-child td { border-bottom: 0; }
.callout { background: var(--dark); color: var(--dark-ink); border-radius: 20px; padding: 28px; display: grid; gap: 14px; }
.callout h3 { font-size: 1.5rem; color: var(--dark-ink); }
.callout p { color: rgba(232, 241, 238, .72); font-size: 1rem; line-height: 1.55; }
.callout .btn.primary { background: var(--edge); border-color: var(--edge); color: var(--dark); justify-self: start; }
.callout a.btn { color: var(--dark); text-decoration: none; }
.faq details { border-bottom: 1px solid var(--line); padding: 16px 0; }
.faq summary { cursor: pointer; font: 700 1.1rem var(--f-display); list-style: none; display: flex; justify-content: space-between; gap: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font: 400 1.4rem var(--f-mono); color: var(--mute); }
.faq details[open] summary::after { content: "\2212"; }
.faq p { font-size: 1rem; color: var(--mute); margin-top: 10px; line-height: 1.6; }
.related { padding-block: 0 80px; }

@media (max-width: 900px) {
  .hero, .shead, .tools, .panel, .move, .artgrid, .bring { grid-template-columns: 1fr; }
  .tablist { grid-auto-flow: column; grid-auto-columns: minmax(130px, 1fr); overflow-x: auto; gap: 6px; padding-bottom: 6px; }
  .tab { border-left: 0; border-bottom: 3px solid var(--line); padding: 12px 10px; min-height: 52px; }
  .tab[aria-selected="true"] { border-bottom-color: var(--brand); }
  .tab span { display: none; }
  .arts { grid-template-columns: 1fr; }
  .three, .incl, .steps { grid-template-columns: 1fr; }
  .three > div, .three > div + div { padding: 22px 0; border-left: 0; border-top: 1px solid var(--line); }
  .three > div:first-child { border-top: 0; }
  .incl > div, .incl > div:not(:nth-child(3n+1)) { padding: 22px 0; border-left: 0; }
  .half { grid-template-columns: 1fr; }
  .half .sum { text-align: left; }
  .toc { position: static; }
  .toc a:not(:first-of-type) { display: none; }
  .scene { padding-inline: 14px; }
  .float.a { right: 0; } .float.b { left: 0; }
  .arts:not(.even) .art:first-child h3 { font-size: 1.4rem; }
  .artgrid { gap: 28px; }
}
@media (max-width: 520px) {
  .acts .btn { flex: 1 1 100%; }
  .urlbox { flex-direction: column; border-radius: 22px; }
  .float { position: static; margin-top: 12px; max-width: none; animation-delay: .2s; }
  .scene { padding-bottom: 0; }
  .plan { padding: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .ring .fgc { stroke-dashoffset: 30; }
}