:root{
    --ink:#f4f7ff;
    --ink-soft:#c5d4f5;
    --ink-muted:#8fa8d8;
    --paper:#ffffff;
    --paper-2:#eef3ff;
    --surface:#f8faff;
    --line:#2a3f7a;
    --line-soft:rgba(255,255,255,.14);
    --accent:#4fc3f7;
    --accent-2:#2b7fd4;
    --accent-soft:rgba(79,195,247,.2);
    --gold:#ffc938;
    --gold-dark:#d4920a;
    --copied:#3dd68c;
    --danger:#ff6b5a;
    --radius:16px;
    --radius-lg:22px;
    --shadow-panel:0 4px 0 #152347, 0 10px 28px rgba(8,14,40,.45);
    --shadow-soft:0 2px 0 #152347, 0 6px 16px rgba(8,14,40,.28);
    --shadow-glow:0 0 0 3px rgba(79,195,247,.35);
    --grad-sky:linear-gradient(180deg, #5eb8ff 0%, #2b7fd4 55%, #1e5fad 100%);
    --grad-gold:linear-gradient(180deg, #ffe566 0%, #ffc938 50%, #e8a820 100%);
    --grad-bg:linear-gradient(165deg, #141f48 0%, #243b8a 42%, #1a2d6b 100%);
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth}
  body{
    background:var(--grad-bg);
    background-attachment:fixed;
    color:var(--ink);
    font-family:"Nunito","Inter","Helvetica Neue",Arial,sans-serif;
    -webkit-font-smoothing:antialiased;line-height:1.5;
    min-height:100vh;
  }
  body::before{
    content:"";
    position:fixed;inset:0;pointer-events:none;z-index:0;
    background-image:
      radial-gradient(rgba(255,255,255,.07) 1px, transparent 1px),
      radial-gradient(circle at 20% 15%, rgba(79,195,247,.18), transparent 42%),
      radial-gradient(circle at 85% 10%, rgba(255,201,56,.12), transparent 35%);
    background-size:28px 28px, auto, auto;
    background-position:0 0, 0 0, 0 0;
  }
  ::selection{background:var(--gold);color:#1a2550}
  .wrap{max-width:1180px;margin:0 auto;padding:0 24px}
  main.wrap, header, footer{position:relative;z-index:1}

  header{
    position:sticky;top:0;z-index:50;
    background:rgba(18,28,62,.88);
    backdrop-filter:saturate(160%) blur(14px);
    border-bottom:3px solid #0f1a3d;
    box-shadow:0 4px 20px rgba(0,0,0,.25);
  }
  .bar{display:flex;align-items:center;justify-content:space-between;height:68px}
  .logo{
    display:flex;align-items:center;gap:12px;
    font-weight:900;font-size:22px;letter-spacing:-.02em;
    color:var(--ink);text-shadow:0 2px 0 #152347;
  }
  .logo .mark{
    width:36px;height:36px;border-radius:12px;
    background:var(--grad-gold);
    border:2px solid #152347;
    box-shadow:0 3px 0 #152347;
    display:grid;place-items:center;color:#1a2550;font-size:18px;font-weight:900;
    transform:rotate(-6deg);
  }
  .nav{display:flex;gap:10px;font-size:14px}
  .nav a{
    color:var(--ink-soft);text-decoration:none;transition:.15s;
    padding:8px 16px;border-radius:999px;font-weight:800;
    border:2px solid transparent;
  }
  .nav a:hover{
    color:var(--ink);background:rgba(255,255,255,.08);
    border-color:rgba(255,255,255,.12);
  }
  @media(max-width:720px){.nav{display:none}}

  /* ---------- Hero / input ---------- */
  .hero{padding:40px 0 20px}
  .eyebrow{
    display:inline-block;
    font-size:11px;letter-spacing:.14em;text-transform:uppercase;
    color:#1a2550;font-weight:900;margin-bottom:14px;
    background:var(--grad-gold);
    padding:6px 14px;border-radius:999px;
    border:2px solid #152347;
    box-shadow:0 2px 0 #152347;
  }
  h1{
    font-size:clamp(34px,5.5vw,56px);line-height:1.05;
    letter-spacing:-.03em;font-weight:900;max-width:18ch;
    text-shadow:0 3px 0 #152347, 0 8px 24px rgba(0,0,0,.35);
  }
  h1 em{font-style:normal;color:var(--gold)}
  .sub{margin-top:14px;font-size:17px;color:var(--ink-soft);max-width:50ch;font-weight:600}

  .modes{
    display:inline-flex;background:rgba(15,26,58,.65);
    border:2px solid #0f1a3d;border-radius:999px;padding:5px;margin-top:22px;gap:5px;
    box-shadow:inset 0 2px 6px rgba(0,0,0,.25);
  }
  .modes button{
    border:2px solid transparent;background:transparent;color:var(--ink-soft);
    padding:10px 20px;border-radius:999px;font-size:14px;font-weight:800;cursor:pointer;
    font-family:inherit;transition:.15s;
  }
  .modes button.on{
    background:var(--grad-sky);color:#fff;
    border-color:#152347;box-shadow:0 2px 0 #152347;
  }

  .inputZone{margin-top:18px;position:relative}
  .field{
    width:100%;font-size:26px;font-weight:700;padding:20px 120px 20px 20px;
    border:3px solid #152347;border-radius:var(--radius-lg);
    background:var(--paper);color:#1a2d5c;
    box-shadow:var(--shadow-panel);
    transition:border-color .15s, box-shadow .15s;font-family:inherit;
  }
  .field:focus{outline:none;border-color:var(--accent-2);box-shadow:var(--shadow-panel), var(--shadow-glow)}
  .field::placeholder{color:#8fa0c8;font-weight:600}
  .clear{
    position:absolute;right:14px;top:50%;transform:translateY(-50%);
    border:2px solid #152347;background:var(--paper-2);color:#3d5088;
    height:42px;padding:0 16px;border-radius:12px;cursor:pointer;
    font-size:13px;font-weight:800;transition:.15s;
    box-shadow:0 2px 0 #152347;
  }
  .clear:hover{background:#e2ebff}

  @media(max-width:560px){
    html,body{overflow-x:hidden;max-width:100%}
    .wrap{padding:0 16px;max-width:100%}
    .hero,.grid,.inputZone{max-width:100%;min-width:0}
    .modes{display:flex;flex-wrap:wrap;width:100%;max-width:100%}
    .modes button{font-size:12px;padding:8px 12px;flex:1 1 auto;min-width:0;text-align:center}
    .field{font-size:18px;padding:16px 92px 16px 16px;min-width:0}
    .clear{height:38px;padding:0 12px;font-size:12px;right:10px}
  }

  .controls{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px;align-items:center}
  .count{font-size:13px;color:var(--ink-muted);font-weight:700}
  .chip{
    border:2px solid #152347;background:rgba(255,255,255,.92);color:#3d5088;
    padding:8px 16px;border-radius:999px;font-size:13px;font-weight:800;cursor:pointer;transition:.15s;
    box-shadow:0 2px 0 #152347;
  }
  .chip:hover{border-color:var(--accent-2);color:var(--accent-2)}
  .chip.on{background:var(--grad-sky);border-color:#152347;color:#fff}

  /* Light tool panels: dark text (page body uses light ink on blue bg) */
  .grid,.builder,.results,.compat,.assembled,.letterRow,.flairRow,.flairSection{color:#1a2d5c}

  .grid{display:grid;grid-template-columns:1fr 300px;gap:24px;padding:24px 0 48px;align-items:start}
  @media(max-width:940px){.grid{grid-template-columns:1fr}}

  /* styles list (mode A) */
  .results{display:flex;flex-direction:column;gap:12px}
  .card{
    background:linear-gradient(180deg,#fff 0%,#f3f7ff 100%);
    border:2px solid #152347;border-radius:var(--radius);
    padding:16px 18px;display:flex;align-items:center;gap:16px;
    transition:transform .1s;cursor:pointer;position:relative;
    box-shadow:var(--shadow-soft);
  }
  .card:hover{transform:translateY(-2px)}
  .card:active{transform:translateY(1px);box-shadow:0 1px 0 #152347}
  .card .out{flex:1;font-size:21px;line-height:1.35;word-break:break-word;color:#1a2d5c;min-width:0;font-weight:700}
  .card .name{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:#7a8fc4;font-weight:800;flex-shrink:0;width:104px}
  @media(max-width:560px){.card{flex-direction:column;align-items:flex-start;gap:8px}.card .name{width:auto}}
  .copybtn{
    flex-shrink:0;border:2px solid #152347;background:var(--paper-2);color:#3d5088;
    width:44px;height:44px;border-radius:12px;display:grid;place-items:center;cursor:pointer;transition:.15s;
    box-shadow:0 2px 0 #152347;
  }
  .card:hover .copybtn{background:var(--grad-sky);color:#fff;border-color:#152347}
  .copybtn svg{width:18px;height:18px}
  .card.copied{border-color:var(--copied);box-shadow:var(--shadow-soft), 0 0 0 2px rgba(61,214,140,.4)}
  .card.copied .copybtn{background:var(--copied);border-color:#152347;color:#fff}

  /* ---------- Per-letter builder (mode B) ---------- */
  .builder{display:flex;flex-direction:column;gap:0}
  .assembled{
    background:linear-gradient(180deg,#fff 0%,#eef4ff 100%);
    border:3px solid #152347;border-radius:var(--radius-lg);
    padding:18px 20px;display:flex;align-items:center;gap:16px;
    box-shadow:var(--shadow-panel), 0 0 0 3px rgba(255,201,56,.25);
    margin-bottom:10px;position:sticky;top:84px;z-index:10;
  }
  .assembled .lbl{
    font-size:11px;letter-spacing:.08em;text-transform:uppercase;
    color:#1a2550;font-weight:900;flex-shrink:0;
    background:var(--grad-gold);padding:5px 10px;border-radius:8px;border:2px solid #152347;
  }
  .assembled .res{flex:1;font-size:26px;word-break:break-word;min-width:0;color:#1a2d5c;font-weight:800}
  .assembled .res .ph{color:#a8b8d8}
  .bigcopy{
    flex-shrink:0;border:2px solid #152347;background:var(--grad-gold);color:#1a2550;
    height:48px;padding:0 22px;border-radius:14px;font-size:14px;font-weight:900;cursor:pointer;
    display:flex;align-items:center;gap:8px;transition:.15s;font-family:inherit;
    box-shadow:0 3px 0 #152347;
  }
  .bigcopy:hover{filter:brightness(1.05);transform:translateY(-1px)}
  .bigcopy:active{transform:translateY(2px);box-shadow:0 1px 0 #152347}
  .bigcopy.copied{background:linear-gradient(180deg,#6ef0b8,#3dd68c);color:#0d3d28}
  .bigcopy svg{width:17px;height:17px}
  @media(max-width:560px){.assembled{flex-direction:column;align-items:stretch}.bigcopy{justify-content:center}}

  /* ---------- Compatibility row ---------- */
  .compat{
    background:linear-gradient(180deg,#fff 0%,#f3f7ff 100%);
    border:2px solid #152347;border-radius:var(--radius);
    padding:14px 16px;margin-bottom:12px;display:flex;align-items:center;gap:12px;flex-wrap:wrap;
    box-shadow:var(--shadow-soft);
  }
  .compatLbl{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:#7a8fc4;font-weight:900;flex-shrink:0}
  .compatChips{display:flex;gap:7px;flex-wrap:wrap}
  .compatChip{
    display:inline-flex;align-items:center;gap:6px;border:2px solid #152347;
    background:#fff;border-radius:999px;padding:6px 13px;font-size:13px;font-weight:800;
    cursor:pointer;transition:.12s;font-family:inherit;color:#3d5088;
    box-shadow:0 2px 0 #152347;
  }
  .compatChip .ci{width:18px;height:18px;border-radius:50%;display:grid;place-items:center;font-size:10px;font-weight:900;color:#fff;flex-shrink:0;border:2px solid #152347}
  .compatChip.good{border-color:#152347;background:#e8faf2;color:#0d6b45}
  .compatChip.good .ci{background:var(--copied)}
  .compatChip.warn{border-color:#152347;background:#fff8e6;color:#8a5f00}
  .compatChip.warn .ci{background:var(--gold)}
  .compatChip.bad{border-color:#152347;background:#fff0ee;color:#a32e1f}
  .compatChip.bad .ci{background:var(--danger)}
  .compatChip:hover{transform:translateY(-1px)}
  .compatDetail{flex-basis:100%;font-size:13px;color:#4a5f94;background:#eef3ff;border-radius:10px;padding:10px 12px;margin-top:4px;border:2px solid #c8d8f5;font-weight:600}
  .compatDetail b{color:#1a2d5c}
  .issueLine{margin-top:4px}
  .issueLine:first-of-type{margin-top:6px}
  .compatNote{flex-basis:100%;font-size:11.5px;color:#7a8fc4;margin-top:4px;line-height:1.4;font-weight:700}

  .flairRow{
    background:linear-gradient(180deg,#fff,#f0f5ff);
    border:2px solid #152347;border-radius:var(--radius);margin-bottom:12px;padding:12px 16px;
    display:flex;align-items:center;gap:14px;box-shadow:var(--shadow-soft);
  }
  .fr-glyph{background:#fff!important;font-size:24px;color:#1a2d5c!important}
  .frRemove{
    margin-left:auto;border:2px solid #152347;background:#fff;color:#3d5088;
    padding:7px 13px;border-radius:10px;font-size:13px;font-weight:800;cursor:pointer;
    transition:.15s;font-family:inherit;flex-shrink:0;box-shadow:0 2px 0 #152347;
  }
  .frRemove:hover{border-color:var(--danger);color:var(--danger)}

  .builderHint{font-size:13px;color:var(--ink-soft);margin:14px 2px 16px;font-weight:700}
  .builderHint b{color:var(--ink)}

  .letterRow{
    background:linear-gradient(180deg,#fff 0%,#f5f8ff 100%);
    border:2px solid #152347;border-radius:var(--radius);
    margin-bottom:12px;overflow:hidden;box-shadow:var(--shadow-soft);
  }
  .letterHead{
    display:flex;align-items:center;gap:14px;padding:12px 16px;
    border-bottom:2px solid #d8e4ff;background:linear-gradient(180deg,#eef3ff,#e4edff);
  }
  .letterHead .glyph{
    width:46px;height:46px;border-radius:12px;background:#fff;border:2px solid #152347;
    display:grid;place-items:center;font-size:24px;flex-shrink:0;color:#1a2d5c;
    box-shadow:0 2px 0 #152347;
  }
  .letterHead .meta{flex:1;min-width:0}
  .letterHead .orig{font-size:12px;color:#7a8fc4;font-weight:800;letter-spacing:.05em;text-transform:uppercase}
  .letterHead .cur{font-size:15px;font-weight:800;margin-top:1px;color:#1a2d5c}
  .letterHead .nav-mini{display:flex;gap:6px}
  .miniBtn{
    border:2px solid #152347;background:#fff;color:#3d5088;
    width:36px;height:36px;border-radius:10px;cursor:pointer;font-size:16px;
    display:grid;place-items:center;transition:.15s;font-weight:900;box-shadow:0 2px 0 #152347;
  }
  .miniBtn:hover{background:var(--grad-sky);color:#fff}
  .options{display:flex;flex-wrap:wrap;gap:8px;padding:14px 16px}
  .opt{
    border:2px solid #152347;background:#fff;border-radius:12px;
    min-width:48px;height:48px;padding:0 12px;display:grid;place-items:center;
    font-size:22px;cursor:pointer;transition:.12s;line-height:1;box-shadow:0 2px 0 #152347;
    color:#1a2d5c;
  }
  .opt:hover{background:var(--grad-sky);color:#fff;border-color:#152347}
  .opt.sel{background:var(--grad-sky);border-color:#152347;color:#fff;box-shadow:0 2px 0 #152347, var(--shadow-glow)}
  .builderEmpty{
    background:rgba(255,255,255,.9);border:2px dashed #5a7bc4;border-radius:var(--radius);
    padding:40px 20px;text-align:center;color:#5a7bc4;font-size:15px;font-weight:700;
  }

  .quickApply{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}
  .qa{
    border:2px solid #152347;background:#fff;color:#3d5088;
    padding:8px 14px;border-radius:999px;font-size:13px;font-weight:800;cursor:pointer;transition:.15s;
    box-shadow:0 2px 0 #152347;
  }
  .qa:hover{background:var(--grad-sky);color:#fff;border-color:#152347}
  .qa .pv{font-size:15px;margin-right:6px}

  /* ---------- Flair section ---------- */
  .flairSection{
    background:linear-gradient(180deg,#fff 0%,#f3f7ff 100%);
    border:2px solid #152347;border-radius:var(--radius-lg);
    padding:18px;margin-top:6px;box-shadow:var(--shadow-panel);
  }
  .flairHead{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:14px}
  .flairTitle{font-size:17px;font-weight:900;letter-spacing:-.01em;color:#1a2d5c}
  .flairSub{font-size:13px;color:#6a80b8;margin-top:2px;font-weight:700}
  .flairClear{
    border:2px solid #152347;background:#fff;color:#3d5088;
    padding:8px 14px;border-radius:10px;font-size:13px;font-weight:800;cursor:pointer;
    transition:.15s;font-family:inherit;flex-shrink:0;box-shadow:0 2px 0 #152347;
  }
  .flairClear:hover{border-color:var(--accent-2);color:var(--accent-2)}
  .flairClear.isOff{opacity:.4;cursor:default}
  .flairClear.isOff:hover{border-color:#152347;color:#3d5088}

  .flairTabs{
    display:inline-flex;background:#e4edff;border:2px solid #152347;
    border-radius:999px;padding:4px;gap:4px;margin-bottom:14px;
  }
  .ftab{
    border:2px solid transparent;background:transparent;color:#5a70a8;
    padding:8px 18px;border-radius:999px;font-size:13px;font-weight:800;cursor:pointer;
    font-family:inherit;transition:.15s;
  }
  .ftab.on{background:var(--grad-sky);color:#fff;border-color:#152347;box-shadow:0 2px 0 #152347}

  .flairGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:8px}
  .flairTile{
    display:flex;flex-direction:column;align-items:flex-start;gap:3px;
    border:2px solid #152347;background:#fff;border-radius:12px;padding:11px 13px;
    cursor:pointer;transition:.12s;text-align:left;font-family:inherit;box-shadow:0 2px 0 #152347;
  }
  .flairTile:hover{background:var(--grad-sky);color:#fff;border-color:#152347}
  .flairTile:hover .ft-glyph,.flairTile:hover .ft-name{color:#fff}
  .flairTile.sel{border-color:#152347;background:var(--grad-gold);box-shadow:0 2px 0 #152347}
  .flairTile.sel .ft-glyph,.flairTile.sel .ft-name{color:#1a2550}
  .ft-glyph{font-size:17px;color:#1a2d5c;line-height:1.2;word-break:break-all;font-weight:800}
  .ft-name{font-size:11px;color:#7a8fc4;font-weight:800;letter-spacing:.04em;text-transform:uppercase}

  .flairNote{font-size:13px;color:#6a80b8;margin-bottom:12px;font-weight:700}
  .emojiSide{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:14px;font-size:13px;color:#6a80b8;font-weight:800}
  .sideBtn{
    border:2px solid #152347;background:#fff;color:#3d5088;
    padding:6px 13px;border-radius:999px;font-size:13px;font-weight:800;cursor:pointer;
    transition:.15s;font-family:inherit;box-shadow:0 2px 0 #152347;
  }
  .sideBtn:hover{background:var(--grad-sky);color:#fff}
  .sideBtn.on{background:var(--grad-gold);border-color:#152347;color:#1a2550}
  .emojiGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(48px,1fr));gap:8px}
  .emojiTile{
    border:2px solid #152347;background:#fff;border-radius:12px;height:50px;
    font-size:24px;cursor:pointer;transition:.12s;display:grid;place-items:center;line-height:1;
    box-shadow:0 2px 0 #152347;color:#1a2d5c;
  }
  .emojiTile:hover{background:var(--grad-sky);transform:translateY(-2px)}
  .emojiTile.sel{border-color:#152347;background:var(--grad-gold);box-shadow:0 2px 0 #152347}
  .symGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(46px,1fr));gap:8px}
  .symTile{
    border:2px solid #152347;background:#fff;border-radius:12px;height:48px;
    font-size:22px;color:#1a2d5c;cursor:pointer;transition:.12s;display:grid;place-items:center;line-height:1;
    box-shadow:0 2px 0 #152347;font-weight:800;
  }
  .symTile:hover{background:var(--grad-sky);color:#fff;transform:translateY(-2px)}

  .toast{
    position:fixed;left:50%;bottom:28px;transform:translateX(-50%) translateY(20px);
    background:var(--grad-gold);color:#1a2550;padding:12px 22px;border-radius:999px;
    font-size:14px;font-weight:900;opacity:0;pointer-events:none;
    transition:.25s cubic-bezier(.2,.8,.2,1);z-index:80;
    border:2px solid #152347;box-shadow:0 4px 0 #152347;
  }
  .toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

  /* ---------- Ad rail ---------- */
  .rail{position:sticky;top:88px;display:flex;flex-direction:column;gap:16px}
  .adslot{
    background:rgba(255,255,255,.08);border:2px solid var(--line-soft);
    border-radius:var(--radius);overflow:hidden;position:relative;
  }
  .adslot .tag{
    position:absolute;top:8px;left:8px;font-size:9px;letter-spacing:.12em;text-transform:uppercase;
    color:#1a2550;background:var(--grad-gold);padding:4px 8px;border-radius:6px;font-weight:900;border:2px solid #152347;
  }
  .adbox{min-height:250px;display:grid;place-items:center;color:var(--ink-muted);font-size:13px;padding:20px;text-align:center;font-weight:700}
  .adInline{
    background:linear-gradient(180deg,#fff,#f0f5ff);border:2px dashed #5a7bc4;
    border-radius:var(--radius);padding:18px;position:relative;
  }
  .adInline .tag{
    position:absolute;top:10px;right:12px;font-size:9px;letter-spacing:.12em;text-transform:uppercase;
    color:#1a2550;background:var(--grad-gold);padding:4px 8px;border-radius:6px;font-weight:900;border:2px solid #152347;
  }
  .adInline .adbox{min-height:90px}

  footer{
    border-top:3px solid #0f1a3d;padding:32px 0;color:var(--ink-soft);
    font-size:13px;background:rgba(10,16,38,.5);
  }
  footer .wrap{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px}
  .footerInner{display:flex;flex-direction:column;gap:20px;width:100%}
  .footerBrand{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;width:100%;font-weight:700}
  .footerTag{opacity:.85}
  .footerNav{display:flex;gap:18px}
  .footerNav a{color:var(--ink-soft);text-decoration:none;font-weight:800}
  .footerNav a:hover{color:var(--gold)}

  /* ---------- Content / SEO sections ---------- */
  .contentBlock{margin:8px 0 24px;max-width:760px}
  .contentBlock h2{
    font-size:clamp(22px,3vw,28px);letter-spacing:-.02em;margin-bottom:12px;line-height:1.15;
    font-weight:900;text-shadow:0 2px 0 #152347;
  }
  .contentLead{color:var(--ink-soft);font-size:15px;margin-bottom:14px;font-weight:700}
  .introBlock{
    background:rgba(255,255,255,.08);border:2px solid var(--line-soft);
    border-radius:var(--radius-lg);padding:20px 22px;
    backdrop-filter:blur(8px);
  }
  .prose{font-size:16px;color:var(--ink-soft);line-height:1.65;font-weight:600}
  .prose p{margin-bottom:14px}
  .prose p:last-child{margin-bottom:0}
  .prose strong{color:var(--ink);font-weight:900}

  .breadcrumbs{margin:18px 0 6px;font-size:13px;color:var(--ink-muted);font-weight:700}
  .breadcrumbs ol{display:flex;flex-wrap:wrap;gap:8px;list-style:none;padding:0}
  .breadcrumbs li+li::before{content:"/";margin-right:8px;color:var(--ink-muted)}
  .breadcrumbs a{color:var(--ink-soft);text-decoration:none;font-weight:800}
  .breadcrumbs a:hover{color:var(--gold)}

  .exampleGrid{display:flex;flex-wrap:wrap;gap:8px}
  .exampleChip{
    border:2px solid #152347;background:rgba(255,255,255,.95);color:#1a2d5c;
    padding:9px 14px;border-radius:999px;font-size:15px;font-weight:800;cursor:pointer;
    transition:.15s;font-family:inherit;box-shadow:0 2px 0 #152347;
  }
  .exampleChip:hover{background:var(--grad-gold);border-color:#152347}

  .faqBlock{max-width:760px;margin-top:8px;padding-top:8px}
  .faqBlock h2{margin-bottom:16px}
  .faqItem{
    border:2px solid #152347;border-radius:var(--radius);
    background:linear-gradient(180deg,#fff 0%,#f3f7ff 100%);
    margin-bottom:10px;padding:0 16px;box-shadow:var(--shadow-soft);
  }
  .faqItem summary{cursor:pointer;list-style:none;padding:14px 0}
  .faqItem summary::-webkit-details-marker{display:none}
  .faqItem summary h3{display:inline;font-size:15px;font-weight:900;color:#1a2d5c;letter-spacing:-.01em}
  .faqItem p{padding:0 0 14px;color:#4a5f94;font-size:15px;line-height:1.6;font-weight:600}

  .relatedBlock{margin-top:28px;padding-top:24px;border-top:2px solid var(--line-soft);width:100%}
  .relatedBlock h2{font-size:18px;margin-bottom:12px;color:var(--ink);font-weight:900}
  .relatedGrid{display:flex;flex-wrap:wrap;gap:8px}
  .relatedGrid a{
    border:2px solid #152347;background:rgba(255,255,255,.92);color:#3d5088;
    padding:8px 14px;border-radius:999px;font-size:13px;font-weight:800;text-decoration:none;
    transition:.15s;box-shadow:0 2px 0 #152347;
  }
  .relatedGrid a:hover{background:var(--grad-sky);color:#fff;border-color:#152347}

  .legalPage{padding:24px 0 80px}
  .legalPage h1{font-size:clamp(28px,4vw,40px);margin-bottom:18px;letter-spacing:-.02em;font-weight:900}

  .hubBlock{
    margin-top:32px;padding:24px 22px 8px;
    background:rgba(255,255,255,.08);border:2px solid var(--line-soft);
    border-radius:var(--radius-lg);backdrop-filter:blur(8px);
  }
  .hubBlock .hubGroup{margin-bottom:18px}
  .hubBlock h3{
    font-size:12px;text-transform:uppercase;letter-spacing:.1em;
    color:var(--gold);margin-bottom:10px;font-weight:900;
  }

  .ad-placeholder{min-height:250px}
  .adslot[data-ad-lazy]{content-visibility:auto;contain-intrinsic-size:300px 250px}
  .adslot[data-ad-lazy="300x600"]{contain-intrinsic-size:300px 600px}

  .hidden{display:none!important}
  @media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto}}