/* ============================================================
   craftagent — "CỬA VÀO" newcomer hub (cụm 11 / TOFU)
   Lives on TOP of the existing system (styles.css + diagrams.css +
   rich.css). Adds only the newcomer-funnel surfaces:
     · scene-driven hero + "cái giá thật" cost card
     · "hai cánh cửa" reframe band (warm, no radar/gates)
     · the 8-door interactive map (centerpiece + funnel)
     · "việc đầu tiên" first-job finder
     · bridge into the 10 deep clusters
   Everything is token-driven (var(--accent/--ink/--serif…)) so it
   reads as the SAME house, just rearranged for someone in pain.
   ============================================================ */

/* ---------- shared: section rhythm ---------- */
.cv-sec{max-width:var(--maxw);margin:0 auto;padding:78px 30px;position:relative;z-index:1}
.cv-band{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--paper-2);position:relative;z-index:1}
.cv-eyebrow{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:34px}
.cv-eyebrow h2{font-family:var(--serif);font-weight:500;font-size:clamp(28px,3.6vw,44px);letter-spacing:-.025em;line-height:1.05;margin:12px 0 0;max-width:22ch}
.cv-eyebrow h2 em{font-style:italic;color:var(--accent)}
.cv-eyebrow .side{font-family:var(--sans);font-size:14px;line-height:1.6;color:var(--ink-soft);max-width:34ch}

/* ============================================================
   HERO — opens on a real scene, then the reframe
   ============================================================ */
.cv-hero{max-width:var(--maxw);margin:0 auto;padding:60px 30px 46px;position:relative;z-index:1}
.cv-hero-grid{display:grid;grid-template-columns:1.12fr .88fr;gap:54px;align-items:center}
.scene-line{font-family:var(--serif);font-style:italic;font-size:clamp(17px,1.8vw,20px);line-height:1.5;color:var(--ink-soft);border-left:3px solid var(--accent);padding:4px 0 4px 20px;margin:0 0 24px;max-width:40ch}
.scene-line b{font-style:normal;color:var(--ink);font-weight:600}
.cv-hero h1{font-family:var(--serif);font-weight:500;font-size:clamp(38px,5vw,66px);line-height:1.02;letter-spacing:-.03em;margin:0;color:var(--ink)}
.cv-hero h1 em{font-style:italic;color:var(--accent)}
.cv-hero .lede{font-family:var(--serif);font-size:20px;line-height:1.55;color:var(--ink-soft);max-width:46ch;margin:22px 0 0}
.cv-cta{display:flex;align-items:center;gap:14px;margin-top:32px;flex-wrap:wrap}

/* cost card — "10 phút × mỗi ngày = hai tuần một năm" */
.cost{position:relative;background:var(--raise);border:1px solid var(--line);border-radius:20px;padding:28px 28px 26px;box-shadow:var(--shadow);overflow:hidden}
.cost::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(90% 70% at 100% 0,var(--wash),transparent 60%);opacity:.7}
.cost .cost-k{position:relative;font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--accent);font-weight:600;display:flex;align-items:center;gap:.7em}
.cost .cost-k::before{content:"";width:18px;height:1.5px;background:var(--accent)}
.cost .cost-eq{position:relative;display:flex;flex-direction:column;gap:14px;margin:22px 0 4px}
.cost .ceq{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:14px}
.cost .ceq .icon{width:34px;height:34px;border-radius:9px;background:var(--paper-2);border:1px solid var(--line);display:grid;place-items:center;color:var(--accent);flex:0 0 auto}
.cost .ceq .icon svg{width:18px;height:18px}
.cost .ceq .tx{font-family:var(--sans);font-size:13.5px;line-height:1.35;color:var(--ink-soft)}
.cost .ceq .tx b{color:var(--ink);font-weight:700}
.cost .ceq .amt{font-family:var(--serif);font-style:italic;font-weight:500;font-size:24px;color:var(--ink-mute);line-height:1;font-variant-numeric:tabular-nums;white-space:nowrap}
.cost .cost-rule{position:relative;height:1px;background:var(--line);margin:6px 0 4px}
.cost .cost-out{position:relative;display:flex;align-items:baseline;justify-content:space-between;gap:14px;margin-top:14px}
.cost .cost-out .lbl{font-family:var(--sans);font-size:13px;font-weight:600;color:var(--ink)}
.cost .cost-out .big{font-family:var(--serif);font-style:italic;font-weight:500;font-size:clamp(32px,3.6vw,44px);color:var(--accent);line-height:.9;letter-spacing:-.02em;white-space:nowrap}
.cost .cost-foot{position:relative;font-family:var(--sans);font-size:12.5px;line-height:1.5;color:var(--ink-mute);margin:16px 0 0;padding-top:14px;border-top:1px solid var(--line)}
/* count-bars draw-in — transform only, text always visible (never strand) */
.cost .ceq .amt{transform:translateY(6px);transition:transform .55s var(--ease)}
.cost.in .ceq:nth-child(1) .amt{transform:none;transition-delay:.15s}
.cost.in .ceq:nth-child(2) .amt{transform:none;transition-delay:.35s}
.cost .cost-out .big{transform:scale(.92);transform-origin:right;transition:transform .55s var(--spring)}
.cost.in .cost-out .big{transform:none;transition-delay:.55s}

