body[data-design="001"] {
  --b-navy:#060d18; --b-navy-2:#0c1626; --b-navy-3:#162438;
  --b-gold:#c4a35a; --b-gold-light:#e0c57a; --b-gold-deep:#9a7a32;
  --b-page:#f5f6f8; --b-surface:#ffffff; --b-ink:#192536; --b-muted:#526071; --b-line:#e1e6ed;
  --b-navy-ui:#193b5d; --b-soft:#e8edf5; --b-soft-ink:#183b61;
  --b-gold-ink:#7e6940; --b-gold-tint:#f5efe1; --b-gold-line:#e8dbbb;
  --b-stage:#0b1626; --b-stage-gold:#d6b56c; --b-stage-line:#3a5070; --b-stage-text:#f2f5f9; --b-stage-muted:#b9c6d6;
  --b-flow-blue:#1f6fb5; --b-flow-blue-dark:#164e86; --b-continue:#1f7a3a; --b-flow-stage:#e9f0f8;
  --b-flow-stage-line:#cbd8e7; --b-flow-tile-line:#aebfd3; --b-flow-tile-on:#d6e6f8; --b-flow-todo:#c6d3e2; --b-flow-ink:#12263f;
  --b-ok:#1f7a3a; --b-ok-soft:#e6f3ea; --b-bad:#b42318; --b-bad-soft:#fdecea; --b-warn:#8a5a00; --b-warn-soft:#fdf3d8;
  --b-shield-blue:#417daf; --b-focus:#2b6cb0;
  --b-radius:12px; --b-radius-btn:9px; --b-pad:24px;
  --b-shadow-card:0 1px 2px rgba(15,40,80,.08),0 2px 8px rgba(15,40,80,.05);

  --ds-bg:var(--b-page); --ds-surface:var(--b-surface); --ds-ink:var(--b-ink); --ds-muted:var(--b-muted); --ds-line:var(--b-line);
  --ds-accent:var(--b-navy); --ds-accent-ink:#fff; --ds-soft:var(--b-soft); --ds-focus:var(--b-focus);
  --ds-font-sans:"DM Sans",system-ui,sans-serif; --ds-font-serif:"Source Serif 4",Georgia,serif; --ds-radius:12px;
  --plan-b-ink:#1a3a68; --plan-b-bg:transparent; --plan-b-line:#c9d3e0; --plan-p-ink:#7a5f22; --plan-p-bg:#f7f0dd; --plan-p-line:#e2cf9c;
  --pc-surface:var(--b-surface); --pc-ink:var(--b-ink); --pc-muted:var(--b-muted); --pc-line:var(--b-line); --pc-accent:var(--b-navy); --pc-accent-ink:#fff;
  --pc-soft:var(--b-soft); --pc-radius:12px; --pc-font:"DM Sans",system-ui,sans-serif;
  --pc-act-ink:var(--b-navy-ui); --pc-line-strong:#cfd7e2;
  --plan-lock-ink:var(--b-muted); --plan-lock-link:var(--b-navy-ui);
  --plan-view-line:var(--b-line); --plan-view-bg:var(--b-soft); --plan-view-ink:var(--b-muted); --plan-view-on:var(--b-surface); --plan-view-ink-on:var(--b-ink);
}

/* ---------- shared bits ---------- */
body[data-design="001"] :is(.y1-btn,.y1-input,.y1-link,.y1-act,.y1-door,.y1-tab,.y1-more,.y1-menu button):focus-visible {
  outline:3px solid var(--b-focus); outline-offset:2px;
}
.y1-dark :is(.y1-btn,.y1-link,.y1-nav a):focus-visible { outline-color:var(--b-gold-light); }
.y1-serif { font-family:var(--ds-font-serif); }
.y1-mono { font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:.92em; }
.y1-cols { display:grid; gap:20px; grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr)); align-items:start; }
.y1-small { font-size:13.5px; color:var(--b-muted); margin:6px 0 0; }
.y1-stack-s { display:flex; flex-direction:column; gap:10px; }
.y1-wrap-row { display:flex; flex-wrap:wrap; gap:12px; align-items:center; }

