/* ==========================================================================
   LockedIn Flow — evaluation pages (security, enterprise, healthcare)
   Loads after shell.css and site.css. Page layout and figures only:
   the signal-path schematic, readouts, datasheet tweaks, and faithful
   product mocks (onboarding permissions, menu-bar panel, History retention).
   Every class is prefixed t- so nothing collides with the shared library.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Hero: copy plus an index or a product figure
   -------------------------------------------------------------------------- */
.t-hero .wrap { position: relative; z-index: 1; }
.t-hero__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 5vw, 80px); align-items: end; }
.t-hero__grid--fig { align-items: center; }
.t-hero h1 { max-width: 13ch; }
.t-hero .two-tone { max-width: 26ch; }
.t-hero .specline { margin-top: 28px; }

/* review index: an ordered list, never a nav */
.t-index { border: 1px solid var(--line); border-radius: var(--r-lg); background: linear-gradient(180deg, rgba(14, 16, 20, .75), rgba(8, 9, 12, .35)); box-shadow: var(--sh-card); overflow: hidden; }
.t-index__h { display: flex; justify-content: space-between; gap: 12px; padding: 12px 18px; border-bottom: 1px solid var(--line); font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--t3); }
.t-index__h b { color: var(--t1); font-weight: 500; }
.t-index ol { counter-reset: idx; padding: 6px 0; }
.t-index li { counter-increment: idx; }
.t-index a { display: flex; align-items: baseline; gap: 14px; padding: 9px 18px; font-size: 15px; color: var(--t2); transition: color var(--dur-1) ease, background var(--dur-1) ease; }
.t-index a::before { content: counter(idx, decimal-leading-zero); font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .12em; color: var(--steel); }
.t-index a::after { content: "→"; margin-left: auto; color: var(--t3); opacity: 0; transform: translateX(-4px); transition: opacity var(--dur-1) ease, transform var(--dur-1) var(--ease); }
.t-index a:hover { color: var(--t1); background: rgba(135, 158, 184, .06); }
.t-index a:hover::after { opacity: 1; transform: none; }

/* readout: four instrument numerals */
.t-readout { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: clamp(48px, 6vw, 80px); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.t-readout > div { padding: 24px 22px 22px; display: flex; flex-direction: column; gap: 12px; }
.t-readout > div + div { border-left: 1px solid var(--line-faint); }
.t-readout dt { white-space: nowrap; font-size: clamp(34px, 3.4vw, 50px); font-weight: 600; letter-spacing: -0.04em; line-height: 1; color: var(--t1); font-variant-numeric: tabular-nums; }
.t-readout dt small { font-size: .5em; letter-spacing: -0.02em; color: var(--t3); }
.t-readout dd { margin: 0; font-size: 14px; font-weight: 600; color: var(--t1); line-height: 1.35; }
.t-readout dd span { display: block; font-family: var(--font-mono); font-size: 10.5px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--t3); margin-top: 4px; }

/* --------------------------------------------------------------------------
   Fig. 01: signal path inside the device boundary
   -------------------------------------------------------------------------- */
.t-arch { border: 1px solid var(--line); border-radius: var(--r-lg); background: linear-gradient(180deg, rgba(14, 16, 20, .6), rgba(8, 9, 12, .2)); padding-bottom: 26px; }
.t-arch__head { display: flex; justify-content: space-between; gap: 16px; padding: 14px 20px; border-bottom: 1px solid var(--line-faint); font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--t3); }
.t-arch__head b { color: var(--t1); font-weight: 500; }
.t-arch__head .ok { color: var(--success); }