/* ============================================================
   REFRAME — "hai cánh cửa" (wrong door vs right door)
   ============================================================ */
.doors2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.door2{position:relative;border-radius:18px;border:1px solid var(--line);background:var(--raise);padding:26px 26px 24px;overflow:hidden;transition:transform .3s var(--ease),box-shadow .3s}
.door2 .d2-tag{display:inline-flex;align-items:center;gap:9px;font-family:var(--sans);font-size:13.5px;font-weight:700;margin-bottom:16px}
.door2 .d2-m{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;color:#fff;font-size:13px;font-weight:800;flex:0 0 auto}
.door2 .d2-step{display:flex;gap:11px;align-items:flex-start;font-family:var(--sans);font-size:13.5px;line-height:1.5;color:var(--ink-soft);padding:9px 0}
.door2 .d2-step .n{font-family:var(--mono);font-size:11px;color:var(--ink-mute);margin-top:2px;flex:0 0 auto}
.door2 .d2-step + .d2-step{border-top:1px dashed var(--line)}
.door2.bad{background:var(--alert-bg);border-color:var(--alert-line)}
.door2.bad .d2-m{background:var(--alert)}
.door2.bad .d2-tag{color:var(--alert)}
.door2.good{background:var(--good-bg);border-color:var(--good-line)}
.door2.good .d2-m{background:var(--good)}
.door2.good .d2-tag{color:var(--good)}
.door2.good{box-shadow:0 14px 40px -22px var(--good)}
.doors2-cap{font-family:var(--sans);font-size:14px;line-height:1.65;color:var(--ink-mute);margin:22px auto 0;text-align:center;max-width:60ch}
.doors2-cap b{color:var(--ink);font-weight:600}

/* ============================================================
   THE 8 DOORS — interactive map (centerpiece + funnel)
   ============================================================ */
.doormap{display:grid;grid-template-columns:1.05fr 1.15fr;gap:34px;align-items:start}
.dm-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.door{position:relative;display:flex;gap:14px;align-items:flex-start;text-align:left;background:var(--raise);border:1px solid var(--line);border-radius:14px;padding:16px 16px 15px;cursor:pointer;font-family:inherit;color:inherit;overflow:hidden;transition:transform .22s var(--ease),border-color .2s,box-shadow .22s,background .2s}
.door::after{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--accent);transform:scaleY(0);transform-origin:top;transition:transform .26s var(--ease);z-index:2}
/* selected highlight via ::before overlay (pseudo-elements aren't style-pinned
   by the editor harness, so this renders in preview AND production) */