/* ---------- logo and brand ---------- */
.y1-logo-grid { display:grid; gap:16px; grid-template-columns:repeat(auto-fill,minmax(min(100%,210px),1fr)); }
.y1-logo-tile { margin:0; border:1px solid var(--b-line); border-radius:var(--b-radius); background:var(--b-surface); overflow:hidden; }
.y1-logo-stage { display:flex; align-items:center; justify-content:center; min-height:150px; padding:20px; }
.y1-logo-stage--navy { background:var(--b-navy); }
.y1-logo-stage--white { background:#fff; }
.y1-logo-stage--page { background:var(--b-page); }
.y1-logo-stage--tile { background:var(--b-navy); }
.y1-logo-tile figcaption { padding:12px 14px; font-size:13.5px; line-height:1.4; color:var(--b-muted); border-top:1px solid var(--b-line); }
.y1-logo-tile figcaption b { display:block; color:var(--b-ink); font-weight:650; font-size:14px; }
.y1-logo-tile code { font-size:12.5px; }
.y1-white-tile { display:grid; place-items:center; background:#fff; border-radius:18px; padding:14px; }
.y1-clear { position:relative; display:inline-block; padding:40px; border:1px dashed var(--b-gold-deep); background:repeating-linear-gradient(45deg,transparent 0 6px,rgba(196,163,90,.08) 6px 12px); }
.y1-clear img { display:block; background:#fff; outline:1px solid var(--b-line); }
.y1-clear span { position:absolute; font-size:12px; font-weight:650; color:var(--b-gold-ink); }
.y1-clear .y1-cs-t { top:10px; left:50%; transform:translateX(-50%); }
.y1-clear .y1-cs-b { bottom:10px; left:50%; transform:translateX(-50%); }
.y1-clear .y1-cs-l { left:8px; top:50%; transform:translateY(-50%); }
.y1-clear .y1-cs-r { right:8px; top:50%; transform:translateY(-50%); }
.y1-sizes { display:flex; align-items:flex-end; gap:22px; flex-wrap:wrap; }
.y1-sizes figure { margin:0; text-align:center; font-size:12.5px; color:var(--b-muted); }
.y1-sizes img { display:block; margin:0 auto 6px; }

.y1-lockup { display:inline-flex; align-items:center; gap:12px; text-decoration:none; color:#fff; }
.y1-lockup img { width:40px; height:40px; display:block; object-fit:contain; flex:none; }
.y1-lockup-text { display:flex; flex-direction:column; justify-content:center; line-height:1; }
.y1-lockup .y1-word { font-family:"Cormorant Garamond",Georgia,"Times New Roman",serif; font-size:26px; font-weight:600; color:#fff; letter-spacing:.06em; line-height:1; }
.y1-lockup .y1-word span { color:var(--b-gold-light); }
.y1-lockup .y1-mate { display:block; font-family:"Allura",cursive; font-size:17px; line-height:.8; color:var(--b-gold-light); letter-spacing:.03em; margin:3px 0 2px; transform:rotate(-3deg); transform-origin:left center; }
.y1-lockup small { display:block; font-size:10px; font-weight:500; letter-spacing:.2em; color:rgba(232,234,238,.55); text-transform:uppercase; margin-top:1px; }
.y1-lockup--calm .y1-word { color:#192c43; }
.y1-lockup--calm .y1-word span { color:#94702d; }
.y1-lockup--calm .y1-mate { color:#836933; }
.y1-lockup--calm small { color:#64758a; }
.y1-wm { font:700 44px/1 var(--ds-font-sans); letter-spacing:-.04em; color:var(--b-stage-text); }
.y1-wm b { color:var(--b-stage-gold); font-weight:700; }
.y1-wm--light { color:var(--b-navy-ui); }
.y1-wm--light b { color:var(--b-gold-ink); }
.y1-brandbox { border-radius:var(--b-radius); padding:26px; display:flex; flex-direction:column; gap:8px; min-height:132px; justify-content:center; }
.y1-brandbox--navy { background:var(--b-navy); }
.y1-brandbox--white { background:#fff; border:1px solid var(--b-line); }
.y1-brandbox--stage { background:var(--b-stage); }
.y1-brandbox p { margin:0; font-size:12.5px; color:var(--b-muted); }
.y1-brandbox--navy p, .y1-brandbox--stage p { color:var(--b-stage-muted); }
.y1-bad-grid { display:grid; gap:14px; grid-template-columns:repeat(auto-fill,minmax(min(100%,170px),1fr)); }
.y1-bad { margin:0; border:1px solid #f3c3bd; border-radius:var(--b-radius); background:var(--b-surface); overflow:hidden; }
.y1-bad > div { display:grid; place-items:center; min-height:112px; background:var(--b-page); overflow:hidden; }
.y1-bad figcaption { padding:10px 12px; font-size:13px; color:var(--b-muted); border-top:1px solid #f3c3bd; }
.y1-bad figcaption b { color:var(--b-bad); font-weight:650; }
.y1-bad-stretch { width:92px; height:44px; object-fit:fill; }
.y1-bad-tint { filter:grayscale(1) sepia(1) hue-rotate(5deg) saturate(3); }
.y1-bad-busy { background:repeating-linear-gradient(135deg,#c4a35a 0 10px,#0c1626 10px 20px); padding:10px; }
.y1-bad-ai { display:flex; align-items:center; gap:6px; }
.y1-bad-ai span { font:700 22px/1 var(--ds-font-sans); color:var(--b-navy-ui); }
.y1-bad-tilt { transform:rotate(-18deg); }

/* ---------- colors ---------- */
.y1-pair { display:inline-flex; align-items:center; justify-content:center; min-width:74px; padding:6px 10px; border-radius:8px; font-weight:650; font-size:15px; line-height:1.2; border:1px solid rgba(6,13,24,.12); }
.y1-bg-page { background:var(--b-page); } .y1-bg-surface { background:#fff; } .y1-bg-navy { background:var(--b-navy); }
.y1-bg-navy-ui { background:var(--b-navy-ui); } .y1-bg-soft { background:var(--b-soft); } .y1-bg-gold { background:var(--b-gold); }
.y1-bg-stage { background:var(--b-stage); } .y1-bg-continue { background:var(--b-continue); } .y1-bg-flow { background:var(--b-flow-blue); }
.y1-bg-flow-dark { background:var(--b-flow-blue-dark); } .y1-bg-plan-p { background:#f7f0dd; } .y1-bg-ok-soft { background:var(--b-ok-soft); }
.y1-bg-bad-soft { background:var(--b-bad-soft); } .y1-bg-warn-soft { background:var(--b-warn-soft); } .y1-bg-old { background:#eef3f8; }
.y1-fg-ink { color:var(--b-ink); } .y1-fg-muted { color:var(--b-muted); } .y1-fg-white { color:#fff; } .y1-fg-navy { color:var(--b-navy); }
.y1-fg-gold { color:var(--b-gold); } .y1-fg-gold-light { color:var(--b-gold-light); } .y1-fg-gold-deep { color:var(--b-gold-deep); }
.y1-fg-gold-ink { color:var(--b-gold-ink); } .y1-fg-soft-ink { color:var(--b-soft-ink); } .y1-fg-stage-text { color:var(--b-stage-text); }
.y1-fg-stage-muted { color:var(--b-stage-muted); } .y1-fg-stage-gold { color:var(--b-stage-gold); } .y1-fg-plan-p { color:#7a5f22; }
.y1-fg-focus { color:var(--b-focus); } .y1-fg-ok { color:var(--b-ok); } .y1-fg-bad { color:var(--b-bad); } .y1-fg-warn { color:var(--b-warn); }
.y1-fg-old { color:#848d9c; }
.y1-verdict { font-weight:650; white-space:nowrap; }
.y1-verdict--pass { color:var(--b-ok); }
.y1-verdict--fail { color:var(--b-bad); }
.y1-verdict--large { color:var(--b-warn); }

/* ---------- type ---------- */
.y1-t-hero { font:650 clamp(1.9rem,4vw,2.6rem)/1.15 var(--ds-font-serif); letter-spacing:-.03em; color:var(--b-navy); margin:0; }
.y1-t-section { font:650 clamp(1.75rem,3.2vw,2.35rem)/1.15 var(--ds-font-serif); letter-spacing:-.03em; color:var(--b-navy); margin:0; }
.y1-t-card { font:600 1.45rem/1.2 var(--ds-font-serif); letter-spacing:-.02em; color:var(--b-navy); margin:0; }
.y1-t-work { font:600 23px/1.3 var(--ds-font-sans); letter-spacing:-.02em; color:var(--b-ink); margin:0; }
.y1-t-body { font:450 16px/1.55 var(--ds-font-sans); color:var(--b-ink); margin:0; max-width:46ch; }
.y1-t-small { font:450 13.5px/1.5 var(--ds-font-sans); color:var(--b-muted); margin:0; }
.y1-t-eyebrow { font:750 11.5px/1.3 var(--ds-font-sans); letter-spacing:.14em; text-transform:uppercase; color:var(--b-gold-ink); margin:0; }
.y1-t-button { display:inline-flex; align-items:center; min-height:46px; padding:0 20px; border-radius:var(--b-radius-btn); background:var(--b-navy-ui); color:#fff; font:600 14px/1 var(--ds-font-sans); }
.y1-t-nav { font:500 13px/1 var(--ds-font-sans); letter-spacing:.04em; color:#fff; background:var(--b-navy); padding:14px 16px; border-radius:8px; display:inline-block; }
.y1-t-word { font:600 26px/1 "Cormorant Garamond",Georgia,serif; letter-spacing:.06em; color:#fff; background:var(--b-navy); padding:14px 18px; border-radius:8px; display:inline-block; }
.y1-t-word span { color:var(--b-gold-light); }
.y1-t-cap { font:500 34px/1.28 var(--ds-font-sans); color:var(--b-stage-text); background:var(--b-stage); padding:14px 20px; border-radius:10px; display:inline-block; max-width:100%; }
.y1-t-end { font:600 52px/1.15 var(--ds-font-serif); letter-spacing:-.01em; color:var(--b-stage-text); background:var(--b-stage); padding:14px 20px; border-radius:10px; display:inline-block; max-width:100%; }
.y1-fonts { display:grid; gap:16px; grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr)); }
.y1-font { background:var(--b-surface); border:1px solid var(--b-line); border-radius:var(--b-radius); padding:20px; }
.y1-font .y1-aa { font-size:56px; line-height:1; margin:0 0 8px; color:var(--b-navy); }
.y1-font .y1-aa--sans { font-family:var(--ds-font-sans); font-weight:650; }
.y1-font .y1-aa--serif { font-family:var(--ds-font-serif); font-weight:650; }
.y1-font .y1-aa--corm { font-family:"Cormorant Garamond",Georgia,serif; font-weight:600; letter-spacing:.04em; }
.y1-font .y1-aa--allura { font-family:"Allura",cursive; font-weight:400; color:var(--b-gold-ink); }
.y1-font h3 { margin:0 0 4px; font-size:16px; }
.y1-font p { margin:0; font-size:14px; color:var(--b-muted); line-height:1.5; }

/* ---------- quiet interface ---------- */
.y1-app { display:grid; grid-template-columns:200px minmax(0,1fr); gap:0; background:var(--b-page); border:1px solid var(--b-line); border-radius:var(--b-radius); overflow:hidden; min-height:340px; container-type:inline-size; }
.y1-rail { background:#fcfcfd; border-right:1px solid var(--b-line); padding:14px 10px; display:flex; flex-direction:column; gap:2px; }
.y1-rail .y1-brand-s { font-weight:700; font-size:16px; letter-spacing:-.01em; padding:2px 10px 12px; color:#152337; }
.y1-rail .y1-brand-s b { color:var(--b-gold-ink); }
.y1-rail a { display:flex; align-items:center; min-height:44px; padding:0 12px; border-radius:8px; color:var(--b-muted); font-size:14px; text-decoration:none; }
.y1-rail a[aria-current="page"] { background:var(--b-soft); color:var(--b-soft-ink); font-weight:650; }
.y1-rail a:hover { background:#f0f3f7; color:var(--b-ink); }
.y1-rail a[aria-current="page"]:hover { background:var(--b-soft); color:var(--b-soft-ink); }
.y1-work { padding:20px; display:flex; flex-direction:column; gap:14px; min-width:0; }
.y1-panel { background:var(--b-surface); border:1px solid var(--b-line); border-radius:var(--b-radius); padding:var(--b-pad); min-width:0; }
.y1-panel h3 { margin:0 0 6px; font:650 20px/1.25 var(--ds-font-sans); letter-spacing:-.02em; color:var(--b-ink); }
.y1-panel p { margin:0 0 12px; font-size:15px; color:var(--b-muted); }
.y1-panel .y1-wrap-row { margin-top:4px; }
@container (max-width:560px) {
  .y1-app { grid-template-columns:1fr; }
  .y1-rail { flex-direction:row; flex-wrap:wrap; border-right:0; border-bottom:1px solid var(--b-line); }
  .y1-rail .y1-brand-s { width:100%; padding-bottom:4px; }
}
.y1-rules { display:grid; gap:12px; grid-template-columns:repeat(auto-fill,minmax(min(100%,250px),1fr)); margin:0; padding:0; list-style:none; }
.y1-rules li { background:var(--b-surface); border:1px solid var(--b-line); border-radius:var(--b-radius); padding:16px 18px; font-size:15px; line-height:1.45; }
.y1-rules li b { display:block; font-weight:650; margin-bottom:2px; }
.y1-rules .y1-dot { display:inline-block; width:12px; height:12px; border-radius:4px; margin-right:8px; vertical-align:-1px; border:1px solid rgba(6,13,24,.18); }
.y1-dot--page { background:var(--b-page); } .y1-dot--white { background:#fff; } .y1-dot--navy { background:var(--b-navy-ui); }
.y1-dot--soft { background:var(--b-soft); } .y1-dot--gold { background:var(--b-gold); } .y1-dot--radius { border-radius:50%; background:var(--b-soft); }

/* ---------- buttons, chips, cards ---------- */
.y1-btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:46px; min-width:44px; padding:0 20px; border-radius:var(--b-radius-btn); border:1px solid transparent; font:600 14px/1 var(--ds-font-sans); cursor:pointer; text-decoration:none; background:var(--b-soft); color:var(--b-navy-ui); }
.y1-btn--primary { background:var(--b-navy-ui); border-color:var(--b-navy-ui); color:#fff; }
.y1-btn--primary:hover { background:var(--b-navy-2); border-color:var(--b-navy-2); }
.y1-btn--soft { background:var(--b-soft); border-color:#dce4ed; color:#224867; }
.y1-btn--outline { background:#fff; border-color:#c9d3e0; color:var(--b-navy-ui); }
.y1-btn--ghost { background:transparent; border-color:transparent; color:#37516d; padding:0 8px; text-decoration:underline; text-underline-offset:3px; }
.y1-btn--gold { background:var(--b-gold); border-color:var(--b-gold); color:var(--b-navy); letter-spacing:.02em; }
.y1-btn--gold:hover { background:var(--b-gold-light); border-color:var(--b-gold-light); }
.y1-btn--dark-ghost { background:transparent; border-color:rgba(224,197,122,.45); color:#fff; }
.y1-btn--dark-ghost:hover { border-color:var(--b-gold-light); color:var(--b-gold-light); }
.y1-btn:disabled { opacity:.5; cursor:not-allowed; }
.y1-btn--sharp { border-radius:1px; letter-spacing:.06em; }
.y1-chip { display:inline-flex; align-items:center; gap:5px; font-size:12.5px; line-height:1.3; padding:3px 10px; border-radius:999px; background:#f0f2f5; border:1px solid #dce2ea; color:#4a5668; font-weight:500; white-space:nowrap; }
.y1-chip::before { content:""; width:7px; height:7px; border-radius:50%; background:currentColor; opacity:.9; }
.y1-chip--plain::before { display:none; }
.y1-chip--blue { background:var(--b-soft); border-color:#cbd8e7; color:var(--b-soft-ink); }
.y1-chip--gold { background:var(--b-gold-tint); border-color:var(--b-gold-line); color:#725820; }
.y1-chip--ok { background:var(--b-ok-soft); border-color:#bfe0c9; color:var(--b-ok); }
.y1-chip--bad { background:var(--b-bad-soft); border-color:#f3c3bd; color:var(--b-bad); }
.y1-chip--warn { background:var(--b-warn-soft); border-color:#ecd8a0; color:var(--b-warn); }
.y1-chip--ai { background:var(--b-navy-ui); border-color:var(--b-navy-ui); color:#fff; }
.y1-chip--ai::before { display:none; }
.y1-chip--sample { background:transparent; border-style:dashed; border-color:#b4bfcc; color:#4a5668; }
.y1-chip--sample::before { display:none; }
.y1-card { background:var(--b-surface); border:1px solid var(--b-line); border-radius:var(--b-radius); padding:var(--b-pad); display:flex; flex-direction:column; gap:8px; min-width:0; }
.y1-card h3 { margin:0; font:600 1.3rem/1.2 var(--ds-font-serif); letter-spacing:-.02em; color:var(--b-navy); }
.y1-card p { margin:0; font-size:15px; color:var(--b-muted); line-height:1.5; }
.y1-card .y1-eyebrow { font:750 11.5px/1.3 var(--ds-font-sans); letter-spacing:.14em; text-transform:uppercase; color:var(--b-gold-ink); }
.y1-card--dark { background:var(--b-navy); border-color:var(--b-navy); color:#c5d2e0; }
.y1-card--dark h3 { color:#fff; }
.y1-card--dark p { color:#a8b8c9; }
.y1-card--dark .y1-eyebrow { color:var(--b-gold-light); }
.y1-card--gold { border-color:rgba(196,163,90,.55); box-shadow:0 10px 28px rgba(14,20,27,.08); }
.y1-plan-name { font:750 11.5px/1 var(--ds-font-sans); letter-spacing:.12em; text-transform:uppercase; color:var(--b-muted); }
.y1-card--dark .y1-plan-name { color:var(--b-gold-light); }
.y1-checks { list-style:none; margin:4px 0 0; padding:0; font-size:14.5px; }
.y1-checks li { padding:6px 0 6px 20px; position:relative; color:var(--b-ink); border-bottom:1px solid rgba(14,20,27,.06); }
.y1-checks li:last-child { border-bottom:0; }
.y1-checks li::before { content:""; position:absolute; left:0; top:14px; width:6px; height:6px; border-radius:50%; background:var(--b-ok); }
.y1-card--dark .y1-checks li { color:#d5deea; border-bottom-color:rgba(255,255,255,.08); }
.y1-card--dark .y1-checks li::before { background:var(--b-gold-light); }
.y1-link { color:var(--b-flow-blue-dark); font-weight:600; text-underline-offset:3px; }

/* ---------- guided flow ---------- */
.y1-flow { background:var(--b-flow-stage); border:1px solid var(--b-flow-stage-line); border-radius:var(--b-radius); padding:22px; color:var(--b-flow-ink); }
.y1-chev { list-style:none; margin:0 0 6px; padding:0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:2px; }
.y1-chev li { display:flex; flex-direction:column; gap:6px; align-items:stretch; }
.y1-chev .y1-seg { position:relative; height:34px; display:grid; place-items:center; background:var(--b-flow-todo); color:var(--b-ink); font-weight:700; font-size:15px;
  clip-path:polygon(0 0,calc(100% - 14px) 0,100% 50%,calc(100% - 14px) 100%,0 100%,14px 50%); }
.y1-chev li:first-child .y1-seg { clip-path:polygon(0 0,calc(100% - 14px) 0,100% 50%,calc(100% - 14px) 100%,0 100%); }
.y1-chev .is-done .y1-seg { background:var(--b-flow-blue); color:#fff; }
.y1-chev .is-current .y1-seg { background:var(--b-flow-blue-dark); color:#fff; }
.y1-chev .y1-seg-label { font-size:12.5px; text-align:center; color:#344458; }
.y1-chev .is-done .y1-seg-label { color:var(--b-flow-blue-dark); }
.y1-chev .is-current .y1-seg-label { color:var(--b-flow-blue-dark); font-weight:700; }
.y1-ask { font:650 24px/1.2 var(--ds-font-sans); text-align:center; color:var(--b-flow-ink); margin:20px 0 6px; letter-spacing:-.01em; }
.y1-ask-help { text-align:center; font-size:15px; color:var(--b-muted); margin:0 0 16px; }
.y1-tiles { display:grid; gap:12px; grid-template-columns:repeat(2,minmax(0,1fr)); margin-bottom:16px; }
.y1-tile { min-height:68px; padding:12px; border:1.5px solid var(--b-flow-tile-line); border-radius:8px; background:#fff; box-shadow:var(--b-shadow-card); color:var(--b-flow-ink); font:600 16px/1.3 var(--ds-font-sans); text-align:center; cursor:pointer; }
.y1-tile[aria-pressed="true"] { background:var(--b-flow-tile-on); border-color:var(--b-flow-blue); box-shadow:inset 0 0 0 1px var(--b-flow-blue); color:var(--b-flow-blue-dark); }
.y1-flow-foot { display:flex; gap:12px; }
.y1-back { min-height:48px; padding:0 22px; border-radius:8px; background:#fff; border:1.5px solid var(--b-flow-blue); color:var(--b-flow-blue); font:700 15px/1 var(--ds-font-sans); cursor:pointer; }
.y1-next { flex:1; min-height:48px; border-radius:8px; background:var(--b-continue); border:1px solid var(--b-continue); color:#fff; font:700 15px/1 var(--ds-font-sans); cursor:pointer; }
.y1-next:hover { background:#17602d; }
.y1-back:focus-visible, .y1-next:focus-visible, .y1-tile:focus-visible { outline:3px solid var(--b-focus); outline-offset:2px; }
@media (max-width:560px) { .y1-chev { grid-template-columns:repeat(2,minmax(0,1fr)); row-gap:10px; } .y1-tiles { grid-template-columns:1fr; } }

/* ---------- forms ---------- */
.y1-field { display:flex; flex-direction:column; gap:6px; }
.y1-field label { font-size:14px; font-weight:650; color:var(--b-ink); }
.y1-field .y1-help { font-size:13.5px; color:var(--b-muted); }
.y1-input { min-height:46px; padding:8px 12px; border:1px solid #b8c3d1; border-radius:10px; background:#fff; color:var(--b-ink); font:450 16px/1.3 var(--ds-font-sans); width:100%; }
.y1-input:focus-visible { border-color:var(--b-flow-blue-dark); box-shadow:0 0 0 3px rgba(31,111,181,.18); outline-offset:0; }
.y1-input--err { border-color:var(--b-bad); box-shadow:0 0 0 3px rgba(180,35,24,.08); }
.y1-err { display:flex; gap:8px; align-items:flex-start; background:var(--b-bad-soft); border:1px solid #f3c3bd; color:#7a1d15; border-radius:9px; padding:8px 11px; font-size:14px; }
.y1-form { display:grid; gap:14px; max-width:440px; }

/* ---------- layout sample (marketing page) ---------- */
.y1-site { container-type:inline-size; background:var(--b-page); font-size:14px; color:var(--b-ink); }
.y1-nav { background:var(--b-navy); border-bottom:1px solid rgba(224,197,122,.12); display:flex; align-items:center; gap:14px; padding:10px 18px; min-height:68px; }
.y1-nav .y1-lockup img { width:34px; height:34px; }
.y1-nav .y1-lockup .y1-word { font-size:22px; }
.y1-nav .y1-lockup .y1-mate { font-size:14px; }
.y1-nav .y1-lockup small { font-size:8.5px; }
.y1-nav nav { margin-left:auto; display:flex; gap:2px; align-items:center; }
.y1-nav nav a { color:rgba(250,251,252,.82); font-size:12.5px; letter-spacing:.04em; padding:0 9px; min-height:44px; display:inline-flex; align-items:center; text-decoration:none; white-space:nowrap; }
.y1-nav nav a:hover { color:var(--b-gold-light); }
.y1-hero-s { position:relative; color:#fff; padding:34px 22px 40px; background:radial-gradient(ellipse 90% 70% at 78% 18%,rgba(196,163,90,.22),transparent 52%),radial-gradient(ellipse 50% 40% at 12% 80%,rgba(22,36,56,.9),transparent 60%),linear-gradient(165deg,#0a1526 0%,#101f36 38%,#0a1422 72%,#060d18 100%); overflow:hidden; }
.y1-hero-s h4 { font:650 clamp(22px,4.6cqw,32px)/1.15 var(--ds-font-serif); letter-spacing:-.02em; margin:0 0 10px; max-width:17em; color:#fff; }
.y1-hero-s p { margin:0 0 16px; max-width:34em; color:rgba(232,234,238,.78); font-size:14.5px; line-height:1.6; }
.y1-hero-rule { width:120px; height:1px; background:linear-gradient(90deg,var(--b-gold-light),rgba(224,197,122,.15)); margin:0 0 14px; }
.y1-hero-s .y1-eyebrow-d { font:500 11px/1.3 var(--ds-font-sans); letter-spacing:.28em; text-transform:uppercase; color:rgba(232,234,238,.7); margin:0 0 8px; }
.y1-sec-s { padding:26px 22px; }
.y1-sec-s h4 { font:650 clamp(18px,3.6cqw,24px)/1.2 var(--ds-font-serif); letter-spacing:-.03em; color:var(--b-navy); margin:0 0 6px; }
.y1-sec-s > p { margin:0 0 14px; color:var(--b-muted); font-size:14px; }
.y1-trio { display:grid; gap:12px; grid-template-columns:repeat(3,minmax(0,1fr)); }
.y1-trio .y1-card { padding:16px; }
.y1-trio .y1-card h3 { font-size:1.05rem; }
.y1-band-s { background:var(--b-navy); color:#c5d2e0; text-align:center; padding:26px 22px; }
.y1-band-s h4 { font:650 clamp(18px,3.6cqw,24px)/1.2 var(--ds-font-serif); letter-spacing:-.03em; color:#fff; margin:0 0 8px; }
.y1-band-s p { margin:0 auto 14px; max-width:30em; color:#a8b8c9; font-size:14px; }
.y1-foot-s { background:#061018; color:#8fa3b8; font-size:12.5px; padding:16px 22px; display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap; }
.y1-foot-s b { color:#fff; font-weight:650; }
.y1-foot-s a { color:#c5d2e0; min-height:24px; display:inline-flex; align-items:center; }
@container (max-width:520px) {
  .y1-nav nav a:not(:last-child) { display:none; }
  .y1-trio { grid-template-columns:1fr; }
  .y1-hero-s { padding:24px 16px 28px; }
  .y1-sec-s, .y1-band-s { padding:20px 16px; }
}
.y1-phone-wrap { display:flex; flex-wrap:wrap; gap:28px; align-items:flex-start; justify-content:center; }
.y1-phone-screen { width:100%; background:var(--b-page); }
.y1-sp-table td:first-child code { white-space:nowrap; }
.y1-sp { display:inline-block; height:14px; background:var(--b-gold); border-radius:3px; vertical-align:middle; }
.y1-sp-4 { width:4px; } .y1-sp-8 { width:8px; } .y1-sp-12 { width:12px; } .y1-sp-14 { width:14px; } .y1-sp-16 { width:16px; }
.y1-sp-20 { width:20px; } .y1-sp-24 { width:24px; } .y1-sp-32 { width:32px; } .y1-sp-56 { width:56px; } .y1-sp-72 { width:72px; }
.y1-rad { display:inline-block; width:40px; height:28px; background:var(--b-soft); border:1.5px solid var(--b-navy-ui); vertical-align:middle; }
.y1-rad-1 { border-radius:1px; } .y1-rad-8 { border-radius:8px; } .y1-rad-9 { border-radius:9px; } .y1-rad-12 { border-radius:12px; } .y1-rad-16 { border-radius:16px; } .y1-rad-pill { border-radius:999px; }

/* ---------- print one-pager ---------- */
.y1-paper { background:#fff; max-width:560px; margin:0 auto; box-shadow:0 8px 30px rgba(6,13,24,.14); color:#1c2733; font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; padding-bottom:20px; }
.y1-paper-band { background:var(--b-navy); color:#fff; padding:18px 26px; display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; }
.y1-paper-band .y1-pw { font-size:24px; font-weight:800; letter-spacing:.5px; }
.y1-paper-band .y1-pw span { color:var(--b-gold); }
.y1-paper-band small { display:block; font-size:9.5px; letter-spacing:1.8px; text-transform:uppercase; color:#c9d4e2; margin-top:2px; }
.y1-paper-band .y1-pr { text-align:right; font-size:11px; color:#c9d4e2; }
.y1-paper-status { background:var(--b-gold); color:var(--b-navy); font-weight:700; font-size:11px; letter-spacing:.6px; text-transform:uppercase; padding:6px 26px; }
.y1-paper-in { padding:6px 26px 0; }
.y1-paper h4 { font-size:12.5px; color:var(--b-navy); text-transform:uppercase; letter-spacing:1.4px; border-bottom:2px solid var(--b-gold); padding-bottom:5px; margin:18px 0 10px; }
.y1-paper p { font-size:12.5px; margin:0; }
.y1-paper ul { list-style:none; margin:0; padding:0; font-size:12px; }
.y1-paper li { padding:3px 0 3px 16px; position:relative; }
.y1-paper li::before { content:""; position:absolute; left:0; top:8px; width:6px; height:6px; background:var(--b-gold); border-radius:2px; }
.y1-paper table { width:100%; border-collapse:collapse; font-size:11.5px; margin-top:4px; }
.y1-paper th, .y1-paper td { text-align:left; padding:6px 9px; border:1px solid #dde4ec; }
.y1-paper th { background:#f4f6f9; color:var(--b-navy); width:40%; }
.y1-paper-foot { margin:18px 26px 0; padding-top:12px; border-top:2px solid var(--b-navy); display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px; font-size:11px; color:#5a6b7d; }
.y1-paper-foot b { color:var(--b-navy); }

/* ---------- chat ---------- */
.y1-chat { display:grid; gap:14px; background:var(--b-surface); border:1px solid var(--b-line); border-radius:var(--b-radius); padding:var(--b-pad); max-width:760px; margin:0 auto; }
.y1-chat-head { display:flex; flex-direction:column; gap:8px; }
.y1-chat-head .y1-eyebrow { font:750 11.5px/1.3 var(--ds-font-sans); letter-spacing:.14em; text-transform:uppercase; color:var(--b-gold-ink); margin:0; }
.y1-chat-head h3 { margin:0; font:650 21px/1.25 var(--ds-font-sans); letter-spacing:-.02em; color:var(--b-ink); }
.y1-tabs { display:flex; flex-wrap:wrap; gap:4px; border-bottom:1px solid var(--b-line); padding-bottom:8px; }
.y1-tab { min-height:44px; padding:0 14px; border-radius:8px; border:0; background:transparent; color:var(--b-muted); font:500 14px/1 var(--ds-font-sans); cursor:pointer; }
.y1-tab[aria-pressed="true"] { background:var(--b-soft); color:var(--b-soft-ink); font-weight:650; }
.y1-ainote { background:#fbf8f0; border:1px solid #eadfc4; border-left:3px solid var(--b-navy-ui); border-radius:10px; padding:12px 14px; display:flex; flex-direction:column; gap:6px; }
.y1-ainote .y1-wrap-row { gap:8px; }
.y1-ainote p { margin:0; font-size:15px; color:var(--b-ink); }
.y1-ainote .y1-meta { font-size:13px; color:var(--b-muted); }
.y1-rulesline { margin:0; font-size:13.5px; color:var(--b-muted); border-left:3px solid var(--b-gold); padding:2px 0 2px 10px; }
.y1-post { display:grid; grid-template-columns:36px minmax(0,1fr); gap:10px; }
.y1-avatar { width:36px; height:36px; border-radius:50%; background:var(--b-navy); color:var(--b-gold-light); display:grid; place-items:center; font:700 13px/1 var(--ds-font-sans); letter-spacing:.02em; }
.y1-post-body { min-width:0; }
.y1-post-meta { display:flex; flex-wrap:wrap; gap:6px 8px; align-items:center; font-size:13px; color:var(--b-muted); }
.y1-post-meta b { font-size:15px; color:var(--b-ink); font-weight:650; }
.y1-post-text { margin:4px 0 6px; font-size:15.5px; line-height:1.5; color:var(--b-ink); }
.y1-acts { display:flex; flex-wrap:wrap; gap:2px 6px; align-items:center; position:relative; }
.y1-act { min-height:44px; min-width:44px; padding:0 10px; border-radius:8px; border:0; background:transparent; color:var(--b-muted); font:600 13.5px/1 var(--ds-font-sans); cursor:pointer; }
.y1-act:hover { background:var(--b-page); color:var(--b-ink); }
.y1-act[aria-pressed="true"] { color:var(--b-gold-ink); background:var(--b-gold-tint); }
.y1-more { font-size:18px; }
.y1-menu { position:absolute; top:46px; left:0; z-index:2; background:#fff; border:1px solid var(--b-line); border-radius:10px; box-shadow:0 10px 28px rgba(16,24,40,.16); padding:5px; min-width:190px; display:flex; flex-direction:column; }
.y1-menu button { min-height:44px; text-align:left; padding:0 12px; border:0; background:transparent; border-radius:7px; font:450 14.5px/1 var(--ds-font-sans); color:var(--b-ink); cursor:pointer; }
.y1-menu button:hover { background:#f0f3f7; }
.y1-menu-space { height:150px; }
.y1-nest { margin-left:22px; padding-left:14px; border-left:2px solid var(--b-line); display:grid; gap:10px; }
.y1-newpill { justify-self:start; min-height:44px; display:inline-flex; align-items:center; gap:6px; background:var(--b-navy-ui); color:#fff; border:0; border-radius:999px; padding:0 18px; font:650 13.5px/1 var(--ds-font-sans); cursor:pointer; box-shadow:0 6px 16px rgba(25,59,93,.3); }
.y1-newpill:focus-visible { outline:3px solid var(--b-focus); outline-offset:2px; }
.y1-composer { display:grid; gap:8px; }
.y1-composer label { font-size:14px; font-weight:650; }
.y1-composer textarea { min-height:84px; resize:vertical; }
.y1-composer-row { display:flex; flex-wrap:wrap; gap:10px; align-items:center; justify-content:space-between; }
.y1-state { display:flex; flex-wrap:wrap; gap:8px 12px; align-items:center; font-size:14px; color:var(--b-ink); background:var(--b-warn-soft); border:1px solid #ecd8a0; border-radius:10px; padding:8px 12px; }
.y1-state--info { background:var(--b-soft); border-color:#cbd8e7; color:var(--b-soft-ink); }
.y1-empty { text-align:center; padding:22px 14px; border:1px dashed #b4bfcc; border-radius:var(--b-radius); background:var(--b-page); color:var(--b-muted); font-size:15px; }
.y1-door { display:inline-flex; align-items:center; gap:6px; min-height:44px; padding:0 16px; border:1px solid var(--b-navy-ui); border-radius:999px; background:transparent; color:var(--b-navy-ui); font:600 13.5px/1.2 var(--ds-font-sans); text-decoration:none; white-space:nowrap; }
.y1-door:hover { background:var(--b-soft); }
.y1-door--primary { background:var(--b-navy-ui); color:#fff; }
.y1-door--primary:hover { background:var(--b-navy-2); }
.y1-door b { font-weight:650; font-variant-numeric:tabular-nums; }
.y1-pub { background:var(--b-surface); border:1px solid var(--b-line); border-radius:var(--b-radius); padding:20px; max-width:760px; margin:0 auto; }
.y1-pub-head { display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:4px 16px; }
.y1-pub-head h3 { margin:0; font:600 22px/1.25 var(--ds-font-serif); color:var(--b-navy); }
.y1-pub-head p { margin:0; font-size:13.5px; color:var(--b-muted); }
.y1-pub-list { display:grid; gap:12px; grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr)); margin-top:14px; }
.y1-pub-card { display:flex; flex-direction:column; gap:6px; padding:14px; border:1px solid var(--b-line); border-radius:10px; background:#fff; min-width:0; }
.y1-pub-card--ai { background:var(--b-page); }
.y1-pub-card p { margin:0; }
.y1-pub-where { display:flex; flex-wrap:wrap; gap:6px; align-items:center; font-size:12.5px; color:var(--b-muted); }
.y1-pub-title { font-size:15px; font-weight:650; line-height:1.35; }
.y1-pub-body { font-size:14.5px; line-height:1.5; }
.y1-pub-card .y1-door { align-self:flex-start; margin-top:auto; }
.y1-pub-privacy { margin:12px 0 0; font-size:13px; color:var(--b-muted); }

/* ---------- walkthrough video (scaled with container query units; 1 video px = 100cqw / 1920) ---------- */
.y1-vframe { container-type:inline-size; position:relative; width:100%; aspect-ratio:16/9; border-radius:8px; overflow:hidden; background:radial-gradient(60.4cqw 64.8cqw at 18% 0%,#183252 0%,rgba(24,50,82,0) 70%),radial-gradient(47cqw 55.5cqw at 100% 100%,#1b2b20 0%,rgba(27,43,32,0) 60%),var(--b-stage); }
.y1-vf { --u:calc(100cqw / 1920); position:absolute; inset:0; font-family:var(--ds-font-sans); }
.y1-vf * { box-sizing:border-box; }
.y1-vf-win { position:absolute; left:calc(130*var(--u)); top:calc(84*var(--u)); width:calc(1660*var(--u)); height:calc(868*var(--u)); border-radius:calc(18*var(--u)); background:#f5f6f8; overflow:hidden; box-shadow:0 0 0 1px rgba(255,255,255,.08),0 calc(30*var(--u)) calc(80*var(--u)) rgba(0,0,0,.45); display:flex; flex-direction:column; }
.y1-vf-bar { height:calc(42*var(--u)); flex:none; display:flex; align-items:center; gap:calc(8.4*var(--u)); padding:0 calc(17*var(--u)); background:#eef1f5; border-bottom:1px solid #e4e8ee; }
.y1-vf-bar i { width:calc(12.6*var(--u)); height:calc(12.6*var(--u)); border-radius:50%; background:#cfd5dd; display:block; flex:none; }
.y1-vf-url { margin-left:calc(14*var(--u)); width:calc(588*var(--u)); font-size:calc(15.4*var(--u)); color:#626f80; background:#fff; border:1px solid #e4e8ee; border-radius:calc(8.4*var(--u)); padding:calc(3*var(--u)) calc(14*var(--u)); white-space:nowrap; overflow:hidden; }
.y1-vf-body { flex:1; display:flex; min-height:0; }
.y1-vf-rail { width:calc(249*var(--u)); flex:none; background:#fcfcfd; border-right:1px solid #e4e8ee; padding:calc(17*var(--u)) calc(11*var(--u)); display:flex; flex-direction:column; gap:calc(2*var(--u)); }
.y1-vf-brand { font-weight:700; font-size:calc(22*var(--u)); padding:calc(3*var(--u)) calc(14*var(--u)) calc(17*var(--u)); color:#152337; letter-spacing:-.01em; }
.y1-vf-brand b { color:#8b6c28; }
.y1-vf-ri { padding:calc(9*var(--u)) calc(14*var(--u)); border-radius:calc(11*var(--u)); font-size:calc(18*var(--u)); color:#526071; }
.y1-vf-ri.on { background:#e8edf5; color:#183b61; font-weight:650; }
.y1-vf-main { flex:1; min-width:0; padding:calc(22*var(--u)) calc(25*var(--u)); display:flex; flex-direction:column; gap:calc(15*var(--u)); position:relative; }
.y1-vf-eb { font-size:calc(14.7*var(--u)); letter-spacing:.12em; text-transform:uppercase; color:#8b6c28; font-weight:700; }
.y1-vf-h1 { font-weight:650; font-size:calc(28*var(--u)); letter-spacing:-.02em; color:#182231; line-height:1.2; }
.y1-vf-row { display:flex; gap:calc(10*var(--u)); align-items:center; flex-wrap:wrap; }
.y1-vf-chip { font-size:calc(15.4*var(--u)); padding:calc(2.8*var(--u)) calc(12.6*var(--u)); border-radius:999px; background:#f0f2f5; border:1px solid #dce2ea; color:#526071; white-space:nowrap; font-weight:500; }
.y1-vf-chip--gold { background:#f5efe1; border-color:#e8dbbb; color:#725820; }
.y1-vf-chip--blue { background:#e8edf5; border-color:#cbd8e7; color:#183b61; }
.y1-vf-tabs { display:flex; gap:calc(8*var(--u)); border-bottom:1px solid #e4e8ee; padding-bottom:calc(10*var(--u)); }
.y1-vf-tab { font-size:calc(17.5*var(--u)); padding:calc(7*var(--u)) calc(14*var(--u)); border-radius:calc(11*var(--u)); color:#607083; }
.y1-vf-tab.on { background:#e8edf5; color:#183b61; font-weight:650; }
.y1-vf-ai { background:#fbf8f0; border:1px solid #eadfc4; border-left:calc(4*var(--u)) solid #193b5d; border-radius:calc(14*var(--u)); padding:calc(15*var(--u)) calc(18*var(--u)); display:flex; flex-direction:column; gap:calc(8*var(--u)); font-size:calc(19*var(--u)); color:#182231; }
.y1-vf-ai small { font-size:calc(15.4*var(--u)); color:#626f80; }
.y1-vf-msg { display:flex; gap:calc(14*var(--u)); align-items:flex-start; background:#fff; border:1px solid #e4e8ee; border-radius:calc(17*var(--u)); padding:calc(15*var(--u)) calc(18*var(--u)); font-size:calc(19*var(--u)); color:#182231; }
.y1-vf-av { width:calc(42*var(--u)); height:calc(42*var(--u)); border-radius:50%; background:#193b5d; color:#fff; display:grid; place-items:center; font-weight:700; font-size:calc(15*var(--u)); flex:none; }
.y1-vf-msg small { display:block; color:#626f80; font-size:calc(15.4*var(--u)); margin-top:calc(4*var(--u)); }
.y1-vf-ring { position:absolute; border:calc(2.8*var(--u)) solid var(--b-gold); border-radius:calc(14*var(--u)); box-shadow:0 0 0 calc(5.6*var(--u)) rgba(196,163,90,.22); pointer-events:none; }
.y1-vf-ripple { position:absolute; width:calc(64*var(--u)); height:calc(64*var(--u)); margin:calc(-32*var(--u)) 0 0 calc(-32*var(--u)); border-radius:50%; border:calc(3*var(--u)) solid rgba(196,163,90,.95); background:rgba(196,163,90,.18); pointer-events:none; }
.y1-vf-cursor { position:absolute; width:calc(34*var(--u)); height:calc(40*var(--u)); pointer-events:none; }
.y1-vf-cursor svg { width:100%; height:100%; display:block; filter:drop-shadow(0 calc(2*var(--u)) calc(3*var(--u)) rgba(0,0,0,.35)); }
.y1-vf-pill { position:absolute; top:calc(22*var(--u)); height:calc(42*var(--u)); display:flex; align-items:center; gap:calc(10*var(--u)); border-radius:999px; padding:0 calc(18*var(--u)); font-size:calc(19*var(--u)); white-space:nowrap; color:#f2f5f9; }
.y1-vf-pill--preview { left:calc(130*var(--u)); background:rgba(196,163,90,.14); border:1px solid rgba(214,181,108,.55); font-weight:600; letter-spacing:.01em; }
.y1-vf-pill--preview i { width:calc(10*var(--u)); height:calc(10*var(--u)); border-radius:50%; background:#d6b56c; display:block; box-shadow:0 0 0 calc(4*var(--u)) rgba(214,181,108,.22); }
.y1-vf-pill--sample { right:calc(130*var(--u)); border:1px dashed #3a5070; color:#b9c6d6; font-weight:500; }
.y1-vf-cap { position:absolute; left:calc(160*var(--u)); right:calc(160*var(--u)); top:calc(956*var(--u)); height:calc(124*var(--u)); display:flex; align-items:center; justify-content:center; text-align:center; }
.y1-vf-cap p { margin:0; font-size:calc(34*var(--u)); line-height:1.28; font-weight:500; color:#f2f5f9; letter-spacing:-.003em; max-width:calc(1500*var(--u)); text-shadow:0 1px 2px rgba(0,0,0,.4); }
.y1-vf-plans { position:absolute; left:calc(150*var(--u)); bottom:calc(10*var(--u)); display:flex; gap:calc(10*var(--u)); }

.y1-vd { --k:.6; display:grid; gap:14px; justify-items:start; }
.y1-vd-why { display:flex; align-items:center; gap:calc(18px*var(--k)); background:rgba(196,163,90,.12); border:1px solid rgba(214,181,108,.45); border-radius:calc(16px*var(--k)); padding:calc(12px*var(--k)) calc(26px*var(--k)); max-width:calc(1560px*var(--k)); }
.y1-vd-why b { font-size:calc(15px*var(--k)); letter-spacing:.16em; text-transform:uppercase; color:#d6b56c; font-weight:700; white-space:nowrap; padding-right:calc(18px*var(--k)); border-right:1px solid rgba(214,181,108,.4); }
.y1-vd-why span { font-size:calc(32px*var(--k)); line-height:1.25; font-weight:600; color:#fff; }
.y1-vd-cap { font-size:calc(34px*var(--k)); line-height:1.28; font-weight:500; color:#f2f5f9; max-width:calc(1500px*var(--k)); margin:0; text-align:center; }
.y1-vd-pillrow { display:flex; flex-wrap:wrap; gap:calc(14px*var(--k)); }
.y1-vd-pillrow .y1-vf-pill { gap:8px; position:static; font-size:calc(19px*var(--k)*1.4); height:calc(42px*var(--k)*1.4); padding:0 calc(18px*var(--k)*1.4); }
.y1-vd-pillrow .y1-vf-pill--preview i { width:calc(10px*var(--k)*1.4); height:calc(10px*var(--k)*1.4); }
.y1-vchip { display:inline-flex; align-items:center; gap:8px; min-height:34px; padding:4px 14px 4px 8px; border-radius:999px; background:var(--b-page); border:1px solid rgba(255,255,255,.25); color:var(--b-ink); font:600 14px/1 var(--ds-font-sans); }
.y1-vchip--on { border-color:var(--b-stage-gold); box-shadow:0 0 0 3px rgba(214,181,108,.25); }
.y1-vchip-name { color:var(--b-ink); }
.y1-vf-end { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:calc(22*var(--u)); color:#f2f5f9; }
.y1-vf-wm { font:700 calc(150*var(--u))/1 var(--ds-font-sans); letter-spacing:-.04em; color:#f2f5f9; }
.y1-vf-wm b { color:#d6b56c; }
.y1-vf-tag { font:600 calc(52*var(--u))/1.15 var(--ds-font-serif); letter-spacing:-.01em; }
.y1-vf-endurl { font:500 calc(30*var(--u)) var(--ds-font-sans); color:#b9c6d6; letter-spacing:.02em; margin-top:calc(10*var(--u)); padding:calc(10*var(--u)) calc(26*var(--u)); border:1px solid #2b3d55; border-radius:999px; }
.y1-vf-close { position:absolute; left:calc(150*var(--u)); top:calc(300*var(--u)); display:flex; flex-direction:column; gap:calc(30*var(--u)); }
.y1-vf-close div { font:600 calc(62*var(--u))/1.1 var(--ds-font-serif); color:#f2f5f9; letter-spacing:-.015em; }
.y1-vf-close b { color:#d6b56c; font-weight:600; }
.y1-vf-sig { position:absolute; right:calc(150*var(--u)); top:calc(180*var(--u)); }
.y1-vf-thumb { position:absolute; inset:0; padding:calc(90*var(--u)) calc(100*var(--u)); display:flex; flex-direction:column; justify-content:center; gap:calc(26*var(--u)); }
.y1-vf-thumb .y1-th-title { font:700 calc(124*var(--u))/1.04 var(--ds-font-serif); letter-spacing:-.02em; color:#f2f5f9; max-width:calc(800*var(--u)); }
.y1-vf-thumb .y1-th-title b { color:#d6b56c; font-weight:700; }
.y1-vf-thumb .y1-th-rule { width:calc(180*var(--u)); height:calc(5*var(--u)); background:#d6b56c; }
.y1-vf-thumb .y1-th-sub { font:500 calc(36*var(--u))/1.2 var(--ds-font-sans); color:#b9c6d6; }
.y1-vf-thumb .y1-th-mark { position:absolute; right:calc(90*var(--u)); top:50%; transform:translateY(-50%); width:calc(300*var(--u)); height:calc(300*var(--u)); display:grid; place-items:center; background:#fff; border-radius:calc(48*var(--u)); }
.y1-vf-thumb .y1-th-mark img { width:76%; height:76%; display:block; }
.y1-vf-thumb .y1-th-brand { position:absolute; left:calc(100*var(--u)); bottom:calc(60*var(--u)); font:700 calc(46*var(--u))/1 var(--ds-font-sans); letter-spacing:-.04em; color:#f2f5f9; }
.y1-vf-thumb .y1-th-brand b { color:#d6b56c; }

/* ---------- plan tiles demo ---------- */
.y1-feat { list-style:none; margin:0; padding:0; display:grid; }
.y1-feat li { display:flex; align-items:center; gap:6px; min-height:44px; padding:0 4px; border-bottom:1px solid var(--b-line); font-size:16px; color:var(--b-ink); }
.y1-feat li:last-child { border-bottom:0; }
.y1-feat .plan-tile { margin:0; }
.y1-feat-note { margin-left:auto; font-size:13.5px; color:var(--b-muted); }
.y1-head-tile { display:flex; align-items:center; gap:6px; margin:0 0 6px; font:650 1.45rem/1.2 var(--ds-font-serif); letter-spacing:-.02em; color:var(--b-navy); }
.y1-head-tile .plan-tile { margin:0; }
.y1-btn .plan-tile { margin:0; }
.y1-tiles-demo { display:grid; gap:20px; }
.y1-vchip .plan-tile { margin:0; }

/* ---------- words and misc ---------- */
.y1-say { display:grid; gap:14px; grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr)); }
.y1-say-c { background:var(--b-surface); border:1px solid var(--b-line); border-radius:var(--b-radius); padding:16px 18px; }
.y1-say-c h3 { margin:0 0 6px; font-size:13px; letter-spacing:.1em; text-transform:uppercase; }
.y1-say-c--yes h3 { color:var(--b-ok); }
.y1-say-c--no h3 { color:var(--b-bad); }
.y1-say-c p { margin:0 0 6px; font-size:15.5px; line-height:1.45; }
.y1-say-c p:last-child { margin-bottom:0; }
.y1-names { width:100%; }
.y1-checklist { margin:0; padding-left:1.4em; display:grid; gap:8px; max-width:70ch; line-height:1.5; }
.y1-checklist li::marker { color:var(--b-gold-ink); font-weight:700; }

@media (max-width:640px) {
  .y1-clear { padding:28px; }
  .y1-chat, .y1-pub { padding:16px; }
  .y1-flow { padding:16px; }
  .y1-vd { --k:.5; }
  .y1-feat li { flex-wrap:wrap; padding:6px 4px; }
  .y1-feat-note { margin-left:0; width:100%; }
}
@media (prefers-reduced-motion:reduce) { .y1-btn, .y1-door, .y1-act { transition:none; } }
@media print {
  .y1-menu { position:static; }
}

/* ---------- video frame positions (video px) ---------- */
.y1-vf-ring--tab { left:calc(402*var(--u)); top:calc(282*var(--u)); width:calc(156*var(--u)); height:calc(50*var(--u)); }
.y1-vf-ripple--tab { left:calc(548*var(--u)); top:calc(322*var(--u)); }
.y1-vf-cursor--tab { left:calc(545*var(--u)); top:calc(320*var(--u)); }
.y1-vf-thumb-box { --u:calc(100cqw / 1280); }
.y1-on-stage { color:var(--b-stage-muted); }

/* ---------- link-shaped samples must beat the shell's body.ds a color ---------- */
body.ds a.y1-btn { color:var(--b-navy-ui); text-decoration:none; }
body.ds a.y1-btn--primary { color:#fff; }
body.ds a.y1-btn--soft { color:#224867; }
body.ds a.y1-btn--gold { color:var(--b-navy); }
body.ds a.y1-btn--dark-ghost { color:#fff; }
body.ds a.y1-btn--dark-ghost:hover { color:var(--b-gold-light); }
body.ds a.y1-door { color:var(--b-navy-ui); text-decoration:none; }
body.ds a.y1-door--primary { color:#fff; }
body.ds a.y1-link { color:var(--b-flow-blue-dark); }
body.ds .y1-foot-s a { color:#c5d2e0; }
body.ds .y1-foot-s a:hover { color:#fff; }
body.ds a.y1-lockup { color:#fff; text-decoration:none; }
body.ds .y1-ainote a.y1-link { text-decoration:underline; }
.ds-type-meta b { display:block; font-family:var(--ds-font-sans); font-size:13px; font-weight:650; color:var(--ds-ink); margin-bottom:2px; }
.y1-phone-screen { min-height:100%; display:flex; flex-direction:column; }
.y1-phone-screen .y1-sec-s { flex:1; }