/* ============================================================
   MathPaint product page — page-local styles (violet world).
   Ported verbatim from the MathPaint.html prototype <style>.
   ============================================================ */

body[data-world="mathpaint"]{ --accent: var(--violet); --accent-ink: var(--violet-ink); }

.p-hero { padding-top: clamp(40px,6vw,80px); position:relative; }
.p-hero-h1 { font-family:var(--serif); font-weight:300; font-size:clamp(44px,6.6vw,92px); line-height:1.0; letter-spacing:-0.03em; max-width:15ch; }
.p-hero-h1 em { font-style:italic; color:var(--accent); }
.hero-cta { display:flex; align-items:center; gap:22px; margin-top:34px; flex-wrap:wrap; }

/* full-bleed gallery strip */
.gallery-strip { margin-top: clamp(40px,5vw,64px); }
.strip { display:flex; gap:14px; overflow-x:auto; padding: 4px var(--gut) 18px; scroll-snap-type:x proximity; scrollbar-width:thin; }
.strip::-webkit-scrollbar{ height:8px; } .strip::-webkit-scrollbar-thumb{ background:var(--rule); border-radius:100px; }
.strip img { height: clamp(220px,28vw,330px); aspect-ratio:1; width:auto; object-fit:cover; border-radius:14px; border:1px solid var(--rule); scroll-snap-align:start; flex:none; }
.strip img.wide { aspect-ratio: 16/9; }

.section-tight { padding-block: clamp(52px,6.5vw,96px); }
.lead-2col { display:grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(28px,5vw,72px); align-items:center; }

/* mac window frame */
.macwin { border-radius:14px; overflow:hidden; border:1px solid var(--rule); box-shadow: 0 40px 90px -40px rgba(40,20,80,.4); background:var(--paper-2); }
.macbar { display:flex; align-items:center; gap:8px; padding:11px 14px; background:var(--paper-3); border-bottom:1px solid var(--rule); }
.macbar i { width:12px;height:12px;border-radius:100px;display:block; }
.macwin img { width:100%; display:block; }

/* layer models grid — compact glyph + name tiles that drive the detail panel */
.models { display:grid; grid-template-columns:repeat(6,1fr); gap:10px; margin-top:44px; }
.model { font:inherit; color:inherit; cursor:pointer; text-align:center;
  display:flex; flex-direction:column; align-items:center; justify-content:flex-start; gap:10px;
  border:1px solid var(--rule); border-radius:14px; padding:18px 12px; background:var(--paper);
  position:relative; transition:border-color .2s, transform .2s, background .2s; }
.model:hover { border-color:var(--accent); transform:translateY(-2px); }
.model .gico { width:28px; height:28px; color:var(--accent); }
.model-name { font-size:13px; font-weight:600; letter-spacing:-0.01em; line-height:1.2; }
.model[aria-pressed="true"] { border-color:var(--accent); background:color-mix(in oklch,var(--accent) 10%,var(--paper)); box-shadow: inset 0 0 0 1px var(--accent); }
.model .new { position:absolute; top:8px; right:8px; font-family:var(--mono); font-size:9px; letter-spacing:0.06em; text-transform:uppercase; color:var(--accent); border:1px solid color-mix(in oklch,var(--accent) 40%,transparent); border-radius:100px; padding:2px 6px; }

/* renderer detail panel — 1/3 text, 2/3 image */
.rdetail { display:grid; grid-template-columns:1fr 2fr; margin-top:16px;
  border:1px solid var(--rule); border-radius:16px; overflow:hidden; background:var(--paper); }
.rdetail-text { padding:clamp(22px,3vw,34px); align-self:center; color:var(--ink-soft); font-size:15px; line-height:1.62; }
.rdetail-text > :first-child { margin-top:0; }
.rdetail-text h3, .rdetail-text h4 { font-family:var(--serif); font-weight:500; color:var(--ink); margin:0 0 8px; }
.rdetail-text p { margin:0 0 10px; }
.rdetail-text strong { color:var(--ink); }
.rdetail-media { display:grid; background:var(--paper-2); border-left:1px solid var(--rule); }
.rdetail-media img { width:100%; height:100%; min-height:280px; object-fit:cover; display:block; }
.rdetail-media:empty, .rdetail-media:not(:has(img)) { min-height:280px; }

/* teaser single image (replaces the thumbnail grid when set) */
.teaser-img img { width:100%; aspect-ratio:1; object-fit:cover; border-radius:12px; border:1px solid var(--rule); display:block; }

/* feature trio */
.trio { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:40px; }
.feat .fh { font-family:var(--mono); font-size:12px; letter-spacing:0.06em; text-transform:uppercase; color:var(--accent); }
.feat h4 { font-family:var(--serif); font-weight:400; font-size:23px; margin-top:10px; }
.feat p { color:var(--ink-soft); font-size:15px; margin-top:10px; }

.compose-art { border-radius:16px; overflow:hidden; border:1px solid var(--rule); margin-top:48px; aspect-ratio:21/9; }
.compose-art img { width:100%; height:100%; object-fit:cover; }

/* export spec */
.exp-grid { display:grid; grid-template-columns: 1fr 1fr; gap: clamp(28px,4vw,56px); align-items:start; }
.spec-list { border-top:1px solid var(--rule); }
.spec-row { display:grid; grid-template-columns:34% 1fr; gap:16px; padding:14px 0; border-bottom:1px solid var(--rule); }
.spec-row dt { font-family:var(--mono); font-size:11.5px; letter-spacing:0.08em; text-transform:uppercase; color:var(--ink-mute); }
.spec-row dd { margin:0; font-size:15px; color:var(--ink); }

/* gallery teaser */
.teaser { border:1px dashed var(--rule); border-radius:18px; padding: clamp(28px,4vw,44px); display:grid; grid-template-columns:1.1fr 1fr; gap:36px; align-items:center; background:var(--paper-2); }
.teaser .thumbs { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.teaser .thumbs img { width:100%; aspect-ratio:1; object-fit:cover; border-radius:10px; border:1px solid var(--rule); }
.coming { font-family:var(--mono); font-size:11px; letter-spacing:0.1em; text-transform:uppercase; color:var(--accent); border:1px solid color-mix(in oklch,var(--accent) 40%,transparent); border-radius:100px; padding:5px 12px; display:inline-block; }

/* CTA band */
.cta { text-align:center; border-radius:24px; margin: 0 var(--gut); padding: clamp(48px,7vw,96px) 24px; position:relative; overflow:hidden;
   background: radial-gradient(120% 140% at 50% -20%, color-mix(in oklch,var(--violet) 26%,var(--paper)) 0%, var(--paper-2) 60%); border:1px solid var(--rule); }
.cta h2 { font-family:var(--serif); font-weight:300; font-size:clamp(32px,4.6vw,60px); letter-spacing:-0.025em; }
.cta h2 em { font-style:italic; color:var(--accent); }

.arrow-link { display:inline-flex; align-items:center; gap:8px; font-weight:600; font-size:15px; color:var(--accent); }
.arrow-link svg { width:16px;height:16px; transition:transform .2s ease; }
.arrow-link:hover svg { transform:translateX(4px); }

@media (max-width: 980px){ .models{grid-template-columns:repeat(4,1fr);} .lead-2col,.exp-grid,.teaser{grid-template-columns:1fr;} .trio{grid-template-columns:1fr;} }
@media (max-width: 760px){ .rdetail{grid-template-columns:1fr;} .rdetail-media{border-left:0; border-top:1px solid var(--rule);} .rdetail-media img{min-height:220px;} }
@media (max-width: 560px){ .models{grid-template-columns:repeat(3,1fr);} }