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

body[data-world="lexolotl"]{ --accent: var(--teal); --accent-ink: var(--teal-ink); }
.section-tight { padding-block: clamp(52px,6.5vw,96px); }

.lx-hero { position:relative; overflow:hidden;
   background: radial-gradient(90% 80% at 84% -10%, color-mix(in oklch,var(--teal) 22%,var(--paper)) 0%, var(--paper) 56%); }
.lx-hero-grid { display:grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(28px,4vw,60px); align-items:center; padding-block: clamp(40px,5vw,72px); }
.lx-h1 { font-family:var(--serif); font-weight:300; font-size:clamp(42px,6vw,84px); line-height:1.02; letter-spacing:-0.03em; max-width:13ch; }
.lx-h1 em { font-style:italic; color:var(--accent); }
.hero-cta { display:flex; align-items:center; gap:22px; margin-top:32px; flex-wrap:wrap; }

.hero-art { position:relative; display:grid; place-items:center; min-height: 360px; }
.hero-art .appicon { width: clamp(160px,22vw,240px); border-radius:23%; filter: drop-shadow(0 26px 56px rgba(40,90,110,.42)); }
.float-card { position:absolute; background:var(--paper); border:1px solid var(--rule); border-radius:16px; padding:16px 18px; box-shadow:0 22px 48px -18px rgba(30,50,60,.34); }
.fc-1 { top: 4%; left: -2%; width: 200px; }
.fc-2 { bottom: 4%; right: -2%; width: 210px; }
.fc-q { font-family:var(--mono); font-size:11px; color:var(--teal-ink); letter-spacing:0.05em; text-transform:uppercase; }
.fc-a { font-family:var(--serif); font-size:26px; margin-top:6px; }
.fc-rate { display:flex; gap:5px; margin-top:14px; }
.fc-rate span { flex:1; height:8px; border-radius:100px; background:var(--paper-3); }
.ring-row { display:flex; align-items:center; gap:14px; }
.ring-row .lbl { font-size:13px; color:var(--ink-soft); }

/* hero — real app screenshot variant (replaces the icon + float-card mock) */
.hero-art.has-shot { min-height:0; }
.lx-hero-shot { width:100%; max-width:560px; border-radius:18px; border:1px solid var(--rule);
   box-shadow:0 30px 70px -34px rgba(30,50,60,.4); display:block; }

/* drill — real app screenshot variant (replaces the flip-card mock) */
.drill-shot img { width:100%; border-radius:20px; border:1px solid var(--rule);
   box-shadow:0 30px 70px -34px rgba(30,50,60,.4); display:block; }

/* "Everywhere you are" — one wide 3:2 device collage */
.lx-everywhere { margin: 48px auto 0; max-width: 920px; }
.lx-everywhere img { width:100%; aspect-ratio:3/2; object-fit:cover; border-radius:18px;
   border:1px solid var(--rule); box-shadow:0 30px 70px -34px rgba(30,50,60,.34); display:block; }
.lx-everywhere-ph { aspect-ratio:3/2; border:1px dashed color-mix(in oklch,var(--teal) 40%,var(--rule));
   border-radius:18px; display:grid; place-items:center;
   background: radial-gradient(120% 120% at 30% 10%, color-mix(in oklch,var(--teal) 14%,var(--paper)) 0%, var(--paper-2) 70%); }
.lx-everywhere-ph span { font-family:var(--mono); font-size:12px; letter-spacing:0.08em;
   text-transform:uppercase; color:var(--ink-mute); }

/* "On-device intelligence" — settable square screenshot */
.lx-intel-img { margin-top:26px; max-width:360px; }
.lx-intel-img img { width:100%; aspect-ratio:1; object-fit:cover; border-radius:16px;
   border:1px solid var(--rule); box-shadow:0 24px 54px -28px rgba(30,50,60,.34); display:block; }
.lx-intel-ph { aspect-ratio:1; border:1px dashed color-mix(in oklch,var(--teal) 40%,var(--rule));
   border-radius:16px; display:grid; place-items:center;
   background: radial-gradient(120% 120% at 30% 10%, color-mix(in oklch,var(--teal) 14%,var(--paper)) 0%, var(--paper-2) 70%); }
