/* Tartan - Website, round 4 (SITE3): Security in three takes and the CLI page in two, show-don't-tell.
   Loaded after site.css and site-r2.css. Every colour comes from the theme tokens; motion honours reduced motion. */

/* ---- the shield of the mark, large (solid, or a window onto the moving cloth) ---- */
.s-shield { position: relative; width: var(--sz, 400px); aspect-ratio: 1; flex-shrink: 0; filter: drop-shadow(0 22px 44px rgba(0,0,0,.42)); }
.s-shield__art { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.s-shield__win { position: absolute; inset: 0;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 1.7l8.4 3v6.5c0 5-3.5 8.4-8.4 10.7-4.9-2.3-8.4-5.7-8.4-10.7V4.7z'/></svg>") center / 100% 100% no-repeat;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 1.7l8.4 3v6.5c0 5-3.5 8.4-8.4 10.7-4.9-2.3-8.4-5.7-8.4-10.7V4.7z'/></svg>") center / 100% 100% no-repeat; }
.s-shield__win .w-cloth { position: absolute; inset: 0; }
.s-shield__win .w-veil { background: radial-gradient(circle at 42% 37%, rgba(8,13,26,0) 0, rgba(8,13,26,.30) 75%); }
.s-shield .s-fill { fill: var(--t-loch); }
.s-shield .s-ln { stroke: var(--t-gold); stroke-width: .9; }
.s-shield .s-ln2 { stroke: var(--t-gold); stroke-width: .45; opacity: .7; }
.s-shield .s-rim { stroke: var(--t-gold); stroke-width: .75; stroke-linejoin: miter; }
.s-shield .s-cm { fill: #F4FBFF; }
.s-glow { transform-box: fill-box; transform-origin: center; animation: s-pulse 3.4s ease-in-out infinite; }
@keyframes s-pulse { 0%, 100% { opacity: .5; transform: scale(.82); } 50% { opacity: 1; transform: scale(1.18); } }

/* the shield as a badge inside drawings */
.s-bd path { fill: var(--t-loch); stroke: var(--t-gold); stroke-width: 1.6; vector-effect: non-scaling-stroke; }
.s-bd .t { fill: none; stroke: var(--t-gold); stroke-width: 1; opacity: .85; }
.s-bd .c { fill: #F4FBFF; }
.s-bd--big path { stroke-width: 2; }

/* ---- hero A: the shield on the moving cloth ---- */
.s-heroA, .s-heroC, .c-heroA { position: relative; overflow: hidden; display: flex; flex-direction: column; color: var(--t-cream); }
.s-heroA > .w-cloth, .s-heroC > .w-cloth, .c-heroA > .w-cloth { position: absolute; inset: 0; }
.s-heroA { min-height: 680px; }
.s-heroA .w-veil { background: linear-gradient(90deg, rgba(8,13,26,.86) 0%, rgba(8,13,26,.55) 50%, rgba(8,13,26,.30) 100%); }
.s-heroA__in { position: relative; z-index: 2; flex: 1; display: grid; grid-template-columns: 1fr auto; gap: 48px; align-items: center; padding: 24px 72px 72px 48px; }
.s-heroA__in > * { min-width: 0; }
.s-heroA .s-shield { --sz: 420px; }
.s-tag { font: 600 14px/20px var(--t-font-product); color: var(--t-gold); letter-spacing: .12em; text-transform: uppercase; }
.s-words h1 { font-size: 84px; line-height: 86px; margin: 16px 0 22px; color: var(--t-cream); text-shadow: 0 2px 24px rgba(0,0,0,.5); }
.s-lede { font-size: 21px; line-height: 32px; color: #E2DED3; max-width: 560px; }
.s-words .w-cta { margin-top: 32px; }
.s-words .w-side { color: var(--t-gold); }

/* the six locks */
.s-locks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 44px 40px; }
.s-lock h3 { font-size: 25px; line-height: 31px; margin: 20px 0 6px; }
.s-lock p { color: var(--t-muted); }
.s-lock .w-icobox { width: 64px; height: 64px; } .s-lock .w-ico { width: 30px; height: 30px; }

/* the who-can-reach-what drawing (the overlay explainer's look) */
.w-fig .s-org { fill: none; stroke: color-mix(in srgb, var(--t-on-header) 35%, transparent); stroke-width: 1.5; stroke-dasharray: 6 6; }
.w-fig .s-ok { fill: none; stroke: var(--t-gold); stroke-width: 3.5; stroke-linecap: round; }
.w-fig .s-okp { fill: var(--t-gold); }
.w-fig .s-okt { fill: #1A1C20; font: 700 12.5px var(--t-font-mono); text-anchor: middle; }
.w-fig .s-no { fill: none; stroke: var(--t-error); stroke-width: 2; stroke-dasharray: 6 6; }
.w-fig .s-not { fill: var(--t-error); font: 600 12.5px var(--t-font-mono); text-anchor: middle; }
.w-fig .s-x circle { fill: var(--t-error); } .w-fig .s-x path { stroke: #FFFFFF; stroke-width: 2.2; stroke-linecap: round; }
.w-fig .s-flat { fill: none; stroke: color-mix(in srgb, var(--t-error) 45%, transparent); stroke-width: 1.5; stroke-dasharray: 4 5; }
.w-fig .s-wall { fill: var(--t-muted); }
.w-fig .s-in { stroke: var(--t-error); stroke-width: 2.5; }
.w-fig .s-inh { fill: none; stroke: var(--t-error); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.w-fig .u-node { fill: var(--t-card); stroke: color-mix(in srgb, var(--t-ink) 25%, transparent); stroke-width: 1.5; }

/* access that runs out: the log-scale time axis */
.s-life .w-figin { padding: 22px 26px 12px; }
.w-fig .l-ax { stroke: var(--t-ink); stroke-width: 2; opacity: .35; }
.w-fig .l-tk { stroke: var(--t-ink); stroke-width: 2; opacity: .35; }
.w-fig .l-tl { fill: var(--t-muted); font: 12px var(--t-font-mono); text-anchor: middle; }
.w-fig .l-st { stroke: var(--t-gold); stroke-width: 2; }
.w-fig .l-dot { fill: var(--t-gold); stroke: var(--t-card); stroke-width: 3; }
.w-fig .l-big { fill: var(--t-ink); font: 700 28px var(--t-font-brand); }
.w-fig .l-sm { fill: var(--t-muted); font: 14px var(--t-font-product); }
.w-fig .l-bar { fill: color-mix(in srgb, var(--t-gold) 55%, transparent); }
.w-fig .l-bt { fill: var(--t-muted); font: 14px var(--t-font-product); }
.s-report { margin-top: 30px !important; font-size: 14px; line-height: 20px; color: #C9C5BA; }
.s-report a { color: var(--t-gold); } .s-report code { color: var(--t-cream); }

/* ---- hero B: "Try to break in", the shield as a window onto the moving cloth ---- */
.s-heroB { padding: 40px 0 64px; }
.s-heroB__in { display: grid; grid-template-columns: 1fr auto; gap: 40px; align-items: center; }
.s-heroB .s-words h1 { color: var(--t-ink); text-shadow: none; font-size: 96px; line-height: 96px; }
.s-heroB .w-lede { font-size: 24px; line-height: 34px; margin-top: 0 !important; }
.s-heroB .s-shield { --sz: 470px; filter: drop-shadow(0 26px 50px rgba(6,12,22,.35)); }

.s-tries { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.s-try { background: var(--t-surface); border-radius: 12px; padding: 24px 26px 28px; box-shadow: inset 0 0 0 1px var(--t-line); }
.s-scene { display: block; width: 100%; height: auto; margin-bottom: 18px; }
.s-scene .s-bad { fill: color-mix(in srgb, var(--t-error) 14%, var(--t-surface)); stroke: var(--t-error); stroke-width: 2; }
.s-scene .s-badi { stroke: var(--t-error); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.s-scene .s-good { fill: var(--t-forest); }
.s-scene .s-goodi { stroke: #FFFFFF; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.s-scene .s-dash { stroke: var(--t-error); stroke-width: 2.5; stroke-dasharray: 5 5; }
.s-scene .s-okl { stroke: var(--t-forest); stroke-width: 2.5; }
.s-scene * { vector-effect: non-scaling-stroke; }
.s-try h3 { font-size: 23px; line-height: 29px; margin-bottom: 6px; }
.s-try p { color: var(--t-muted); }

/* four locks, one inside the next */
.s-layers { display: grid; grid-template-columns: 420px 1fr; gap: 64px; align-items: center; }
.s-laysvg { width: 100%; height: auto; display: block; overflow: visible; }
.s-lay { stroke: var(--t-gold); stroke-width: 2; vector-effect: non-scaling-stroke; }
.s-lay1 { fill: color-mix(in srgb, var(--t-loch) 10%, var(--t-surface)); }
.s-lay2 { fill: color-mix(in srgb, var(--t-loch) 28%, var(--t-surface)); }
.s-lay3 { fill: color-mix(in srgb, var(--t-loch) 55%, var(--t-surface)); }
.s-lay4 { fill: var(--t-loch); }
.s-layi { stroke: #F4FBFF; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.s-layi * { vector-effect: non-scaling-stroke; }
.s-num { fill: var(--t-gold); }
.s-numt { fill: #1A1C20; font: 700 1.25px var(--t-font-product); text-anchor: middle; }
.s-laylist { list-style: none; margin: 0; padding: 0; display: grid; gap: 22px; counter-reset: l; }
.s-laylist li { counter-increment: l; display: grid; grid-template-columns: 36px 1fr; column-gap: 16px; }
.s-laylist li::before { content: counter(l); grid-row: span 2; width: 32px; height: 32px; border-radius: 50%; background: var(--t-gold); color: #1A1C20;
  display: grid; place-items: center; font: 700 15px/1 var(--t-font-product); }
.s-laylist b { font: 700 23px/29px var(--t-font-brand); }
.s-laylist span { color: var(--t-muted); }
.s-rec { margin-top: 26px !important; padding-top: 18px; border-top: 1px solid var(--t-line); color: var(--t-muted); }

/* ---- hero C: the shield, centred on the cloth ---- */
.s-heroC { min-height: 520px; }
.s-heroC .w-veil { background: radial-gradient(ellipse at 50% 45%, rgba(8,13,26,.50) 0%, rgba(8,13,26,.80) 75%); }
.s-heroC__in { position: relative; z-index: 2; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 8px 24px 64px; }
.s-heroC .s-shield { --sz: 176px; margin-bottom: 18px; }
.s-heroC h1 { font-size: 68px; line-height: 72px; margin: 12px 0 14px; color: var(--t-cream); text-shadow: 0 2px 24px rgba(0,0,0,.5); }
.s-heroC .s-lede { margin: 0 auto; }

/* the zone map */
.w-fig .z-zone { stroke-width: 1.5; }
.w-fig .z-user { fill: color-mix(in srgb, var(--t-zone-user) 22%, transparent); stroke: var(--t-zone-user); }
.w-fig .z-int { fill: color-mix(in srgb, var(--t-zone-resource-internal) 22%, transparent); stroke: var(--t-zone-resource-internal); }
.w-fig .z-inf { fill: color-mix(in srgb, var(--t-zone-infra) 22%, transparent); stroke: var(--t-zone-infra); }
.w-fig .z-out { fill: var(--t-header); stroke: color-mix(in srgb, var(--t-gold) 55%, transparent); stroke-width: 1.5; stroke-dasharray: 6 6; }
.w-fig .z-lab { font: 700 12.5px var(--t-font-product); letter-spacing: .14em; fill: var(--t-on-header); }
.w-fig .z-out-t { fill: var(--t-on-header); opacity: .8; }
.w-fig .z-node { fill: var(--t-loch); stroke: var(--t-gold); stroke-width: 2; }
.w-fig .z-ic { color: var(--t-cream); stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.w-fig .z-ic * { vector-effect: non-scaling-stroke; }
.w-fig .z-nm { fill: var(--t-on-header); font: 600 13px var(--t-font-mono); text-anchor: middle; }

/* build it in-house, share it safely */
.s-flow3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; counter-reset: f; }
.s-step { counter-increment: f; background: var(--t-surface); border-radius: 12px; padding: 0 0 26px; overflow: hidden; box-shadow: inset 0 0 0 1px var(--t-line); }
.s-art { height: 150px; display: flex; flex-wrap: wrap; align-content: center; justify-content: center; gap: 10px; padding: 18px; background: var(--t-header);
  color: var(--t-gold); border-bottom: 2px solid var(--t-gold); margin-bottom: 22px; }
.s-big { width: 54px; height: 54px; }
.s-sm { width: 18px; height: 18px; }
.s-zc { flex-basis: 100%; text-align: center; font: 600 12px/16px var(--t-font-product); letter-spacing: .1em; text-transform: uppercase; }
.s-zc--int { color: var(--t-on-header); opacity: .85; }
.s-namep { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 999px; background: var(--t-surface); color: var(--t-ink);
  font: 600 15px/1 var(--t-font-mono); box-shadow: 0 0 0 1.5px var(--t-gold); }
.s-namep svg { color: var(--t-forest); }
.s-gchip { padding: 8px 14px; border-radius: 999px; background: var(--t-gold); color: #1A1C20; font: 700 14px/1 var(--t-font-mono); }
.s-step h3, .s-step p { padding: 0 26px; }
.s-step h3 { font-size: 26px; line-height: 32px; margin-bottom: 6px; }
.s-step h3::before { content: counter(f) ". "; color: var(--t-gold); }
.s-step p { color: var(--t-muted); }
.s-cmd { margin-top: 24px; font-size: 13px; line-height: 22px; }
.s-prop { margin-top: 18px !important; display: inline-block; font-size: 14px; line-height: 20px; color: var(--t-ink); padding: 6px 12px; border-radius: 6px;
  background: color-mix(in srgb, var(--t-gold) 22%, transparent); }
.s-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px 40px; }
.s-fact { display: grid; grid-template-columns: 52px 1fr; gap: 16px; align-items: start; }
.s-fact h3 { font-size: 21px; line-height: 27px; } .s-fact p { color: var(--t-muted); font-size: 16px; line-height: 24px; }

/* ================= the CLI ================= */
/* the branded terminal window */
.c-win { border-radius: 12px; overflow: hidden; background: var(--t-terminal-ground); box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 30px 70px rgba(0,0,0,.5); min-width: 0; }
.c-win__bar { display: flex; align-items: center; gap: 10px; height: 44px; padding: 0 16px; background: rgba(255,255,255,.04);
  border-bottom: 2px solid var(--t-gold); color: var(--t-terminal-text); font: 500 13px/1 var(--t-font-mono); }
.c-win__bar b { font-weight: 700; } .c-win__bar span { color: var(--t-terminal-muted); margin-left: auto; }
.c-win__body { padding: 20px 22px 24px; min-height: 330px; display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: 8px; overflow-x: auto;
  font: 400 14px/22px var(--t-font-mono); color: var(--t-terminal-text); }
.c-l { opacity: 0; animation: c-in .25s ease-out forwards; animation-delay: var(--d); white-space: nowrap; }
.c-l b { color: var(--t-terminal-accent); font-weight: 600; }
.c-l--out { color: var(--t-terminal-text); white-space: normal; overflow-wrap: anywhere; }
.c-l--note { color: var(--t-terminal-success); white-space: normal; }
.c-type { display: inline-block; vertical-align: bottom; overflow: hidden; white-space: nowrap; width: 0;
  animation: c-type 1.3s steps(var(--n)) forwards; animation-delay: var(--d); }
.c-l--key { display: flex; align-items: center; gap: 14px; white-space: normal; margin: 6px 0; padding: 12px 14px; border-radius: 10px;
  background: rgba(255,255,255,.06); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--t-gold) 45%, transparent); font-family: var(--t-font-product); }
.c-l--key b { display: block; color: var(--t-terminal-text); font: 600 14px/20px var(--t-font-product); }
.c-l--key span { display: block; color: var(--t-terminal-muted); font-size: 13px; line-height: 18px; }
.c-keys { width: 34px; height: 34px; flex-shrink: 0; }
.c-fp { width: 26px; height: 26px; margin-left: auto; color: var(--t-gold); flex-shrink: 0; }
.c-caret { display: inline-block; width: .6em; height: 1.1em; vertical-align: text-bottom; background: var(--t-terminal-accent); animation: c-blink 1s steps(1) infinite; }
@keyframes c-in { to { opacity: 1; } }
@keyframes c-type { to { width: calc(var(--n) * 1ch); } }
@keyframes c-blink { 50% { opacity: 0; } }

/* hero A: the terminal on the cloth */
.c-heroA { min-height: 700px; }
.c-heroA .w-veil { background: linear-gradient(90deg, rgba(8,13,26,.88) 0%, rgba(8,13,26,.62) 48%, rgba(8,13,26,.40) 100%); }
.c-heroA__in { position: relative; z-index: 2; flex: 1; display: grid; grid-template-columns: 1fr minmax(0, 600px); gap: 48px; align-items: center; padding: 24px 48px 72px; }
.c-heroA__in > * { min-width: 0; }
.c-heroA .s-words h1 { font-size: 62px; line-height: 66px; }

/* five commands */
.c-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; position: relative; }
.c-steps li { display: grid; grid-template-columns: 64px minmax(200px, 300px) 1fr; gap: 28px; align-items: center; padding: 22px 0; position: relative; }
.c-steps li + li { border-top: 1px solid var(--t-line); }
.c-steps li::after { content: ""; position: absolute; left: 31px; top: 0; bottom: 0; width: 2px; background: var(--t-gold); z-index: 0; opacity: .6; }
.c-steps li:first-child::after { top: 50%; } .c-steps li:last-child::after { bottom: 50%; }
.c-steps .w-icobox { width: 64px; height: 64px; position: relative; z-index: 1; } .c-steps .w-ico { width: 28px; height: 28px; }
.c-st__t h3 { font-size: 24px; line-height: 30px; } .c-st__t p { color: var(--t-muted); font-size: 16px; line-height: 24px; margin-top: 4px; }
.c-st__c { display: grid; gap: 10px; justify-items: start; min-width: 0; }
.c-chip { max-width: 100%; padding: 12px 16px; border-radius: 8px; background: var(--t-terminal-ground); color: var(--t-terminal-text);
  font: 400 13px/20px var(--t-font-mono); overflow-wrap: anywhere; }
.c-chip b { color: var(--t-terminal-accent); font-weight: 600; }
.c-chip--lg { font-size: 14px; line-height: 22px; padding: 16px 18px; }
.c-res { display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px; border-radius: 999px; font: 600 13px/18px var(--t-font-mono);
  color: var(--t-ink); background: color-mix(in srgb, var(--t-forest) 16%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--t-forest) 55%, transparent); }
.c-res::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--t-forest); }

/* every write waits for your passkey */
.c-write { display: grid; grid-template-columns: 1.1fr auto 1fr auto 1fr; gap: 18px; align-items: center; }
.c-write > * { min-width: 0; }
.c-arrow { font-size: 28px; color: var(--t-gold); font-weight: 700; }
.c-pk { display: grid; justify-items: center; gap: 8px; text-align: center; padding: 22px 18px; border-radius: 12px; background: var(--t-header); color: var(--t-on-header);
  box-shadow: inset 0 0 0 1.5px var(--t-gold); }
.c-pks { width: 58px; height: 58px; }
.c-pk b { font: 700 18px/24px var(--t-font-brand); }
.c-pk span { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; opacity: .85; }
.c-pk .c-fp { width: 20px; height: 20px; margin: 0; }
.c-audit { padding: 18px; border-radius: 12px; background: var(--t-surface); box-shadow: inset 0 0 0 1px var(--t-line); font-size: 14px; line-height: 20px; }
.c-audit__h { display: flex; align-items: center; gap: 8px; font: 600 12px/16px var(--t-font-product); letter-spacing: .1em; text-transform: uppercase; color: var(--t-muted); }
.c-sm { width: 16px; height: 16px; }
.c-audit__r { display: flex; gap: 10px; flex-wrap: wrap; margin: 12px 0 6px; padding-left: 10px; box-shadow: inset 3px 0 0 var(--t-gold); }
.c-audit__r b { font-family: var(--t-font-mono); font-weight: 600; } .c-audit__r span { font-family: var(--t-font-mono); color: var(--t-muted); }
.c-audit__m { color: var(--t-muted); font-size: 13px; }

/* made to be driven */
.c-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.c-tile { padding: 26px; border-radius: 12px; background: var(--t-card); display: grid; gap: 14px; align-content: start; }
.c-tile code { justify-self: start; padding: 8px 12px; border-radius: 6px; background: var(--t-terminal-ground); color: var(--t-terminal-accent); font-size: 14px; }
.c-tile p { color: var(--t-muted); }

/* the guide (a placeholder until the docs system lands) */
.c-guides { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.c-guide { display: grid; gap: 6px; padding: 20px; border-radius: 12px; background: var(--t-surface); box-shadow: inset 0 0 0 1px var(--t-line); }
.w-sec:not(.w-sec--card) .c-guide { background: var(--t-card); }
.c-guide .w-ico { width: 26px; height: 26px; color: var(--t-gold); margin-bottom: 6px; }
.c-guide b { font: 700 19px/24px var(--t-font-brand); }
.c-guide span { font-size: 13px; color: var(--t-muted); }

/* get the CLI */
.c-get { background: var(--t-header); color: var(--t-on-header); padding: 56px 0; border-top: 2px solid var(--t-gold); }
.c-get__in { display: grid; grid-template-columns: auto 1fr auto; gap: 28px; align-items: center; }
.c-get__mark .w-xstick { width: 64px; height: 64px; border-radius: 14px; box-shadow: 0 0 0 1.5px var(--t-gold); }
.c-get h2 { font-size: 36px; line-height: 42px; } .c-get p { opacity: .8; margin-top: 6px !important; }

/* hero B: one command on the terminal ground */
.c-heroB { background: var(--t-terminal-ground); color: var(--t-cream); padding-bottom: 72px; }
.c-heroB .w-nav--over { background: transparent; }
.c-heroB__in { padding-top: 56px; }
.c-heroB h1 { font-size: 88px; line-height: 92px; color: var(--t-cream); margin: 16px 0 36px; }
.c-bar { display: grid; gap: 10px; padding: 26px 28px; border-radius: 12px; background: rgba(255,255,255,.04); max-width: 820px; min-height: 200px; align-content: start;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), inset 3px 0 0 var(--t-gold); font: 400 17px/26px var(--t-font-mono); color: var(--t-terminal-text); overflow-x: auto; }
.c-heroB .w-cta { margin-top: 34px; }
.c-heroB .w-side { color: var(--t-gold); }

/* what happens when you press Enter */
.w-fig .f-ln { stroke: var(--t-gold); stroke-width: 4; }
.w-fig .f-cm { fill: #F4FBFF; filter: drop-shadow(0 0 6px var(--t-gold)); }
.w-fig .f-node { fill: var(--t-loch); stroke: var(--t-gold); stroke-width: 3; }
.c-flow .o-ic { color: var(--t-cream); }
.w-fig .f-t { fill: var(--t-ink); font: 700 19px var(--t-font-brand); text-anchor: middle; }
.w-fig .f-s { fill: var(--t-muted); font: 14px var(--t-font-product); text-anchor: middle; }

/* the cheat sheet */
.c-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.c-card { display: grid; gap: 8px; align-content: start; padding: 22px; border-radius: 12px; background: var(--t-surface); box-shadow: inset 0 0 0 1px var(--t-line), 0 3px 0 var(--t-line); }
.c-card__h { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.c-card__h .w-ico { width: 22px; height: 22px; color: var(--t-gold); }
.c-card__h b { font: 700 20px/26px var(--t-font-brand); }
.c-card code { display: block; padding: 8px 10px; border-radius: 6px; background: var(--t-terminal-ground); color: var(--t-terminal-text); font-size: 12.5px; line-height: 18px;
  overflow-wrap: anywhere; }
.c-more { margin-top: 26px !important; color: var(--t-muted); }

/* your AI, the same commands */
.c-chat { display: grid; gap: 14px; padding: 26px; border-radius: 14px; background: var(--t-card); }
.c-msg { max-width: 88%; padding: 14px 16px; border-radius: 12px; font-size: 16px; line-height: 24px; }
.c-msg--you { justify-self: end; background: var(--t-loch); color: #F4FBFF; border-bottom-right-radius: 4px; }
.c-msg--ai { background: var(--t-surface); box-shadow: inset 0 0 0 1px var(--t-line); border-bottom-left-radius: 4px; display: grid; gap: 8px; }
.c-msg--ai code { padding: 10px 12px; border-radius: 6px; background: var(--t-terminal-ground); color: var(--t-terminal-text); font-size: 13px; overflow-wrap: anywhere; }
.c-who { display: inline-flex; align-items: center; gap: 6px; font: 600 12px/16px var(--t-font-product); letter-spacing: .08em; text-transform: uppercase; color: var(--t-muted); }
.c-msg--key { display: flex; align-items: center; gap: 14px; background: var(--t-header); color: var(--t-on-header); box-shadow: inset 0 0 0 1.5px var(--t-gold); }
.c-msg--key b { display: block; font-weight: 700; } .c-msg--key span { display: block; font-size: 14px; opacity: .8; }

@media (prefers-reduced-motion: reduce) {
  .s-glow, .c-caret { animation: none !important; }
  .c-l { opacity: 1 !important; animation: none !important; }
  .c-type { width: auto !important; animation: none !important; }
  .f-cm { display: none; }
}

@container (max-width: 760px) {
  .s-heroA { min-height: 0; }
  .s-heroA__in, .c-heroA__in { grid-template-columns: 1fr; padding: 16px 20px 48px; gap: 28px; }
  .s-heroA .s-shield { --sz: 220px; justify-self: center; order: -1; }
  .s-words h1 { font-size: 46px !important; line-height: 50px !important; }
  .s-lede { font-size: 18px; line-height: 28px; }
  .s-locks, .s-tries, .s-flow3, .s-facts, .c-tiles, .c-cards { grid-template-columns: 1fr; gap: 24px; }
  .s-heroB { padding: 24px 0 40px; } .s-heroB__in { grid-template-columns: 1fr; gap: 20px; }
  .s-heroB .s-shield { --sz: 260px; justify-self: center; }
  .s-layers { grid-template-columns: 1fr; gap: 32px; } .s-laysvg { max-width: 280px; margin: 0 auto; }
  .s-heroC { min-height: 0; } .s-heroC .s-shield { --sz: 120px; }
  .s-heroC h1 { font-size: 40px; line-height: 44px; }
  .c-heroA { min-height: 0; } .c-heroA .s-words h1 { font-size: 40px !important; line-height: 44px !important; }
  .c-win__body { min-height: 0; font-size: 12px; line-height: 19px; padding: 16px; }
  .c-steps li { grid-template-columns: 52px 1fr; gap: 14px 18px; }
  .c-steps .w-icobox { width: 52px; height: 52px; } .c-steps li::after { left: 25px; }
  .c-st__c { grid-column: 2; }
  .c-write { grid-template-columns: 1fr; } .c-arrow { transform: rotate(90deg); justify-self: center; }
  .c-guides { grid-template-columns: 1fr 1fr; }
  .c-get__in { grid-template-columns: 1fr; gap: 18px; }
  .c-heroB h1 { font-size: 48px; line-height: 52px; margin-bottom: 24px; }
  .c-bar { font-size: 13px; line-height: 21px; padding: 18px; }
}

/* the locked brand shield, as-is (round 4 compare) */
.s-shield--locked .s-shield__art { overflow: visible; }
.s-bdl { overflow: visible; }
.s-bdl__disc { fill: var(--t-loch); }

/* ===== round 5: the one Security page ===== */
.s-hx .s-hx__vis { min-width: 0; display: flex; justify-content: center; }
.s-hx--h-shield .s-shield { --sz: 420px; }
.s-hx .s-words h1 { font-size: 72px; line-height: 76px; }

/* hero option: every connection, checked */
.q-body { min-height: 0; gap: 10px; }
.q-sh { width: 22px; height: 22px; }
.q-row { display: grid; grid-template-columns: minmax(0, 1.3fr) 18px minmax(0, 1fr) 78px 112px; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: 8px; background: rgba(255,255,255,.04); white-space: nowrap; font-size: 13px; }
.q-who { display: inline-flex; align-items: center; gap: 8px; overflow: hidden; text-overflow: ellipsis; }
.q-i { width: 18px; height: 18px; flex-shrink: 0; color: var(--t-terminal-muted); }
.q-ar { color: var(--t-terminal-muted); }
.q-row code { color: var(--t-terminal-muted); font-size: 12px; }
.q-row em { font-style: normal; font-weight: 600; justify-self: end; padding: 3px 10px; border-radius: 999px; font-size: 12px; }
.q-row--ok { box-shadow: inset 3px 0 0 var(--t-gold); } .q-row--ok em { background: color-mix(in srgb, var(--t-forest) 70%, transparent); color: #FFFFFF; }
.q-row--no { box-shadow: inset 3px 0 0 var(--t-error); } .q-row--no em { background: color-mix(in srgb, var(--t-error) 75%, transparent); color: #FFFFFF; }

/* hero option: a lock on every door, live */
.d-svg { width: 100%; max-width: 560px; height: auto; display: block; font-family: var(--t-font-product); }
.d-svg .d-panel { fill: rgba(8,13,26,.55); stroke: color-mix(in srgb, var(--t-gold) 40%, transparent); stroke-width: 1.5; }
.d-svg .d-ok { stroke: var(--t-gold); stroke-width: 3.5; stroke-linecap: round; }
.d-svg .d-no { stroke: var(--t-error); stroke-width: 2.5; stroke-dasharray: 7 7; }
.d-svg .d-cm { fill: #F4FBFF; filter: drop-shadow(0 0 6px var(--t-gold)); }
.d-svg .d-cm--no { fill: var(--t-error); filter: none; }
.d-svg .d-out { fill: color-mix(in srgb, var(--t-error) 22%, #0A1120); stroke: var(--t-error); stroke-width: 2; }
.d-svg .d-outi { stroke: var(--t-error); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.d-svg .o-node { fill: var(--t-loch); stroke: var(--t-gold); stroke-width: 2.5; }
.d-svg .o-ic { color: var(--t-cream); stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.d-svg .o-ic *, .d-svg .d-outi * { vector-effect: non-scaling-stroke; }
.d-svg .o-name { fill: var(--t-cream); font: 600 14px var(--t-font-mono); text-anchor: middle; }
.d-svg .s-x circle { fill: var(--t-error); } .d-svg .s-x path { stroke: #FFFFFF; stroke-width: 2.2; stroke-linecap: round; }

/* deep security: what each lock stops */
.s-sub { font-size: 30px; line-height: 36px; margin: 72px 0 26px !important; }
.s-tries--4 { grid-template-columns: repeat(4, 1fr); gap: 20px; }
.s-tries--4 .s-try { background: var(--t-card); box-shadow: none; }
.s-lk { display: inline-block; margin-bottom: 10px; padding: 3px 10px; border-radius: 999px; background: var(--t-gold); color: #1A1C20;
  font: 700 12px/18px var(--t-font-product); letter-spacing: .04em; }

/* share it safely */
.w-fig .h-ln { fill: none; stroke: var(--t-gold); stroke-width: 3.5; stroke-linecap: round; }
.w-fig .h-ln--p { stroke-width: 2.5; stroke-dasharray: 8 7; }
.w-fig .h-site { fill: rgba(255,255,255,.05); stroke: color-mix(in srgb, var(--t-gold) 45%, transparent); stroke-width: 1.5; }
.w-fig .h-nm { fill: var(--t-on-header); font: 700 17px var(--t-font-brand); }
.w-fig .h-pill { fill: var(--t-surface); stroke: var(--t-gold); stroke-width: 1.5; }
.w-fig .h-pt { fill: var(--t-ink); font: 600 14px var(--t-font-mono); text-anchor: middle; }
.s-mini { list-style: none; margin: 8px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; counter-reset: m; }
.s-mini li { counter-increment: m; display: grid; gap: 4px; padding-top: 16px; border-top: 2px solid var(--t-gold); }
.s-mini b { font: 700 22px/28px var(--t-font-brand); } .s-mini b::before { content: counter(m) ". "; color: var(--t-gold); }
.s-mini span { color: var(--t-muted); }

@media (prefers-reduced-motion: reduce) { .d-cm { display: none; } }
@container (max-width: 760px) {
  .s-hx .s-words h1 { font-size: 44px !important; line-height: 48px !important; }
  .s-hx--h-shield .s-shield { --sz: 220px; }
  .q-row { grid-template-columns: minmax(0, 1fr) 14px minmax(0, 1fr) 82px; font-size: 12px; } .q-row code { display: none; }
  .s-tries--4, .s-mini { grid-template-columns: 1fr; }
}

/* round 6: the share drawing leads with the app */
.w-fig .h-ahp { fill: var(--t-gold); }
.w-fig .h-ic { color: var(--t-on-header); opacity: .75; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.w-fig .h-ic * { vector-effect: non-scaling-stroke; }
.w-fig .h-site { fill: rgba(255,255,255,.035); stroke: color-mix(in srgb, var(--t-on-header) 22%, transparent); stroke-width: 1.2; }
.w-fig .h-site--p { stroke-dasharray: 6 6; }
.w-fig .h-nm { fill: var(--t-on-header); opacity: .85; font: 700 16px var(--t-font-brand); }
.w-fig .h-app { fill: var(--t-loch); stroke: var(--t-gold); stroke-width: 4; }
.w-fig .h-ring { fill: none; stroke: var(--t-gold); stroke-width: 1.5; opacity: .45; }
.w-fig .h-halo { fill: color-mix(in srgb, var(--t-gold) 14%, transparent); transform-box: fill-box; transform-origin: center; animation: h-pulse 3.2s ease-in-out infinite; }
@keyframes h-pulse { 0%, 100% { opacity: .5; transform: scale(.94); } 50% { opacity: 1; transform: scale(1.04); } }
.w-fig .h-appi { color: var(--t-cream); stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.w-fig .h-appi * { vector-effect: non-scaling-stroke; }
.w-fig .h-pill { fill: var(--t-gold); stroke: none; }
.w-fig .h-pt { fill: #1A1C20; font: 700 16px var(--t-font-mono); text-anchor: middle; }
@media (prefers-reduced-motion: reduce) { .w-fig .h-halo { animation: none; } }

/* round 6: the How hero, the tangle melting into the overlay (loops; reduced motion shows the overlay) */
.m-svg .m-red { fill: none; stroke: var(--t-error); stroke-width: 1.6; opacity: .8; }
.m-svg .m-hub { stroke: var(--t-error); stroke-width: 1.2; stroke-dasharray: 4 4; opacity: .55; }
.m-svg .m-gw { fill: #0A1120; stroke: var(--t-error); stroke-width: 2; }
.m-svg .m-gwi { stroke: var(--t-error); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.m-svg .m-gwi * { vector-effect: non-scaling-stroke; }
.m-svg .m-tag { font: 700 13px var(--t-font-product); letter-spacing: .16em; }
.m-svg .m-tag--red { fill: var(--t-error); } .m-svg .m-tag--gold { fill: var(--t-gold); }
.m-svg .m-band { fill: color-mix(in srgb, var(--t-gold) 16%, transparent); stroke: var(--t-gold); stroke-width: 2.5; }
.m-svg .m-bt { fill: var(--t-cream); font: 700 20px var(--t-font-brand); text-anchor: middle; }
.m-svg .m-drop { stroke: var(--t-gold); stroke-width: 3.5; stroke-linecap: round; stroke-dasharray: 90; stroke-dashoffset: 90; }
.m-svg .m-net { fill: var(--t-cream); opacity: .8; font: 600 12px var(--t-font-mono); text-anchor: middle; }
.m-svg .m-net--clash { fill: var(--t-error); opacity: 1; }
.m-tangle { animation: m-out 9s ease-in-out infinite; }
.m-over { animation: m-in 9s ease-in-out infinite; }
.m-over .m-drop { animation: m-draw 9s ease-in-out infinite; }
.m-svg .m-net--clash { animation: m-clash 9s ease-in-out infinite; }
@keyframes m-out { 0%, 38% { opacity: 1; } 50%, 92% { opacity: 0; } 100% { opacity: 1; } }
@keyframes m-in { 0%, 42% { opacity: 0; } 54%, 92% { opacity: 1; } 100% { opacity: 0; } }
@keyframes m-draw { 0%, 46% { stroke-dashoffset: 90; } 64%, 100% { stroke-dashoffset: 0; } }
@keyframes m-clash { 0%, 40% { fill: var(--t-error); } 55%, 92% { fill: var(--t-cream); } 100% { fill: var(--t-error); } }
@media (prefers-reduced-motion: reduce) {
  .m-tangle { animation: none; opacity: 0; } .m-over { animation: none; opacity: 1; }
  .m-over .m-drop { animation: none; stroke-dashoffset: 0; } .m-svg .m-net--clash { animation: none; fill: var(--t-cream); }
}

.s-mini--plain { margin-top: 36px; }
.s-mini--plain b::before { content: none; }

/* round 8: the site-to-site mess, widescreen */
.m-wide { padding: 0; background: none; }
.m-svg .m-ground { fill: var(--t-header); }
.m-wide .m-svg { min-width: 640px; }
.m-svg .m-nm { fill: var(--t-cream); font: 700 15px var(--t-font-product); text-anchor: middle; }
.m-svg .m-v6 { fill: var(--t-gold); font: 600 11.5px var(--t-font-mono); text-anchor: middle; }
.m-tangle .m-net--clash { animation: none; }

/* round 9: the home hero */
.s-words .w-free { margin-top: 20px; color: #C9C5BA; } .s-words .w-free code { color: var(--t-cream); }
.d-svg .l-where { fill: var(--t-gold); font: 600 12px var(--t-font-product); text-anchor: middle; letter-spacing: .04em; }
.s-hx .s-words .s-tag { text-transform: none; letter-spacing: .02em; font-size: 17px; }
.s-hx--home .s-words h1 { font-size: 58px; line-height: 62px; }
.s-hx--home .s-lede { font-size: 19px; line-height: 29px; }
.s-hx--home .c-heroA__in { grid-template-columns: 1fr minmax(0, 500px); }
.s-hx--home .s-words h1 { font-size: 56px; line-height: 60px; }
@container (max-width: 760px) {
  .s-hx--home .c-heroA__in { grid-template-columns: 1fr; }
  .s-hx--home .s-words h1 { font-size: 42px !important; line-height: 46px !important; }
}
@container (max-width: 760px) {
  .q-i { display: none; }
  .q-row { grid-template-columns: minmax(0, 1fr) 12px minmax(0, .8fr) auto; gap: 6px; padding: 9px 10px; font-size: 12px; }
  .q-row em { padding: 2px 8px; font-size: 11px; }
  .c-l--cmd { white-space: normal; overflow-wrap: anywhere; }
  .c-l--cmd .c-type { display: inline; width: auto; animation: none; white-space: normal; }
}

/* round 10: a calm home hero (words, and the wordmark with the tagline, decision 293); the moving drawing beside the three steps */
.s-hx--home .c-heroA__in { grid-template-columns: 1fr auto; align-items: end; }
.s-hx--home .s-words { align-self: center; }
.h-mark { text-align: right; padding-bottom: 8px; }
.h-mark__wm { font: 700 128px/1 var(--t-font-brand); color: var(--t-cream); text-shadow: 0 2px 24px rgba(0,0,0,.45); }
.h-mark__tag { margin-top: 10px !important; font: 700 30px/36px var(--t-font-brand); color: var(--t-cream); text-shadow: 0 1px 14px rgba(0,0,0,.5); }
.h-steps { display: grid; grid-template-columns: 1fr minmax(0, 520px); gap: 56px; align-items: center; }
.h-steps > * { min-width: 0; }
.h-ol { list-style: none; margin: 30px 0 0; padding: 0; display: grid; gap: 22px; counter-reset: h; }
.h-ol li { counter-increment: h; display: grid; grid-template-columns: 30px 1fr; column-gap: 14px; }
.h-ol li::before { content: counter(h); grid-row: span 2; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
  font: 700 13px/1 var(--t-font-product); color: var(--t-ink); box-shadow: inset 0 0 0 1.5px var(--t-gold); margin-top: 2px; }
.h-ol b { font: 700 22px/30px var(--t-font-brand); }
.h-ol span { color: var(--t-muted); }
.h-stage { border-radius: 18px; background: var(--t-header); }
.h-stage .d-panel { fill: none; stroke: none; }
@container (max-width: 760px) {
  .s-hx--home .c-heroA__in { grid-template-columns: 1fr; }
  .h-mark { text-align: left; } .h-mark__wm { font-size: 64px; } .h-mark__tag { font-size: 22px; line-height: 28px; }
  .h-steps { grid-template-columns: 1fr; gap: 32px; }
}

/* round 11: home hero options; a calmer cloth under the new ones */
.s-hx--hm-flip .w-veil, .s-hx--hm-center .w-veil, .s-hx--hm-brand .w-veil { background: rgba(8,13,26,.58); }
.h-flip { grid-template-columns: auto minmax(0, 560px) !important; align-items: center !important; }
.h-flip .h-mark { text-align: left; }
.h-panel { padding: 36px 40px; background: rgba(8,13,26,.62); border-left: 3px solid var(--t-gold); border-radius: 4px; }
.h-panel h1 { font-size: 46px !important; line-height: 50px !important; margin-top: 0 !important; }
.h-center { position: relative; z-index: 2; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 24px 24px 88px; }
.h-center h1 { font: 700 104px/104px var(--t-font-brand); color: var(--t-cream); text-shadow: 0 2px 30px rgba(0,0,0,.5); }
.h-center__sub { margin-top: 14px !important; font: 700 40px/46px var(--t-font-brand); color: var(--t-gold); }
.h-center .s-lede { margin: 26px auto 34px !important; max-width: 620px; }
.h-center .w-cta { justify-content: center; } .h-center .w-side { color: var(--t-gold); }
.h-brand { position: relative; z-index: 2; flex: 1; display: flex; flex-direction: column; justify-content: center; padding: 24px 48px 64px; }
.h-brand__wm { font: 700 220px/.9 var(--t-font-brand); color: var(--t-cream); text-shadow: 0 2px 30px rgba(0,0,0,.45); letter-spacing: -.01em; }
.h-brand__tag { margin-top: 12px !important; font: 700 44px/50px var(--t-font-brand); color: var(--t-gold); }
.h-brand__row { margin-top: 56px; padding-top: 26px; border-top: 2px solid var(--t-gold); display: flex; flex-wrap: wrap; align-items: center; gap: 18px 32px; }
.h-brand__row p { flex: 1; min-width: 280px; font: 700 28px/36px var(--t-font-brand); color: var(--t-cream); }
.h-brand__row .w-side { color: var(--t-gold); }
.d-soonh { font-size: 26px; line-height: 32px; margin: 48px 0 18px !important; }
.d-soon .w-card { opacity: .78; }
.d-pill { align-self: flex-start; padding: 6px 14px; border-radius: 999px; font: 600 13px/18px var(--t-font-product); color: var(--t-ink);
  background: color-mix(in srgb, var(--t-gold) 26%, transparent); }
@container (max-width: 760px) {
  .h-flip { grid-template-columns: 1fr !important; } .h-panel { padding: 24px 20px; }
  .h-panel h1 { font-size: 36px !important; line-height: 40px !important; }
  .h-center h1 { font-size: 52px; line-height: 54px; } .h-center__sub { font-size: 26px; line-height: 32px; }
  .h-brand { padding: 16px 20px 40px; } .h-brand__wm { font-size: 104px; } .h-brand__tag { font-size: 26px; line-height: 32px; }
  .h-brand__row p { font-size: 22px; line-height: 28px; min-width: 0; }
}

/* round 12: the wordmark hero, no rule; two cloth treatments */
.h-brand__row { border-top: 0 !important; padding-top: 0 !important; margin-top: 48px; }
.h-what { margin-top: 30px; }

/* round 14: tagline and button colour options */
.h-brand__tag--white { color: var(--t-cream) !important; }
.w-btn--white { background: var(--t-cream); color: #1A1C20 !important; box-shadow: none; }

/* round 15: the preview pop-up (launch: every not-yet-live click opens it) */
.p-body { gap: 14px; }
.p-lead { font: 700 24px/30px var(--t-font-brand); color: var(--t-ink) !important; }
.p-mail { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 14px 16px; border-radius: 10px; background: var(--t-card); }
.p-mail code { flex: 1; min-width: 220px; font-size: 16px; font-weight: 600; color: var(--t-ink); }
.p-note { font-size: 14px; line-height: 20px; }

/* the close button: a clear X (the link colour was hiding it); clicking outside also closes (build) */
.w-page .w-dlg__x { color: #FFFFFF !important; background: rgba(6,12,22,.55); box-shadow: 0 0 0 1px rgba(255,255,255,.25); text-decoration: none !important; }
.w-dlg__xi { width: 18px; height: 18px; }