.door::before{content:"";position:absolute;inset:0;border-radius:14px;pointer-events:none;z-index:0;background:color-mix(in srgb,var(--accent) 7%,transparent);box-shadow:0 0 0 1.5px var(--accent) inset;visibility:hidden}
.door.on::before{visibility:visible}
.door .dico,.door .dtx{position:relative;z-index:1}
.door:hover{transform:translateY(-2px);border-color:var(--line-2);box-shadow:var(--shadow-sm)}
.door:hover::after{transform:scaleY(1)}
.door.on{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 6%,var(--raise));box-shadow:var(--shadow-sm)}
.door.on::after{transform:scaleY(1)}
.door .dico{flex:0 0 auto;width:30px;height:40px;position:relative}
/* a small "door" glyph drawn from simple rects */
.door .dframe{position:absolute;inset:0;border:2px solid var(--line-2);border-radius:4px 4px 2px 2px;background:var(--paper-2);transition:border-color .25s,background .25s}
.door .dknob{position:absolute;right:5px;top:50%;width:4px;height:4px;border-radius:50%;background:var(--line-2);transform:translateY(-50%);transition:background .25s}
.door:hover .dframe,.door.on .dframe{border-color:var(--accent);background:var(--wash)}
.door:hover .dknob,.door.on .dknob{background:var(--accent)}
.door .dtx{min-width:0}
.door .dtx .dn{font-family:var(--mono);font-size:10px;letter-spacing:.1em;color:var(--ink-mute);display:block;margin-bottom:4px}
.door.on .dtx .dn{color:var(--accent)}
.door .dtx b{font-family:var(--sans);font-size:13.5px;font-weight:700;color:var(--ink);line-height:1.25;display:block}
.door.master{grid-column:1/-1;background:var(--wash);border-color:var(--accent-ink)}
.door.master .dframe{border-color:var(--accent);background:var(--raise)}
.door.master .dknob{background:var(--accent)}
.door.master .dtx .dn{color:var(--accent)}

