/* Install guide (/install). Tokens and shared pieces (header, buttons, faq, footer) come from site.css. */
.install-hero{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);align-items:end;gap:var(--space-6);padding:clamp(28px,4vw,64px) var(--gutter) 0;background:var(--rose);border-bottom:var(--line);overflow:hidden}
.install-copy{padding-bottom:clamp(40px,6vw,88px);max-width:42rem}
.install-figure{justify-self:center;width:min(100%,300px);height:auto;margin-bottom:-18%;filter:drop-shadow(0 14px 14px rgb(75 74 103 / .26))}

.install-steps{padding:var(--space-section) var(--gutter);background:var(--white);border-bottom:var(--line)}
.istep-list{display:grid;gap:clamp(20px,3vw,36px);max-width:1040px;margin:0 auto}
.istep{display:grid;grid-template-columns:auto minmax(0,1fr) minmax(220px,320px);align-items:center;gap:clamp(16px,2.4vw,32px);padding:clamp(18px,2.4vw,28px);border:var(--line);border-radius:var(--r-panel);background:var(--surface);box-shadow:var(--drop)}
.istep:nth-child(even){background:var(--white)}
.istep .beat-no{width:44px;height:44px;font-size:1.2rem;align-self:start}
.istep-copy h3{margin-bottom:var(--space-3)}
.istep-copy p{max-width:36em}
.istep-face{width:150px;height:150px;justify-self:center;border-radius:28px;border:var(--line);box-shadow:var(--drop);background:var(--surface);transform:rotate(2deg)}

/* Small drawings of what each step looks like: not screenshots, so they stay true when Chrome restyles. */
.mock{justify-self:center;display:flex;align-items:center;gap:12px;padding:16px 18px;border:var(--line);border-radius:var(--r-card);background:var(--white);font:500 .9rem/1.3 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--ink)}
.mock-zip,.mock-dir{padding:8px 12px;border-radius:10px;border:1.5px dashed var(--navy);background:var(--surface)}
.mock-dir{border-style:solid;background:var(--peach)}
.mock-arrow{font-size:1.2rem}
.mock-switch{position:relative;width:40px;height:22px;border-radius:var(--r-pill);background:var(--rose-deep);border:1.5px solid var(--ink)}
.mock-switch::after{content:"";position:absolute;top:2px;right:2px;width:15px;height:15px;border-radius:50%;background:var(--white);border:1.5px solid var(--ink)}
.mock-buttons{flex-wrap:wrap;gap:8px}
.mock-btn{padding:6px 12px;border-radius:var(--r-pill);border:1.5px solid var(--border);color:var(--muted);font-size:.82rem}
.mock-btn-on{border-color:var(--ink);color:var(--ink);background:var(--rose-soft);box-shadow:3px 3px 0 rgb(47 44 70 / .3)}
/* "ตั้งร้าน 3 คลิก": the wizard's three step pills, the last one being pressed. */
.mock-qs{flex-wrap:wrap;gap:8px}
.mock-qs li{padding:6px 12px;border-radius:var(--r-pill);background:rgb(75 74 103 / .07);color:var(--muted);font-size:.85rem;font-weight:700;white-space:nowrap}
.mock-qs li[data-state="done"]{background:#dff6ea;color:#14573c}
.mock-qs li[data-state="now"]{background:var(--ink);color:var(--white);box-shadow:2px 2px 0 var(--rose-deep)}

.install-faq{padding:var(--space-section) var(--gutter)}

@media (prefers-reduced-motion:no-preference){
  .install-copy>*{animation:rise 700ms var(--ease-out) both}
  .install-copy>:nth-child(2){animation-delay:70ms}.install-copy>:nth-child(3){animation-delay:160ms}.install-copy>:nth-child(4){animation-delay:240ms}
  .mock-btn-on{transition:transform 160ms var(--ease-out)}.istep:hover .mock-btn-on{transform:translate(-1px,-1px)}
}
@media (max-width:860px){
  .install-hero{grid-template-columns:1fr}
  .install-figure{width:min(62vw,260px);margin-bottom:-24%}
  .istep{grid-template-columns:auto minmax(0,1fr)}
  .istep .mock,.istep-face{grid-column:1 / -1;justify-self:start}
}
@media (max-width:520px){
  .istep{grid-template-columns:1fr}
  .mock{flex-wrap:wrap}
}

/* Invite banner: only shown to someone who arrived through a friend's link while the programme is on. */
/* The banner sits on the same rose as the header and the hero, so the page stays one surface. */
.invite-band{background:var(--rose);padding:var(--space-5) var(--gutter) 0}
.invite-band[hidden]{display:none}
.invite{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:var(--space-6);align-items:center;margin:0;padding:var(--space-5) var(--space-6);background:var(--rose-soft);border:var(--line);border-radius:var(--r-panel);box-shadow:var(--drop)}
.invite h2{margin:0 0 var(--space-2);font:500 clamp(1.35rem,1rem + 1.4vw,1.9rem)/1.25 var(--font-display);text-wrap:balance}
.invite p{margin:0;max-width:var(--measure)}
.invite .invite-terms{margin-top:var(--space-2);font-size:.82rem;color:#4a4563}
.invite-form label{display:block;margin-bottom:var(--space-2);font-weight:700;font-size:var(--text-small)}
.invite-form[hidden],.invite-form [hidden]{display:none}
#invite-step-code{margin-top:var(--space-3)}
.invite-row input[readonly]{background:#fff4f8;color:var(--muted)}
.invite-row{display:flex;flex-wrap:wrap;gap:var(--space-3)}
.invite-row input{flex:1 1 220px;min-width:0;min-height:48px;padding:0 var(--space-4);font:inherit;color:var(--ink);background:var(--white);border:var(--line);border-radius:var(--r-control)}
.invite-row input::placeholder{color:#5d5977}
.invite-status{min-height:1.6em;margin-top:var(--space-2)!important;font-size:var(--text-small)}
.invite-status[data-tone="ok"]{color:#0f6b4a;font-weight:700}
.invite-status[data-tone="warn"]{color:#9c1f3f;font-weight:700}
@media (max-width:760px){.invite{grid-template-columns:minmax(0,1fr);padding:var(--space-5)}}