.t-mac { --g: 22px; position: relative; margin: 40px 24px 0; padding: 30px 22px 24px; border: 1px solid var(--line-strong); border-radius: 18px; background: radial-gradient(ellipse 60% 80% at 50% 0%, rgba(82, 107, 255, .07), transparent 70%), rgba(8, 9, 12, .4); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05); }
.t-mac__lab { position: absolute; top: -9px; left: 20px; padding: 0 8px; background: #0B0C10; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--t1); line-height: 18px; }
.t-mac__lab b { color: var(--steel); font-weight: 500; }

.t-path { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--g); }
.t-pn { position: relative; min-height: 128px; padding: 11px 12px; border: 1px solid var(--line-strong); border-radius: 10px; background: linear-gradient(180deg, #14171D, #0E1014); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 10px 24px -14px rgba(0, 0, 0, .9); }
.t-pn b { display: block; margin-top: 4px; font-size: 15px; font-weight: 600; color: var(--t1); letter-spacing: -0.01em; }
.t-pn { display: flex; flex-direction: column; align-items: flex-start; }
.t-pn__k { display: block; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .12em; color: var(--t3); }
.t-pn__lib { display: inline-block; max-width: 100%; margin-top: auto; padding: 2px 6px; border: 1px solid var(--line); border-radius: var(--r-xs); font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0; color: var(--steel); overflow-wrap: anywhere; line-height: 1.4; }
.t-pn__s { margin-bottom: 10px; }
.t-pn__s { display: block; margin-top: 5px; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .02em; color: var(--t3); line-height: 1.45; }
.t-pn--io { border-color: rgba(135, 158, 184, .55); background: linear-gradient(180deg, #1B1F26, #12151B); }
.t-pn--enc { box-shadow: inset 0 0 0 1px rgba(79, 232, 176, .22), 0 10px 24px -14px rgba(0, 0, 0, .9); }
.t-pn--enc .t-pn__lib { color: var(--success); border-color: rgba(79, 232, 176, .35); }
/* connector: a hairline with a travelling spectrum pulse */
.t-pn:not(:last-child)::after {
  content: ""; position: absolute; top: 50%; left: 100%; width: var(--g); height: 1px;
  background: linear-gradient(90deg, transparent, #9C3BFF 20%, #526BFF 50%, #00D1FF 80%, transparent) -200% 0 / 60% 100% no-repeat, var(--line-strong);
  animation: t-travel 3.6s linear infinite; animation-delay: calc(var(--n, 0) * .45s);
}
.t-pn:nth-child(2) { --n: 1; } .t-pn:nth-child(3) { --n: 2; } .t-pn:nth-child(4) { --n: 3; } .t-pn:nth-child(5) { --n: 4; } .t-pn:nth-child(6) { --n: 5; }
@keyframes t-travel { 0% { background-position: -200% 0, 0 0; } 40%, 100% { background-position: 300% 0, 0 0; } }

/* stores feeding Speech (models) and Save (key) */
.t-stores { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--g); margin-top: 34px; }
.t-store { position: relative; padding: 12px 14px; border: 1px dashed rgba(135, 158, 184, .42); border-radius: 10px; background: rgba(8, 9, 12, .45); }
.t-store::before { content: ""; position: absolute; bottom: 100%; width: 1px; height: 34px; background: repeating-linear-gradient(180deg, var(--line-strong) 0 3px, transparent 3px 6px); }
.t-store--models { grid-column: 2 / 5; }
.t-store--models::before { left: 50%; }
.t-store--key { grid-column: 5 / 8; }
.t-store--key::before { left: calc((100% - 2 * var(--g)) / 6); }
.t-store--key { border-color: rgba(79, 232, 176, .35); }
.t-store__k { display: block; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--steel); }
.t-store--key .t-store__k { color: var(--success); }
.t-store b { display: block; margin-top: 3px; font-size: 14px; font-weight: 600; color: var(--t1); }
.t-store span:last-child { display: block; margin-top: 3px; font-size: 12.5px; color: var(--t3); line-height: 1.45; }

/* outside the boundary: severed routes */
.t-cut { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin: 46px 24px 0; }
.t-cut__x { position: relative; padding: 12px 14px; border: 1px dashed rgba(135, 158, 184, .4); border-radius: 10px; color: var(--t3); }
.t-cut__x::before { content: ""; position: absolute; left: 50%; bottom: 100%; width: 1px; height: 30px; background: var(--line); }
.t-cut__x::after { content: "✕"; position: absolute; left: 50%; bottom: calc(100% + 9px); transform: translateX(-50%); padding: 0 3px; font-size: 11px; line-height: 12px; color: #fff; background: #0B0C10; }
.t-cut__x b { display: block; font-size: 13.5px; font-weight: 600; color: var(--t2); }
.t-cut__x span { display: block; margin-top: 4px; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; }

/* --------------------------------------------------------------------------
   Properties the code keeps
   -------------------------------------------------------------------------- */
.t-props { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--line); }
.t-props li { padding: 24px 24px 28px 0; border-bottom: 1px solid var(--line-faint); }
.t-props li:not(:nth-child(4n + 1)) { padding-left: 24px; border-left: 1px solid var(--line-faint); }
.t-props__n { display: inline-block; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .12em; color: var(--steel); padding: 3px 7px; border: 1px solid var(--line); border-radius: var(--r-xs); }
.t-props p { margin-top: 16px; font-size: 15px; color: var(--t2); line-height: 1.5; }
.t-props p b { display: block; margin-bottom: 4px; font-size: 17px; color: var(--t1); letter-spacing: -0.015em; line-height: 1.3; }

/* --------------------------------------------------------------------------
   Tables, sheets and small layout helpers
   -------------------------------------------------------------------------- */
.t-gap { margin-top: clamp(20px, 2.4vw, 32px); }
.t-split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 2.2vw, 28px); align-items: start; }
.t-tw .table th[scope="row"] { width: 22%; }
.t-tw .table td:last-child { width: 24%; }
.t-tw .table .no { color: var(--t3); }
.t-threats td:last-child { width: 32%; color: var(--t1); }
.t-note { margin-top: 18px; max-width: 90ch; }
.t-body { font-size: 16.5px; color: var(--t2); line-height: 1.65; max-width: 60ch; }
.t-body b { color: var(--t1); }
.t-inline { color: var(--t1); border-bottom: 1px solid var(--line-strong); }
.t-inline:hover { border-color: #fff; }
.t-compliance { font-size: 15.5px; }
.t-dated { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--t3); }
.sheet--mono dd { font-family: var(--font-mono); font-size: 12.5px; letter-spacing: 0; color: #CBD2DB; }
.sheet--mono dd b { font-weight: 500; }
.sheet--mono dd .m { color: var(--t3); }
.sheet--mono dd .g { color: var(--success); }
.sheet--mono .r { grid-template-columns: 170px 1fr; }

/* connection ledger */
.t-ledger dd { display: flex; gap: 12px; align-items: baseline; }
.t-none, .t-one { flex: none; min-width: 44px; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--success); }
.t-one { color: var(--t1); }

/* never-requested permissions */
.t-never .mono { margin-bottom: 10px; display: block; }
.t-never ul { display: flex; flex-wrap: wrap; gap: 8px; }
.t-never li { display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 12px; border-radius: var(--r-pill); border: 1px dashed var(--line-strong); font-size: 13px; color: var(--t3); }
.t-never li::before { content: ""; width: 9px; height: 9px; background: linear-gradient(45deg, transparent 45%, var(--t3) 45%, var(--t3) 55%, transparent 55%), linear-gradient(-45deg, transparent 45%, var(--t3) 45%, var(--t3) 55%, transparent 55%); }

/* --------------------------------------------------------------------------
   Mock: onboarding · Permissions (stock macOS window, dark appearance)
   1em = 10 pt of the 560 pt window.
   -------------------------------------------------------------------------- */
.t-perm-grid { align-items: center; }
.t-perm-fig { width: 100%; max-width: 560px; }
.t-perm { --win-w: 560; min-height: 50em; display: flex; flex-direction: column; color: #E5E5EA; }
.t-perm__body { flex: 1; }
.t-perm__seg { display: flex; justify-content: center; padding: 1.6em 1.6em .4em; }
.t-perm__seg span { padding: .35em 1.1em; font-size: 1.2em; color: #D8D8DD; background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 .05em rgba(255, 255, 255, .06); }
.t-perm__seg span:first-child { border-radius: .55em 0 0 .55em; }
.t-perm__seg span:last-child { border-radius: 0 .55em .55em 0; }
.t-perm__seg span + span { border-left: .08em solid rgba(0, 0, 0, .35); }
.t-perm__seg .on { background: rgba(255, 255, 255, .26); color: #fff; font-weight: 500; }
.t-perm__body { padding: 1.6em 2.4em 2.2em; display: grid; gap: 1.6em; justify-items: start; }
.t-perm__t { font-size: 1.5em; font-weight: 400; color: #F2F2F7; }
.t-perm__row { width: 100%; display: flex; align-items: center; gap: 1em; }
.t-perm__row > div { flex: 1; min-width: 0; }
.t-perm__row b { display: block; font-size: 1.3em; font-weight: 700; color: #F2F2F7; }
.t-perm__row span { display: block; font-size: 1.05em; color: #D1D1D6; line-height: 1.35; margin-top: .15em; }
.t-perm__row em { font-style: normal; font-size: 1.05em; color: #D1D1D6; }
.t-perm__ic { width: 2em; height: 2em; flex: none; }
.t-perm__ic--ok { color: #32D74B; }
.t-perm__ic--todo { color: #FF9F0A; }
.t-perm hr { width: 100%; border-top: .08em solid rgba(255, 255, 255, .12); }
.t-perm__cap { font-size: 1.05em; color: #D1D1D6; line-height: 1.4; }
.t-perm__btn { display: inline-flex; align-items: center; height: 2.2em; padding: 0 1em; border-radius: .6em; font-size: 1.3em; color: #F2F2F7; background: rgba(255, 255, 255, .16); box-shadow: inset 0 .06em 0 rgba(255, 255, 255, .12), 0 .05em .15em rgba(0, 0, 0, .4); white-space: nowrap; flex: none; }
.t-perm__ft { display: flex; justify-content: space-between; padding: 1.2em 1.6em; border-top: .08em solid rgba(255, 255, 255, .1); }
.t-perm__btn--def { background: #6E6E73; color: #fff; }

/* --------------------------------------------------------------------------
   Reviewer terminal
   -------------------------------------------------------------------------- */
.t-term { border-radius: 14px; overflow: hidden; background: #0B0D11; box-shadow: 0 0 0 1px rgba(135, 158, 184, .25), 0 30px 60px -30px rgba(0, 0, 0, .9); }
.t-term__tb { position: relative; height: 34px; display: flex; align-items: center; justify-content: center; background: #10131A; border-bottom: 1px solid rgba(135, 158, 184, .14); font-family: var(--font-mono); font-size: 11px; color: var(--t3); }
.t-term__tb i { position: absolute; top: 50%; width: 10px; height: 10px; margin-top: -5px; border-radius: 50%; background: #2A3038; }
.t-term__tb i:nth-child(1) { left: 14px; } .t-term__tb i:nth-child(2) { left: 30px; } .t-term__tb i:nth-child(3) { left: 46px; }
.t-term pre { padding: 20px 22px 22px; font-size: 12.5px; line-height: 1.75; color: #CBD2DB; white-space: pre-wrap; overflow-wrap: anywhere; }
.t-term .p { color: var(--steel); }
.t-term .c { color: rgba(79, 232, 176, .8); }
.t-term figcaption { margin: 0; padding: 0 22px 18px; }

/* --------------------------------------------------------------------------
   Mock: menu-bar panel (MenuBarView, 332 pt wide, always dark)
   1em = 10 pt of the 332 pt panel.
   -------------------------------------------------------------------------- */
.t-mbp-fig { width: 100%; max-width: 400px; margin-left: auto; }
.t-mbp-c { container-type: inline-size; width: 100%; }
.t-mbp {
  font-size: calc(100cqw / 33.2); width: 33.2em; padding: 1.3em; display: grid; gap: 1.2em; border-radius: 1.4em;
  background: #08090C; color: rgba(255, 255, 255, .96); font-family: var(--font-sans); letter-spacing: 0; line-height: 1.25;
  box-shadow: 0 0 0 .1em rgba(135, 158, 184, .28), 0 0 0 .05em rgba(0, 0, 0, .8), 0 3em 6em -2em rgba(0, 0, 0, .9), 0 1em 2.4em -1em rgba(0, 0, 0, .7);
}
.t-mbp__card { border-radius: 1.4em; padding: 1.2em; background: rgba(20, 23, 29, .8); box-shadow: inset 0 0 0 .07em rgba(135, 158, 184, .22); }
.t-mbp__card--hd { border-radius: 1.6em; padding: 1.3em; background: rgba(27, 31, 38, .94); box-shadow: inset 0 0 0 .1em rgba(135, 158, 184, .38); display: grid; gap: 1.1em; }
.t-mbp__id { display: flex; align-items: center; gap: 1em; }
.t-mbp__id img { width: 3.4em; height: 3.4em; border-radius: .9em; flex: none; }
.t-mbp__brand { font-family: var(--font-mono); font-size: 1.05em; font-weight: 600; letter-spacing: .13em; }
.t-mbp__brand span { color: #B2BAC4; }
.t-mbp__tag { font-size: 1.05em; color: #7D8794; margin-top: .3em; }
.t-mbp__mit { margin-left: auto; display: flex; align-items: center; gap: .5em; font-size: 1em; font-weight: 600; color: #B2BAC4; }
.t-mbp__mit::before { content: ""; width: .6em; height: .6em; border-radius: 50%; background: #4FE8B0; }
.t-mbp__btn { display: flex; align-items: center; gap: .8em; height: 3.8em; padding: 0 1.3em; border-radius: 1.1em; background: #252C35; box-shadow: inset 0 0 0 .08em rgba(135, 158, 184, .38); font-size: 1.2em; font-weight: 700; }
.t-mbp__btn svg { width: 1.1em; height: 1.1em; }
.t-mbp__btn kbd { margin-left: auto; font-family: var(--font-sans); font-size: .84em; font-weight: 600; padding: .25em .5em; border: 0; border-radius: .42em; background: rgba(255, 255, 255, .12); color: #fff; }
.t-mbp__util { display: flex; justify-content: flex-end; font-size: 1.05em; font-weight: 500; color: #879EB8; }
.t-mbp__util span { display: inline-flex; align-items: center; gap: .4em; }
.t-mbp__util svg { width: 1.1em; height: 1.1em; }
.t-mbp__sys { display: grid; gap: .8em; }
.t-mbp__sh { display: flex; align-items: center; justify-content: space-between; font-size: 1.05em; font-weight: 600; color: #7D8794; }
.t-mbp__sh .sigmark { --mark-w: 3em; height: 1.4em; }
.t-mbp__row { display: flex; align-items: center; gap: .6em; }
.t-mbp__row > span { width: 5.2em; flex: none; font-size: 1em; font-weight: 500; color: #7D8794; }
.t-mbp__row > i { width: .5em; height: .5em; border-radius: 50%; background: #4FE8B0; flex: none; }
.t-mbp__row > em { font-style: normal; font-size: 1.05em; color: #B2BAC4; }
.t-mbp__rec { display: grid; gap: .7em; }
.t-mbp__item { padding: 1em; border-radius: 1em; background: rgba(20, 23, 29, .55); }
.t-mbp__item p { font-size: 1.15em; line-height: 1.3; color: rgba(255, 255, 255, .96); }
.t-mbp__meta { display: flex; gap: .7em; margin-top: .5em; font-size: 1em; font-weight: 500; color: #7D8794; }
.t-mbp__meta span:nth-child(3) { margin-left: auto; }
.t-mbp__va { color: #879EB8; font-weight: 500; font-size: .95em; }
.t-mbp__ft { display: flex; align-items: center; gap: 1.2em; padding: 0 .3em; font-size: 1.05em; font-weight: 500; color: #B2BAC4; }
.t-mbp__ft span { display: inline-flex; align-items: center; gap: .4em; }
.t-mbp__ft svg { width: 1.1em; height: 1.1em; }
.t-mbp__ft span:last-child { margin-left: auto; }

/* --------------------------------------------------------------------------
   Enterprise: software / services pair, service table
   -------------------------------------------------------------------------- */
.t-duo { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 2.2vw, 28px); }
.t-duo::after { content: "+"; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--bg); border: 1px solid var(--line-strong); font-family: var(--font-mono); font-size: 18px; color: var(--t1); z-index: 2; }
.t-duo .card { display: flex; flex-direction: column; }
.t-duo .card h3 { font-size: clamp(22px, 2.2vw, 28px); letter-spacing: -0.025em; line-height: 1.15; margin-bottom: 14px; }
.t-duo .rules { margin-top: 18px; }
.t-duo .rules li { font-size: 15px; }
.t-duo__ft { margin-top: auto; padding-top: 22px; display: flex; flex-wrap: wrap; gap: 8px; }

.t-svc th[scope="row"] { width: 16%; white-space: nowrap; }
.t-svc th[scope="row"] span { display: block; font-family: var(--font-mono); font-size: 10px; font-weight: 500; letter-spacing: .12em; color: var(--steel); margin-bottom: 4px; }
.t-svc td:last-child { width: 30%; color: var(--t1); }

/* --------------------------------------------------------------------------
   Healthcare: two lanes, cloud dictation vs this Mac
   -------------------------------------------------------------------------- */
.t-lanes { border: 1px solid var(--line); border-radius: var(--r-lg); background: linear-gradient(180deg, rgba(14, 16, 20, .6), rgba(8, 9, 12, .2)); overflow: hidden; }
.t-lane { position: relative; display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 24px; align-items: center; padding: 28px 24px; }
.t-lane + .t-lane { border-top: 1px solid var(--line-faint); }
.t-lane__k { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--t3); line-height: 1.6; }
.t-lane__k b { display: block; font-family: var(--font-sans); font-size: 16px; font-weight: 600; letter-spacing: -0.01em; text-transform: none; color: var(--t1); margin-bottom: 4px; }
.t-lane__row { display: flex; align-items: center; }
.t-ln { position: relative; flex: none; padding: 10px 14px; border: 1px solid var(--line-strong); border-radius: 10px; background: linear-gradient(180deg, #14171D, #0E1014); font-size: 14px; font-weight: 600; color: var(--t1); white-space: nowrap; }
.t-ln small { display: block; margin-top: 2px; font-family: var(--font-mono); font-size: 9.5px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--t3); }
.t-ll { position: relative; flex: 1; min-width: 18px; height: 1px; background: var(--line-strong); }
.t-ll::after { content: ""; position: absolute; right: -1px; top: -3px; border: 3.5px solid transparent; border-left: 5px solid var(--line-strong); border-right: 0; }
.t-lane--cloud .t-ln { border-style: dashed; background: none; color: var(--t2); font-weight: 500; }
.t-lane--cloud .t-ln--vendor { border-color: rgba(255, 173, 74, .5); color: var(--t1); }
.t-lane--cloud .t-ln--vendor small { color: var(--warning); }
.t-lane--cloud .t-ll { background: repeating-linear-gradient(90deg, var(--line-strong) 0 4px, transparent 4px 8px); }
.t-lane--mac .t-box { flex: 2.4; display: flex; align-items: center; gap: 0; padding: 14px; border: 1px solid rgba(135, 158, 184, .55); border-radius: 14px; background: radial-gradient(ellipse 70% 120% at 50% 0%, rgba(82, 107, 255, .1), transparent 70%), rgba(8, 9, 12, .5); position: relative; }
.t-lane--mac .t-box::before { content: "This Mac"; position: absolute; top: -8px; left: 14px; padding: 0 6px; background: #0D0F13; font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--t1); line-height: 16px; }
.t-lane--mac .t-ll { background: linear-gradient(90deg, transparent, #9C3BFF 20%, #526BFF 50%, #00D1FF 80%, transparent) -200% 0 / 60% 100% no-repeat, var(--line-strong); animation: t-travel 3s linear infinite; }
.t-lane--mac .t-ll:nth-of-type(2) { animation-delay: .5s; }
.t-lanes__ft { display: flex; flex-wrap: wrap; gap: 6px 24px; padding: 14px 24px; border-top: 1px solid var(--line-faint); font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--t3); }
.t-lanes__ft b { color: var(--t2); font-weight: 500; }

/* --------------------------------------------------------------------------
   Mock: Dictation History header with the Retention menu open (light workspace)
   1em = 10 pt of a 460 pt crop.
   -------------------------------------------------------------------------- */
.t-ret-fig { width: 100%; max-width: 520px; position: sticky; top: 96px; }
.t-ret { --win-w: 460; color: var(--w-t1); }
.t-ret__in { position: relative; padding: 2.2em 2.4em 2em; background: var(--w-canvas); }
.t-ret__hd { display: flex; align-items: flex-start; justify-content: space-between; gap: 2em; }
.t-ret__hd b { display: block; font-size: 2.3em; font-weight: 600; letter-spacing: -0.01em; color: var(--w-t1); }
.t-ret__hd small { display: block; margin-top: .45em; font-size: 1.2em; color: var(--w-t2); }
.t-ret__pick { display: flex; align-items: center; gap: .7em; font-size: 1.25em; color: var(--w-t1); white-space: nowrap; padding-top: .5em; }
.t-ret__pop { display: inline-flex; align-items: center; gap: .6em; height: 1.85em; padding: 0 .55em 0 .75em; border-radius: .45em; background: #fff; box-shadow: 0 0 0 .05em rgba(0, 0, 0, .14), 0 .06em .14em rgba(0, 0, 0, .14); }
.t-ret__pop svg { width: .75em; height: 1em; color: var(--w-t2); }
.t-ret__menu { position: absolute; right: 2.4em; top: 5.6em; z-index: 2; width: 17em; padding: .5em; border-radius: .9em; background: rgba(246, 246, 248, .96); box-shadow: 0 0 0 .05em rgba(0, 0, 0, .16), 0 1.4em 3em -.6em rgba(0, 0, 0, .45), 0 .3em .8em rgba(0, 0, 0, .14); }
.t-ret__menu li { display: flex; align-items: center; gap: .55em; height: 2.2em; padding: 0 .7em; border-radius: .45em; font-size: 1.3em; color: var(--w-t1); }
.t-ret__menu li::before { content: ""; width: .9em; flex: none; }
.t-ret__menu li.on { background: #66666D; color: #fff; }
.t-ret__menu li.chk::before { content: "✓"; font-size: .9em; font-weight: 700; }
.t-ret__search { margin-top: 2em; height: 3.6em; display: flex; align-items: center; gap: .8em; padding: 0 1.2em; border-radius: 1.1em; background: var(--w-surface); box-shadow: 0 0 0 .08em var(--w-line); font-size: 1.3em; color: var(--w-t3); }
.t-ret__search svg { width: 1em; height: 1em; }
.t-ret__rows { margin-top: 1.4em; border-radius: 1.4em; background: var(--w-surface); box-shadow: 0 0 0 .08em var(--w-line), 0 .5em 2em rgba(0, 0, 0, .06); overflow: hidden; }
.t-ret__row { padding: 1.4em 1.6em; }
.t-ret__row + .t-ret__row { border-top: 1px solid var(--w-line); }
.t-ret__row p { font-size: 1.35em; color: var(--w-t1); line-height: 1.35; }
.t-ret__row small { display: block; margin-top: .5em; font-size: 1.1em; color: var(--w-t3); }
.t-ret__cp { float: right; margin-left: 1.2em; font-size: 1.15em; font-weight: 600; color: var(--w-action); }
.t-ret__strip { display: flex; align-items: center; gap: .5em; height: 2.7em; margin-top: 1.1em; padding: 0 .9em; border-radius: .82em; background: rgba(234, 237, 240, .64); box-shadow: inset 0 0 0 .064em rgba(135, 158, 184, .22); font-size: 1.1em; font-weight: 600; color: var(--w-t3); }
.t-ret__strip .p { color: var(--w-action); }
.t-ret__strip .cmp { margin-left: auto; color: var(--w-t2); }
.t-ret__act { display: flex; gap: 1.4em; margin-top: 1.05em; font-size: 1.15em; font-weight: 600; color: var(--w-t2); }
.t-ret__act span:last-child { margin-left: auto; }
.t-ret__ft { margin-top: 1.4em; display: flex; align-items: center; justify-content: space-between; gap: .6em; font-size: 1.15em; color: var(--w-t3); }
.t-ret__da { white-space: nowrap; font-weight: 600; }
.t-ret__ft svg { width: 1.1em; height: 1.1em; }

/* healthcare and enterprise layout helpers */
.t-h1-wide { max-width: 18ch !important; }
.t-product { align-items: start; }
.t-clin th[scope="row"] { width: 32%; }
.t-tw .t-clin td:last-child { width: auto; }
.t-plan { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2.2vw, 28px); }
.t-plan .card h3 { margin-top: 18px; }
.t-beyond { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 64px); align-items: end; }
.t-beyond h2 { max-width: 16ch; }
/* pilot phases: a continuous hairline with three nodes */
.t-phases { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 16px; }
.t-phases li { position: relative; padding: 40px 32px 0 0; border-top: 1px solid var(--line-strong); }
.t-phases__n { position: absolute; top: -16px; left: 0; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-strong); box-shadow: inset 0 0 0 1px var(--line-strong), 0 0 0 6px var(--bg); font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .06em; color: var(--t1); }
.t-phases h3 { font-size: clamp(20px, 1.8vw, 24px); letter-spacing: -0.02em; }
.t-phases p { margin-top: 8px; font-size: 15.5px; color: var(--t2); max-width: 34ch; }
.t-bring { margin-top: clamp(40px, 5vw, 64px); align-items: stretch; }
.t-bring .callout { display: flex; flex-direction: column; justify-content: center; }
.t-close { padding-bottom: var(--sec); }

/* healthcare hero: three literal floating-bar states */
.t-states { display: grid; gap: 22px; max-width: 380px; margin-left: auto; width: 100%; }
.t-state { position: relative; }
.t-state + .t-state::before { content: ""; position: absolute; left: 50%; top: -22px; width: 1px; height: 22px; background: linear-gradient(180deg, var(--line), var(--line-strong)); }
.t-state__k { margin-bottom: 8px; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--steel); }
.t-state__k b { color: var(--t1); font-weight: 500; margin-right: 6px; }
.t-state__n { margin-top: 8px; font-family: var(--font-mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--t3); }
.t-states figcaption { margin-top: 4px; }

/* two-column datasheet on wide screens */
@media (min-width: 961px) {
  .sheet--2col dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sheet--2col .r:nth-child(2) { border-top: 0; }
  .sheet--2col .r:nth-child(even) { border-left: 1px solid var(--line-faint); }
  .sheet--2col.sheet--mono .r { grid-template-columns: 128px 1fr; }
}

/* site.css fixes, scoped to these pages: `.card p` and `.cta-band p` outrank the label classes */
.card .card__k { font-size: 10.5px; }
.cta-band .eyebrow { font-size: var(--fs-mono); margin-top: 0; color: var(--steel); }

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1280px) {
  .t-pn { padding: 10px 10px; }
  .t-pn b { font-size: 14px; }
  .t-mac { --g: 16px; margin-inline: 16px; padding-inline: 16px; }
  .t-pn__lib { padding: 2px 4px; letter-spacing: -.02em; }
}

@media (max-width: 960px) {
  .t-hero__grid { grid-template-columns: 1fr; align-items: start; }
  .t-readout { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .t-readout > div:nth-child(3) { border-left: 0; }
  .t-readout > div:nth-child(n + 3) { border-top: 1px solid var(--line-faint); }

  .t-mac { margin: 34px 16px 0; padding: 28px 16px 18px; }
  .t-path { grid-template-columns: 1fr; gap: 18px; }
  .t-pn { min-height: 0; display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; grid-template-areas: "k t lib" "k s lib"; column-gap: 12px; align-items: center; padding: 11px 14px; }
  .t-pn__k { grid-area: k; }
  .t-pn b { grid-area: t; margin: 0; }
  .t-pn__s { grid-area: s; margin: 1px 0 0; }
  .t-pn__lib { grid-area: lib; margin: 0; }
  .t-pn:not(:last-child)::after { top: 100%; left: 31px; width: 1px; height: 18px; background: linear-gradient(180deg, transparent, #9C3BFF 20%, #526BFF 50%, #00D1FF 80%, transparent) 0 -200% / 100% 60% no-repeat, var(--line-strong); animation-name: t-travel-v; }
  .t-stores { grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 22px; }
  .t-store--models, .t-store--key { grid-column: auto; }
  .t-store::before { display: none; }
  .t-cut { grid-template-columns: 1fr 1fr; margin: 40px 16px 0; }
  .t-cut__x:nth-child(n + 3)::before, .t-cut__x:nth-child(n + 3)::after { display: none; }

  .t-props { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .t-props li:not(:nth-child(4n + 1)) { padding-left: 0; border-left: 0; }
  .t-props li:nth-child(even) { padding-left: 24px; border-left: 1px solid var(--line-faint); }

  .t-split, .t-duo, .t-beyond { grid-template-columns: 1fr; }
  .t-plan { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .t-ret-fig { margin-inline: auto; position: static; }
  .t-phases { grid-template-columns: 1fr; gap: 36px; margin-top: 8px; }
  .t-phases li { padding: 0 0 0 52px; border-top: 0; }
  .t-phases__n { top: -4px; }
  .t-phases li:not(:last-child)::after { content: ""; position: absolute; left: 16px; top: 34px; bottom: -34px; width: 1px; background: var(--line-strong); }
  .t-states { margin: 8px auto 0; }
  .t-duo::after { top: auto; bottom: auto; position: relative; left: auto; transform: none; margin: -8px auto; grid-row: 2; }
  .t-duo .card:last-child { grid-row: 3; }
  .t-perm-fig, .t-mbp-fig { margin-inline: auto; }
  .t-lane { grid-template-columns: 1fr; gap: 14px; }
}
@keyframes t-travel-v { 0% { background-position: 0 -200%, 0 0; } 40%, 100% { background-position: 0 300%, 0 0; } }

@media (max-width: 640px) {
  .t-readout > div { padding: 18px 14px 16px; gap: 8px; }
  .t-readout dt { font-size: 34px; }
  .t-arch__head { flex-wrap: wrap; gap: 4px 14px; padding: 12px 16px; }
  .t-arch__head span:nth-child(2) { display: none; }
  .t-mac { margin: 30px 12px 0; padding: 26px 12px 14px; }
  .t-pn { grid-template-columns: 22px minmax(0, 1fr); grid-template-areas: "k t" "k s" "k lib"; }
  .t-pn__lib { justify-self: start; margin-top: 7px; }
  .t-pn:not(:last-child)::after { left: 24px; }
  .t-stores, .t-cut { grid-template-columns: 1fr; }
  .t-cut { margin: 34px 12px 0; }
  .t-cut__x:nth-child(n + 2)::before, .t-cut__x:nth-child(n + 2)::after { display: none; }
  .t-props { grid-template-columns: 1fr; }
  .t-props li:nth-child(even) { padding-left: 0; border-left: 0; }
  .t-props li { padding: 20px 0 22px; }
  .sheet--mono .r { grid-template-columns: 1fr; }
  .t-hide-sm { display: none; }
  .t-plan { grid-template-columns: 1fr; }
  .t-ret { --win-w: 440; }
  .t-perm { --win-w: 470; }

  /* stacked tables: each row becomes a block, cells carry their labels */
  .t-stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .t-stack, .t-stack tbody, .t-stack tr, .t-stack th, .t-stack td { display: block; width: auto !important; }
  .t-stack tr { padding: 14px 16px; border-top: 1px solid var(--line); }
  .t-stack tbody tr:first-child { border-top: 0; }
  .t-stack th[scope="row"], .t-stack td { padding: 0; border: 0; }
  .t-stack th[scope="row"] { margin-bottom: 6px; font-size: 15.5px; white-space: normal; }
  .t-stack td + td { margin-top: 8px; }
  .t-stack td[data-l]::before { content: attr(data-l); display: block; margin-bottom: 2px; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--steel); }

  .t-lane { padding: 22px 16px; }
  .t-lane__row { flex-direction: column; align-items: stretch; }
  .t-ll { width: 1px; height: 12px; min-width: 0; flex: none; margin-left: 22px; }
  .t-ln { padding: 8px 12px; font-size: 13.5px; }
  .t-ln small { display: inline; margin: 0 0 0 8px; }
  .t-lane { gap: 10px; }
  .t-ll::after { right: auto; top: auto; bottom: -1px; left: -3px; border: 3.5px solid transparent; border-top: 5px solid var(--line-strong); border-bottom: 0; }
  .t-lane--cloud .t-ll { background: repeating-linear-gradient(180deg, var(--line-strong) 0 4px, transparent 4px 8px); }
  .t-lane--mac .t-box { flex-direction: column; align-items: stretch; padding: 16px 12px 12px; }
  .t-lane--mac .t-ll { background: linear-gradient(180deg, transparent, #9C3BFF 20%, #526BFF 50%, #00D1FF 80%, transparent) 0 -200% / 100% 60% no-repeat, var(--line-strong); animation-name: t-travel-v; }
  .t-ln { white-space: normal; }
  .t-lanes__ft { padding: 14px 16px; }
}

/* reduced motion: the pulses become a still, faint spectrum on every link */
@media (prefers-reduced-motion: reduce) {
  .t-pn:not(:last-child)::after, .t-lane--mac .t-ll { animation: none !important; background: linear-gradient(90deg, rgba(156, 59, 255, .7), rgba(82, 107, 255, .7), rgba(0, 209, 255, .7)); }
  .t-index a::after { transition: none; }
}
@media (prefers-reduced-motion: reduce) and (max-width: 960px) {
  .t-pn:not(:last-child)::after { background: linear-gradient(180deg, rgba(156, 59, 255, .7), rgba(82, 107, 255, .7), rgba(0, 209, 255, .7)); }
}
@media (prefers-reduced-motion: reduce) and (max-width: 640px) {
  .t-lane--mac .t-ll { background: linear-gradient(180deg, rgba(156, 59, 255, .7), rgba(82, 107, 255, .7), rgba(0, 209, 255, .7)); }
}

@media (forced-colors: active) {
  .t-pn, .t-store, .t-cut__x, .t-mac, .t-ln { border-color: CanvasText; }
}