/* ===========================================================
       WLAI Academy theme — re-skinned 23 Jun 2026 to match rebrand
       Navy-anchored editorial look (#0F172A / #1e1b4b), serif headings,
       gem-logo purple/pink gradient kept as ACCENT only.
       =========================================================== */
    :root {
      /* brand structure (new) */
      --navy:#0F172A;                   /* primary brand: headings, primary buttons */
      --indigo:#1e1b4b;                 /* deeper sections / footer */
      --lavender:#e5ccfd;               /* soft secondary tint */

      /* gem-logo gradient family — ACCENT only now */
      --violet:#8b5cf6; --purple:#a855f7; --pink:#ec4899;
      --purple-deep:#7c3aed;            /* accent text / links */
      --soft-pink:#db2777;

      --bg:#ffffff;                     /* white sections */
      --bg-alt:#f7f6fb;                 /* very light neutral-lavender sections */
      --card:#ffffff;
      --code-bg:#f5f4f8;                /* light code area */
      --border:#e6e3ee;                 /* light border */

      --ink:#0f172a;                    /* navy headings */
      --ink-soft:#3a3a48;               /* body copy */
      --ink-faint:#6b6b7a;              /* captions / muted */

      --grad: linear-gradient(120deg, var(--violet), var(--purple) 45%, var(--pink));
      --glow: 0 8px 22px rgba(168,85,247,0.22);
      --shadow-navy: 0 8px 22px rgba(15,23,42,0.16);
      --radius:20px; --inner-radius:14px; --maxw:880px;
      --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
      --serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
    }
    * { box-sizing:border-box; }
    html { scroll-behavior:smooth; }
    body { margin:0; font-family:var(--font); color:var(--ink-soft); background:var(--bg); line-height:1.6; font-size:18px; -webkit-font-smoothing:antialiased; }
    a { color:var(--purple-deep); }
    .wrap { max-width:var(--maxw); margin:0 auto; padding:0 24px; }

    .grad-text { background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
    .btn { display:inline-flex; align-items:center; gap:8px; font-family:inherit; font-size:15px; font-weight:700; padding:14px 28px; border-radius:9999px; text-decoration:none; cursor:pointer; border:0; transition:transform .15s, box-shadow .15s; }
    .btn-primary { background:var(--navy); color:#fff; box-shadow:var(--shadow-navy); }
    .btn-primary:hover { transform:translateY(-1px); }
    .btn-ghost { background:#fff; color:var(--navy); border:1.5px solid var(--border); }
    .btn-ghost:hover { border-color:var(--navy); }

    header.nav { position:sticky; top:0; z-index:50; background:rgba(255,255,255,0.88); backdrop-filter:blur(10px); border-bottom:1px solid var(--border); }
    .nav-inner { display:flex; align-items:center; justify-content:space-between; height:64px; }
    .brand { display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--ink); font-weight:700; }
    .brand .mark { width:28px; height:28px; flex-shrink:0; }
    .nav-links { display:flex; gap:22px; }
    .nav-links a { color:var(--ink-faint); text-decoration:none; font-size:14px; font-weight:600; }
    .nav-links a:hover { color:var(--ink); }
    @media (max-width:760px) { .nav-links { display:none; } }

    .hero { background: radial-gradient(900px 420px at 78% -12%, rgba(124,58,237,0.10), transparent 60%), radial-gradient(700px 420px at 0% 0%, rgba(30,27,75,0.06), transparent 55%), var(--bg); padding:84px 0 72px; text-align:center; border-bottom:4px solid transparent; border-image:var(--grad) 1; }
    .eyebrow { display:inline-block; font-size:13px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; color:#fff; background:var(--grad); border-radius:9999px; padding:6px 16px; margin-bottom:24px; }
    .hero h1 { font-family:var(--serif); font-size:clamp(36px,6vw,64px); line-height:1.06; margin:0 0 18px; color:var(--ink); font-weight:700; letter-spacing:-0.5px; }
    .hero p.lead { font-size:clamp(18px,2.4vw,22px); color:var(--ink-soft); max-width:640px; margin:0 auto 32px; }
    .hero-cta { display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }

    section.block { padding:64px 0; border-bottom:1px solid var(--border); }
    section.block.alt { background:var(--bg-alt); }
    .kicker { font-size:13px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; color:var(--purple-deep); margin:0 0 10px; }
    h2.title { font-family:var(--serif); font-size:clamp(28px,4vw,40px); color:var(--ink); margin:0 0 18px; font-weight:700; letter-spacing:-0.3px; }
    h3 { font-family:var(--serif); color:var(--ink); font-size:21px; margin:28px 0 8px; font-weight:700; }
    p { margin:0 0 16px; }
    .muted { color:var(--ink-faint); }

    .about { display:flex; gap:28px; align-items:center; flex-wrap:wrap; }
    .about img { width:120px; height:120px; border-radius:9999px; object-fit:cover; border:2px solid var(--navy); flex-shrink:0; }
    .about .about-text { flex:1; min-width:260px; }

    .route-tag { display:inline-block; font-size:12px; font-weight:700; letter-spacing:1px; text-transform:uppercase; padding:5px 12px; border-radius:9999px; margin-bottom:14px; }
    .route-free { background:rgba(236,72,153,0.12); color:var(--soft-pink); }
    .route-deep { background:rgba(124,58,237,0.12); color:var(--purple-deep); }

    .step { display:flex; gap:16px; margin:22px 0; }
    .step-num { flex-shrink:0; width:34px; height:34px; border-radius:9999px; background:var(--grad); color:#fff; font-weight:800; display:flex; align-items:center; justify-content:center; font-size:15px; }
    .step-body { flex:1; }
    .step-body h4 { margin:4px 0 6px; color:var(--ink); font-size:17px; }

    /* prompt card */
    .prompt-card { background:var(--card); border:1px solid var(--border); border-radius:var(--inner-radius); margin:24px 0; overflow:hidden; box-shadow:0 1px 3px rgba(15,23,42,0.05); }
    .prompt-card-header { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:16px 20px; border-bottom:1px solid var(--border); }
    .prompt-card-title { font-size:16px; font-weight:700; color:var(--ink); }
    .prompt-card-subtitle { display:block; font-size:13px; color:var(--ink-faint); font-weight:500; margin-top:2px; }
    .prompt-card-pill { display:inline-flex; align-items:center; background:var(--grad); color:#fff; font-size:11px; font-weight:700; letter-spacing:1.2px; text-transform:uppercase; padding:6px 12px; border-radius:9999px; flex-shrink:0; }
    .prompt-card-body { padding:0; }
    .prompt-preview { position:relative; overflow:hidden; max-height:230px; transition:max-height .25s ease; }
    .prompt-card.is-expanded .prompt-preview { max-height:none; }
    .prompt-preview::after { content:""; position:absolute; left:0; right:0; bottom:0; height:70px; background:linear-gradient(transparent, var(--code-bg)); pointer-events:none; }
    .prompt-card.is-expanded .prompt-preview::after { display:none; }
    .prompt-card pre { margin:0; padding:20px 22px; white-space:pre-wrap; word-wrap:break-word; font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace; font-size:13.5px; line-height:1.6; color:var(--ink); background:var(--code-bg); }
    .prompt-actions { display:flex; gap:10px; padding:14px 20px; border-top:1px solid var(--border); }
    .prompt-btn { display:inline-flex; align-items:center; gap:8px; font-family:inherit; font-size:13px; font-weight:700; letter-spacing:.4px; padding:10px 20px; border-radius:9999px; cursor:pointer; border:1px solid transparent; line-height:1; transition:transform .15s; }
    .prompt-btn.copy { background:var(--grad); color:#fff; box-shadow:var(--glow); }
    .prompt-btn.copy:hover { transform:translateY(-1px); }
    .prompt-btn.expand { background:#f3f0fb; color:var(--purple-deep); border-color:var(--border); }

    .placeholder { border:1px dashed var(--purple); border-radius:var(--inner-radius); padding:20px 22px; margin:20px 0; color:var(--ink-soft); background:rgba(168,85,247,0.05); }
    .placeholder strong { color:var(--soft-pink); }

    footer { background:var(--indigo); border-top:1px solid var(--indigo); padding:48px 0; color:rgba(255,255,255,0.66); font-size:15px; }
    footer .foot-grad { font-family:var(--serif); font-weight:700; font-size:18px; color:#fff; }
    footer a { color:#fff; }

    /* sell block + honest note */
    .sell-lead { color:var(--ink); }
    .sell-points { list-style:none; padding:0; margin:6px 0 0; }
    .sell-points li { padding:12px 0 12px 28px; position:relative; color:var(--ink-soft); border-top:1px solid var(--border); }
    .sell-points li::before { content:"\25C6"; position:absolute; left:0; top:12px; color:var(--purple); }
    .sell-points strong { color:var(--ink); }
    .honest-note { border:1px solid var(--border); background:#faf9ff; border-radius:var(--inner-radius); padding:16px 20px; margin:18px 0 26px; color:var(--ink-soft); font-size:15px; }
    .honest-note strong { color:var(--soft-pink); }

    /* six-agent flow diagram (light) */
    .team-flow { max-width:720px; margin:12px auto 26px; }
    .team-flow .tf-cmd-wrap { text-align:center; }
    .team-flow .tf-cmd { display:inline-block; background:var(--navy); color:#fff; font-family:ui-monospace,Menlo,monospace; padding:9px 18px; border-radius:9px; font-size:15px; font-weight:600; box-shadow:var(--shadow-navy); }
    .team-flow .tf-node { background:#fff; border:1px solid var(--border); border-radius:12px; padding:13px 16px; text-align:center; color:var(--ink); box-shadow:0 1px 3px rgba(15,23,42,0.05); }
    .team-flow .tf-node.tf-wide { max-width:460px; margin:0 auto; }
    .team-flow .tf-row { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
    .team-flow .tf-conn { width:2px; height:20px; background:linear-gradient(var(--purple),var(--pink)); margin:9px auto; }
    .team-flow .tf-title { font-weight:700; color:var(--ink); }
    .team-flow .tf-cap { font-size:12.5px; color:var(--ink-faint); display:block; margin-top:3px; }
    .team-flow .tf-out-label { text-align:center; font-size:13px; color:var(--ink-faint); margin:4px auto 16px; }
    .team-flow .tf-out-card { background:#faf9ff; border:1px solid var(--border); border-radius:12px; padding:14px 16px; text-align:center; flex:1 1 175px; }
    .team-flow .tf-agents-group { border:1.5px solid var(--purple); border-radius:16px; padding:16px 16px 8px; margin:0 auto; background:rgba(168,85,247,0.05); }
    .team-flow .tf-agents-label { display:inline-block; background:var(--grad); color:#fff; font-size:12px; font-weight:600; letter-spacing:.3px; padding:5px 12px; border-radius:20px; margin-bottom:14px; }
    .team-flow .tf-agent { background:#f3eefb; border:1px solid var(--border); border-radius:12px; padding:13px 12px; text-align:center; display:flex; flex-direction:column; align-items:center; gap:6px; flex:1 1 165px; }
    .team-flow .tf-agent .tf-title { color:var(--ink); font-size:14px; }
    .team-flow .tf-agent-icon { width:19px; height:19px; display:block; }

/* who-I-am credibility section */
.cred { display:flex; gap:32px; align-items:center; flex-wrap:wrap; }
.cred .about-text { flex:1; min-width:280px; }
.photo-slot { width:170px; height:170px; border-radius:9999px; flex-shrink:0; display:flex; align-items:center; justify-content:center; text-align:center; background:var(--bg-alt); border:2px dashed var(--purple); color:var(--ink-faint); font-size:13px; line-height:1.4; padding:12px; }
.photo-slot.has-photo { border:3px solid #fff; background:none; box-shadow:0 6px 20px rgba(15,23,42,0.14); padding:0; overflow:hidden; }
.photo-slot img { width:100%; height:100%; object-fit:cover; border-radius:9999px; }
.logo-row { display:flex; flex-wrap:wrap; gap:14px; align-items:center; margin:14px 0 0; }
.logo-chip { display:inline-flex; align-items:center; justify-content:center; min-width:170px; height:90px; padding:0 26px; background:#fff; border:1px solid var(--border); border-radius:14px; color:var(--ink); font-weight:700; font-size:15px; box-shadow:0 1px 3px rgba(15,23,42,0.05); }
.logo-chip.is-placeholder { border-style:dashed; color:var(--ink-faint); font-weight:600; }
.logo-chip img { max-height:56px; max-width:150px; object-fit:contain; display:block; }

/* journey page: learning chips, build cards, automation framework */
.chip-grid { display:flex; flex-wrap:wrap; gap:10px; margin:18px 0 8px; }
.chip { background:#f3eefb; border:1px solid var(--border); color:var(--ink); font-size:14px; font-weight:600; padding:8px 14px; border-radius:9999px; }
.build-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:14px; margin:18px 0 8px; }
.build-card { background:#fff; border:1px solid var(--border); border-radius:14px; padding:16px 18px; box-shadow:0 1px 3px rgba(15,23,42,0.05); }
.build-card h4 { margin:0 0 4px; color:var(--ink); font-size:16px; }
.build-card p { margin:0; color:var(--ink-faint); font-size:14px; }
.framework { background:#faf9ff; border:1px solid var(--border); border-radius:16px; padding:22px 24px; margin:18px 0; }
.framework .q { display:flex; gap:14px; padding:12px 0; border-top:1px solid var(--border); }
.framework .q:first-of-type { border-top:0; }
.framework .qn { flex-shrink:0; width:30px; height:30px; border-radius:9999px; background:var(--grad); color:#fff; font-weight:800; display:flex; align-items:center; justify-content:center; font-size:14px; }
.framework .q strong { color:var(--ink); }
.framework .qbody { color:var(--ink-soft); }
.framework .takeaway { margin:14px 0 0; font-weight:600; color:var(--ink); }

/* index page: framed example-brief preview */
.brief-showcase { text-align:center; margin-top:10px; }
.brief-window { border:1px solid var(--border); border-radius:16px; overflow:hidden; box-shadow:var(--shadow-navy); background:#fff; margin-bottom:22px; }
.brief-bar { display:flex; gap:7px; padding:11px 15px; background:#f1eef8; border-bottom:1px solid var(--border); }
.brief-bar span { width:11px; height:11px; border-radius:50%; background:#cfc8e0; }
.brief-screen { height:430px; overflow:hidden; position:relative; }
.brief-screen iframe { width:200%; height:860px; border:0; transform:scale(.5); transform-origin:top left; pointer-events:none; }
.brief-screen .brief-fade { position:absolute; left:0; right:0; bottom:0; height:90px; background:linear-gradient(to bottom, rgba(255,255,255,0), #ffffff); pointer-events:none; }
@media (max-width:680px) {
  .brief-screen { height:300px; }
}

/* index page: setup worked example */
.example-fill { margin-top:38px; }
.example-head { font-family:var(--serif); color:var(--ink); font-size:23px; font-weight:700; margin:0 0 16px; }
.example-card { background:#faf9ff; border:1px solid var(--border); border-radius:16px; padding:22px 24px; }
.example-who { display:flex; align-items:center; gap:14px; }
.example-avatar { flex:none; width:46px; height:46px; border-radius:9999px; background:var(--grad); color:#fff; font-weight:800; font-size:15px; display:flex; align-items:center; justify-content:center; letter-spacing:.5px; }
.example-who .nm { font-weight:700; color:var(--ink); font-size:17px; line-height:1.3; }
.example-who .nm span { display:block; font-weight:500; color:var(--ink-faint); font-size:14px; }
.example-fields .ef { padding-top:16px; margin-top:16px; border-top:1px solid var(--border); }
.example-fields h4 { color:var(--purple-deep); font-size:13px; text-transform:uppercase; letter-spacing:.5px; margin:0 0 6px; }
.example-fields p { margin:0; color:var(--ink-soft); font-size:16px; }
.example-note { color:var(--ink-faint); font-size:14px; margin:14px 0 0; }

/* index hub: session table of contents */
.hub-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:20px; margin-top:10px; }
.hub-card { display:flex; flex-direction:column; background:#fff; border:1px solid var(--border); border-radius:18px; padding:28px; box-shadow:0 1px 3px rgba(15,23,42,0.05); transition:border-color .15s, box-shadow .15s; }
.hub-card:hover { border-color:var(--purple); box-shadow:var(--glow); }
.hub-card .hub-num { font-size:13px; font-weight:700; letter-spacing:.6px; text-transform:uppercase; color:var(--purple-deep); margin-bottom:12px; }
.hub-card h3 { font-family:var(--serif); font-size:24px; color:var(--ink); margin:0 0 10px; line-height:1.15; }
.hub-card p { color:var(--ink-soft); font-size:16px; margin:0 0 22px; flex:1; }
.hub-card .btn { align-self:flex-start; }
.hub-soon { margin-top:24px; color:var(--ink-faint); font-size:15px; }