/* detail panel (sticky on desktop) */
.dm-detail{position:sticky;top:90px;background:var(--raise);border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:0 18px 18px 0;padding:30px 32px 28px;box-shadow:var(--shadow);min-height:330px;overflow:hidden}
.dm-detail::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(85% 65% at 100% 0,var(--wash),transparent 58%);opacity:.6}
.dm-detail .dd-scene{position:relative;font-family:var(--serif);font-style:italic;font-size:clamp(20px,2.3vw,26px);line-height:1.4;letter-spacing:-.01em;color:var(--ink);margin:0;transition:opacity .3s}
.dm-detail .dd-quote{position:relative;font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--accent);font-weight:600;display:flex;align-items:center;gap:.7em;margin-bottom:18px}
.dm-detail .dd-quote::before{content:"";width:18px;height:1.5px;background:var(--accent)}
.dm-detail .dd-ease{position:relative;font-family:var(--sans);font-size:15px;line-height:1.65;color:var(--ink-soft);margin:22px 0 0}
.dm-detail .dd-ease b{color:var(--ink);font-weight:600}
.dm-detail .dd-foot{position:relative;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:26px;padding-top:20px;border-top:1px solid var(--line)}
.dm-detail .dd-cluster{font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-mute);display:inline-flex;align-items:center;gap:8px}
.dm-detail .dd-cluster b{color:var(--accent);font-weight:600}
.dm-detail .dd-go{font-family:var(--sans);font-size:14px;font-weight:700;color:#fff;background:var(--accent);border-radius:999px;padding:11px 20px;display:inline-flex;align-items:center;gap:9px;text-decoration:none;box-shadow:0 8px 22px -10px var(--accent);transition:transform .2s var(--ease),box-shadow .25s}
.dm-detail .dd-go:hover{transform:translateY(-2px);box-shadow:0 14px 30px -10px var(--accent)}
.dm-detail .dd-go .arr{transition:transform .25s var(--spring)}
.dm-detail .dd-go:hover .arr{transform:translateX(4px)}
.dm-detail.swap .dd-scene,.dm-detail.swap .dd-ease{opacity:0}

/* ============================================================
   FIRST JOB — the funnel goal: find the first job worth handing off
   ============================================================ */
.fj-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}
.fj-test{background:var(--raise);border:1px solid var(--line);border-radius:20px;padding:28px 30px 26px;box-shadow:var(--shadow-sm)}
.fj-test .fj-k{font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-mute);margin-bottom:18px}
.fj-crit{display:flex;flex-direction:column;gap:12px}
.crit{position:relative;display:flex;align-items:center;gap:15px;width:100%;text-align:left;background:var(--paper-2);border:1px solid var(--line);border-radius:13px;padding:16px 18px;cursor:pointer;font-family:inherit;color:inherit;overflow:hidden;transition:border-color .2s,transform .15s}
.crit:hover{border-color:var(--line-2)}
/* selected tint+ring via ::before (pseudo props aren't pinned by the editor harness) */
.crit::before{content:"";position:absolute;inset:0;border-radius:13px;pointer-events:none;z-index:0;background:color-mix(in srgb,var(--accent) 6%,transparent);box-shadow:0 0 0 1.5px var(--accent) inset;visibility:hidden}
.crit.on::before{visibility:visible}
.crit .box,.crit .ctx{position:relative;z-index:1}
.crit .box{width:26px;height:26px;border-radius:8px;border:2px solid var(--line-2);flex:0 0 auto;overflow:hidden;transition:border-color .25s var(--spring)}
.crit .box svg{display:none}
/* fill + checkmark drawn as pseudos so they survive harness pinning */
.crit .box::after{content:"";position:absolute;inset:0;background:var(--accent);visibility:hidden;z-index:0}
.crit .box::before{content:"";position:absolute;z-index:1;left:50%;top:46%;width:6px;height:11px;border:2.5px solid #fff;border-top:0;border-left:0;transform:translate(-50%,-50%) rotate(45deg);visibility:hidden}
.crit.on .box::after,.crit.on .box::before{visibility:visible}
.crit .ctx b{font-family:var(--sans);font-size:15px;font-weight:700;color:var(--ink);display:block}
.crit .ctx span{font-family:var(--sans);font-size:12.5px;color:var(--ink-mute);display:block;margin-top:2px;line-height:1.4}
.fj-result{margin-top:20px;border-top:1px dashed var(--line);padding-top:20px;display:flex;align-items:center;gap:16px;min-height:34px}
.fj-result .rtx{font-family:var(--serif);font-style:italic;font-size:17px;line-height:1.4;color:var(--ink-mute);transition:color .3s}
.fj-result.ready .rtx{color:var(--ink);font-style:normal;font-family:var(--sans);font-weight:600;font-style:normal}
.fj-result .fj-go{visibility:hidden;transform:translateX(-6px);pointer-events:none;transition:transform .3s var(--ease);white-space:nowrap}
.fj-result.ready .fj-go{visibility:visible;transform:none;pointer-events:auto}

/* the 3-step loop */
.loop{display:flex;flex-direction:column;gap:0}
.loop .lstep{display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:start;position:relative;padding-bottom:26px}
.loop .lstep:last-child{padding-bottom:0}
.loop .lstep::before{content:"";position:absolute;left:21px;top:44px;bottom:-2px;width:2px;background:var(--line);}
.loop .lstep:last-child::before{display:none}
.loop .lnum{width:44px;height:44px;border-radius:50%;border:2px solid var(--accent);color:var(--accent);background:var(--raise);display:grid;place-items:center;font-family:var(--serif);font-style:italic;font-weight:500;font-size:20px;flex:0 0 auto;position:relative;z-index:1}
.loop .lbody b{font-family:var(--sans);font-size:16px;font-weight:700;color:var(--ink);display:block;margin-top:9px}
.loop .lbody p{font-family:var(--sans);font-size:13.5px;line-height:1.6;color:var(--ink-soft);margin:6px 0 0;max-width:38ch}
.loop .lback{font-family:var(--mono);font-size:11px;letter-spacing:.04em;color:var(--accent);margin-top:14px;display:inline-flex;align-items:center;gap:8px}
.loop .lback svg{width:15px;height:15px}

/* ============================================================
   BRIDGE — 8 doors → one garden (handoff to deep clusters)
   ============================================================ */
.bridge-lead{font-family:var(--serif);font-weight:500;font-size:clamp(24px,3vw,36px);line-height:1.25;letter-spacing:-.02em;max-width:30ch;margin:0 0 10px}
.bridge-lead b{color:var(--accent);font-style:italic;font-weight:500}
.bridge-sub{font-family:var(--sans);font-size:15px;line-height:1.7;color:var(--ink-soft);max-width:56ch;margin:0 0 34px}
.cl-strip{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}
.clc{position:relative;display:flex;flex-direction:column;gap:10px;background:var(--raise);border:1px solid var(--line);border-radius:13px;padding:16px 14px;text-decoration:none;color:inherit;overflow:hidden;transition:transform .2s var(--ease),border-color .2s,box-shadow .2s}
.clc::after{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--accent);transform:scaleY(0);transform-origin:top;transition:transform .26s}
.clc:hover{transform:translateY(-3px);border-color:var(--line-2);box-shadow:var(--shadow-sm)}
.clc:hover::after{transform:scaleY(1)}
.clc .cn{font-family:var(--serif);font-style:italic;font-weight:500;font-size:30px;line-height:.8;color:var(--line-2);transition:color .25s}
.clc:hover .cn{color:var(--accent)}
.clc .ct{font-family:var(--sans);font-size:12.5px;font-weight:600;line-height:1.3;color:var(--ink)}
.bridge-cta{display:flex;align-items:center;gap:14px;margin-top:30px;flex-wrap:wrap}

