/*
  Public site, sign-in pages and link-opened pages, laid out to match the prototype.
  Shared components live in app.css. Everything here is scoped to body.pub
  (set by the guest and auth layouts), because every stylesheet loads on every page.
*/

/* ---------- Hero bands ---------- */
.pub .p-hero{display:flex;flex-wrap:wrap;gap:40px;align-items:center}
.pub .p-hero .copy{flex:1 1 420px;min-width:0;display:flex;flex-direction:column;gap:20px}
.pub .p-hero .art{flex:1 1 360px;min-width:0;display:flex;flex-direction:column;gap:12px}
.pub .p-hero .copy .kicker{margin:0}
.pub .p-title{font-size:clamp(2.2rem,5.4vw,3.75rem);line-height:1;letter-spacing:-.035em;font-weight:800}
.pub .p-title.sm{font-size:clamp(2.1rem,5vw,3.25rem)}
.pub .p-lead{font-size:clamp(1.05rem,1.6vw,1.15rem);color:var(--muted);max-width:56ch}
.pub .p-head{max-width:760px}
.pub .p-head .p-lead{margin-top:0}
.pub .p-actions{display:flex;gap:10px;flex-wrap:wrap}
.pub .p-actions .btn{min-height:50px;padding:0 22px;font-size:1rem;border-radius:14px}
.pub .sec-h h1{margin:0}

/* ---------- Feature list: icon tile beside the text ---------- */
.pub .feat{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));border-top:1px solid var(--line)}
.pub .feat > div{padding:22px 22px 22px 0;border-bottom:1px solid var(--line);display:flex;gap:14px;align-items:flex-start}
.pub .feat .fi{width:40px;height:40px;border-radius:12px;background:var(--brand-soft);color:var(--brand);display:grid;place-items:center;flex-shrink:0}
.pub .feat .fi svg{width:19px;height:19px}
.pub .feat h3{font-size:1.06rem;margin-bottom:4px}
.pub .feat p{color:var(--muted);font-size:.93rem}

/* ---------- Numbered steps ---------- */
.pub .steps-grid li{counter-increment:s;gap:6px}
.pub .steps-grid li::before{content:"Step " counter(s);font:700 .75rem var(--font-m);color:var(--brand);letter-spacing:.04em}
.pub .steps-grid h3{font-size:1.04rem}
.pub .band.alt .steps-grid li,.pub .band.alt .status-grid > *{background:var(--bg)}

/* ---------- Boxes and notes ---------- */
.pub .box{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:20px 22px;display:flex;flex-direction:column;gap:14px;min-width:0}
.pub .box.flat{background:transparent;border-style:dashed}
.pub .box.cover{background:var(--cover);border-color:var(--cover);color:var(--cover-ink)}
.pub .box.cover .muted,.pub .box.cover .hint,.pub .box.cover .label{color:inherit;opacity:.82}
.pub .box > h2,.pub .box > h3{margin:0}
.pub .box .btn{align-self:flex-start}
.pub .box .dl{margin:0}
.pub .note{border-radius:12px;padding:12px 14px;background:var(--wait-soft);color:var(--ink);font-size:.92rem;display:flex;gap:10px;align-items:flex-start}
.pub .note svg{width:18px;height:18px;color:var(--wait);margin-top:2px;flex-shrink:0}
.pub .note.info{background:var(--brand-soft)}
.pub .note.info svg{color:var(--brand)}
.pub .p-id{font:700 clamp(1.5rem,3vw,1.9rem) var(--font-m);letter-spacing:.03em}
.pub .p-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr));gap:12px}
.pub .p-stats .stat b{font-size:2.1rem}