.lx-intel-ph span { font-family:var(--mono); font-size:11.5px; letter-spacing:0.08em;
   text-transform:uppercase; color:var(--ink-mute); }

/* drill mock */
.drill { display:grid; grid-template-columns: 1fr 1fr; gap: clamp(28px,4vw,56px); align-items:center; }
.flipcard { background:var(--paper); border:1px solid var(--rule); border-radius:20px; padding: clamp(26px,3vw,40px); box-shadow:0 30px 70px -34px rgba(30,50,60,.4); }
.flip-top { display:flex; justify-content:space-between; align-items:center; font-family:var(--mono); font-size:11.5px; color:var(--ink-mute); letter-spacing:0.04em; }
.flip-prompt { font-family:var(--mono); font-size:13px; color:var(--ink-mute); margin-top:26px; }
.flip-answer { font-family:var(--serif); font-size:clamp(34px,4vw,52px); margin-top:6px; letter-spacing:-0.01em; }
.flip-speak { margin-top:18px; display:inline-flex; align-items:center; gap:8px; font-size:13px; color:var(--teal-ink); }
.rate { display:grid; grid-template-columns:repeat(5,1fr); gap:8px; margin-top:30px; }
.rate button { font-family:var(--sans); font-weight:600; font-size:12px; padding:10px 4px; border-radius:10px; border:1px solid var(--rule); background:var(--paper); color:var(--ink); cursor:pointer; display:flex; flex-direction:column; gap:4px; align-items:center; transition: transform .12s, border-color .15s; }
.rate button:hover { transform:translateY(-2px); }
.rate button b { font-family:var(--mono); font-size:15px; }
.rate .r1{color:#c4503e} .rate .r2{color:#cc7a33} .rate .r3{color:var(--ink-mute)} .rate .r4{color:#3f8f5a} .rate .r5{color:#2f8050}
.progress-dots { display:flex; gap:5px; margin-top:24px; }
.progress-dots span { width:18px;height:6px;border-radius:100px;background:var(--paper-3); }
.progress-dots span.d1{background:#c4503e}.progress-dots span.d4{background:#3f8f5a}.progress-dots span.d5{background:#2f8050}.progress-dots span.d3{background:var(--ink-faint)}

.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; }

.lead-2col { display:grid; grid-template-columns: 1fr 1fr; gap: clamp(28px,5vw,64px); align-items:center; }
.pill-list { display:flex; flex-direction:column; gap:12px; margin-top:8px; }
.pill-list .pl { display:flex; gap:13px; align-items:flex-start; }
.pill-list .pl svg { width:20px;height:20px;color:var(--accent);flex:none;margin-top:2px; }
.pill-list .pl b { font-weight:600; }
.pill-list .pl span { color:var(--ink-soft); font-size:15px; }

.spec-list { border-top:1px solid var(--rule); }
.spec-row { display:grid; grid-template-columns:36% 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); }

.teaser { border:1px dashed var(--rule); border-radius:18px; padding: clamp(28px,4vw,44px); display:grid; grid-template-columns:1.1fr 0.9fr; gap:36px; align-items:center; background:var(--paper-2); }
.teaser .decks { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }
.deckchip { border:1px solid var(--rule); border-radius:12px; padding:14px; background:var(--paper); }
.deckchip .dt { font-family:var(--mono); font-size:10.5px; letter-spacing:0.06em; text-transform:uppercase; color:var(--teal-ink); }
.deckchip .dn { font-family:var(--serif); font-size:18px; margin-top:6px; }
.deckchip .dc { font-size:12.5px; color:var(--ink-mute); margin-top:4px; }
.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 { 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(--teal) 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){ .drill,.lead-2col,.teaser{grid-template-columns:1fr;} .trio{grid-template-columns:1fr;} }
@media (max-width: 820px){ .lx-hero-grid{grid-template-columns:1fr;} .hero-art{margin-top:24px; min-height:320px;} }