/* Slat Site sample pages - shared base. Each page sets its own palette with CSS variables:
   --bg --ink --mute --card --line --brand --brand-ink --accent --head (heading font) --body (body font) */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;--bn:42px}
body{margin:0;padding-top:var(--bn);background:var(--bg);color:var(--ink);font-family:var(--body);font-size:1.02rem;line-height:1.55;-webkit-font-smoothing:antialiased}
img,svg{display:block;max-width:100%}
a{color:inherit}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,h4{font-family:var(--head);line-height:1.1;margin:0 0 .5em;font-weight:700}
p{margin:0 0 1em}
ul{margin:0;padding:0;list-style:none}
.wrap{width:min(1120px,100% - 2.5rem);margin-inline:auto}
.sec{padding:clamp(3.5rem,8vw,6rem) 0;scroll-margin-top:calc(var(--bn) + 70px)}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.sample-note{font-size:.82rem;color:var(--mute);margin-top:1rem}

/* ---- the slim "this is a sample" banner: identical on every sample ---- */
.slat-banner{position:fixed;top:0;left:0;right:0;z-index:900;height:var(--bn);display:flex;align-items:center;justify-content:center;gap:.9rem;padding:0 .9rem;background:#141311;color:#f5f2ec;font:500 .78rem/1.25 ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif}
.slat-banner span{min-width:0}
.slat-banner a{color:#f5f2ec;text-decoration:underline;text-underline-offset:2px}
.slat-banner .sb-home{opacity:.8}
.slat-banner .sb-tour{flex:none;border:0;border-radius:999px;background:#f5f2ec;color:#141311;font:700 .76rem/1 ui-sans-serif,system-ui,Arial,sans-serif;padding:.5rem .85rem;cursor:pointer;min-height:30px}
.slat-banner .sb-tour:hover{background:#fff}
@media (max-width:700px){.slat-banner .sb-home{display:none}.slat-banner{justify-content:space-between;font-size:.72rem}html{--bn:46px}}

/* ---- scroll reveal (hidden only once JS has started; always visible without JS or with reduced motion) ---- */
.js .rv{opacity:0;translate:0 18px;transition:opacity .7s cubic-bezier(.22,1,.36,1),translate .7s cubic-bezier(.22,1,.36,1)}
.js .rv.in{opacity:1;translate:0 0}
.js .rv.d1{transition-delay:.08s}.js .rv.d2{transition-delay:.16s}.js .rv.d3{transition-delay:.24s}
@media (prefers-reduced-motion:reduce){.js .rv{opacity:1;translate:none;transition:none}html{scroll-behavior:auto}}

/* ---- sample forms ---- */
.sf-done{border-radius:14px;padding:1.4rem;background:var(--card);border:2px dashed var(--brand)}
.sf-done h3{margin-bottom:.4rem}
.sf-done .sum{font-weight:600;margin:.4rem 0 1rem}
.sf-done button{border:0;background:var(--brand);color:var(--brand-ink);padding:.7rem 1.1rem;border-radius:999px;font-weight:700;cursor:pointer;min-height:44px}
.fld{display:grid;gap:.35rem;margin-bottom:1rem}
.fld label,.fld legend{font-weight:700;font-size:.88rem}
.fld input,.fld select,.fld textarea{width:100%;min-height:46px;padding:.65rem .8rem;border-radius:10px;border:1.5px solid var(--line);background:var(--card);color:var(--ink)}
.fld textarea{min-height:90px;resize:vertical}
fieldset.fld{border:0;padding:0;margin:0 0 1rem}
.chips{display:flex;flex-wrap:wrap;gap:.5rem}
.chips label{position:relative;font-weight:600;font-size:.92rem}
.chips input{position:absolute;opacity:0;inset:0;width:100%;height:100%;margin:0;cursor:pointer;min-height:0}
.chips span{display:inline-flex;align-items:center;min-height:44px;padding:.45rem .9rem;border-radius:999px;border:1.5px solid var(--line);background:var(--card);transition:background .2s,color .2s,border-color .2s}
.chips input:checked+span{background:var(--brand);color:var(--brand-ink);border-color:var(--brand)}
.chips input:focus-visible+span{outline:3px solid var(--accent);outline-offset:2px}
.chips input:disabled+span{opacity:.4;text-decoration:line-through}

/* ---- guided tour ---- */
.st-root{position:fixed;inset:0;z-index:1000;font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif}
.st-root[hidden]{display:none}
.st-block{position:absolute;inset:0;background:transparent}
.st-root.no-target .st-block{background:rgba(10,10,12,.66)}
.st-spot{position:fixed;border-radius:14px;pointer-events:none;box-shadow:0 0 0 3px #fff,0 0 0 6px rgba(255,255,255,.35),0 0 0 100vmax rgba(10,10,12,.66)}
.st-spot[hidden]{display:none}
.st-card{position:fixed;z-index:2;width:min(380px,calc(100vw - 24px));background:#fff;color:#141311;border-radius:16px;padding:1rem 1.1rem 1rem;box-shadow:0 24px 60px -12px rgba(0,0,0,.55);font-size:.95rem;line-height:1.45;opacity:1}
.st-card.moving{opacity:0;pointer-events:none}
.st-card.pop{animation:stpop .28s cubic-bezier(.22,1,.36,1)}
@keyframes stpop{from{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:none}}
.st-card.dock{left:12px;right:12px;bottom:max(12px,env(safe-area-inset-bottom));top:auto;margin:0 auto;width:auto;max-width:520px}
@media (min-width:641px){.st-card.dock{left:auto;right:20px;margin:0;width:380px}}
.st-card.center{left:50%;top:50%;transform:translate(-50%,-50%);right:auto;bottom:auto;width:min(440px,calc(100vw - 24px))}
.st-card.center.pop{animation:none}
.st-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:.35rem}
.st-count{font-size:.74rem;font-weight:700;letter-spacing:.06em;color:#6b6760}
.st-skip{border:0;background:transparent;color:#6b6760;font-size:.8rem;text-decoration:underline;cursor:pointer;padding:.5rem .3rem;min-height:36px}
.st-title{margin:0 0 .3rem;font:700 1.12rem/1.2 ui-sans-serif,system-ui,Arial,sans-serif;color:#141311}
.st-text{margin:0 0 .8rem;color:#33312d}
.st-dots{display:flex;gap:5px;margin-bottom:.8rem}
.st-dots i{flex:1;height:4px;border-radius:2px;background:#e4e0d8}
.st-dots i.done{background:#9d998f}.st-dots i.on{background:#141311}
.st-nav{display:flex;gap:.5rem;align-items:center}
.st-nav button,.st-cta{min-height:44px;border-radius:999px;padding:.55rem 1.1rem;font:700 .92rem/1 ui-sans-serif,system-ui,Arial,sans-serif;cursor:pointer;border:1.5px solid #141311;background:#fff;color:#141311;text-decoration:none;display:inline-flex;align-items:center}
.st-nav .st-next{margin-left:auto;background:#141311;color:#fff}
.st-cta{background:#fff}
.st-nav button:focus-visible,.st-cta:focus-visible,.st-skip:focus-visible{outline:3px solid #3b82f6;outline-offset:2px}
.st-offer{position:fixed;z-index:880;right:16px;bottom:16px;width:min(320px,calc(100vw - 32px));background:#fff;color:#141311;border-radius:14px;padding:.9rem 1rem;box-shadow:0 18px 44px -10px rgba(0,0,0,.5);font:.9rem/1.4 ui-sans-serif,system-ui,Arial,sans-serif;animation:stpop .4s cubic-bezier(.22,1,.36,1)}
.st-offer p{margin:0 0 .65rem}
.st-offer div{display:flex;gap:.5rem}
.st-offer button{min-height:42px;border-radius:999px;padding:.45rem 1rem;font:700 .85rem/1 ui-sans-serif,system-ui,Arial,sans-serif;cursor:pointer;border:1.5px solid #141311;background:#fff;color:#141311}
.st-offer .st-yes{background:#141311;color:#fff}
@media (max-width:640px){.st-offer{left:12px;right:12px;width:auto;bottom:12px}}
html.st-on{overflow-x:hidden}
@media (prefers-reduced-motion:reduce){.st-card.pop,.st-offer{animation:none}}
.st-cta[hidden]{display:none}
.sf-done:focus{outline:none}