/* ---------- Pricing ---------- */
.pub .packs{gap:14px}
.pub .pack{padding:22px;gap:8px}
.pub .pack .label{color:inherit;opacity:.8}
.pub .pack b{font-size:2.5rem;line-height:1}
.pub .pack .btn{margin-top:10px}
.pub .pack.best .btn{background:var(--brand);border-color:var(--brand);color:var(--brand-ink)}
.pub .p-list{display:flex;flex-direction:column}
.pub .p-list > div{display:flex;gap:14px;align-items:flex-start;padding:13px 0;border-top:1px solid var(--line)}
.pub .p-list > div:last-child{border-bottom:1px solid var(--line)}
.pub .p-list .mono{min-width:96px;flex-shrink:0}
.pub .p-list svg{width:18px;height:18px;color:var(--ok);margin-top:2px}
.pub .cols h2.p-colh{font-size:1.45rem;margin-bottom:12px}

/* ---------- FAQ ---------- */
.pub .faq-col h2{font-size:1.25rem;margin:22px 0 4px}
.pub .faq-col h2:first-child{margin-top:0}
.pub .faq-col .faq:last-of-type{border-bottom:1px solid var(--line)}

/* ---------- Legal ---------- */
.pub .legal-tabs{margin:0 0 22px}
.pub .prose .terms{max-height:none}

/* ---------- Footer ---------- */
.pub .site-footer-inner{grid-template-columns:1.4fr repeat(3,1fr)}
.pub .site-footer-legal{display:flex;gap:6px 14px;flex-wrap:wrap;justify-content:space-between}

/* ---------- Link-opened pages: slim header, one column ---------- */
.pub .mini-top{background:var(--surface);border-bottom:1px solid var(--line)}
.pub .mini-top-in{max-width:1180px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:62px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.pub .mini-top .note-txt{font-size:.86rem;color:var(--muted);text-align:right}
.pub .link-main{max-width:752px;margin:0 auto;padding-block:40px 72px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.pub .link-main.wide-link{max-width:880px}
.pub .linkpage{display:flex;flex-direction:column;gap:20px}
.pub .linkpage .flash{margin-bottom:0}
.pub .link-h{display:flex;flex-direction:column;gap:8px}
.pub .link-h .kicker{margin:0}
.pub .link-h h1{font-size:clamp(1.75rem,4vw,2.4rem)}
.pub .link-foot{font-size:.86rem;color:var(--muted)}
.pub .mini-foot{border-top:1px solid var(--line);padding:18px max(16px,env(safe-area-inset-left,0px));text-align:center;font-size:.82rem;color:var(--muted)}
.pub .mini-foot a{color:inherit}

/* A job shown as one stamped entry (claim pages) */
.pub .entry{display:flex;justify-content:space-between;gap:16px;align-items:center;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:18px 20px}
.pub .entry .when{font:700 .76rem var(--font-m);letter-spacing:.04em;color:var(--muted);text-transform:uppercase}
.pub .entry h3{font-size:1.15rem;margin-top:4px}
.pub .entry .meta{color:var(--muted);font-size:.9rem;margin-top:3px}

/* Rubber stamp with words in it */
.pub .stamp{width:96px;height:96px;border-radius:50%;border:2px solid currentColor;display:grid;place-items:center;text-align:center;transform:rotate(-8deg);font:800 .64rem/1.15 var(--font-h);letter-spacing:.12em;text-transform:uppercase;position:relative;flex-shrink:0;color:var(--na)}
.pub .stamp::before{content:"";position:absolute;inset:5px;border-radius:50%;border:1px dashed currentColor;opacity:.7}
.pub .stamp b{display:block;font-size:.84rem;letter-spacing:.06em;margin:2px 0}
.pub .stamp.ok{color:var(--ok)}.pub .stamp.wait{color:var(--wait)}.pub .stamp.bad{color:var(--bad)}
@media (max-width:520px){.pub .stamp{width:74px;height:74px;font-size:.52rem}.pub .stamp b{font-size:.66rem}}
.pub .verdict .grow{flex:1 1 240px;display:flex;flex-direction:column;gap:6px}

/* Letter code entry */
.pub .code-row{display:flex;gap:8px;flex-wrap:wrap}
.pub .code-row input{flex:1 1 240px;width:auto}
.pub .code-row .btn{min-height:54px;padding:0 22px}

/* Guarantor journey: named steps */
.pub .g-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,140px),1fr));gap:10px}
.pub .g-steps li{display:flex;align-items:center;gap:10px;padding:12px 14px;border:1px solid var(--line);border-radius:14px;background:var(--surface);font-weight:700;font-size:.92rem;color:var(--muted)}
.pub .g-steps li .stepno{width:26px;height:26px;font-size:.74rem}
.pub .g-steps li.on{color:var(--ink);border-color:var(--brand)}
.pub .g-steps li.on .stepno{background:var(--brand);color:var(--brand-ink)}
.pub .g-steps li.done{color:var(--ink)}
.pub .g-steps li.done .stepno{background:var(--ok-soft);color:var(--ok)}
.pub .g-steps li.done .stepno svg{width:14px;height:14px}
.pub .g-part{display:flex;flex-direction:column;gap:14px;border-top:1px solid var(--line);padding-top:18px}
.pub .g-part:first-of-type{border-top:0;padding-top:0}
.pub .g-part .label{color:var(--brand)}

