/* SITE1: the landing and signed-out pages. The studio's colours and fonts, and the few control styles the sign-in dialog
   uses (.btn, .field, .lab, input.plain, .note, .cab-head, .ask-row), so the dialog looks the same as in the studio. */
:root{
  --bg:#0a0e12;--panel:rgba(16,22,28,.86);--raise:#1a232c;--raise-2:#222d38;--line:#2b3743;--text:#e7ecf1;--dim:#8f9ca9;
  --accent:#46d3c4;--accent-ink:#04211e;--warn:#ffc24a;
  --f-display:'Barlow Condensed','Arial Narrow',sans-serif;
  --f-body:'Barlow',system-ui,-apple-system,'Segoe UI',sans-serif;
  --f-mono:'IBM Plex Mono',ui-monospace,Menlo,Consolas,monospace;
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{min-height:100%}
body{margin:0;background:var(--bg);color:var(--text);font:16px/1.5 var(--f-body)}
button,input{font:inherit;color:inherit}
[hidden]{display:none!important}
a{color:var(--accent)}
button:focus-visible,input:focus-visible,a:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.btn{background:var(--raise);border:1px solid var(--line);border-radius:6px;padding:8px 10px;min-height:38px;cursor:pointer;text-align:center;transition:background .12s,border-color .12s}
.btn:hover{background:var(--raise-2)}
.btn:disabled{opacity:.55;cursor:default}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);font-weight:600;padding:10px 22px;font-size:17px}
.btn.primary:hover{filter:brightness(1.08)}
.field{display:flex;flex-direction:column;gap:6px;min-width:0}
.lab{font:500 11px var(--f-body);letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}
input.plain{width:100%;background:var(--raise);color:var(--text);border:1px solid var(--line);border-radius:6px;padding:8px 10px;min-height:38px;font:500 14px var(--f-body)}
.note{margin:0;color:var(--dim);font-size:13px}
.cab-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 18px;border-bottom:1px solid var(--line)}
.cab-head h2{margin:0;font:700 20px var(--f-display);letter-spacing:.08em;text-transform:uppercase}
.ask-row{display:flex;justify-content:flex-end;gap:8px;flex-wrap:wrap}
.ask-row .btn{min-width:96px}
form{margin:0}

/* page: phone first; wider screens add columns below */
html{scroll-behavior:smooth;scroll-padding-top:84px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
#site{max-width:960px;margin:0 auto;padding:0 16px 32px;display:flex;flex-direction:column;gap:28px;min-height:100vh}
.site-top{position:sticky;top:0;z-index:5;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 16px;padding:12px 0;background:var(--bg);border-bottom:1px solid var(--line)}
.site-brand{display:flex;align-items:center;gap:10px;font:700 20px var(--f-display);letter-spacing:.08em;text-transform:uppercase;color:var(--text);text-decoration:none}
.site-nav{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px}
.site-nav a{color:var(--text);text-decoration:none;padding:8px 2px;font-weight:500}
.site-nav a:hover{color:var(--accent)}
.site-nav .btn{padding:6px 14px}
#site .btn.buy{background:var(--warn);border-color:var(--warn);color:var(--bg)}
#site .btn.buy:hover{background:var(--warn);filter:brightness(1.08)}
.site-hero{display:flex;flex-direction:column;gap:16px;max-width:640px;padding-top:4vh}
.site-hero h1{margin:0;font:700 clamp(36px,9vw,60px)/1.05 var(--f-display);letter-spacing:.04em;text-transform:uppercase}
.site-hero p{margin:0}
.site-pitch{font-size:19px;color:var(--text)}
.site-actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:6px}
.site-actions .note{flex:1 0 100%}
.site-illustrative{border-left:3px solid var(--warn);padding:6px 12px;margin:0;color:var(--text);font-size:14px;background:rgba(255,194,74,.06)}
.site-price{margin:0;font:600 20px var(--f-body);color:var(--text)}
.site-picture{margin:0;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--raise)}
.site-picture img{display:block;width:100%;height:auto}
.site-section{display:flex;flex-direction:column;gap:16px;padding-top:12px}
.site-section h2{margin:0;font:700 28px var(--f-display);letter-spacing:.06em;text-transform:uppercase}
.site-section h3{margin:0;font:700 18px var(--f-display);letter-spacing:.06em;text-transform:uppercase}
.site-section p{margin:0}
.site-features,.site-list{list-style:none;margin:0;padding:0}
.site-features{display:grid;grid-template-columns:minmax(0,1fr);gap:12px}
.site-card-feature{display:flex;flex-direction:column;gap:8px;padding:16px;border:1px solid var(--line);border-radius:10px;background:#10171d}
.site-card-feature img{display:block;width:100%;height:auto;border-radius:6px}
.site-card-feature p{color:var(--dim)}
.site-plans{display:grid;grid-template-columns:minmax(0,1fr);gap:12px}
.site-plan{display:flex;flex-direction:column;gap:8px;padding:16px;border:1px solid var(--line);border-radius:10px;background:#10171d}
.site-list li{position:relative;padding-left:20px;margin:4px 0}
.site-list li::before{content:"\2713";position:absolute;left:0;color:var(--accent)}
.site-cta{align-items:flex-start;padding:24px 16px;border:1px solid var(--line);border-radius:10px;background:#10171d}
.site-footer{margin-top:auto;padding-top:16px;border-top:1px solid var(--line)}
@media (min-width:640px){
  #site{padding:0 24px 48px}
  .site-features{grid-template-columns:repeat(2,minmax(0,1fr))}
  .site-plans{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (min-width:900px){
  .site-features{grid-template-columns:repeat(3,minmax(0,1fr))}
}
.site-card{max-width:440px;margin:calc(12vh + 24px) auto 0;display:flex;flex-direction:column;gap:14px;padding:24px;border:1px solid var(--line);border-radius:10px;background:#10171d}
.site-card h1{margin:0;font:700 28px var(--f-display);letter-spacing:.06em;text-transform:uppercase}