/* Plona site v2: shared styles. Phone first. Darker orange (--ob) for text and small buttons, brand orange (--orange) for shapes. */
:root{--orange:#F26A21;--ob:#BF4A0A;--ob-h:#A03D06;--ot:#A63F05;--ink:#141414;--sub:#575757;--line:#E4DED7;--bg:#FAF7F4;--card:#fff;--tint:#FFEEE3;--tint-line:#f7cdb2;--good:#1AA463;--gd:#0B6B40;--gbg:#E6F6EE;--warn-bg:#FFF6DD;--warn-d:#6B4E00;--bad:#C22F2F;--bad-bg:#FDE9E7;--wait:#EFEAE4;--field:#767676;--r-sm:6px;--r-md:10px;--r-lg:16px;--bar-h:60px;color-scheme:light}
/* 3.5.8, the design foundation: the same spacing scale and height-fluid gaps as the app (app/css/app.css, DESIGN.md "Spacing"); keep
   the two copies the same. Widths and gaps only, so dark mode is untouched. */
:root{--s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:24px;--s6:32px;--s7:48px;
--v-top:16px;--v-title:16px;--v-field:12px;--v-group:24px;--v-foot:12px;--h-step:clamp(22px,6.6vw,30px);--fi-h:54px;
--tap:44px;--ctl-h:48px;--t-in:16px;--t-min:13px}
@supports (height:1svh){:root{--v-top:clamp(8px,calc(var(--vh,1svh) * 2.5),28px);--v-title:clamp(12px,calc(var(--vh,1svh) * 2.5),28px);--v-field:clamp(12px,calc(var(--vh,1svh) * 2.2),20px);
--v-group:clamp(16px,calc(var(--vh,1svh) * 3.5),40px);--v-foot:clamp(12px,calc(var(--vh,1svh) * 2),24px);--h-step:clamp(22px,min(6.6vw,calc(var(--vh,1svh) * 3.6)),30px);
--fi-h:clamp(48px,calc(var(--vh,1svh) * 6),56px)}}
@media(prefers-color-scheme:dark){:root:not([data-theme=light]){--ink:#F4F1EC;--sub:#B9B3AB;--line:#3a3632;--bg:#141210;--card:#1D1B19;--tint:#3a2418;--tint-line:#6b3a1d;--wait:#2a2724;--gbg:#12301f;--gd:#6fdba4;--warn-bg:#3a3010;--warn-d:#f2d477;--bad:#ff8a80;--bad-bg:#3d1c1a;--ot:#FFA66B;--field:#8f8a83;color-scheme:dark}}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{font-family:'Instrument Sans',-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;background:var(--bg);color:var(--ink);line-height:1.5;font-size:16px;-webkit-font-smoothing:antialiased;overflow-x:hidden;padding-bottom:calc(var(--bar-h) + 24px + env(safe-area-inset-bottom))}
h1,h2,h3,.disp{font-family:'Clash Grotesk','Instrument Sans',sans-serif;letter-spacing:-.01em;font-weight:600;line-height:1.15}
h1{font-size:clamp(28px,7vw,46px)}h2{font-size:clamp(22px,4.5vw,30px)}h3{font-size:18px}
a{color:inherit}p{margin:0}
:focus-visible{outline:3px solid var(--ink);outline-offset:2px;border-radius:4px}
h1[tabindex="-1"]:focus,h2[tabindex="-1"]:focus,h3[tabindex="-1"]:focus{outline:0}
.btn:focus-visible,.tile:focus-visible{box-shadow:0 0 0 2px var(--bg),0 0 0 5px var(--ink);outline:0}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:8px;top:-60px;background:var(--ink);color:var(--bg);padding:12px 16px;border-radius:8px;z-index:400}.skip:focus{top:8px}
.sub{color:var(--sub)}.small{font-size:14px;color:var(--sub)}
.stack>*+*{margin-top:12px}
.wrap{max-width:1120px;margin:0 auto;padding:0 16px}
section{padding:36px 0}
.band{background:var(--card);border-block:1px solid var(--line)}
.kicker{font:700 12px 'Instrument Sans',sans-serif;letter-spacing:.09em;text-transform:uppercase;color:var(--ot);margin-bottom:6px}
/* auth switching: neither Join nor Account-only content shows until the session is known */
.auth-in,.auth-out{display:none!important}
html.is-in .auth-in{display:revert!important}
html.is-out .auth-out{display:revert!important}
html.is-in .auth-in.flex{display:flex!important}html.is-out .auth-out.flex{display:flex!important}
/* header */
.top{background:var(--bg);border-bottom:1px solid var(--line)}
.top.stick{position:sticky;top:0;z-index:30}
.top .in{max-width:1120px;margin:0 auto;padding:4px 16px;display:flex;align-items:center;gap:6px;min-height:60px}
.brand{font-family:'Clash Grotesk',sans-serif;font-weight:700;font-size:24px;text-decoration:none;display:inline-flex;align-items:center;min-height:44px;margin-right:auto}
.brand i{width:10px;height:10px;background:var(--orange);border-radius:50%;margin-left:3px}
.nav{display:none;gap:4px}
.nav a,.acct{display:inline-flex;align-items:center;min-height:44px;padding:0 12px;border-radius:var(--r-md);font-weight:600;font-size:16px;text-decoration:none}
.nav a:hover{background:var(--wait)}
.nav a[aria-current=page]{box-shadow:inset 0 -3px 0 var(--orange)}
.acct{background:var(--ob);color:#fff;font-weight:700}.acct:hover{background:var(--ob-h)}
@media(min-width:820px){.nav{display:flex}}
/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 20px;border-radius:var(--r-md);border:2px solid var(--ob);background:var(--ob);color:#fff;font:700 16px 'Instrument Sans',sans-serif;cursor:pointer;text-decoration:none;text-align:center;line-height:1.2}
.btn:hover{background:var(--ob-h);border-color:var(--ob-h)}
.btn.ghost{background:var(--card);color:var(--ink);border-color:var(--ink)}.btn.ghost:hover{background:var(--wait)}
.btn.dark{background:var(--ink);border-color:var(--ink);color:var(--bg)}.btn.dark:hover{opacity:.85}
.btn.full{width:100%}
.btn[disabled]{opacity:.5;cursor:not-allowed}
.linkbtn{display:inline-flex;align-items:center;background:none;border:0;color:var(--ink);text-decoration:underline;font:600 16px 'Instrument Sans',sans-serif;cursor:pointer;min-height:44px;padding:0 8px}
.row{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
/* Ask Plona hint next to anything needing explanation */
.askhint{display:inline-flex;align-items:center;gap:5px;min-height:44px;padding:0 8px;background:none;border:0;color:var(--ot);font:600 14px 'Instrument Sans',sans-serif;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.askhint svg{width:16px;height:16px}
p .askhint{margin-top:-12px;margin-bottom:-12px;vertical-align:middle}
/* hero + four things */
.hero{padding:28px 0 8px}
.hero p.lead{font-size:18px;margin-top:12px;max-width:60ch}
.four{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:22px;list-style:none}
.tile{display:flex;flex-direction:column;gap:6px;background:var(--card);border:1px solid var(--line);border-top:4px solid var(--orange);border-radius:var(--r-lg);padding:14px;text-decoration:none;min-height:132px;height:100%}
.tile:hover{border-color:var(--orange);box-shadow:0 12px 30px rgba(242,106,33,.12)}
.tile .ic{width:40px;height:40px;border-radius:50%;background:var(--orange);color:#141414;display:inline-flex;align-items:center;justify-content:center}
.tile .ic svg{width:22px;height:22px}
.tile b{font-family:'Clash Grotesk',sans-serif;font-size:19px;font-weight:600;line-height:1.15}
.tile span.d{font-size:14px;color:var(--sub);line-height:1.35}
.tile.mine{border-color:var(--ob);border-width:2px;border-top-width:4px}
@media(min-width:820px){.four{grid-template-columns:repeat(4,1fr)}.tile{padding:18px}}
.next{background:var(--card);border:2px solid var(--ob);border-radius:var(--r-lg);padding:16px;margin-top:20px}
.next h2{font-size:22px;margin-bottom:4px}
/* install */
.install{background:var(--tint);border:1px solid var(--tint-line);border-radius:var(--r-lg);padding:18px}
.install h2{margin-bottom:6px}
.seg{display:flex;gap:6px;margin:14px 0 10px;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:4px}
.seg button{flex:1;min-height:44px;border:0;border-radius:9px;background:transparent;color:var(--ink);font:600 15px 'Instrument Sans',sans-serif;cursor:pointer}
.seg button[aria-selected=true]{background:var(--ink);color:var(--bg)}
.steps{list-style:none;counter-reset:s;display:grid;gap:10px}
.steps li{counter-increment:s;position:relative;padding-left:42px;min-height:32px}
.steps li:before{content:counter(s);position:absolute;left:0;top:0;width:30px;height:30px;border-radius:50%;background:var(--ob);color:#fff;font-weight:700;display:flex;align-items:center;justify-content:center}
.installed-note{font-weight:600}
/* roles */
.roles{display:grid;gap:16px;margin-top:18px}
.role{background:var(--card);border:1px solid var(--line);border-top:4px solid var(--orange);border-radius:var(--r-lg);padding:18px}
.role h3{font-size:22px;margin-bottom:4px}
.pic{list-style:none;display:grid;gap:12px;margin:16px 0}
.pic li{display:grid;grid-template-columns:52px 1fr;gap:12px;align-items:center}
.pic .g{width:52px;height:52px;border-radius:14px;background:var(--tint);border:1px solid var(--tint-line);display:flex;align-items:center;justify-content:center;color:var(--ot);position:relative}
.pic .g svg{width:28px;height:28px}
.pic .g em{position:absolute;top:-8px;left:-8px;width:24px;height:24px;border-radius:50%;background:var(--ob);color:#fff;font:700 13px 'Instrument Sans',sans-serif;font-style:normal;display:flex;align-items:center;justify-content:center}
.pic b{display:block}
@media(min-width:820px){.roles{grid-template-columns:1fr 1fr}}
.about{max-width:64ch}.about p+p{margin-top:12px}
.two{display:grid;gap:16px}
@media(min-width:820px){.two{grid-template-columns:1fr 1fr;align-items:start}}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:18px}
.video-slot video{width:100%;border-radius:var(--r-md);background:#000}
footer{border-top:1px solid var(--line);padding:24px 0 8px;font-size:15px}
footer nav{display:flex;flex-wrap:wrap;gap:4px 8px}
footer a{display:inline-flex;align-items:center;min-height:44px;padding:0 8px}
/* hide the old feedback tab from plona-db.js on these pages */
#plfb-tab,#plfb-ov,#chat-launch{display:none!important}
label.f{display:block;font-weight:600;font-size:15px;margin:12px 0 4px}
.hint{font-size:13px;color:var(--sub);margin-top:4px}
input[type=text],input[type=email],input[type=search],input[type=date],select,textarea{width:100%;min-height:48px;font:16px 'Instrument Sans',sans-serif;color:var(--ink);background:var(--card);border:1.5px solid var(--field);border-radius:var(--r-md);padding:10px 12px}
textarea{min-height:100px;resize:vertical}
input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid var(--ink);outline-offset:1px}
.rate{display:flex;gap:6px;margin:6px 0}
.rate label{flex:1;position:relative}
.rate input{position:absolute;opacity:0;inset:0;width:100%;height:100%;cursor:pointer;margin:0}
.rate span{display:flex;align-items:center;justify-content:center;min-height:48px;border:1.5px solid var(--field);border-radius:var(--r-md);font-weight:700;background:var(--card)}
.rate input:checked+span{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.rate input:focus-visible+span{outline:3px solid var(--ink);outline-offset:2px}
.msg{font-weight:600;font-size:15px;margin-top:10px}.msg.err{color:var(--bad)}
.hp{position:absolute;left:-9999px;height:0;width:0;opacity:0}
.mockchip{display:inline-block;background:var(--warn-bg);color:var(--warn-d);border:1px solid #efd88f;border-radius:99px;font-size:12px;font-weight:700;padding:2px 10px}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

[hidden]{display:none!important}