/* ============================================================
   SELECTED / CHECKED / READY states. The base .on::before pseudo
   rules above already drive the ring + fill via `visibility` (a
   robust real-browser technique). These node-level rules layer the
   tint/border so the selected card reads clearly in both themes.
   ============================================================ */
.crit.on{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 6%,var(--raise))}
.door.on{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 6%,var(--raise))}
.door.on .dframe{border-color:var(--accent);background:var(--wash)}
.door.on .dknob{background:var(--accent)}
.door.on .dtx .dn{color:var(--accent)}

/* ============================================================
   HERO time-chip + door "moment" SIMULATIONS (detail stage)
   ============================================================ */
.scene-time{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);font-weight:600;margin-bottom:14px}
.scene-time .dot{width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 60%,transparent);animation:pulse 1.9s infinite}
.scene-time b{color:var(--ink-soft);font-weight:600;letter-spacing:.06em}

/* the simulation stage at the top of the detail panel */
.dd-stage{position:relative;margin:0 0 22px;border-radius:14px;overflow:hidden;background:var(--paper-2);border:1px solid var(--line);padding:15px 16px;min-height:120px;transition:opacity .3s}
.dd-stage::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(120% 80% at 0 0,var(--wash),transparent 62%);opacity:.5}
.dm-detail.swap .dd-stage{opacity:0}
.sim{position:relative;display:flex;flex-direction:column;gap:8px}
.sim-top{display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-mute)}
.sim-top .t{margin-left:auto;color:var(--accent);font-weight:600}
/* chat */
.sim-chat{display:flex;flex-direction:column;gap:7px}
.sb{max-width:82%;font-family:var(--sans);font-size:12.5px;line-height:1.4;padding:8px 11px;border-radius:13px}
.sb .ts{display:block;font-family:var(--mono);font-size:9px;margin-top:4px;letter-spacing:.04em}
.sb.in{align-self:flex-start;background:var(--raise);border:1px solid var(--line);border-bottom-left-radius:4px;color:var(--ink)}
.sb.in .ts{color:var(--ink-mute)}
.sb.ghost{align-self:flex-start;background:transparent;border:1px dashed var(--alert-line);color:var(--alert);font-style:italic;font-size:12px}
.sim-gap{font-family:var(--mono);font-size:9.5px;color:var(--ink-mute);text-align:center;letter-spacing:.06em;opacity:.85;padding:2px 0}
/* bland reply / doc lines */
.sim-doc{display:flex;flex-direction:column;gap:6px;background:var(--raise);border:1px solid var(--line);border-radius:10px;padding:11px 12px}
.sim-doc .dq{font-family:var(--mono);font-size:11px;color:var(--accent);margin-bottom:3px}
.sim-doc .dl{height:7px;border-radius:4px;background:var(--line)}
.sim-doc .dl.w1{width:96%}.sim-doc .dl.w2{width:86%}.sim-doc .dl.w3{width:66%}
.sim-tag{align-self:flex-start;font-family:var(--mono);font-size:9.5px;letter-spacing:.05em;text-transform:uppercase;padding:4px 9px;border-radius:999px}
.sim-tag.bad{background:var(--alert-bg);color:var(--alert);border:1px solid var(--alert-line)}
.sim-tag.warn{background:var(--wash);color:var(--accent-ink);border:1px solid var(--line-2)}
/* tabs + repeat cells */
.sim-tabs{display:flex;gap:5px;flex-wrap:wrap}
.sim-tabs .tab{font-family:var(--mono);font-size:10px;color:var(--ink-soft);background:var(--raise);border:1px solid var(--line);border-radius:7px;padding:5px 9px}
.sim-cells{display:flex;gap:5px;margin-top:1px}
.sim-cells .c{flex:1;height:24px;border-radius:6px;background:var(--raise);border:1px solid var(--line);display:grid;place-items:center;font-family:var(--mono);font-size:10px;color:var(--ink-mute)}
/* blank input */
.sim-input{display:flex;align-items:center;gap:9px;background:var(--raise);border:1px solid var(--line);border-radius:12px;padding:13px 14px}
.sim-input .ph{font-family:var(--sans);font-size:13px;color:var(--ink-mute)}
.sim-caret{width:2px;height:16px;background:var(--accent);animation:simblink 1.1s steps(1) infinite}
@keyframes simblink{50%{opacity:0}}
.sim-input .send{margin-left:auto;width:27px;height:27px;border-radius:8px;background:var(--paper-2);border:1px solid var(--line);display:grid;place-items:center;color:var(--ink-mute);font-family:var(--mono)}
/* memory groundhog */
.sim-mem{display:flex;flex-direction:column;gap:5px}
.sim-mem .ml{display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:11px;color:var(--ink-soft);background:var(--raise);border:1px solid var(--line);border-radius:8px;padding:6px 10px}
.sim-mem .ml .d{font-size:9px;color:var(--ink-mute);margin-left:auto;letter-spacing:.04em}
.sim-mem .ml.dim{opacity:.55}
.sim-mem .ml.dim2{opacity:.32}
/* watch progress */
.sim-watch .wbar{height:11px;border-radius:6px;background:var(--raise);border:1px solid var(--line);overflow:hidden;position:relative}
.sim-watch .wbar i{position:absolute;left:0;top:0;bottom:0;border-radius:6px;background:linear-gradient(90deg,var(--accent),var(--accent-ink));animation:simrun 2.6s ease-in-out infinite}
@keyframes simrun{0%{width:8%}50%{width:64%}100%{width:8%}}
.sim-watch .wrow{display:flex;align-items:center;gap:8px;margin-top:9px;font-family:var(--sans);font-size:11.5px;color:var(--ink-mute)}
.sim-watch .cancel{margin-left:auto;font-family:var(--sans);font-size:11px;font-weight:700;color:var(--alert);border:1px solid var(--alert-line);background:var(--alert-bg);border-radius:7px;padding:4px 10px}
@media (prefers-reduced-motion: reduce){.sim-caret,.sim-watch .wbar i,.scene-time .dot{animation:none!important}}

