/* ══════════════════════════════════════════════════════════════════════════
   STRUXA STUDIO — studio.struxasplints.com
   Built by tools/build-studio-site.py. Edit this file, not the copy in dist.

   FONTS ARE SELF-HOSTED, same two variable families as the main site. Both files
   per family are listed with a unicode-range so latin-ext is only fetched if the
   page actually contains those codepoints. Filenames are UNHASHED here on purpose:
   tools/stamp-assets.py rewrites them to their content-hashed names at build time.
   ══════════════════════════════════════════════════════════════════════════ */
@font-face{font-family:'Rubik';font-style:normal;font-weight:100 900;font-display:swap;
  src:url('fonts/rubik-var-latin.h99ec7ccb.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Rubik';font-style:normal;font-weight:100 900;font-display:swap;
  src:url('fonts/rubik-var-latin-ext.hb11446f4.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;
  src:url('fonts/inter-var-latin.hc9407645.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;
  src:url('fonts/inter-var-latin-ext.ha28eb6d3.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}

:root{
  --bg:#F7FAFB; --bg-alt:#EAF4F6; --surface:#FFFFFF;
  --ink:#0D2E3D; --text:#11232C; --muted:#52656E;
  --primary:#006B78; --primary-hover:#00515D; --accent:#23D3E3;
  --line:#C8D8DE; --line-strong:#6E8590;
  --radius:16px; --pad:clamp(64px,7vw,104px);
  --font:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --display:"Rubik","Inter",system-ui,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font);
  font-size:16.5px;line-height:1.68;-webkit-font-smoothing:antialiased}
.container{width:min(1240px,92vw);margin-inline:auto}
img,canvas{max-width:100%;display:block}
h1,h2,h3{font-family:var(--display);font-weight:600;letter-spacing:-.02em;line-height:1.14;margin:0}
p{margin:0}
a{color:var(--primary)}
.skip-link{position:absolute;left:-9999px}
.skip-link:focus{left:16px;top:16px;z-index:99;background:var(--ink);color:#fff;padding:10px 16px;border-radius:8px}
:focus-visible{outline:2px solid var(--primary);outline-offset:3px;border-radius:6px}

/* ── header ─────────────────────────────────────────── */
.nav{position:sticky;top:0;z-index:30;background:rgba(247,250,251,.9);
  backdrop-filter:saturate(150%) blur(12px);border-bottom:1px solid var(--line)}
.nav-in{display:flex;align-items:center;gap:16px;padding:13px 0}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--display);font-weight:600;
  letter-spacing:.13em;font-size:13.5px;text-decoration:none;color:var(--text);flex:none}
.brand img{width:15px;height:26px}
.brand span{opacity:.6;font-weight:500}
.nav-out{margin-left:auto;font-size:13px;color:var(--muted);text-decoration:none;
  border:1px solid var(--line-strong);padding:7px 14px;border-radius:999px;white-space:nowrap}
.nav-out:hover{color:var(--text);border-color:var(--text)}

/* ── early-access banner: the compliance spine, keep it visible ── */
.alert{background:#FFF7E6;border-bottom:1px solid #E4C77A}
.alert-in{display:flex;gap:14px;align-items:flex-start;padding:14px 0}
.alert-tag{flex:none;font:600 10.5px/1.6 var(--font);letter-spacing:.14em;text-transform:uppercase;
  color:#6B4E0E;background:#F5E3B3;border-radius:999px;padding:2px 11px;margin-top:2px}
.alert p{font-size:14px;color:#6B4E0E;max-width:92ch}

/* ── studio ─────────────────────────────────────────── */
.studio{padding:clamp(26px,3.4vw,44px) 0 var(--pad)}
.studio-head{max-width:760px;margin-bottom:clamp(22px,3vw,34px)}
.eyebrow{font-size:11.5px;letter-spacing:.17em;text-transform:uppercase;color:var(--primary);font-weight:600}
.studio-head h1{font-size:clamp(2.1rem,4.4vw,3.1rem);margin-top:12px}
.studio-head p{margin-top:16px;color:var(--muted);max-width:64ch}

.rig{display:grid;grid-template-columns:1fr;gap:22px}
@media (min-width:1000px){.rig{grid-template-columns:minmax(0,1.35fr) minmax(340px,.65fr);gap:28px;align-items:start}}

.stage-wrap{position:relative;border:1px solid var(--line);border-radius:var(--radius);
  background:linear-gradient(168deg,#fff 0%,#EDF3F5 100%);overflow:hidden}
#stage{width:100%;aspect-ratio:4/3;position:relative;cursor:grab;touch-action:pan-y}
#stage.is-grabbing{cursor:grabbing}
@media (min-width:1000px){#stage{aspect-ratio:auto;height:min(620px,72vh)}}
#stage canvas{width:100%;height:100%;display:block}
.stage-bar{display:flex;flex-wrap:wrap;gap:9px;align-items:center;
  padding:12px 16px;border-top:1px solid var(--line);background:rgba(255,255,255,.7)}
.stage-hint{font-size:12.5px;color:var(--muted);margin-right:auto}
#summary{font:500 12px/1.5 ui-monospace,"SF Mono",Menlo,monospace;color:var(--muted);
  width:100%;order:9;padding-top:4px}
.spinner{position:absolute;inset:0;display:none;place-items:center;font-size:13px;color:var(--muted)}
#stage.is-loading .spinner{display:grid}
#stage-fallback{padding:26px;font-size:14px;color:var(--muted)}

/* ── panel ──────────────────────────────────────────── */
.panel{border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);
  padding:clamp(18px,2.2vw,24px);display:grid;gap:22px}
@media (min-width:1000px){.panel{position:sticky;top:78px;max-height:calc(100vh - 96px);overflow:auto}}
.pgroup>h2{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:600}
.seg{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:11px}
.seg button{font:600 13.5px/1 var(--font);padding:11px 8px;border-radius:10px;cursor:pointer;
  border:1px solid var(--line);background:#fff;color:var(--text)}
.seg button.is-on{background:var(--ink);color:#fff;border-color:var(--ink)}

.presets{display:flex;flex-wrap:wrap;gap:7px;margin-top:11px;padding:0;list-style:none}
.presets button{display:flex;align-items:center;gap:7px;font:500 12.5px/1 var(--font);
  padding:6px 11px 6px 6px;border-radius:999px;border:1px solid var(--line);background:#fff;
  color:var(--text);cursor:pointer}
.presets button:hover{border-color:var(--line-strong)}
.dot{width:15px;height:15px;border-radius:50%;border:1px solid rgba(0,0,0,.16);flex:none}

.ctl{border-top:1px solid var(--line);padding-top:16px}
.ctl:first-of-type{border-top:0;padding-top:0}
.ctl-head{display:flex;align-items:center;gap:10px}
.ctl-head h3{font-size:14.5px;flex:1}
.sw{width:26px;height:26px;border-radius:8px;border:1px solid rgba(0,0,0,.18);flex:none}
.ctl-in{display:flex;gap:8px;margin-top:10px}
.ctl-in input[type=text]{flex:1;min-width:0;font:500 13px/1 ui-monospace,"SF Mono",Menlo,monospace;
  padding:9px 11px;border:1px solid var(--line-strong);border-radius:9px;background:#fff;color:var(--text)}
.ctl-in input[type=color]{width:44px;height:36px;padding:2px;border:1px solid var(--line-strong);
  border-radius:9px;background:#fff;cursor:pointer;flex:none}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px;padding:0;list-style:none}
.chips button{width:24px;height:24px;border-radius:7px;border:1px solid rgba(0,0,0,.16);cursor:pointer;padding:0}
.chips button:hover{transform:scale(1.08)}
.ctl.is-off{opacity:.5}
.padnote{margin-top:8px;font-size:12.5px;color:var(--muted)}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 20px;
  border-radius:999px;font:600 14.5px/1 var(--font);text-decoration:none;cursor:pointer;border:1px solid transparent}
.btn-primary{background:var(--primary);color:#fff}
.btn-primary:hover{background:var(--primary-hover)}
.btn-ghost{border-color:var(--line-strong);color:var(--text);background:#fff}
.btn-ghost:hover{border-color:var(--text)}
.btn-sm{padding:8px 14px;font-size:13px}
.row{display:flex;flex-wrap:wrap;gap:9px}

/* ── sections ───────────────────────────────────────── */
section.band{padding:var(--pad) 0;border-top:1px solid var(--line)}
section.band.alt{background:var(--bg-alt)}
.lead{max-width:760px}
.lead h2{font-size:clamp(1.7rem,3.2vw,2.4rem);margin-top:12px}
.lead p{margin-top:16px;color:var(--muted);max-width:66ch}
.lead p+p{margin-top:12px}
.steps{display:grid;grid-template-columns:1fr;gap:20px;margin-top:38px;padding:0;list-style:none}
@media (min-width:760px){.steps{grid-template-columns:repeat(3,1fr)}}
.steps li{border-top:2px solid var(--primary);padding-top:16px}
.steps h3{font-size:1.03rem}
.steps p{margin-top:8px;font-size:14.5px;color:var(--muted)}
.num{font:700 11.5px/1 var(--font);letter-spacing:.15em;color:var(--primary)}
.cards{display:grid;grid-template-columns:1fr;gap:16px;margin-top:34px;padding:0;list-style:none}
@media (min-width:760px){.cards{grid-template-columns:repeat(3,1fr)}}
.cards li{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:22px}
.cards strong{display:block;font-family:var(--display);font-size:1rem}
.cards span{display:block;margin-top:8px;color:var(--muted);font-size:14.5px}

/* ── form ───────────────────────────────────────────── */
.form{margin-top:32px;max-width:620px;display:grid;gap:22px}
.field{display:grid;gap:6px}
.field label{font:600 13px/1.5 var(--font)}
.field input[type=email],.field textarea{font:400 15px/1.5 var(--font);padding:11px 13px;
  border:1px solid var(--line-strong);border-radius:10px;background:#fff;color:var(--text);width:100%}
.field textarea{min-height:96px;resize:vertical}
.field .help{font-size:12.5px;color:var(--muted)}
.form-status{font-size:14px;padding:12px 14px;border-radius:10px;display:none}
.form-status.ok{display:block;background:#E4F5EE;color:#12603F;border:1px solid #9AD3BB}
.form-status.err{display:block;background:#FDECEA;color:#8B2318;border:1px solid #E3A9A1}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.faq{margin-top:34px;display:grid;gap:0;padding:0;list-style:none;max-width:820px}
.faq li{border-top:1px solid var(--line);padding:20px 0}
.faq li:last-child{border-bottom:1px solid var(--line)}
.faq h3{font-size:1rem}
.faq p{margin-top:8px;color:var(--muted);font-size:15px}

footer{border-top:1px solid var(--line);padding:42px 0 56px;font-size:13px;color:var(--muted)}
footer p{margin-top:10px;max-width:84ch}
.foot-top{display:flex;flex-wrap:wrap;gap:12px 26px;align-items:baseline}
footer strong{font-family:var(--display);letter-spacing:.12em;color:var(--text)}

/* ── additions for the studio panel + form ──────────────
   .help is used in three places (under a colour control, under a form field, and under
   the submit button), so it is a standalone class rather than a descendant of .field. */
.help{font-size:12.5px;line-height:1.5;color:var(--muted);margin-top:7px}
.ctl .help{margin-top:8px}
.form .help{margin-top:4px}
.check{display:flex;gap:10px;align-items:flex-start;font-weight:500;font-size:14.5px;cursor:pointer}
.check input{margin-top:4px;width:16px;height:16px;accent-color:var(--primary);flex:none}
.lead h2+p{margin-top:16px}
/* The failed state hides the canvas ground so the message is not sitting on a gradient
   with an invisible 4:3 hole beside it. */
#stage.is-failed{aspect-ratio:auto;height:auto;cursor:default;display:block}
#stage.is-failed canvas,#stage.is-failed .spinner{display:none}
#stage.is-failed .stage-hint{display:none}
#stage-fallback p{max-width:52ch}
#stage-fallback strong{color:var(--text)}
/* Disabled colour controls: pointer-events off as well as the attribute, so a chip
   (a <button>) cannot be reached by a stray click on touch. */
.ctl.is-off{pointer-events:none}
.ctl.is-off .padnote{color:#6B4E0E}
.presets button.is-on{background:var(--ink);color:#fff;border-color:var(--ink)}

/* ── narrow viewports ───────────────────────────────────
   Re-measured after the rename. The lockup was "STRUXA DESIGN STUDIO" (230px) beside a
   174px pill, 404px of content in a 345px container at 375, so the pill ran off the right
   edge; "STRUXA STUDIO" is 165px and the pair now needs 354px. Shrinking the type to 12px
   takes it to about 316px, which clears a 375px phone with room to spare, so the two
   heavier workarounds are gone: the nav no longer truncates its own label to "Shop" until
   380px, and it never hides the word STUDIO. Do not tighten these back up without
   measuring - the numbers above are the whole argument.

   The alert is a different problem and still needs the column: its tag took 119px of that
   345px row and squeezed the sentence that matters into 212px. Type size does not fix that. */
@media (max-width:640px){
  .nav-in{gap:10px}
  .brand{font-size:12px;gap:8px}
  .nav-out{font-size:12px;padding:6px 12px}
  .alert-in{flex-direction:column;gap:9px;padding:13px 0}
  .alert-tag{margin-top:0}
  .stage-bar{padding:11px 13px}
  #summary{font-size:11.5px}
}
/* Measured in the browser at 12px type: brand 146 + gap 10 + full pill 159 = 315px, against
   a container of 0.92vw. That fits down to a 342px viewport, so 375 and 360 phones keep the
   whole label. 320px phones (container 294) do not, and there the pill says just "Shop".
   The first pass put this at 380px and truncated the most common phone width for nothing. */
@media (max-width:345px){
  .nav-out .wide{display:none}
}