/* Shared CV */
.pub .cv-link .cvdoc{margin:0}

/* ---------- Sign-in pages ---------- */
.pub .auth-pitch h2{font-size:clamp(1.8rem,3.4vw,2.5rem)}
.pub .auth-pitch > p{max-width:42ch}
.pub .auth-card{display:flex;flex-direction:column;gap:18px}
.pub .auth-card h1{margin:0}
.pub .auth-card > p.muted{margin-top:-8px}
.pub .auth-card form.stack{gap:16px}
.pub .auth-card .label-row{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.pub .auth-card .label-row a{font-size:.86rem;font-weight:600}
.pub .acct-seg{display:inline-flex;gap:2px;padding:3px;border-radius:12px;background:var(--surface-2);flex-wrap:wrap;max-width:100%}
.pub .acct-seg a{border-radius:9px;padding:7px 14px;min-height:36px;display:inline-flex;align-items:center;font-weight:600;font-size:.9rem;color:var(--muted);text-decoration:none}
.pub .acct-seg a:hover{color:var(--ink)}
.pub .acct-seg a[aria-current="true"]{background:var(--surface);color:var(--ink);box-shadow:0 1px 3px rgba(23,25,28,.12)}
.pub .form-h{font-size:1.05rem;margin-top:4px}
.pub .otp-code{text-align:center;letter-spacing:.5em!important;font-size:1.5rem!important;max-width:280px}

/* ---------- Error pages ---------- */
.pub .err-page{text-align:center;max-width:520px;margin:0 auto;display:flex;flex-direction:column;gap:12px;align-items:center;padding-block:24px}
.pub .err-page .kicker{margin:0}

@media (max-width:860px){
  .pub .site-footer-inner{grid-template-columns:1fr 1fr}
}
@media (max-width:520px){
  .pub .p-hero{gap:28px}
  .pub .entry{padding:16px}
  .pub .mini-top .note-txt{max-width:50%}
}

/* Home hero sits on the page background, like the prototype; the next band is white. */
.pub .home-hero{background:transparent;border-bottom:0}
.pub .band.alt .path{background:var(--bg)}
@media print{.pub .link-main{padding:0;max-width:none}.pub .linkpage{gap:0}}
.pub .acct-seg{align-self:flex-start}
.pub label.check:has(a){display:block;line-height:1.6}
.pub label.check:has(a) input{vertical-align:-4px;margin-right:8px}
@media (max-width:860px){.pub .auth{align-content:flex-start}}
.pub label.check{flex-wrap:nowrap;align-items:flex-start}
.pub label.check input{flex-shrink:0;margin-top:1px}