/* ============================================================
   responsive
   ============================================================ */
@media(max-width:980px){
  .cv-hero-grid{grid-template-columns:1fr;gap:38px}
  .doormap{grid-template-columns:1fr;gap:24px}
  .dm-detail{position:static}
  .fj-grid{grid-template-columns:1fr;gap:30px}
  .doors2{grid-template-columns:1fr}
  .cl-strip{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:560px){
  .cv-hero,.cv-sec{padding-left:18px;padding-right:18px}
  .cv-sec{padding-top:56px;padding-bottom:56px}
  .dm-grid{grid-template-columns:1fr}
  .door.master{grid-column:auto}
  .cl-strip{grid-template-columns:1fr}
}

/* ============================================================
   HUB v2 — visceral hook · pain symptoms (no door metaphor) · pain→fix stage
   ============================================================ */
/* hero "việc lặp" loop visual (replaces the cost card) */
.heroloop{position:relative;background:var(--raise);border:1px solid var(--line);border-radius:20px;padding:26px 28px 24px;box-shadow:var(--shadow);overflow:hidden}
.heroloop::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(90% 70% at 100% 0,var(--wash),transparent 60%);opacity:.7}
.heroloop .hl-k{position:relative;font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--accent);font-weight:600;display:flex;align-items:center;gap:.7em;margin-bottom:16px}
.heroloop .hl-k::before{content:"";width:18px;height:1.5px;background:var(--accent)}
.hl-stack{position:relative;display:flex;flex-direction:column;gap:8px}
.hl-row{display:flex;align-items:center;gap:12px;background:var(--paper-2);border:1px solid var(--line);border-radius:11px;padding:12px 14px;font-family:var(--sans);font-size:14px;color:var(--ink);transform:translateY(10px);transition:transform .5s var(--ease)}
.heroloop.in .hl-row{transform:none}
.heroloop.in .hl-row:nth-child(2){transition-delay:.1s}.heroloop.in .hl-row:nth-child(3){transition-delay:.22s}.heroloop.in .hl-row:nth-child(4){transition-delay:.34s}
.hl-row .day{font-family:var(--mono);font-size:11px;color:var(--ink-mute);width:62px;flex:0 0 auto}
.hl-row .amt{margin-left:auto;font-family:var(--mono);font-size:12px;color:var(--ink-mute)}
.hl-row.dim{color:var(--ink-mute);border-style:dashed}
.hl-loop{position:relative;text-align:center;font-family:var(--mono);font-size:11px;letter-spacing:.05em;color:var(--ink-mute);margin:15px 0 4px}
.hl-loop b{color:var(--accent);font-weight:600}
.hl-out{position:relative;display:flex;align-items:baseline;gap:13px;margin-top:13px;padding-top:16px;border-top:1px solid var(--line)}
.hl-out .big{font-family:var(--serif);font-style:italic;font-weight:500;font-size:clamp(30px,3.6vw,42px);color:var(--accent);line-height:.9;white-space:nowrap}
.hl-out .lbl{font-family:var(--sans);font-size:13px;color:var(--ink-soft);line-height:1.4}

/* reframe PUNCH (replaces the weak two-door compare) */
.punch{max-width:var(--maxw);margin:0 auto;padding:64px 30px;display:grid;grid-template-columns:1.1fr .9fr;gap:50px;align-items:center;position:relative;z-index:1}
.punch h2{font-family:var(--serif);font-weight:500;font-size:clamp(28px,3.9vw,48px);line-height:1.07;letter-spacing:-.025em;margin:0;color:var(--ink)}
.punch h2 em{font-style:italic;color:var(--accent)}
.punch .pr{font-family:var(--sans);font-size:16px;line-height:1.7;color:var(--ink-soft);margin:20px 0 0;max-width:42ch}
.punch .pr b{color:var(--ink);font-weight:600}
.split{display:flex;flex-direction:column;gap:16px}
.split .srow{display:flex;flex-direction:column;gap:8px}
.split .sl{display:flex;justify-content:space-between;align-items:baseline;font-family:var(--sans);font-size:13.5px;font-weight:700;color:var(--ink)}
.split .sl span{font-family:var(--mono);font-size:11px;color:var(--ink-mute);font-weight:400}
.split .sbar{height:18px;border-radius:9px;background:var(--paper-2);border:1px solid var(--line);overflow:hidden}
.split .sbar i{display:block;height:100%;border-radius:8px;width:var(--w);transform:scaleX(.06);transform-origin:left;transition:transform 1.05s var(--ease)}
.split.in .sbar i{transform:scaleX(1)}
.split.in .sbar i.rote{transition-delay:.2s}
.split .sbar i.mind{background:linear-gradient(90deg,var(--accent),var(--accent-ink))}
.split .sbar i.rote{background:repeating-linear-gradient(45deg,var(--line-2) 0 7px,var(--paper-2) 7px 14px)}
.split .scap{font-family:var(--sans);font-size:12.5px;color:var(--ink-mute);margin-top:2px;line-height:1.5}

/* pain SYMPTOM marker — repurpose the door glyph into a static pip;
   selection is shown by the card ring (.door.on::before, visibility-based) */
.pains .door .dico{width:22px;height:42px}
.pains .door .dframe{inset:auto;left:50%;top:50%;transform:translate(-50%,-50%);width:11px;height:11px;border-radius:50%;border:0;background:color-mix(in srgb,var(--accent) 52%,var(--line-2))}
.pains .door .dknob{display:none}

/* stage: pain → fix framing */
.dd-badge{position:relative;display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--alert);font-weight:600;margin-bottom:13px}
.dd-badge .pls{width:7px;height:7px;border-radius:50%;background:var(--alert);animation:pulse 1.8s infinite}
.dd-fix{position:relative;margin-top:22px;padding-top:20px;border-top:1px solid var(--line)}
.dd-fix .fxk{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);font-weight:600;display:inline-flex;align-items:center;gap:8px;margin-bottom:11px}
.dd-fix .fxk svg{width:15px;height:15px}
/* open-ended note — pains are not limited to a fixed list */
.pain-extra{margin:20px 0 0;display:flex;gap:15px;align-items:flex-start;background:var(--paper-2);border:1px dashed var(--line-2);border-radius:14px;padding:17px 19px}
.pain-extra .pe-i{flex:0 0 auto;width:26px;height:26px;color:var(--accent);margin-top:1px}
.pain-extra .pe-i svg{width:26px;height:26px}
.pain-extra p{margin:0;font-family:var(--sans);font-size:13.5px;line-height:1.6;color:var(--ink-soft)}
.pain-extra p b{color:var(--ink);font-weight:600}

@media(max-width:980px){.punch{grid-template-columns:1fr;gap:30px;padding:52px 30px}}
@media(max-width:560px){.punch{padding-left:18px;padding-right:18px}}