/* Generated from index.html by build.py. Edit index.html, not this file. */
/* Fonts are served from the site and preloaded; text waits for them (block) so the page is
laid out once, in the right font, instead of shifting when a web font swaps in. */
@font-face{font-family:"Hanken Grotesk";font-style:normal;font-weight:400 500;font-display:block;src:url(/fonts/hanken-grotesk-normal.woff2) format("woff2")}
@font-face{font-family:"Newsreader";font-style:normal;font-weight:400;font-display:block;src:url(/fonts/newsreader-normal.woff2) format("woff2")}
@font-face{font-family:"Newsreader";font-style:italic;font-weight:400;font-display:block;src:url(/fonts/newsreader-italic.woff2) format("woff2")}
/* ---------- Type: two fonts, three sizes ----------
Headings: Newsreader at --fs-h. Everything you read: Hanken Grotesk at --fs-t.
Captions, labels and notes: Hanken Grotesk at --fs-s. Nothing else. */
:root{
--serif:"Newsreader",Georgia,serif;
--sans:"Hanken Grotesk",system-ui,-apple-system,sans-serif;
--fs-h:30px;
--fs-t:17px;
--fs-s:14px;
--bg:#fff;
--ink:#1b1c1b;
--ink-2:#4d504d;
--ink-3:#7c7f7c;
--rule:#e6e7e5;
--rule-2:#d2d4d1;
--soft:#f4f4f2;
--soft-2:#e9eae7;
--paper:#fff;
--shadow:0 1px 2px rgba(20,24,20,.06),0 18px 40px -18px rgba(20,24,20,.22);
--green:#2c6a48;
--green-2:#235a3c;
--accent:#2c6a48;
--accent-soft:rgba(44,106,72,.10);
--crit:#b04532;
--main:620px;
--margin:220px;
--gap:40px;
--ease:cubic-bezier(.2,.7,.2,1);
color-scheme:light;
}
@media (prefers-color-scheme:dark){
:root:not([data-theme="light"]){
--bg:#0f100f;--ink:#e8eae7;--ink-2:#a3a7a3;--ink-3:#6c706c;--rule:#242624;--rule-2:#363936;--soft:#171917;--soft-2:#222422;
--paper:#151715;--shadow:0 1px 2px rgba(0,0,0,.4),0 18px 40px -18px rgba(0,0,0,.8);
--accent:#7fcf9a;--accent-soft:rgba(127,207,154,.12);--crit:#ef8f7c;color-scheme:dark;
}
}
:root[data-theme="dark"]{
--bg:#0f100f;--ink:#e8eae7;--ink-2:#a3a7a3;--ink-3:#6c706c;--rule:#242624;--rule-2:#363936;--soft:#171917;--soft-2:#222422;
--paper:#151715;--shadow:0 1px 2px rgba(0,0,0,.4),0 18px 40px -18px rgba(0,0,0,.8);
--accent:#7fcf9a;--accent-soft:rgba(127,207,154,.12);--crit:#ef8f7c;color-scheme:dark;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;overflow-x:clip}
body{background:var(--bg);color:var(--ink);font:400 var(--fs-t)/1.7 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:clip;transition:background .25s,color .25s}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
b,strong{font-weight:500;color:var(--ink)}
::selection{background:#cfe6d7;color:#0f100f}
.s{font-size:var(--fs-s);line-height:1.5}
/* External links get a small arrow */
a[target="_blank"]::after{content:"";display:inline-block;width:.6em;height:.6em;margin-left:.22em;vertical-align:.06em;background:currentColor;opacity:.7;
-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M3 1h6v6M9 1L1 9' fill='none' stroke='black' stroke-width='1.4'/%3E%3C/svg%3E") center/contain no-repeat;
mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M3 1h6v6M9 1L1 9' fill='none' stroke='black' stroke-width='1.4'/%3E%3C/svg%3E") center/contain no-repeat}
/* ---------- Layout ----------
Contents on the left. The essay is a two-column grid: the text, and a margin to its right
for captions and notes. Wide figures span both. */
.page{display:grid;grid-template-columns:208px auto;justify-content:center;max-width:1240px;margin:0 auto;padding:0 32px}
.side{position:sticky;top:0;height:100vh;padding:96px 32px 36px 0;display:flex;flex-direction:column}
.col{border-left:1px solid var(--rule);min-width:0}
.essay{padding:96px 32px 24px}
.essay,.part{display:grid;grid-template-columns:minmax(0,var(--main)) var(--margin);column-gap:var(--gap);align-items:start}
.essay>*,.part>*{grid-column:1}
.part{grid-column:1/-1}
figure{grid-column:1/-1!important;display:grid;grid-template-columns:subgrid;align-items:start;margin-top:44px}
figure>*{grid-column:1;margin-top:0!important}
figure>figcaption{padding-top:0}
figure>figcaption{grid-column:2}
figure.wide>*{grid-column:1/-1}
figure.wide>figcaption{grid-column:1;margin-top:12px}
.mn{grid-column:2!important;margin-top:var(--mt,24px);padding-top:10px;border-top:1px solid var(--rule);font-size:var(--fs-s);line-height:1.5;color:var(--ink-3)}
/* Sidebar */
.logo img{width:176px;height:auto}
.by{margin-top:14px;font-size:var(--fs-s);line-height:1.5;color:var(--ink-3)}
.menu{list-style:none;margin-top:34px;display:grid;gap:1px;border-left:1px solid var(--rule)}
.menu a{display:block;margin-left:-1px;padding:5px 0 5px 14px;border-left:1px solid transparent;font-size:var(--fs-s);line-height:1.4;color:var(--ink-3);transition:color .15s,border-color .15s}
.menu a:hover{color:var(--ink)}
.menu a.on{color:var(--ink);border-left-color:var(--ink)}
.side__foot{margin-top:auto;display:grid;gap:14px}
.status{font-size:var(--fs-s);color:var(--ink-3);display:flex;align-items:center;gap:8px}
.status i{width:6px;height:6px;border-radius:50%;background:#3f9a63}
.theme{display:inline-flex;justify-self:start;padding:2px;border-radius:8px;background:var(--soft);box-shadow:inset 0 0 0 1px var(--rule)}
.theme button{display:grid;place-items:center;width:30px;height:26px;border:0;border-radius:6px;background:transparent;color:var(--ink-3);cursor:pointer;transition:background .15s,color .15s}
.theme button svg{width:15px;height:15px}
.theme button:hover{color:var(--ink)}
.theme button[aria-pressed="true"]{background:var(--bg);color:var(--ink);box-shadow:0 0 0 1px var(--rule),0 1px 2px rgba(0,0,0,.06)}
.side .btn--top{display:none}
/* ---------- Text ---------- */
.kicker{font-size:var(--fs-s);color:var(--ink-3)}
h1,h2,.quote{font:400 var(--fs-h)/1.2 var(--serif);color:var(--ink);letter-spacing:-.012em}
.quote{color:var(--ink-2)!important}
h1{margin-top:8px}
.dek{margin-top:14px;color:var(--ink)}
.byline{margin-top:14px;font-size:var(--fs-s);color:var(--ink-3)}
.part{padding-top:80px}
.essay p{margin-top:20px}
h2+p{margin-top:20px}
.essay p a,.mn a,figcaption a{text-decoration:underline;text-decoration-color:var(--rule-2);text-underline-offset:3px}
.quote{margin-top:44px;font-style:italic}
/* Figures and captions */
figcaption{font-size:var(--fs-s);line-height:1.5;color:var(--ink-3)}
figcaption b{display:block;color:var(--ink-2);margin-bottom:2px}
figcaption ol{margin-top:10px;list-style:none;display:grid;gap:8px;counter-reset:a}
figcaption ol li{display:grid;grid-template-columns:22px 1fr;counter-increment:a}
figcaption ol li::before{content:counter(a);display:grid;place-items:center;width:16px;height:16px;margin-top:2px;border-radius:50%;background:var(--crit);color:#fff;font-size:11px;font-weight:500}
.src{display:block;margin-top:8px}
/* ---------- Motion: things arrive as you reach them ---------- */
[data-in]{opacity:0;transform:translateY(14px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
[data-in].in{opacity:1;transform:none}
.stagger>*{opacity:0;transform:translateY(10px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.stagger.in>*{opacity:1;transform:none}
.static [data-in],.static .stagger>*{opacity:1!important;transform:none!important;transition:none!important}
/* Hero: Darling Harbour, full width, water moving */
.harbour .frame{position:relative;border-radius:8px;overflow:hidden;background:#0b0f0c;aspect-ratio:16/8.2}
.harbour img,.harbour canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.harbour canvas{opacity:0;transition:opacity .8s ease}
.harbour.live canvas{opacity:1}
.harbour .tag{position:absolute;left:16px;bottom:14px;display:flex;align-items:center;gap:8px;padding:5px 10px;border-radius:20px;background:rgba(0,0,0,.42);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);color:#fff;font-size:var(--fs-s);line-height:1.2}
.harbour .tag i{width:6px;height:6px;border-radius:50%;background:#7fe39a;box-shadow:0 0 8px #7fe39a}
.graded{filter:url(/#matrix-grade)}
.graded.is-day{filter:url(/#matrix-grade-day)}
.no-grade .graded{filter:none}
.is-day,.is-night{transition:opacity .7s ease}
.is-night{opacity:0}
:root[data-theme="dark"] .is-night{opacity:1}
:root[data-theme="dark"] .is-day{opacity:0}
@media (prefers-color-scheme:dark){
:root:not([data-theme="light"]) .is-night{opacity:1}
:root:not([data-theme="light"]) .is-day{opacity:0}
}
/* A real example */
.example{margin-top:36px;padding-left:20px;border-left:2px solid var(--ink)}
.example .k{font-size:var(--fs-s);color:var(--ink-3)}
.example{border-left-color:var(--rule-2)}
.example p{margin-top:6px!important;color:var(--ink-2)}
/* Live panel: what this page knows about you */
.livelab{display:flex;align-items:center;gap:8px;margin-bottom:10px;font-size:var(--fs-s);color:var(--crit)}
.livelab i{width:7px;height:7px;border-radius:50%;background:var(--crit);animation:blink 1.6s ease-in-out infinite}
@keyframes blink{50%{opacity:.25}}
.kh{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:0 0 12px;border-bottom:2px solid var(--ink);font-size:var(--fs-s);color:var(--ink-3)}
.kh b{font-size:var(--fs-t)}
.kh .vid-id,#since{font-variant-numeric:tabular-nums;letter-spacing:.04em}
.knows{border-top:0}
.knows__row{display:grid;grid-template-columns:150px 1fr;gap:16px;padding:12px 0;border-bottom:1px solid var(--rule);opacity:0;transform:translateX(-6px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.knows.go .knows__row.ok{opacity:1;transform:none}
.knows__row[hidden]{display:none}
.knows__row dt{font-size:var(--fs-s);color:var(--ink-3);padding-top:2px}
.knows__row dd{min-width:0}
.kv{display:block;color:var(--ink);font-weight:500;overflow-wrap:anywhere}
.kn{display:block;font-size:var(--fs-s);line-height:1.5;color:var(--ink-3)}
.knows__row[data-k="print"] .kv,.fid{font-variant-numeric:tabular-nums;letter-spacing:.08em}
.static .knows__row{opacity:1;transform:none}
/* Followed across sites */
.follow{position:relative;display:grid;gap:10px;padding-left:28px}
.follow::before{content:"";position:absolute;left:8px;top:22px;bottom:22px;width:2px;background:linear-gradient(var(--crit),var(--crit)) top/100% 0 no-repeat,var(--rule)}
.follow.in::before{animation:fill 1.4s .2s var(--ease) forwards}
.static .follow::before{background-size:100% 100%,auto}
@keyframes fill{to{background-size:100% 100%,auto}}
.site{position:relative;display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;padding:12px 14px;border-radius:10px;background:var(--soft)}
.site::before{content:"";position:absolute;left:-24px;top:50%;width:10px;height:10px;margin-top:-5px;border-radius:50%;background:var(--bg);box-shadow:0 0 0 2px var(--crit)}
.site .fav{display:grid;place-items:center;width:30px;height:30px;border-radius:8px;color:#fff;font-size:var(--fs-s);font-weight:500}
.site b{display:block;line-height:1.3}
.site small{display:block;font-size:var(--fs-s);color:var(--ink-3);line-height:1.4}
.site .fid{font-size:var(--fs-s);color:var(--crit);white-space:nowrap}
.site .fid:empty::before{content:"···· ···· ····"}
.follow.stagger>*{transition-delay:calc(var(--i,0)*350ms)}
/* The family: a line diagram */
.fam svg{display:block;width:100%;height:auto;overflow:visible}
.fam .spoke{stroke:var(--ink);stroke-width:1;opacity:.3;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1s var(--ease)}
.fam.in .spoke{stroke-dashoffset:0}
.fam .node,.fam .lbl{opacity:0;transition:opacity .6s var(--ease)}
.fam.in .node,.fam.in .lbl{opacity:1}
.fam .node{fill:var(--bg);stroke:var(--ink);stroke-width:1.3}
.fam .halo{fill:none;stroke:var(--ink);stroke-width:1;opacity:.14}
.fam .wave{fill:none;stroke:var(--accent);stroke-width:1.2}
.fam .hub{fill:var(--ink)}
.fam .hub-t{font:400 22px var(--serif);fill:var(--bg);text-anchor:middle}
.fam .t{font:500 14px var(--sans);fill:var(--ink)}
.fam .d{font:400 14px var(--sans);fill:var(--ink-3)}
.fam .pulse{fill:var(--accent)}
.fam-list{display:none;list-style:none;border-left:1px solid var(--ink);margin-left:6px}
.fam-list li{position:relative;padding:0 0 14px 20px;line-height:1.4}
.fam-list li::before{content:"";position:absolute;left:-4px;top:8px;width:7px;height:7px;border-radius:50%;background:var(--bg);box-shadow:0 0 0 1.3px var(--ink)}
.fam-list b{display:block}
.fam-list small{font-size:var(--fs-s);color:var(--ink-3)}
.fam-list .top{font:400 var(--fs-h)/1.2 var(--serif);color:var(--ink);padding-bottom:18px}
.fam-list .top::before{background:var(--ink);width:9px;height:9px;left:-5px;top:12px}
/* The chart */
.chart__plot{position:relative;display:grid;grid-template-columns:repeat(3,1fr);align-items:end;height:270px;padding:0 4px;border-bottom:1px solid var(--ink)}
.bar{position:relative;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;z-index:1}
.bar i{display:block;width:min(100%,88px);background:var(--rule-2);border-radius:2px 2px 0 0;transform-origin:bottom;transform:scaleY(0);transition:transform 1s var(--ease)}
.bar:nth-child(2) i{transition-delay:.12s}.bar:nth-child(3) i{transition-delay:.24s}.bar:nth-child(4) i{transition-delay:.36s}
.chart.in .bar i{transform:none}
.bar--now i{background:var(--ink)}
.bar .v{margin-bottom:8px;font-size:var(--fs-s);color:var(--ink-2);opacity:0;transition:opacity .6s .7s}
.chart.in .bar .v{opacity:1}
.bar--now .v{font:400 var(--fs-h)/1 var(--serif);color:var(--ink)}
.bar .g{font:500 var(--fs-s) var(--sans);color:var(--crit);margin-left:4px}
.chart__x{display:grid;grid-template-columns:repeat(3,1fr);padding:8px 4px 0;font-size:var(--fs-s);color:var(--ink-3);text-align:center}
.ai{position:absolute;inset:0 4px;z-index:2;pointer-events:none;clip-path:inset(0 100% 0 0);transition:clip-path 1.8s .5s var(--ease)}
.chart.in .ai{clip-path:inset(-20% -40% -20% 0)}
.ai svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.ai path{fill:none;stroke:var(--accent);stroke-width:2;vector-effect:non-scaling-stroke}
.ai .area{fill:var(--accent-soft);stroke:none}
.ai .dot{position:absolute;width:7px;height:7px;margin:-3.5px 0 0 -3.5px;border-radius:50%;background:var(--bg);box-shadow:0 0 0 2px var(--accent)}
.ai .lab{position:absolute;transform:translate(0,-50%);padding-left:12px;white-space:nowrap;font-size:var(--fs-s);line-height:1.3;color:var(--accent)}
.ai .lab b{display:block;color:var(--accent)}
.legend2{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:12px;font-size:var(--fs-s);color:var(--ink-3)}
.legend2 span{display:inline-flex;align-items:center;gap:7px}
.legend2 .sw{width:12px;height:12px;border-radius:2px;background:var(--rule-2)}
.legend2 .sw2{width:14px;height:2px;background:var(--accent)}
/* Breaches timeline */
.events{list-style:none;position:relative}
.events::before{content:"";position:absolute;left:88px;top:10px;bottom:10px;width:1px;background:var(--rule-2)}
.events li{display:grid;grid-template-columns:88px 1fr;padding-bottom:22px}
.events li:last-child{padding-bottom:0}
.events time{font-size:var(--fs-s);color:var(--ink-3);padding-top:2px}
.events div{position:relative;padding-left:22px;line-height:1.55}
.events div::before{content:"";position:absolute;left:-4px;top:9px;width:7px;height:7px;border-radius:50%;background:var(--bg);box-shadow:0 0 0 1.3px var(--ink)}
.events b{display:block}
.events span{display:block;color:var(--ink)}
.events em{display:inline-block;margin-top:4px;padding:1px 8px;border-radius:20px;background:color-mix(in srgb,var(--crit) 12%,transparent);color:var(--crit);font-style:normal;font-size:var(--fs-s);font-weight:500}
.events.stagger>*{transition-delay:calc(var(--i,0)*120ms)}
/* Company marks in the breach timeline */
.co{display:flex!important;align-items:center;gap:10px;color:var(--ink)}
.co img,.co .mono{width:24px;height:24px;border-radius:6px;flex:none}
.co .mono{display:grid;place-items:center;background:#2b6cb0;color:#fff;font-style:normal;font-size:var(--fs-s);font-weight:500}
/* Everything included: a written list, by category */
.feats{border-top:1px solid var(--ink)}
.feat{display:grid;grid-template-columns:40px 1fr;gap:0 16px;padding:22px 0 20px;border-bottom:1px solid var(--rule)}
.feat .ic{display:grid;place-items:center;width:40px;height:40px;border-radius:10px;background:var(--accent-soft);color:var(--accent)}
.feat .ic svg{width:19px;height:19px}
.feat__h b{display:block;line-height:1.4}
.feat__h span{display:block;color:var(--ink-3);font-size:var(--fs-s)}
.feat ul{list-style:none;margin-top:12px;display:grid;gap:9px}
.feat li{position:relative;padding-left:24px;line-height:1.55;color:var(--ink)}
.feat li::before{content:"";position:absolute;left:2px;top:.42em;width:12px;height:12px;
background:var(--accent);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6.3l2.6 2.5L10 3.4' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6.3l2.6 2.5L10 3.4' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}
.feat li b{font-weight:500}
.feats.stagger>*{transition-delay:calc(var(--i,0)*80ms)}
/* Screenshot: an email */
.mail{border-radius:10px;background:var(--paper);box-shadow:var(--shadow),0 0 0 1px var(--rule);overflow:hidden;font-size:var(--fs-s);line-height:1.5}
.mail__bar{display:flex;align-items:center;gap:7px;height:34px;padding:0 12px;background:var(--soft);border-bottom:1px solid var(--rule)}
.mail__bar i{width:11px;height:11px;border-radius:50%;background:#e2685f}
.mail__bar i:nth-child(2){background:#e7b54a}
.mail__bar i:nth-child(3){background:#68bd5e}
.mail__bar span{margin-left:10px;color:var(--ink-3)}
.mail__head{padding:16px 20px 14px;border-bottom:1px solid var(--rule);display:grid;grid-template-columns:38px 1fr auto;gap:0 12px;align-items:start}
.mail__av{grid-row:span 3;display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:#2e4a7a;color:#fff;font-weight:500}
.mail__from{font-weight:500;color:var(--ink)}
.mail__from span{font-weight:400;color:var(--ink-3)}
.mail__time{color:var(--ink-3)}
.mail__subj{grid-column:2/-1;color:var(--ink);font-weight:500}
.mail__to{grid-column:2/-1;color:var(--ink-3)}
.mail__body{padding:20px 20px 24px;color:var(--ink)}
.mail__brand{font-weight:500;letter-spacing:.08em;color:#2e4a7a;padding-bottom:12px;margin-bottom:16px;border-bottom:2px solid #2e4a7a}
:root[data-theme="dark"] .mail__brand{color:#9db5e0;border-color:#9db5e0}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .mail__brand{color:#9db5e0;border-color:#9db5e0}}
.mail__body p{margin:0 0 12px}
.mail__amt{font-size:var(--fs-t);font-weight:500;margin:0 0 12px}
.mail__btn{display:inline-block;margin-top:4px;padding:8px 16px;border-radius:4px;background:#2e4a7a;color:#fff;font-weight:500}
.mail__fine{margin-top:16px;color:var(--ink-3)}
.flag{display:inline-grid;vertical-align:1px;margin-left:6px;place-items:center;width:18px;height:18px;border-radius:50%;background:var(--crit);color:#fff;font-size:11px;font-weight:500;transform:scale(0);transition:transform .4s var(--ease)}
.mailfig.in .flag{transform:none}
.mailfig.in .flag:nth-of-type(1){transition-delay:.6s}
.mailfig .f2{transition-delay:1s!important}.mailfig .f3{transition-delay:1.4s!important}
.static .flag{transform:none}
/* Two phones: a lock-screen alert, and a Messages conversation */
.phones{display:grid;grid-template-columns:1fr 1fr;gap:28px;justify-items:center;align-items:start}
.iph{position:relative;width:286px;padding:11px;border-radius:54px;background:linear-gradient(145deg,#3a3a3e,#1b1b1d 40%,#2a2a2d);box-shadow:var(--shadow),inset 0 0 0 1.5px #55555a,inset 0 0 0 3px #111}
.iph::before,.iph::after{content:"";position:absolute;width:3px;border-radius:2px;background:#2a2a2d}
.iph::before{left:-3px;top:150px;height:56px;box-shadow:0 -70px 0 0 #2a2a2d}
.iph::after{right:-3px;top:180px;height:84px}
.scr{position:relative;height:640px;border-radius:44px;overflow:hidden;display:flex;flex-direction:column;background:#fff;color:#000;font-size:var(--fs-s);line-height:1.35}
.island{position:absolute;z-index:3;left:50%;top:11px;width:84px;height:26px;margin-left:-42px;border-radius:20px;background:#000}
.sb{position:relative;z-index:2;display:flex;justify-content:space-between;align-items:center;height:50px;padding:6px 22px 0 30px;font-weight:500;font-variant-numeric:tabular-nums}
.sb svg{display:block;height:10px;width:auto}
.sb .r{display:flex;align-items:center;gap:4px}
.home{position:absolute;left:50%;bottom:8px;width:110px;height:4px;margin-left:-55px;border-radius:3px;background:#000;z-index:3}
/* Lock screen */
.lock{background:#0b0f0c;color:#fff}
.lock .wall{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:url(/#matrix-grade) brightness(.6) blur(1px);transform:scale(1.05)}
.lock::after{content:"";position:absolute;inset:0;background:linear-gradient(rgba(0,0,0,.25),rgba(0,0,0,0) 40%,rgba(0,0,0,.45))}
.lock .sb,.lock .lk,.lock .notes{position:relative;z-index:2}
.lock .sb svg{fill:#fff;stroke:#fff}
.lock .home{background:#fff}
.lk{text-align:center;margin-top:6px}
.lk small{display:block;font-weight:500;opacity:.85}
.lk b{display:block;color:#fff;font-weight:500;font-size:72px;line-height:1;letter-spacing:-.02em;margin-top:2px;font-variant-numeric:tabular-nums}
.notes{margin-top:auto;padding:0 10px 54px;display:grid;gap:8px}
.note{display:grid;grid-template-columns:34px 1fr;gap:2px 10px;padding:11px 12px;border-radius:20px;background:rgba(245,245,245,.72);backdrop-filter:blur(18px) saturate(160%);-webkit-backdrop-filter:blur(18px) saturate(160%);color:#000;transform:translateY(16px);opacity:0;transition:transform .6s var(--ease),opacity .6s var(--ease)}
.phones.in .note{transform:none;opacity:1}
.phones.in .note+.note{transition-delay:.5s}
.note .app{grid-row:span 2;display:grid;place-items:center;width:34px;height:34px;border-radius:9px;background:linear-gradient(#5ef37e,#1fbf46)}
.note .app svg{width:20px;height:20px;fill:#fff}
.note .app--hl{background:#1b1c1b}
.note .app--hl svg{fill:none;stroke:#9cf5b0}
.note .top{display:flex;justify-content:space-between;gap:8px;font-weight:500}
.note .top span{font-weight:400;color:rgba(0,0,0,.5)}
.note p{margin:0!important;color:#000}
/* Messages */
.msgs{background:#fff}
.nav{display:grid;grid-template-columns:44px 1fr 44px;align-items:center;padding:0 10px 8px;border-bottom:1px solid #e5e5ea;background:rgba(249,249,249,.94)}
.nav .back{display:flex;align-items:center;gap:2px;color:#0a7cff}
.nav .back svg{width:11px;height:18px;stroke:#0a7cff;fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.nav .back span{display:grid;place-items:center;min-width:20px;height:20px;padding:0 6px;border-radius:10px;background:#0a7cff;color:#fff;font-size:12px;font-weight:500}
.nav .who{display:grid;justify-items:center;gap:3px}
.nav .av{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:linear-gradient(#a6adb7,#848b95);color:#fff;font-size:18px;font-weight:500}
.nav .nm{font-size:12px;color:#000}
.nav .nm::after{content:" ›";color:#8e8e93}
.nav .vid{justify-self:end;color:#0a7cff}
.nav .vid svg{width:24px;height:16px;fill:none;stroke:#0a7cff;stroke-width:1.8;stroke-linejoin:round}
.thread{flex:1;display:flex;flex-direction:column;justify-content:flex-end;gap:3px;padding:10px 14px 8px;overflow:hidden}
.ts{margin:4px 0 8px;text-align:center;font-size:11px;color:#8e8e93}
.ts b{color:#8e8e93;font-weight:500}
.bub{position:relative;max-width:80%;padding:7px 12px;border-radius:18px;margin-top:4px;word-wrap:break-word}
.bub.me{align-self:flex-end;background:#0a7cff;color:#fff}
.bub.them{align-self:flex-start;background:#e9e9eb;color:#000}
.bub.tail.me::before{content:"";position:absolute;right:-7px;bottom:0;width:20px;height:20px;background:#0a7cff;border-bottom-left-radius:16px 14px}
.bub.tail.me::after{content:"";position:absolute;right:-10px;bottom:0;width:10px;height:20px;background:#fff;border-bottom-left-radius:10px}
.bub.tail.them::before{content:"";position:absolute;left:-7px;bottom:0;width:20px;height:20px;background:#e9e9eb;border-bottom-right-radius:16px 14px}
.bub.tail.them::after{content:"";position:absolute;left:-10px;bottom:0;width:10px;height:20px;background:#fff;border-bottom-right-radius:10px}
.bub.att{display:grid;grid-template-columns:auto 1fr;gap:9px;align-items:center;padding:9px 12px}
.bub.att i{display:grid;place-items:center;width:30px;height:36px;border-radius:5px;background:rgba(255,255,255,.22)}
.bub.att i svg{width:16px;height:16px;fill:none;stroke:#fff;stroke-width:1.6}
.bub.att small{display:block;opacity:.75;font-size:11px}
.rcpt{align-self:flex-end;margin-top:2px;font-size:11px;color:#8e8e93}
.typing{align-self:flex-start;display:flex;gap:4px;margin-top:4px;padding:11px 13px;border-radius:18px;background:#e9e9eb}
.typing i{width:7px;height:7px;border-radius:50%;background:#9a9aa0;animation:dot 1.2s infinite}
.typing i:nth-child(2){animation-delay:.15s}.typing i:nth-child(3){animation-delay:.3s}
@keyframes dot{0%,60%,100%{opacity:.35;transform:none}30%{opacity:1;transform:translateY(-2px)}}
.compose{display:grid;grid-template-columns:30px 1fr;gap:8px;align-items:center;padding:6px 12px 30px}
.compose .plus{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#e9e9eb;color:#8e8e93;font-size:20px;line-height:1}
.compose .field{display:flex;justify-content:space-between;align-items:center;height:34px;padding:0 6px 0 13px;border-radius:17px;border:1px solid #d1d1d6;color:#a0a0a6}
.compose .field svg{width:20px;height:20px;fill:none;stroke:#8e8e93;stroke-width:1.6;stroke-linecap:round}
.msg{opacity:0;transform:translateY(8px) scale(.98);transform-origin:bottom right;transition:opacity .35s var(--ease),transform .35s var(--ease)}
.msg.show{opacity:1;transform:none}
.static .msg{opacity:1;transform:none}
.static .typing{display:none}
.static .note{opacity:1;transform:none}
/* The assessment: a page from the actual report. Paper stays white, even in dark mode. */
.rep{--p-ink:#1b1c1b;--p-2:#5c5f5c;--p-3:#8f928f;--p-rule:#e6e7e5;background:#fff;color:var(--p-2);border-radius:4px;box-shadow:var(--shadow),0 0 0 1px var(--rule);padding:30px 34px 26px;font-size:var(--fs-s);line-height:1.5}
.rep b{color:var(--p-ink)}
.rep__top{display:flex;justify-content:space-between;align-items:center;padding-bottom:16px;border-bottom:1px solid var(--p-rule);color:var(--p-3)}
.rep__top img{height:14px;width:auto;filter:grayscale(1) contrast(1.4)}
.rep__title{margin-top:22px;display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap}
.rep__title b{display:block;font-size:var(--fs-t)}
.rep__title span{color:var(--p-3)}
.rep__sum{margin-top:20px;display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--p-rule);border:1px solid var(--p-rule);border-radius:6px;overflow:hidden}
.rep__sum div{background:#fff;padding:12px 14px}
.rep__sum b{display:block;font-size:var(--fs-t);font-variant-numeric:tabular-nums}
.rep__sum span{display:flex;align-items:center;gap:6px;color:var(--p-3)}
.rep__sum span::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--c)}
.rep__bar{margin-top:10px;display:flex;height:6px;border-radius:3px;overflow:hidden;background:var(--p-rule)}
.rep__bar i{display:block;height:100%;width:0;background:var(--c);transition:width 1.1s var(--ease)}
.doc.in .rep__bar i{width:var(--w)}
.static .rep__bar i{width:var(--w)}
.rep__bar i+i{margin-left:2px}
.rep__barnote{margin-top:6px;display:flex;justify-content:space-between;color:var(--p-3)}
.rep__h{margin-top:22px;display:grid;grid-template-columns:52px 1fr 92px 112px;gap:12px;padding:0 0 8px 12px;border-bottom:1px solid var(--p-ink);color:var(--p-3)}
.rep__row{position:relative;display:grid;grid-template-columns:52px 1fr 92px 112px;gap:12px;align-items:start;padding:12px 0 12px 12px;border-bottom:1px solid var(--p-rule)}
.rep__row::before{content:"";position:absolute;left:0;top:12px;bottom:12px;width:3px;border-radius:2px;background:var(--c)}
.rep__row .id{color:var(--p-3);font-variant-numeric:tabular-nums}
.rep__row small{display:block;color:var(--p-3);font-size:var(--fs-s)}
.rep__row .area{color:var(--p-2)}
.rep__row .done{display:flex;align-items:center;gap:6px;color:#2c6a48;font-weight:500;justify-self:end;text-align:right}
.rep__row .done svg{width:14px;height:14px;flex:none}
.rep__row .done small{font-weight:400}
.rep__foot{margin-top:16px;display:flex;justify-content:space-between;color:var(--p-3)}
/* Cities */
.cities{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.city{position:relative;border-radius:8px;overflow:hidden;aspect-ratio:4/3.4;background:#0d120e}
.city img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.04);transition:transform 6s var(--ease),opacity .7s ease}
.city:hover img{transform:scale(1.12)}
.city::after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 55%,rgba(0,0,0,.55))}
.city__l{position:absolute;left:16px;right:16px;bottom:14px;z-index:1;display:flex;justify-content:space-between;align-items:baseline;color:#fff}
.city__l b{color:#fff;font-weight:500}
.city__l span{font-size:var(--fs-s);opacity:.85;font-variant-numeric:tabular-nums}
/* Pricing: two steps, the second one is the membership */
.price{display:grid;grid-template-columns:1fr 1.35fr;border:1px solid var(--rule);border-radius:12px;overflow:hidden}
.step{padding:26px 26px 28px}
.step+.step{background:var(--ink);color:var(--bg)}
.step .n{display:flex;align-items:center;gap:8px;font-size:var(--fs-s);color:var(--ink-3)}
.step .n i{display:grid;place-items:center;width:20px;height:20px;border-radius:50%;box-shadow:inset 0 0 0 1px currentColor;font-style:normal;font-size:12px}
.step+.step .n{color:color-mix(in srgb,var(--bg) 60%,transparent)}
.step>b{display:block;margin-top:14px;color:inherit}
.step+.step>b{color:var(--bg)}
.amt{margin-top:6px;font:400 var(--fs-h)/1.15 var(--serif);color:var(--ink);letter-spacing:-.01em}
.step+.step .amt{color:var(--bg)}
.amt small{font:400 var(--fs-s) var(--sans);color:var(--ink-3);margin-left:6px;letter-spacing:0}
.step+.step .amt small{color:color-mix(in srgb,var(--bg) 60%,transparent)}
.step p{margin-top:10px!important;color:var(--ink-2)}
.step+.step p{color:color-mix(in srgb,var(--bg) 75%,transparent)}
.step ul{list-style:none;margin-top:16px;padding-top:14px;border-top:1px solid color-mix(in srgb,var(--bg) 18%,transparent);display:grid;gap:8px}
.step li{position:relative;padding-left:22px;color:color-mix(in srgb,var(--bg) 88%,transparent)}
.step li::before{content:"";position:absolute;left:0;top:.45em;width:12px;height:12px;background:var(--accent);
-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6.3l2.6 2.5L10 3.4' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6.3l2.6 2.5L10 3.4' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}
:root:not([data-theme="dark"]) .step+.step li::before{background:#9cf5b0}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .step+.step li::before{background:#2c6a48}}
.step .cta{display:inline-flex;align-items:center;gap:8px;margin-top:22px;height:40px;padding:0 16px;border-radius:8px;background:var(--bg);color:var(--ink);font-weight:500;transition:transform .2s var(--ease)}
.step .cta:hover{transform:translateX(3px)}
.facts{margin-top:18px;display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.facts div{padding-top:12px;border-top:1px solid var(--rule);font-size:var(--fs-s);line-height:1.5;color:var(--ink-3)}
.facts b{display:block;font-size:var(--fs-t);margin-bottom:2px}
:root[data-theme="dark"] .step+.step li::before{background:#2c6a48}
/* News: real stories, set like a clippings list */
.news{list-style:none;border-top:1px solid var(--ink)}
.news li{display:grid;grid-template-columns:88px 1fr;gap:16px;padding:18px 0;border-bottom:1px solid var(--rule)}
.news time{font-size:var(--fs-s);color:var(--ink-3);padding-top:3px;font-variant-numeric:tabular-nums}
.news .src-n{display:block;font-size:var(--fs-s);color:var(--ink-3)}
.news b{display:block;margin-top:2px;line-height:1.45}
.news span:not(.src-n){display:block;margin-top:4px;color:var(--ink-2);line-height:1.55}
.news a{display:inline-block;margin-top:6px;font-size:var(--fs-s);color:var(--ink-3);text-decoration:underline;text-decoration-color:var(--rule-2);text-underline-offset:3px}
.news.stagger>*{transition-delay:calc(var(--i,0)*110ms)}
/* How we work: a route map */
.route{--line:var(--ink);list-style:none;position:relative;display:grid;grid-template-columns:repeat(5,1fr);gap:0 14px;padding-top:6px}
.route::before{content:"";position:absolute;left:8.5px;width:calc(60% + 8.5px);top:13px;height:3px;border-radius:2px;background:linear-gradient(var(--line),var(--line)) left/0 100% no-repeat,var(--rule)}
.route.in::before{animation:route 1.6s .2s var(--ease) forwards}
.static .route::before{background-size:100% 100%,auto}
@keyframes route{to{background-size:100% 100%,auto}}
.route::after{content:"";position:absolute;left:calc(60% + 17px);width:calc(20% + 3px);top:13px;height:3px;background:repeating-linear-gradient(90deg,var(--crit) 0 6px,transparent 6px 11px);opacity:.8}
.route li{position:relative;padding-top:30px}
.route .st-dot{position:absolute;left:0;top:6px;width:17px;height:17px;border-radius:50%;background:var(--bg);box-shadow:inset 0 0 0 3px var(--ink);transform:scale(0);transition:transform .45s var(--ease)}
.route.in .st-dot{transform:none}
.route li:nth-child(2) .st-dot{transition-delay:.35s}.route li:nth-child(3) .st-dot{transition-delay:.7s}.route li:nth-child(4) .st-dot{transition-delay:1.05s}.route li:nth-child(5) .st-dot{transition-delay:1.4s}
.static .route .st-dot{transform:none}
.route li:nth-child(4) .st-dot{background:var(--ink);box-shadow:inset 0 0 0 3px var(--ink),0 0 0 5px var(--accent-soft)}
.route .alt .st-dot{box-shadow:inset 0 0 0 3px var(--crit)}
.route time{display:block;font-size:var(--fs-s);color:var(--ink-3)}
.route b{display:block;margin-top:2px;line-height:1.35}
.route .alt b{color:var(--crit)}
.route span:not(.st-dot){display:block;margin-top:4px;font-size:var(--fs-s);line-height:1.5;color:var(--ink-2)}
/* Paper: the report sits on real-looking sheets, slightly askew */
.paper{position:relative;padding:6px 10px 18px}
.paper::before,.paper::after{content:"";position:absolute;inset:6px 10px 18px;border-radius:2px;background:#f3f1ea;box-shadow:0 1px 3px rgba(0,0,0,.08)}
.paper::before{transform:rotate(1.6deg) translate(6px,8px)}
.paper::after{transform:rotate(-.8deg) translate(-4px,4px);background:#f7f5ef}
.rep{position:relative;z-index:1;transform:rotate(.25deg);background:#fdfcf8;border-radius:2px;box-shadow:0 1px 2px rgba(0,0,0,.08),0 22px 40px -22px rgba(0,0,0,.35);padding:32px 36px 26px}
.rep__sum{border:0;background:none;gap:0;border-radius:0;border-top:1px solid var(--p-rule);border-bottom:1px solid var(--p-rule)}
.rep__sum div{background:none;padding:12px 0}
.rep__sum div+div{padding-left:16px;border-left:1px solid var(--p-rule)}
/* The membership list: no icons, numbered categories */
.feat{display:block;padding:22px 0 20px}
.feat h3{display:flex;align-items:baseline;gap:12px;font:500 var(--fs-t)/1.4 var(--sans);color:var(--ink)}
.feat h3 span{font-size:var(--fs-s);font-weight:400;color:var(--ink-3);font-variant-numeric:tabular-nums}
.feat ul{margin-top:12px;padding-left:34px}
/* One price card */
.pcard{position:relative;overflow:hidden;border-radius:18px;padding:30px 32px 26px;background:linear-gradient(160deg,#20221f,#121312 60%);color:#f1f3f0;box-shadow:0 30px 60px -30px rgba(0,0,0,.5),inset 0 0 0 1px rgba(255,255,255,.08)}
.pcard::before{content:"";position:absolute;right:-80px;top:-80px;width:260px;height:260px;border-radius:50%;background:radial-gradient(rgba(127,207,154,.22),transparent 65%)}
.pcard>*{position:relative}
.pcard__top{display:flex;justify-content:space-between;gap:12px;font-size:var(--fs-s);color:rgba(241,243,240,.6)}
.pcard__name{color:#f1f3f0;font-weight:500}
.pcard__amt{margin-top:22px;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.pcard__amt span{font:400 var(--fs-h)/1 var(--serif);color:#fff;letter-spacing:-.01em}
.pcard__amt small{font-size:var(--fs-s);color:rgba(241,243,240,.6)}
.pcard__lead{margin-top:12px!important;color:rgba(241,243,240,.75);max-width:460px}
.pcard__inc{list-style:none;margin-top:22px;padding-top:20px;border-top:1px solid rgba(255,255,255,.12);display:grid;grid-template-columns:1fr 1fr;gap:10px 24px}
.pcard__inc li{position:relative;padding-left:22px;font-size:var(--fs-s);line-height:1.5;color:rgba(241,243,240,.88)}
.pcard__inc li::before{content:"";position:absolute;left:0;top:.35em;width:12px;height:12px;background:#9cf5b0;
-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6.3l2.6 2.5L10 3.4' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6.3l2.6 2.5L10 3.4' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}
.pcard__cta{display:flex;justify-content:center;align-items:center;margin-top:26px;height:46px;border-radius:10px;background:#f1f3f0;color:#121312;font-weight:500;transition:background .2s,transform .2s var(--ease)}
.pcard__cta:hover{background:#fff;transform:translateY(-1px)}
.pcard__foot{margin-top:16px;display:flex;justify-content:center;gap:22px;font-size:var(--fs-s);color:rgba(241,243,240,.55)}
.pcard__foot span::before{content:"✓ ";color:#9cf5b0}
/* Contact */
.btn{display:inline-flex;align-items:center;height:30px;padding:0 11px;border-radius:6px;font:500 var(--fs-s)/1 var(--sans);cursor:pointer;transition:background .15s}
.btn--go{background:var(--green);color:#fff;box-shadow:inset 0 0 0 1px var(--green-2),inset 0 1px 0 rgba(255,255,255,.18)}
.btn--go:hover{background:var(--green-2)}
.reach{margin-top:24px;display:grid;border-top:1px solid var(--ink)}
.reach a{display:flex;justify-content:space-between;align-items:center;padding:16px 0;border-bottom:1px solid var(--rule);color:var(--ink);font-weight:500;transition:padding .25s var(--ease),color .2s}
.reach a small{font-size:var(--fs-s);font-weight:400;color:var(--ink-3)}
.reach a:hover{padding-left:8px;color:var(--accent)}
.sign{margin-top:40px!important}
.sign span{display:block;font:italic 400 var(--fs-h)/1.2 var(--serif);color:var(--ink)}
.sign small{display:block;margin-top:4px;font-size:var(--fs-s);color:var(--ink-3)}
footer{margin-top:80px;padding:26px 32px 44px;border-top:1px solid var(--rule);display:grid;gap:6px;font-size:var(--fs-s);color:var(--ink-3);max-width:calc(var(--main) + var(--margin) + var(--gap) + 64px)}
footer a{color:var(--ink-2);text-decoration:underline;text-decoration-color:var(--rule-2);text-underline-offset:3px}
/* ---------- Narrower: captions and notes drop under what they describe ---------- */
@media (max-width:1180px){
.essay,.part{grid-template-columns:minmax(0,680px)}
figure>figcaption{grid-column:1;margin-top:14px!important;max-width:560px}
.mn{grid-column:1!important;margin-top:16px}
}
@media (max-width:1100px) and (min-width:641px){
.phones{gap:16px}
.iph{width:268px}
}
@media (max-width:980px){
.page{display:block;padding:0}
.side{position:sticky;top:0;z-index:5;height:auto;padding:10px 20px;flex-direction:row;align-items:center;gap:12px;background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--rule)}
.logo img{width:128px}
.by,.menu,.status{display:none}
.side__foot{margin:0 0 0 auto;display:flex;align-items:center;gap:10px}
.side .btn--top{display:inline-flex}
.col{border:0;max-width:744px;margin:0 auto}
}
@media (max-width:640px){
:root{--fs-h:26px;--fs-t:16.5px;--fs-s:13.5px}
.essay{padding:36px 20px 20px}
.harbour .frame{aspect-ratio:4/3.6}
.fam svg{display:none}
.fam-list{display:block}
.chart__plot{height:230px}
.ai .lab{transform:translate(-100%,-50%);padding:0 10px 0 0;text-align:right}
.knows__row{grid-template-columns:1fr;gap:0}
.events::before{left:70px}
.events li{grid-template-columns:70px 1fr}
.mail__head{padding:14px}
.mail__body{padding:16px 14px 20px}
.cities{gap:8px}
.phones{grid-template-columns:1fr;gap:36px}
.news li{grid-template-columns:1fr;gap:2px}
.route{grid-template-columns:1fr;gap:18px;padding:0 0 0 30px}
.route::before{left:8px;top:8px;bottom:8px;width:3px;height:auto;background:linear-gradient(var(--line),var(--line)) top/100% 0 no-repeat,var(--rule)}
.route.in::before{animation:routev 1.6s .2s var(--ease) forwards}
@keyframes routev{to{background-size:100% 100%,auto}}
.static .route::before{background-size:100% 100%,auto}
.route::after{display:none}
.route li{padding-top:0}
.route .st-dot{left:-30px;top:3px}
.paper{padding:4px 4px 12px}
.rep{padding:22px 18px 20px}
.pcard{padding:24px 22px 22px}
.pcard__inc{grid-template-columns:1fr}
.pcard__foot{flex-direction:column;align-items:center;gap:4px}
.feat ul{padding-left:0}
.rep{padding:20px 16px 18px}
.rep__sum{grid-template-columns:1fr 1fr}
.rep__h{display:none}
.rep__row{grid-template-columns:44px 1fr;gap:2px 10px}
.rep__row .area{grid-column:2;color:var(--p-3)}
.rep__row .done{grid-column:2;justify-self:start;text-align:left}
.rep__barnote,.rep__foot{flex-direction:column;gap:2px}
.price{grid-template-columns:1fr}
.facts{grid-template-columns:1fr;gap:14px}
.city{aspect-ratio:3/4}
.city__l{flex-direction:column;gap:0;left:12px;bottom:10px}
.side .btn--top{display:none}
footer{padding:24px 20px 40px}
}
@media (prefers-reduced-motion:reduce){
*{transition:none!important;animation:none!important}
[data-in],.stagger>*,.knows__row,.phone .msg{opacity:1!important;transform:none!important}
.bar i{transform:none!important}.ai{clip-path:none!important}.fam .spoke{stroke-dashoffset:0}.fam .node,.fam .lbl{opacity:1}
}
/* =====================================================================
MEDIUM LAYER — one centred reading column, serif body, sans headings.
Captions sit under figures. Wide figures break out of the column.
Sizes: title 42 · headings 26 · body 20 (serif) · interface 16 · small 14
===================================================================== */
:root{--col:680px;--wide:1120px;--fs-title:42px;--fs-h:26px;--fs-body:20px;--fs-ui:16px;--fs-s:14px}
body{font:400 var(--fs-ui)/1.55 var(--sans);color:var(--ink)}
.page{display:block;max-width:none;padding:0}
.side{display:none!important}
.col{border:0;max-width:none;margin:0}
/* Top bar */
.topbar{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--bg) 90%,transparent);backdrop-filter:saturate(160%) blur(14px);-webkit-backdrop-filter:saturate(160%) blur(14px);border-bottom:1px solid transparent;transition:border-color .3s}
.topbar.scrolled{border-bottom-color:var(--rule)}
.bar__in{max-width:1080px;margin:0 auto;height:60px;padding:0 24px;display:flex;align-items:center;gap:16px}
.bar__logo{position:relative;display:block;width:136px;height:17.4px;flex:none}
.bar__logo img,.bar__logo .lm{position:absolute;inset:0;width:100%;height:100%}
.bar__logo .lm{opacity:0}
.bar__logo.live .lm{opacity:1}
.bar__logo.live img{opacity:0;transition:opacity 0s .1s}
.toc__cur{max-width:260px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;transition:opacity .2s}
@media (max-width:760px){.toc__cur{max-width:42vw}}
.bar__right{margin-left:auto;display:flex;align-items:center;gap:12px}
.topbar .theme{background:transparent;box-shadow:none;padding:0;gap:2px}
.topbar .theme button{width:32px;height:32px;border-radius:50%}
.topbar .theme button[aria-pressed="true"]{background:var(--soft);box-shadow:none}
.pill{display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 18px;border-radius:999px;background:var(--ink);color:var(--bg);font:500 var(--fs-s)/1 var(--sans);transition:opacity .2s,transform .2s var(--ease)}
.pill:hover{opacity:.88}
.pill--ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1px var(--rule-2)}
.progress{position:absolute;left:0;bottom:-1px;height:2px;width:100%;transform-origin:0 50%;transform:scaleX(0);background:var(--ink)}
/* The article column */
.essay{display:block;max-width:calc(var(--col) + 48px);margin:0 auto;padding:64px 24px 40px}
.essay>*,.part>*{grid-column:auto}
.part{display:block;padding-top:24px;scroll-margin-top:60px}
#top{scroll-margin-top:80px}
h1{margin:0;font:500 var(--fs-title)/1.15 var(--sans);letter-spacing:-.022em;color:var(--ink)}
.sub{margin-top:14px!important;font:400 22px/1.4 var(--sans)!important;color:var(--ink-3)!important;letter-spacing:-.005em}
.author{display:flex;align-items:center;gap:12px;margin-top:30px;padding:14px 0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.author .av{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--ink);color:var(--bg);font:400 18px var(--serif)}
.author b{display:block;font-size:var(--fs-s);line-height:1.3}
.author span{display:block;font-size:var(--fs-s);color:var(--ink-3)}
.author .acts{margin-left:auto;display:flex;gap:14px;color:var(--ink-3)}
.author .acts svg{width:20px;height:20px}
h2{margin-top:56px!important;font:500 var(--fs-h)/1.25 var(--sans)!important;letter-spacing:-.016em;color:var(--ink)}
.essay p{margin-top:28px;font:400 var(--fs-body)/1.62 var(--serif);color:var(--ink);letter-spacing:.002em}
h2+p{margin-top:12px!important}
.essay p b{font-weight:500}
.essay p a{text-decoration:underline;text-decoration-color:var(--rule-2);text-underline-offset:4px}
.drop::first-letter{float:left;font:400 3.42em/.783 var(--serif);margin:.153em .09em 0 -.04em;color:var(--ink)}
.essay p.quote{margin:44px 0 0;padding:0 0 0 22px;border-left:3px solid var(--ink);font:italic 400 26px/1.45 var(--serif)!important;color:var(--ink-2)!important}
.sep{margin:56px 0 0;text-align:center;letter-spacing:1.2em;color:var(--ink-3);font-size:22px}
/* Figures: in the column, captions centred underneath */
figure{display:block!important;margin:44px 0 0;font:400 var(--fs-ui)/1.55 var(--sans);color:var(--ink)}
figure>*{margin-top:0!important}
figure>figcaption{display:block;max-width:560px;margin:14px auto 0!important;text-align:center;font-size:var(--fs-s);line-height:1.5;color:var(--ink-3)}
figure>figcaption b{display:inline;color:var(--ink-2);font-weight:500;margin:0 4px 0 0}
figure>figcaption .src{display:block;margin-top:4px}
figure.wide{--w:min(var(--wide),calc(100vw - 48px));width:var(--w);max-width:none;margin-left:calc((100% - var(--w))/2)!important;margin-right:0}
.mn{display:none}
/* Hero */
.harbour .frame{aspect-ratio:16/9;border-radius:4px}
/* News: link previews, like an embedded link */
.cards{display:grid;gap:12px}
.lcard{display:grid;grid-template-columns:1fr 120px;border:1px solid var(--rule);border-radius:6px;overflow:hidden;background:var(--bg);transition:border-color .2s,transform .2s var(--ease)}
.lcard:hover{border-color:var(--rule-2);transform:translateY(-1px)}
.lcard__t{padding:16px 18px 14px;min-width:0}
.lcard__t b{display:block;font-weight:500;line-height:1.4;color:var(--ink)}
.lcard__t p{margin:4px 0 0!important;font:400 var(--fs-s)/1.5 var(--sans)!important;color:var(--ink-3)!important;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.lcard__t small{display:flex;align-items:center;gap:6px;margin-top:10px;font-size:13px;color:var(--ink-3)}
.lcard__t small time{margin-left:auto}
.lcard__i{display:grid;place-items:center;background:var(--soft)}
.lcard__i img{width:44px;height:44px;border-radius:10px}
.lcard[target="_blank"]::after{display:none}
.cards.stagger>*{transition-delay:calc(var(--i,0)*100ms)}
/* Live panel, follow, family, chart, breaches, route: tune for the column */
.kh b{font-size:var(--fs-ui)}
.kv{font-size:var(--fs-ui)}
.knows__row{grid-template-columns:140px 1fr}
.follow{padding-left:26px}
.events b{font-size:var(--fs-ui)}
.route span:not(.st-dot){font-size:var(--fs-s)}
.feat h3{font-size:var(--fs-ui)}
.feat li{font:400 18px/1.6 var(--serif)}
.feat li b{font-family:var(--sans);font-size:16px;font-weight:500}
.feat li::before{top:.55em}
.city{aspect-ratio:4/3}
.city__l b{font-size:var(--fs-ui)}
/* ---------- Mail: a real three-pane mail window ---------- */
.mx{--m-bg:#fff;--m-side:#f3f3f3;--m-list:#fbfbfb;--m-ink:#1d1d1f;--m-2:#6e6e73;--m-3:#a1a1a6;--m-rule:#e3e3e6;--m-sel:#0a63d6;--m-bar:#ececec;
font:400 13px/1.45 -apple-system,"SF Pro Text",system-ui,var(--sans);color:var(--m-ink);border-radius:12px;overflow:hidden;background:var(--m-bg);
box-shadow:0 0 0 1px rgba(0,0,0,.12),0 30px 60px -20px rgba(0,0,0,.35);display:grid;grid-template-columns:170px 270px 1fr;grid-template-rows:52px 430px}
:root[data-theme="dark"] .mx{--m-bg:#1e1e1e;--m-side:#2a2a2a;--m-list:#232323;--m-ink:#f2f2f2;--m-2:#a1a1a6;--m-3:#6e6e73;--m-rule:#3a3a3c;--m-sel:#0a63d6;--m-bar:#2c2c2c}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .mx{--m-bg:#1e1e1e;--m-side:#2a2a2a;--m-list:#232323;--m-ink:#f2f2f2;--m-2:#a1a1a6;--m-3:#6e6e73;--m-rule:#3a3a3c;--m-bar:#2c2c2c}}
.mx__bar{grid-column:1/-1;display:flex;align-items:center;gap:18px;padding:0 16px;background:var(--m-bar);border-bottom:1px solid var(--m-rule);color:var(--m-2)}
.mx__lights{display:flex;gap:8px}
.mx__lights i{width:12px;height:12px;border-radius:50%;background:#ff5f57}
.mx__lights i:nth-child(2){background:#febc2e}.mx__lights i:nth-child(3){background:#28c840}
.mx__bar svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.mx__title{font-weight:600;color:var(--m-ink)}
.mx__title small{display:block;font-weight:400;font-size:11px;color:var(--m-3)}
.mx__tools{margin-left:auto;display:flex;gap:16px;align-items:center}
.mx__search{display:flex;align-items:center;gap:6px;width:150px;height:26px;padding:0 8px;border-radius:7px;background:color-mix(in srgb,var(--m-ink) 7%,transparent);color:var(--m-3)}
.mx__search svg{width:13px;height:13px}
.mx__side{background:var(--m-side);border-right:1px solid var(--m-rule);padding:10px 8px;color:var(--m-ink)}
.mx__side small{display:block;padding:8px 8px 4px;font-size:11px;font-weight:600;color:var(--m-3)}
.mx__side a{display:flex;align-items:center;gap:8px;padding:4px 8px;border-radius:6px}
.mx__side a svg{width:15px;height:15px;fill:none;stroke:var(--m-sel);stroke-width:1.5}
.mx__side a.on{background:color-mix(in srgb,var(--m-ink) 10%,transparent)}
.mx__side a em{margin-left:auto;font-style:normal;color:var(--m-3)}
.mx__list{background:var(--m-list);border-right:1px solid var(--m-rule);overflow:hidden}
.mx__item{position:relative;padding:10px 14px 10px 22px;border-bottom:1px solid var(--m-rule)}
.mx__item.unread::before{content:"";position:absolute;left:8px;top:15px;width:8px;height:8px;border-radius:50%;background:var(--m-sel)}
.mx__item.sel{background:var(--m-sel);color:#fff;border-radius:6px;margin:4px 6px;border:0}
.mx__item.sel::before{background:#fff}
.mx__item div{display:flex;justify-content:space-between;gap:8px}
.mx__item b{font-weight:600}
.mx__item time{font-size:12px;color:var(--m-3)}
.mx__item.sel time,.mx .mx__item.sel p,.mx__item.sel span{color:rgba(255,255,255,.85)!important}
.mx__item span{display:block;color:var(--m-ink)}
.mx .mx__item p{margin:2px 0 0!important;font:inherit!important;color:var(--m-2)!important;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.mx__read{padding:18px 22px;overflow:hidden;background:var(--m-bg)}
.mx__h{display:grid;grid-template-columns:40px 1fr auto;gap:0 12px;padding-bottom:14px;border-bottom:1px solid var(--m-rule)}
.mx__av{grid-row:span 3;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:linear-gradient(#5e7fb8,#2e4a7a);color:#fff;font-weight:600}
.mx__h b{font-size:14px}
.mx__h time{color:var(--m-3)}
.mx__h .subj{grid-column:2/-1;font-weight:600}
.mx__h .to{grid-column:2/-1;color:var(--m-3)}
.mx__h .addr{color:var(--m-2);font-weight:400}
.mx__body{padding-top:16px;font-size:13.5px;line-height:1.55}
.mx__brand{display:flex;align-items:center;gap:8px;padding-bottom:12px;margin-bottom:14px;border-bottom:2px solid #2e4a7a;font-weight:700;letter-spacing:.1em;color:#2e4a7a;font-size:12px}
:root[data-theme="dark"] .mx__brand{color:#9db5e0;border-color:#9db5e0}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .mx__brand{color:#9db5e0;border-color:#9db5e0}}
.mx__body p{margin:0 0 10px!important;font:inherit!important;color:inherit!important}
.mx__amt{font-size:22px;font-weight:600;margin:2px 0 10px;letter-spacing:-.01em}
.mx__btn{display:inline-block;padding:8px 16px;border-radius:6px;background:#2e4a7a;color:#fff;font-weight:600}
.mx__fine{margin-top:14px;font-size:11.5px;color:var(--m-3)}
.mk{display:inline-grid;place-items:center;width:20px;height:20px;margin-left:6px;vertical-align:-4px;border-radius:50%;background:#e5484d;color:#fff;font:600 11px/1 var(--sans);box-shadow:0 0 0 3px color-mix(in srgb,#e5484d 25%,transparent);transform:scale(0);transition:transform .4s var(--ease)}
.mailfig.in .mk,.static .mk{transform:none}
.mailfig.in .mk.k2{transition-delay:.4s}.mailfig.in .mk.k3{transition-delay:.8s}
.keys{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:8px 22px;margin-top:16px;font-size:var(--fs-s);color:var(--ink-2)}
.keys li{display:flex;align-items:center;gap:8px}
.keys i{display:grid;place-items:center;width:18px;height:18px;border-radius:50%;background:#e5484d;color:#fff;font:600 10.5px/1 var(--sans);font-style:normal}
/* ---------- Phones: drawn at true iPhone size (393 × 852 points), then scaled ---------- */
.phones{display:flex!important;justify-content:center;gap:48px;flex-wrap:wrap}
.ph{--k:.72;position:relative;width:calc(417px*var(--k));height:calc(876px*var(--k));flex:none}
.ph__dev{position:absolute;left:0;top:0;width:417px;height:876px;transform:scale(var(--k));transform-origin:0 0;border-radius:70px;padding:12px;
background:linear-gradient(150deg,#6b6b70,#2b2b2e 12%,#1c1c1e 50%,#2b2b2e 88%,#5d5d62);box-shadow:inset 0 0 0 2px #8a8a90,inset 0 0 0 6px #111,0 40px 70px -30px rgba(0,0,0,.55)}
.ph__dev::before{content:"";position:absolute;left:-4px;top:190px;width:4px;height:34px;border-radius:2px 0 0 2px;background:#3a3a3e;box-shadow:0 70px 0 0 #3a3a3e,0 140px 0 0 #3a3a3e}
.ph__dev::after{content:"";position:absolute;right:-4px;top:250px;width:4px;height:100px;border-radius:0 2px 2px 0;background:#3a3a3e}
.ph__scr{--p-bg:#fff;--p-ink:#000;--p-2:#8e8e93;--p-them:#e9e9eb;--p-bar:rgba(249,249,249,.94);--p-rule:rgba(0,0,0,.12);--p-field:#fff;
position:relative;width:393px;height:852px;border-radius:58px;overflow:hidden;display:flex;flex-direction:column;background:var(--p-bg);color:var(--p-ink);
font:400 17px/1.29 -apple-system,"SF Pro Text",system-ui,var(--sans);letter-spacing:-.01em}
:root[data-theme="dark"] .ph__scr.msgs{--p-bg:#000;--p-ink:#fff;--p-2:#8d8d93;--p-them:#26252a;--p-bar:rgba(22,22,24,.92);--p-rule:rgba(255,255,255,.14);--p-field:#000}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .ph__scr.msgs{--p-bg:#000;--p-ink:#fff;--p-2:#8d8d93;--p-them:#26252a;--p-bar:rgba(22,22,24,.92);--p-rule:rgba(255,255,255,.14);--p-field:#000}}
.ph__island{position:absolute;z-index:5;left:50%;top:11px;width:126px;height:37px;margin-left:-63px;border-radius:20px;background:#000}
.ph__sb{position:relative;z-index:4;display:flex;justify-content:space-between;align-items:center;height:54px;padding:4px 30px 0 52px;font-weight:600;font-size:17px;flex:none}
.ph__sb .r{display:flex;align-items:center;gap:6px}
.ph__sb svg{display:block;fill:currentColor}
.ph__home{position:absolute;z-index:5;left:50%;bottom:8px;width:140px;height:5px;margin-left:-70px;border-radius:3px;background:var(--p-ink)}
/* Lock screen */
.ph__scr.lock{--p-ink:#fff;color:#fff;background:#05080a}
.lock__wall{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:url(/#matrix-grade) brightness(.55);transform:scale(1.04)}
.ph__scr.lock::after{content:"";position:absolute;inset:0;background:linear-gradient(rgba(0,0,0,.2),transparent 35%,rgba(0,0,0,.5))}
.lock__clock{position:relative;z-index:2;text-align:center;margin-top:18px}
.lock__clock small{display:block;font-size:21px;font-weight:600;opacity:.92}
.lock__clock b{color:#fff;display:block;margin-top:-4px;font-size:104px;font-weight:600;line-height:1.05;letter-spacing:-3px;font-variant-numeric:tabular-nums}
.lock__notes{position:relative;z-index:2;margin-top:auto;padding:0 10px 112px;display:grid;gap:8px}
.lock__n{display:grid;grid-template-columns:38px 1fr;gap:1px 10px;padding:12px 14px;border-radius:22px;background:rgba(40,40,40,.55);backdrop-filter:blur(24px) saturate(160%);-webkit-backdrop-filter:blur(24px) saturate(160%);font-size:15px;line-height:1.3;transform:translateY(24px);opacity:0;transition:transform .7s var(--ease),opacity .7s var(--ease)}
.phones.in .lock__n,.static .lock__n{transform:none;opacity:1}
.phones.in .lock__n+.lock__n{transition-delay:.45s}
.lock__n .app{grid-row:span 2;align-self:start;display:grid;place-items:center;width:38px;height:38px;border-radius:9px;background:linear-gradient(#67e581,#2fbf4f)}
.lock__n .app svg{width:24px;height:24px;fill:#fff}
.lock__n .app.hl{background:#111;box-shadow:inset 0 0 0 1px rgba(255,255,255,.15)}
.lock__n .app.hl svg{fill:none;stroke:#9cf5b0;stroke-width:1.7}
.lock__n .top{display:flex;justify-content:space-between;font-weight:600;color:#fff}
.lock__n .top span{font-weight:400;opacity:.6}
.lock__n p{margin:0!important;font:inherit!important;color:#fff!important}
.lock__btns{position:absolute;z-index:3;left:46px;right:46px;bottom:40px;display:flex;justify-content:space-between}
.lock__btns i{display:grid;place-items:center;width:50px;height:50px;border-radius:50%;background:rgba(40,40,40,.5);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.lock__btns svg{width:22px;height:22px;fill:none;stroke:#fff;stroke-width:1.7;stroke-linejoin:round;stroke-linecap:round}
/* Messages */
.msgs__nav{position:relative;z-index:3;display:grid;grid-template-columns:72px 1fr 72px;align-items:start;padding:2px 12px 10px;background:var(--p-bar);border-bottom:.5px solid var(--p-rule);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);flex:none}
.msgs__back{display:flex;align-items:center;gap:4px;margin-top:16px;color:#0a84ff}
.msgs__back svg{width:12px;height:21px;fill:none;stroke:#0a84ff;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.msgs__back span{display:grid;place-items:center;min-width:22px;height:22px;padding:0 7px;border-radius:11px;background:#0a84ff;color:#fff;font-size:14px;font-weight:600}
.msgs__who{display:grid;justify-items:center;gap:4px}
.msgs__av{display:grid;place-items:center;width:54px;height:54px;border-radius:50%;background:linear-gradient(#a8b0bb,#858d98);color:#fff;font-size:22px;font-weight:500}
.msgs__nm{font-size:12px;color:var(--p-ink)}
.msgs__nm::after{content:" ›";color:var(--p-2)}
.msgs__vid{justify-self:end;margin-top:16px}
.msgs__vid svg{width:30px;height:20px;fill:none;stroke:#0a84ff;stroke-width:2;stroke-linejoin:round}
.msgs__thread{flex:1;display:flex;flex-direction:column;justify-content:flex-end;padding:10px 16px 8px;overflow:hidden}
.msgs__ts{margin:0 0 8px;text-align:center;font-size:12px;color:var(--p-2)}
.msgs__ts b{font-weight:600}
.bb{position:relative;max-width:75%;padding:7px 13px 8px;border-radius:19px;margin-top:2px}
.bb.me{align-self:flex-end;background:#0a84ff;color:#fff}
.bb.them{align-self:flex-start;background:var(--p-them);color:var(--p-ink)}
.bb.gap{margin-top:12px}
.bb.tail.me{border-bottom-right-radius:6px}
.bb.tail.them{border-bottom-left-radius:6px}
.bb.att{display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:center;padding:10px 13px}
.bb.att i{display:grid;place-items:center;width:36px;height:44px;border-radius:6px;background:rgba(255,255,255,.22)}
.bb.att i svg{width:20px;height:20px;fill:none;stroke:#fff;stroke-width:1.6;stroke-linejoin:round}
.bb.att small{display:block;font-size:13px;opacity:.75}
.msgs__rcpt{align-self:flex-end;margin-top:3px;font-size:12px;color:var(--p-2);font-weight:500}
.msgs .typing{align-self:flex-start;display:flex;gap:5px;margin-top:12px;padding:13px 15px;border-radius:19px;background:var(--p-them)}
.msgs .typing i{width:9px;height:9px;border-radius:50%;background:var(--p-2);animation:dot 1.2s infinite}
.msgs .typing i:nth-child(2){animation-delay:.15s}.msgs .typing i:nth-child(3){animation-delay:.3s}
.msgs__compose{display:grid;grid-template-columns:36px 1fr;gap:10px;align-items:center;padding:6px 14px 44px;flex:none}
.msgs__plus{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--p-them);color:var(--p-2);font-size:26px;font-weight:300;line-height:1}
.msgs__field{display:flex;justify-content:space-between;align-items:center;height:36px;padding:0 8px 0 14px;border-radius:18px;background:var(--p-field);box-shadow:inset 0 0 0 1px var(--p-rule);color:var(--p-2)}
.msgs__field svg{width:22px;height:22px;fill:none;stroke:var(--p-2);stroke-width:1.8;stroke-linecap:round}
.msg{opacity:0;transform:translateY(10px) scale(.98);transition:opacity .35s var(--ease),transform .35s var(--ease)}
.msg.show,.static .msg{opacity:1;transform:none}
.static .typing{display:none}
/* ---------- The report: a PDF open in a viewer ---------- */
.pdf{--v-bar:#f6f6f6;--v-bg:#dcdcdf;--v-ink:#1d1d1f;--v-2:#6e6e73;--v-rule:#d6d6d9;border-radius:12px;overflow:hidden;background:var(--v-bg);box-shadow:0 0 0 1px rgba(0,0,0,.12),0 30px 60px -20px rgba(0,0,0,.35);font-family:-apple-system,"SF Pro Text",system-ui,var(--sans)}
:root[data-theme="dark"] .pdf{--v-bar:#2c2c2c;--v-bg:#1a1a1a;--v-ink:#f2f2f2;--v-2:#a1a1a6;--v-rule:#3a3a3c}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .pdf{--v-bar:#2c2c2c;--v-bg:#1a1a1a;--v-ink:#f2f2f2;--v-2:#a1a1a6;--v-rule:#3a3a3c}}
.pdf__bar{display:flex;align-items:center;gap:16px;height:52px;padding:0 16px;background:var(--v-bar);border-bottom:1px solid var(--v-rule);color:var(--v-2);font-size:13px}
.pdf__bar b{color:var(--v-ink);font-weight:600}
.pdf__bar b small{display:block;font-weight:400;font-size:11px;color:var(--v-2)}
.pdf__bar .mx__lights{margin-right:4px}
.pdf__bar .zoom{margin-left:auto;display:flex;gap:14px;align-items:center}
.pdf__bar svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round}
.pdf__body{display:grid;grid-template-columns:120px 1fr;height:640px}
.pdf__thumbs{padding:16px 0;display:grid;justify-items:center;align-content:start;gap:14px;border-right:1px solid var(--v-rule);background:color-mix(in srgb,var(--v-bar) 70%,transparent);font-size:11px;color:var(--v-2)}
.pdf__thumbs div{display:grid;justify-items:center;gap:4px}
.pdf__thumbs i{display:block;width:62px;aspect-ratio:1/1.414;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.2);background-image:linear-gradient(#e7e7e7,#e7e7e7),linear-gradient(#efefef,#efefef),linear-gradient(#efefef,#efefef),linear-gradient(#efefef,#efefef);background-size:60% 4px,76% 3px,70% 3px,74% 3px;background-position:8px 10px,8px 20px,8px 26px,8px 32px;background-repeat:no-repeat}
.pdf__thumbs .on i{box-shadow:0 0 0 3px #0a84ff}
.pdf__thumbs .on{color:var(--v-ink)}
.pdf__stage{overflow:hidden;padding:26px 0 0;display:flex;justify-content:center}
.sheet{width:520px;flex:none;aspect-ratio:1/1.414;background:#fff;color:#1b1c1b;box-shadow:0 2px 6px rgba(0,0,0,.15),0 18px 40px -16px rgba(0,0,0,.3);padding:40px 44px 30px;font:400 10.5px/1.5 var(--sans);display:flex;flex-direction:column}
.sheet__run{display:flex;justify-content:space-between;align-items:center;padding-bottom:10px;border-bottom:1px solid #e6e6e3;color:#8b8e8b;font-size:9px;letter-spacing:.04em}
.sheet__run img{height:10px;width:auto;filter:grayscale(1) contrast(1.3)}
.sheet__h{display:flex;align-items:baseline;gap:12px;margin-top:22px}
.sheet__h span{font:400 34px/1 var(--serif);color:#2c6a48}
.sheet__h b{font:500 19px/1.2 var(--sans);color:#1b1c1b}
.sheet__lead{margin:10px 0 0!important;font:400 12px/1.55 var(--serif)!important;color:#3f423f!important}
.sheet__dist{margin-top:16px}
.sheet__dist .bar2{display:flex;height:10px;border-radius:2px;overflow:hidden;gap:2px}
.sheet__dist .bar2 i{display:block;height:100%}
.sheet__dist .lg{display:flex;gap:14px;margin-top:6px;color:#6b6e6b;font-size:9.5px}
.sheet__dist .lg span{display:flex;align-items:center;gap:5px}
.sheet__dist .lg span::before{content:"";width:7px;height:7px;border-radius:2px;background:var(--c)}
.sheet table{width:100%;margin-top:16px;border-collapse:collapse;font-size:10px}
.sheet th{text-align:left;font-weight:500;color:#8b8e8b;padding:0 6px 6px 0;border-bottom:1px solid #1b1c1b;font-size:9px;letter-spacing:.04em}
.sheet td{padding:8px 6px 8px 0;border-bottom:1px solid #ecece9;vertical-align:top}
.sheet td small{display:block;color:#8b8e8b;font-size:9.5px}
.sheet .ref{color:#8b8e8b;font-variant-numeric:tabular-nums;width:34px}
.sheet .sev{display:inline-block;padding:1px 6px;border-radius:9px;font-size:9px;font-weight:500;white-space:nowrap}
.sheet .sev.c{background:#f7e1dc;color:#9c3a28}.sheet .sev.h{background:#f6ead2;color:#8a5a12}
.sheet .stat{white-space:nowrap;color:#2c6a48;font-weight:500;text-align:right}
.sheet .stat small{font-weight:400;text-align:right}
.sheet__note{margin-top:14px;padding:10px 12px;background:#f4f6f3;border-left:2px solid #2c6a48;font:400 11px/1.5 var(--serif);color:#3f423f}
.sheet__foot{margin-top:auto;display:flex;justify-content:space-between;padding-top:10px;border-top:1px solid #e6e6e3;color:#8b8e8b;font-size:9px}
/* ---------- Pricing: a membership card and a fee schedule ---------- */
.member{display:grid;justify-items:center;perspective:1200px}
.mcard{--rx:0deg;--ry:0deg;--gx:30%;--gy:20%;position:relative;width:min(440px,100%);aspect-ratio:1.586;border-radius:20px;overflow:hidden;padding:26px 28px;display:flex;flex-direction:column;color:#e9ece8;
background:
radial-gradient(120% 80% at var(--gx) var(--gy),rgba(255,255,255,.16),transparent 50%),
repeating-linear-gradient(100deg,rgba(255,255,255,.035) 0 1px,transparent 1px 3px),
linear-gradient(135deg,#353836,#151716 55%,#0b0c0b);
box-shadow:0 1px 0 rgba(255,255,255,.12) inset,0 0 0 1px rgba(255,255,255,.07) inset,0 40px 60px -30px rgba(0,0,0,.6),0 12px 24px -12px rgba(0,0,0,.35);
transform:rotateX(var(--rx)) rotateY(var(--ry));transition:transform .25s ease;transform-style:preserve-3d}
.mcard__top{display:flex;justify-content:space-between;align-items:center}
.mcard__top img{height:20px;width:auto}
.mcard__top span{font-size:11px;letter-spacing:.24em;color:rgba(233,236,232,.6)}
.mcard__chip{margin-top:auto;width:46px;height:34px;border-radius:7px;background:linear-gradient(135deg,#d9dcd8,#8c908c 50%,#c9ccc8);box-shadow:inset 0 0 0 1px rgba(0,0,0,.25);position:relative}
.mcard__chip::before{content:"";position:absolute;inset:8px 0;border-top:1px solid rgba(0,0,0,.25);border-bottom:1px solid rgba(0,0,0,.25)}
.mcard__chip::after{content:"";position:absolute;inset:0 16px;border-left:1px solid rgba(0,0,0,.25);border-right:1px solid rgba(0,0,0,.25)}
.mcard__bot{display:flex;justify-content:space-between;align-items:flex-end;margin-top:18px;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:rgba(233,236,232,.86)}
.mcard__bot small{display:block;font-size:9.5px;letter-spacing:.2em;color:rgba(233,236,232,.5);margin-bottom:3px}
.mcard__bot div:last-child{text-align:right}
.fees{margin-top:36px;border-top:1px solid var(--ink)}
.fees div{display:flex;align-items:baseline;gap:10px;padding:16px 0;border-bottom:1px solid var(--rule)}
.fees dt{font:500 var(--fs-ui)/1.4 var(--sans)}
.fees dt small{display:block;font-weight:400;font-size:var(--fs-s);color:var(--ink-3)}
.fees i{flex:1;align-self:center;border-bottom:1px dotted var(--rule-2);transform:translateY(4px)}
.fees dd{font:400 var(--fs-ui)/1.4 var(--sans);text-align:right;color:var(--ink)}
.fees dd.big{font:400 var(--fs-h)/1.1 var(--serif);letter-spacing:-.01em}
.fees dd small{display:block;font:400 var(--fs-s)/1.4 var(--sans);color:var(--ink-3)}
.begin{margin-top:28px;display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px}
.begin small{font-size:var(--fs-s);color:var(--ink-3)}
/* The end: author card and contact */
.endcard{margin-top:56px;padding:28px 0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);display:grid;grid-template-columns:64px 1fr;gap:4px 18px;align-items:start}
.endcard .av{grid-row:span 3;display:grid;place-items:center;width:64px;height:64px;border-radius:50%;background:var(--ink);color:var(--bg);font:400 26px var(--serif)}
.endcard b{font-size:20px;font-weight:500}
.endcard p{margin:0!important;font:400 var(--fs-ui)/1.55 var(--sans)!important;color:var(--ink-2)!important}
.endcard .acts{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}
footer{max-width:calc(var(--col) + 48px);margin:40px auto 0;padding:24px 24px 48px;border-top:0;font-size:13px;color:var(--ink-3)}
@media (max-width:1100px){
.ph{--k:.62}
}
@media (max-width:760px){
:root{--fs-title:32px;--fs-h:23px;--fs-body:18.5px}
.essay{padding:36px 20px 28px}
.sub{font-size:19px!important}
figure.wide{--w:calc(100vw - 24px)}
.lcard{grid-template-columns:1fr 84px}
.lcard__i img{width:36px;height:36px}
.mx{grid-template-columns:1fr;grid-template-rows:52px auto}
.mx__side,.mx__list,.mx__search,.mx__tools svg:not(:last-child){display:none}
.mx__read{padding:16px}
.pdf__body{grid-template-columns:1fr;height:auto}
.pdf__thumbs{display:none}
.pdf__stage{padding:14px}
.sheet{width:100%;padding:24px 20px 18px;aspect-ratio:auto}
.phones{gap:28px}
.ph{--k:.78}
.knows__row{grid-template-columns:1fr}
.feat li{font-size:17px}
.endcard{grid-template-columns:48px 1fr}
.endcard .av{width:48px;height:48px;font-size:20px}
.bar__in{padding:0 16px}
.topbar .pill{display:none}
}
@media (max-width:430px){.ph{--k:.8}}
/* Contents dropdown in the top bar */
.toc{position:relative}
.toc__btn{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 10px;border:0;border-radius:8px;background:transparent;color:var(--ink-2);font:500 var(--fs-s)/1 var(--sans);cursor:pointer}
.toc__btn:hover,.toc.open .toc__btn{background:var(--soft);color:var(--ink)}
.toc__btn svg{transition:transform .2s}
.toc.open .toc__btn svg{transform:rotate(180deg)}
.toc__list{position:absolute;left:0;top:42px;width:320px;margin:0;padding:6px;border:0!important;border-radius:12px;background:var(--bg);box-shadow:0 0 0 1px var(--rule),0 20px 40px -12px rgba(0,0,0,.25);opacity:0;transform:translateY(-6px);pointer-events:none;transition:opacity .2s,transform .2s var(--ease)}
.toc.open .toc__list{opacity:1;transform:none;pointer-events:auto}
.toc__list a{display:block!important;margin:0!important;padding:8px 12px!important;border:0!important;border-radius:8px;font-size:var(--fs-s)!important;color:var(--ink-2)!important}
.toc__list a:hover{background:var(--soft)}
.toc__list a.on{color:var(--ink)!important;background:var(--soft)}
.bar__in{max-width:none;padding:0 16px}
@media (max-width:760px){.bar__in{padding:0 12px}.toc__list{width:min(320px,calc(100vw - 24px))}}
/* ---------- The target ---------- */
.target .tg{display:block;width:100%;height:auto;overflow:visible;font-family:var(--sans)}
.tg .ring{stroke:var(--rule-2);stroke-width:1}
.tg .r3{fill:color-mix(in srgb,var(--ink) 2.5%,var(--bg))}
.tg .r2{fill:color-mix(in srgb,var(--ink) 5%,var(--bg))}
.tg .r1{fill:color-mix(in srgb,var(--ink) 8%,var(--bg))}
.tg .r0{fill:color-mix(in srgb,var(--crit) 16%,var(--bg));stroke:color-mix(in srgb,var(--crit) 45%,transparent)}
.tg .rl{font-size:11px;letter-spacing:.16em;fill:var(--ink-3)}
.tg .eye{fill:var(--crit)}
.tg .eye-t{font:500 13px var(--sans);fill:#fff}
.tg .pp circle{fill:var(--bg);stroke:var(--ink);stroke-width:1.5}
.tg .pi{font:500 13px var(--sans);fill:var(--ink)}
.tg .pl{font-size:12.5px;fill:var(--ink-2)}
.tg .ac rect{fill:var(--bg);stroke:var(--rule-2);stroke-width:1;filter:drop-shadow(0 1px 1.5px rgba(0,0,0,.08))}
.tg .ac use{color:var(--ink)}
.tg .ac .gi{color:var(--ink-2)}
.tg .vd circle{fill:var(--bg);stroke:var(--rule-2)}
.tg .vd use{color:var(--ink-2)}
.tg .vd text{font-size:12px;fill:var(--ink-2)}
.tg .atk{fill:none;stroke:var(--crit);stroke-width:1.6;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .9s var(--ease) var(--d)}
.tg .ahp{fill:var(--crit)}
.tg .atl{opacity:0;transition:opacity .5s var(--d)}
.tg .atl text{font:500 13px var(--sans);fill:var(--crit)}
.target.in .atk,.static .tg .atk{stroke-dashoffset:0}
.target.in .atl,.static .tg .atl{opacity:1}
.tg marker{overflow:visible}
.tg-m{display:none}
@media (max-width:760px){
.target .tg{display:none}
.tg-m{display:grid;gap:10px}
.tgm-h{margin-top:10px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.tgm-h.r{color:var(--crit)}
.tgm-row{display:flex;flex-wrap:wrap;gap:12px}
.tgm-p{display:grid;justify-items:center;gap:4px;width:64px;font-weight:500}
.tgm-p{place-items:center}
.tgm-p{font-size:13px}
.tgm-p::before{content:"";display:none}
.tgm-p{position:relative}
.tgm-p small{font-weight:400;font-size:12px;color:var(--ink-3);text-align:center}
.tgm-icons{display:flex;flex-wrap:wrap;gap:8px}
.tgm-icons span{display:grid;place-items:center;width:38px;height:38px;border-radius:10px;border:1px solid var(--rule-2);background:var(--bg)}
.mi{width:20px;height:20px;color:var(--ink)}
.mi.g{fill:none;color:var(--ink-2)}
.tgm-row.v{gap:8px}
.tgm-v{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:20px;border:1px solid var(--rule-2);font-size:13px}
.tgm-v svg{width:15px;height:15px;color:var(--ink-2)}
.tgm-a{list-style:none;display:grid;gap:8px}
.tgm-a li{display:flex;align-items:center;gap:8px;font-size:14px}
.tgm-a b{color:var(--crit);font-weight:500}
.tgm-a i{font-style:normal;color:var(--crit)}
.tgm-a .mi{width:18px;height:18px}
}
/* ---------- How it works: a Gantt chart ---------- */
.gantt{--cols:10;font-size:var(--fs-s)}
.gt-axis,.gt-row{display:grid;grid-template-columns:210px repeat(var(--cols),1fr);align-items:center}
.gt-axis{color:var(--ink-3);font-size:12.5px;border-bottom:1px solid var(--ink);padding-bottom:8px}
.gt-axis span{padding-left:6px}
.gt-axis .gap{text-align:center;padding:0;letter-spacing:.2em}
.gt-body{position:relative;background:repeating-linear-gradient(90deg,transparent 0 calc(100% - 1px),var(--rule) calc(100% - 1px) 100%) 210px 0/calc((100% - 210px)/var(--cols)) 100% no-repeat}
.gt-body{background:none}
.gt-body::before{content:"";position:absolute;inset:0 0 0 210px;background:repeating-linear-gradient(90deg,var(--rule) 0 1px,transparent 1px calc(100% / var(--cols)))}
.gt-row{position:relative;min-height:62px;border-bottom:1px solid var(--rule)}
.gt-l{padding-right:16px}
.gt-l b{display:block;font-size:var(--fs-ui);line-height:1.3}
.gt-l small{display:block;color:var(--ink-3);font-size:13px;line-height:1.4}
.gt-bar{position:relative;z-index:1;height:30px;border-radius:7px;background:var(--ink);color:var(--bg);display:flex;align-items:center;padding:0 10px;font-size:12.5px;white-space:nowrap;overflow:hidden;transform-origin:left;transform:scaleX(0);transition:transform .9s var(--ease) var(--d,0s)}
.gantt.in .gt-bar,.static .gt-bar{transform:none}
.gt-bar.soft{background:color-mix(in srgb,var(--ink) 14%,var(--bg));color:var(--ink)}
.gt-bar.go{background:linear-gradient(90deg,var(--accent) 70%,color-mix(in srgb,var(--accent) 0%,transparent));color:#fff}
:root[data-theme="dark"] .gt-bar.go{color:#0f100f}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .gt-bar.go{color:#0f100f}}
.gt-bar.crit{background:linear-gradient(90deg,var(--crit) 0 18%,var(--ink) 18%)}
.gt-bar.rec{background:repeating-linear-gradient(90deg,color-mix(in srgb,var(--crit) 22%,transparent) 0 8px,transparent 8px 14px);color:var(--crit);border:1px dashed color-mix(in srgb,var(--crit) 50%,transparent)}
.gt-ms{position:relative;z-index:1;justify-self:start;display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--ink-2);white-space:nowrap;opacity:0;transition:opacity .5s var(--d,0s)}
.gantt.in .gt-ms,.static .gt-ms{opacity:1}
.gt-ms::before{content:"";width:13px;height:13px;transform:rotate(45deg);background:var(--ink);border-radius:2px;flex:none}
.gt-ms.end{justify-self:end;flex-direction:row-reverse}
.gt-now{position:absolute;z-index:2;top:-4px;bottom:0;width:0;border-left:1.5px solid var(--crit)}
@media (max-width:760px){
.gt-axis,.gt-row{grid-template-columns:repeat(var(--cols),1fr)}
.gt-axis .lab{display:none}
.gt-axis{font-size:11px}
.gt-axis span{padding-left:2px}
.gt-body::before{left:0}
.gt-l{grid-column:1/-1;padding:10px 0 6px}
.gt-row{min-height:0;padding-bottom:10px;row-gap:0}
.gt-bar{font-size:11px;padding:0 6px;height:24px}
}
/* ---------- Report: zoomed in on the page ---------- */
.pdf__body{grid-template-columns:96px 1fr;height:600px}
.pdf__stage{position:relative;padding:24px 28px 0;justify-content:center}
.pdf__stage::after{content:"";position:absolute;left:0;right:0;bottom:0;height:90px;background:linear-gradient(transparent,var(--v-bg))}
.sheet{width:100%;max-width:820px;aspect-ratio:auto;padding:48px 56px 40px;font-size:14px}
.sheet__run{font-size:11px}
.sheet__run img{height:13px}
.sheet__h span{font-size:48px}
.sheet__h b{font-size:26px}
.sheet__lead{font-size:16px!important}
.sheet__dist .bar2{height:14px}
.sheet__dist .lg{font-size:12.5px}
.sheet table{font-size:13.5px}
.sheet th{font-size:11.5px}
.sheet td small{font-size:12.5px}
.sheet .sev{font-size:11.5px;padding:2px 8px}
.pdf__bar .pct{padding:2px 8px;border-radius:6px;background:color-mix(in srgb,var(--v-ink) 8%,transparent);color:var(--v-ink);font-size:12px}
/* ---------- Features: a comparison table ---------- */
.ftable{width:100%;border-collapse:collapse;font-size:var(--fs-s)}
.ftable thead th{position:sticky;top:60px;z-index:2;background:var(--bg);padding:14px 10px 12px;border-bottom:1.5px solid var(--ink);text-align:center;font-weight:500;vertical-align:bottom}
.ftable thead th:first-child{text-align:left;padding-left:0}
.ftable thead th small{display:block;font-weight:400;color:var(--ink-3);font-size:12.5px}
.ftable thead .us{color:var(--ink)}
.ftable thead .us img{display:block;height:15px;width:auto;margin:0 auto 4px}
.ftable td{padding:12px 10px;border-bottom:1px solid var(--rule);vertical-align:top;text-align:center}
.ftable td:first-child{text-align:left;padding-left:0}
.ftable td:first-child b{display:block;font-weight:500;font-size:var(--fs-ui);color:var(--ink)}
.ftable td:first-child span{display:block;margin-top:2px;font:400 15px/1.5 var(--serif);color:var(--ink-2)}
.ftable .us-c{background:color-mix(in srgb,var(--accent) 6%,transparent)}
.ftable .cat td{padding:26px 0 8px;border-bottom:1px solid var(--rule-2);text-align:left;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);background:none}
.ftable col.c-us{width:120px}.ftable col.c-o{width:120px}
.y,.p,.n{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;margin-top:2px}
.y{background:var(--accent);color:var(--bg)}
.y::before{content:"";width:12px;height:12px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6.3l2.6 2.5L10 3.4' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6.3l2.6 2.5L10 3.4' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}
.p{box-shadow:inset 0 0 0 1.5px var(--ink-3)}
.p::before{content:"";width:8px;height:1.5px;background:var(--ink-3)}
.n::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--rule-2)}
.ftable .legend{margin-top:12px}
.flegend{display:flex;justify-content:center;flex-wrap:wrap;gap:6px 20px;margin-top:14px;font-size:13px;color:var(--ink-3)}
.flegend span{display:inline-flex;align-items:center;gap:6px}
.flegend .y,.flegend .p,.flegend .n{width:16px;height:16px;margin:0}
.flegend .y::before{width:9px;height:9px}
@media (max-width:760px){
.ftable thead th{top:52px;padding:10px 4px;font-size:12px}
.ftable thead th small{display:none}
.ftable td{padding:10px 4px}
.ftable td:first-child span{font-size:14px}
.ftable col.c-us,.ftable col.c-o{width:52px}
.ftable thead .us img{height:10px}
}
.sheet .ref{white-space:nowrap;width:52px}
.tgm-p i{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--ink);font-style:normal;font-weight:500;font-size:13px}
@media (max-width:760px){
.gt-bar,.gt-bar span{font-size:0}
.bar__logo{width:104px;height:13.3px}
.toc__cur{max-width:34vw}
.topbar .theme button{width:28px;height:28px}
.bar__in{gap:8px}
}
/* Footer: the wordmark, drawn in characters by the same liquid-metal shader */
.af{max-width:1120px;margin:72px auto 0;padding:0 24px}
.af__art{margin:0;font:600 clamp(3.4px,.47vw,6.6px)/1 ui-monospace,"SF Mono",Menlo,monospace;letter-spacing:0;color:var(--ink);white-space:pre;text-align:center;overflow:hidden;user-select:none;min-height:1em}
.af__src{position:absolute;left:-10000px;top:0;width:564px;height:100px;pointer-events:none}
.af__meta{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 24px;margin-top:28px;padding:20px 0 40px;border-top:1px solid var(--rule);font-size:13px;color:var(--ink-3)}
.af__meta a{color:var(--ink-2);text-decoration:underline;text-decoration-color:var(--rule-2);text-underline-offset:3px}
/* Target interactivity */
.tgw{position:relative}
.tg .hk{cursor:pointer;outline:none;transition:opacity .25s}
.tg .hk rect,.tg .hk circle{transition:stroke .2s,stroke-width .2s}
.tg .ac.hk:hover rect,.tg .ac.hk:focus-visible rect,.tg .ac.lit rect{stroke:var(--ink);stroke-width:1.5}
.tg .vd.hk:hover circle,.tg .vd.hk:focus-visible circle,.tg .vd.lit circle{stroke:var(--ink);stroke-width:1.5}
.tg .pp.hk:hover circle,.tg .pp.hk:focus-visible circle,.tg .pp.lit circle{stroke-width:2.5}
.tg .atl.hk:hover text,.tg .atl.hk:focus-visible text{text-decoration:underline}
.tg .hit{stroke:transparent;stroke-width:16;fill:none}
.tg.dim .hk:not(.lit):not([data-k="core"]){opacity:.18}
.tg.dim .atk:not(.lit){opacity:.12}
.tg .atk{transition:stroke-dashoffset .9s var(--ease) var(--d),opacity .25s}
.tp{position:absolute;z-index:6;left:0;top:0;width:320px;padding:16px 18px 14px;border-radius:14px;background:var(--bg);color:var(--ink);box-shadow:0 0 0 1px var(--rule-2),0 24px 50px -18px rgba(0,0,0,.35);font-size:14px;line-height:1.5;opacity:0;pointer-events:none;transition:opacity .15s}
.tp.on{opacity:1;pointer-events:auto}
.tp-k{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.tp-k.r{color:var(--crit)}
.tp-t{display:block;margin-top:2px;font-size:17px;font-weight:500}
.tp-s{margin:10px 0 0;padding:0;list-style:none;counter-reset:s;display:grid;gap:6px}
.tp-s li{display:grid;grid-template-columns:20px 1fr;counter-increment:s;color:var(--ink-2)}
.tp-s li::before{content:counter(s);display:grid;place-items:center;width:16px;height:16px;margin-top:2px;border-radius:50%;background:color-mix(in srgb,var(--crit) 14%,transparent);color:var(--crit);font-size:10.5px;font-weight:600}
.tp-f{margin:12px 0 0!important;padding-top:10px;border-top:1px solid var(--rule);font:400 14px/1.5 var(--sans)!important;color:var(--ink)!important}
.tp-f span{display:block;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-bottom:2px}
.tp-g{display:block;width:100%;height:auto;margin-top:10px}
.tp-g path{fill:none;stroke:var(--rule-2);stroke-width:1.2}
.tp-g path.a{stroke:color-mix(in srgb,var(--crit) 55%,transparent)}
.tp-g rect{fill:var(--bg);stroke:var(--rule-2)}
.tp-g use{color:var(--ink)}
.tp-g use.gl{fill:none;color:var(--ink-2)}
.tp-g .ad{fill:var(--crit)}
.tp-g text{font:400 12.5px var(--sans);fill:var(--ink-2)}
.tp-g text.a{fill:var(--crit);font-weight:500}
.tp-g .pc{fill:var(--ink)}
.tp-g .pi{font:500 13px var(--sans);fill:var(--bg)}
.tg-m .hk{cursor:pointer}
@media (max-width:760px){.tp{width:100%}}
/* Comparison table: cleaner, more current */
.ftable{border-collapse:separate;border-spacing:0}
.ftable thead th{border-bottom:0;padding-top:18px;padding-bottom:14px;background:color-mix(in srgb,var(--bg) 86%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:inset 0 -1px 0 var(--rule-2)}
.ftable thead .us{position:relative}
.ftable thead .us::before{content:"";position:absolute;inset:6px 8px 0;border-radius:12px 12px 0 0;background:var(--ink);z-index:-1}
.ftable thead .us{color:var(--bg);z-index:1}
.ftable thead .us img{height:13px;filter:none}
.ftable .us-c{background:none;position:relative}
.ftable .us-c::before{content:"";position:absolute;inset:0 8px;background:color-mix(in srgb,var(--ink) 5%,transparent);z-index:-1}
.ftable tbody tr:last-child .us-c::before{border-radius:0 0 12px 12px}
.ftable td{border-bottom:1px solid var(--rule)}
.ftable tbody tr:not(.cat):hover td{background:color-mix(in srgb,var(--ink) 2.5%,transparent)}
.ftable .cat td{padding:30px 0 10px;border-bottom:0;font-size:11.5px}
.ftable .cat td::after{content:"";display:block;height:1px;margin-top:10px;background:var(--rule-2)}
.y{width:24px;height:24px;background:var(--ink);color:var(--bg)}
.p{width:24px;height:24px;box-shadow:none;background:color-mix(in srgb,var(--ink) 8%,transparent)}
.p::before{background:var(--ink-2);width:9px}
.n{width:24px;height:24px}
.n::before{width:9px;height:1.5px;border-radius:1px;background:var(--rule-2)}
/* Membership card: plain metal, no chip, no light */
.mcard{background:linear-gradient(135deg,#2c2f2d,#141615 60%,#0c0d0c)!important}
.mcard__chip{display:none}
.mcard__bot{margin-top:auto}
/* Fees: a plain invoice */
.inv{margin-top:40px;padding:34px 36px 30px;border-radius:4px;background:#fff;color:#1b1c1b;box-shadow:0 0 0 1px var(--rule),0 24px 50px -28px rgba(0,0,0,.35);font:400 14px/1.5 var(--sans)}
.inv__top{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}
.inv__top img{height:16px;width:auto}
.inv__top div{text-align:right;color:#7c7f7c;font-size:12.5px}
.inv__top b{display:block;color:#1b1c1b;font-size:15px;letter-spacing:.1em}
.inv__to{display:flex;justify-content:space-between;gap:16px;margin-top:26px;color:#7c7f7c;font-size:12.5px}
.inv__to b{display:block;color:#1b1c1b;font-weight:500;font-size:14px}
.inv table{width:100%;margin-top:22px;border-collapse:collapse}
.inv th{padding:0 0 8px;border-bottom:1px solid #1b1c1b;text-align:left;font-weight:500;font-size:11.5px;letter-spacing:.1em;color:#7c7f7c}
.inv th:last-child,.inv td:last-child{text-align:right}
.inv td{padding:13px 0;border-bottom:1px solid #e6e7e5;vertical-align:top}
.inv td small{display:block;color:#8f928f;font-size:12.5px}
.inv td:last-child{white-space:nowrap;padding-left:16px}
.inv tfoot td{border:0;padding:8px 0 0}
.inv .tot td{padding-top:16px;font-size:17px;font-weight:500}
.inv .tot td:last-child{font:400 26px/1 var(--serif)}
.inv .tot small{font-size:12.5px;font-weight:400}
.inv__foot{margin-top:24px;padding-top:14px;border-top:1px solid #e6e7e5;display:flex;justify-content:space-between;gap:16px;color:#8f928f;font-size:12px}
@media (max-width:760px){.inv{padding:24px 18px 20px}.inv__to,.inv__foot{flex-direction:column;gap:6px}}
/* ASCII footer: bigger, no rule */
.af{max-width:none;padding:0 16px}
.af__art{font-size:clamp(3.4px,.62vw,9px)}
.af__meta{max-width:1120px;margin:28px auto 0;border-top:0;padding-top:0}
/* ---------- Comparison table, on a strict grid ---------- */
.ct{width:100%;table-layout:fixed;border-collapse:separate;border-spacing:0;font:400 14px/1.5 var(--sans);color:var(--ink)}
.ct thead th:not(.cf){width:132px}
.ct th,.ct td{padding:0;margin:0;text-align:center;vertical-align:middle;background:none}
.ct thead th{position:sticky;top:60px;z-index:3;height:72px;padding:0 12px 14px;vertical-align:bottom;background:var(--bg);font-weight:500;font-size:14px;line-height:1.3;border-bottom:1px solid var(--ink)}
.ct thead th small{display:block;margin-top:2px;font-weight:400;font-size:12.5px;color:var(--ink-3)}
.ct thead th.cf{text-align:left;padding-left:0;color:var(--ink-3);font-weight:400}
.ct thead th.us{color:var(--bg);background:linear-gradient(var(--bg),var(--bg)) top/100% 14px no-repeat,var(--ink);background-clip:padding-box;border-radius:0;box-shadow:inset 0 14px 0 var(--bg)}
.ct thead th.us{background:var(--bg)}
.ct thead th.us::before{content:"";position:absolute;inset:14px 0 -1px;border-radius:12px 12px 0 0;background:var(--ink);z-index:-1}
.ct thead th.us{position:sticky;isolation:isolate}
.ct td{height:68px;padding:12px 12px;border-bottom:1px solid var(--rule)}
.ct td.cf{text-align:left;padding-left:0}
.ct td.cf b{display:block;font-weight:500;font-size:15px;line-height:1.35}
.ct td.cf span{display:block;margin-top:2px;font:400 14.5px/1.45 var(--serif);color:var(--ink-2)}
.ct td.us{background:color-mix(in srgb,var(--ink) 4.5%,var(--bg));border-bottom-color:color-mix(in srgb,var(--ink) 9%,var(--bg))}
.ct tr.cat td{height:auto;padding:30px 12px 10px;border-bottom:1px solid var(--rule-2)}
.ct tr.cat td.cf{padding-left:0;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.ct tr.end td{height:14px;padding:0;border-bottom:0}
.ct tr.end td.us{border-radius:0 0 12px 12px}
.ct tbody tr:not(.cat):not(.end):hover td{background-color:color-mix(in srgb,var(--ink) 2.5%,var(--bg))}
.ct tbody tr:not(.cat):not(.end):hover td.us{background-color:color-mix(in srgb,var(--ink) 7%,var(--bg))}
.ck{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;vertical-align:middle;font-style:normal}
.ck.y{background:var(--ink);color:var(--bg)}
.ck.y::before{content:"";width:12px;height:12px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6.3l2.6 2.5L10 3.4' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6.3l2.6 2.5L10 3.4' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}
.ck.p{box-shadow:inset 0 0 0 1.5px var(--ink-3)}
.ck.p::before{content:"";width:12px;height:12px;border-radius:50%;background:linear-gradient(90deg,var(--ink-3) 50%,transparent 50%)}
.ck.n::before{content:"";width:10px;height:1.5px;border-radius:1px;background:var(--rule-2)}
.ct-key{display:flex;justify-content:center;flex-wrap:wrap;gap:8px 22px;margin-top:18px;font-size:13px;color:var(--ink-3)}
.ct-key span{display:inline-flex;align-items:center;gap:8px}
.ct-key .ck{width:18px;height:18px}
.ct-key .ck.y::before{width:9px;height:9px}
.ct-key .ck.p::before{width:9px;height:9px}
@media (max-width:760px){
.ct thead th:not(.cf){width:58px}
.ct thead th{top:52px;height:56px;padding:0 4px 10px;font-size:12px}
.ct thead th small{display:none}
.ct thead th.cf{font-size:12px}
.ct td{height:auto;padding:12px 4px}
.ct td.cf b{font-size:14px}
.ct td.cf span{font-size:13.5px}
.ct tr.cat td{padding:24px 4px 8px}
.ck{width:22px;height:22px}
}
/* ---------- The invoice, as a receipt-printer slip ---------- */
.rcpt-fig{display:flex!important;flex-direction:column;align-items:center}
.rcpt-fig>figcaption{grid-column:auto}
.rc{position:relative;width:min(440px,100%);padding:0;background:none;color:var(--ink);
font:400 13px/1.6 ui-monospace,"SF Mono","JetBrains Mono",Menlo,Consolas,monospace;letter-spacing:.01em;text-transform:uppercase;
clip-path:inset(0 0 100% 0);transition:clip-path 1.8s steps(28,end)}
.rcpt-fig.in .rc,.static .rc{clip-path:inset(0 0 0 0)}
.rc__c{text-align:center}
.rc__logo{font-weight:700;font-size:18px;letter-spacing:.32em;margin-right:-.32em}
.rc__dim{color:var(--ink-3)}
.rc hr{margin:14px 0;border:0;border-top:1.5px dashed color-mix(in srgb,var(--ink) 35%,transparent)}
.rc hr.dbl{border-top:3px double color-mix(in srgb,var(--ink) 55%,transparent)}
.rc__r{display:flex;align-items:baseline;gap:6px}
.rc__r span:first-child{flex:none}
.rc__r i{flex:1;min-width:12px;border-bottom:1.5px dotted color-mix(in srgb,var(--ink) 30%,transparent);transform:translateY(-4px)}
.rc__r b{flex:none;font-weight:600}
.rc__sub{margin:0 0 8px 2ch;color:var(--ink-3);text-transform:none;font-size:12px;line-height:1.45}
.rc__tot{font-size:16px;font-weight:700}
.rc__bar{height:44px;margin:16px auto 6px;width:78%;background:repeating-linear-gradient(90deg,var(--ink) 0 2px,transparent 2px 4px,var(--ink) 4px 5px,transparent 5px 8px,var(--ink) 8px 11px,transparent 11px 12px,var(--ink) 12px 13px,transparent 13px 16px)}
@media (prefers-reduced-motion:reduce){.rc{clip-path:none;transition:none}}
/* ---------- Followed without cookies: three visits converge on one profile ---------- */
.trk__g{display:grid;grid-template-columns:minmax(0,1fr) 120px minmax(0,1fr);align-items:stretch}
.trk__sites{display:grid;grid-template-rows:repeat(3,1fr);gap:14px}
.trk__site{display:grid;align-content:center;gap:2px;padding:14px 16px;border-radius:12px;background:var(--bg);box-shadow:0 0 0 1px var(--rule-2),0 8px 20px -14px rgba(0,0,0,.25);font-size:14px}
.trk__url{display:flex;align-items:center;gap:6px;font:400 12px/1.3 ui-monospace,Menlo,monospace;color:var(--ink-3);min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.trk__url::before{content:"";flex:none;width:10px;height:10px;border-radius:3px;border:1.5px solid var(--ink-3)}
.trk__url i{font-style:normal;color:var(--ink-3);opacity:.7}
.trk__site b{font-weight:500;line-height:1.35}
.trk__id{margin-top:4px;font-size:12px;color:var(--ink-3)}
.trk__id code,.trk__ph code{font:500 12px ui-monospace,Menlo,monospace;color:var(--crit);letter-spacing:.04em}
.trk__lines{width:100%;height:100%;overflow:visible}
.trk__lines path{fill:none;stroke:var(--crit);stroke-width:1.5;vector-effect:non-scaling-stroke;stroke-dasharray:5 5;opacity:.85}
.trk__prof{align-self:center;border-radius:14px;padding:16px 18px 14px;background:var(--ink);color:var(--bg);box-shadow:0 24px 50px -24px rgba(0,0,0,.5)}
.trk__ph{display:flex;justify-content:space-between;align-items:center;padding-bottom:10px;border-bottom:1px solid color-mix(in srgb,var(--bg) 18%,transparent);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:color-mix(in srgb,var(--bg) 60%,transparent)}
.trk__ph code{color:color-mix(in srgb,var(--crit) 70%,var(--bg))}
.trk__prof ul{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:8px}
.trk__prof li{display:grid;grid-template-columns:76px 1fr;gap:10px;font-size:14px;line-height:1.4;opacity:0;transform:translateX(-6px);transition:opacity .5s var(--ease),transform .5s var(--ease);transition-delay:calc(.4s + var(--i)*.25s)}
.trk.in .trk__prof li,.static .trk__prof li{opacity:1;transform:none}
.trk__prof li span{font-size:12px;color:color-mix(in srgb,var(--bg) 55%,transparent);padding-top:1px}
.trk__prof li b{font-weight:500;color:var(--bg)}
.trk__ft{margin-top:12px;padding-top:10px;border-top:1px solid color-mix(in srgb,var(--bg) 18%,transparent);font-size:12px;color:color-mix(in srgb,var(--bg) 55%,transparent)}
@media (max-width:760px){
.trk__g{grid-template-columns:1fr}
.trk__lines{display:none}
.trk__sites{gap:10px}
.trk__prof{margin-top:18px;position:relative}
.trk__prof::before{content:"↓";position:absolute;top:-22px;left:50%;transform:translateX(-50%);color:var(--crit);font-size:16px}
}
/* ---------- Phones: side by side, the lock screen keeps receiving updates ---------- */
.lock__notes{min-height:310px;align-content:end}
.lock__n{max-height:200px}
.phones.in .lock__n,.static .lock__n{transition:transform .6s var(--ease),opacity .6s var(--ease),max-height .6s var(--ease);transition-delay:0s!important}
.phones.in .lock__n.enter{transform:translateY(-14px) scale(.96);opacity:0}
.phones.in .lock__n.leave{opacity:0;max-height:0;margin:-4px 0;padding-top:0;padding-bottom:0}
/* ---------- Mail window taller; receipt wider ---------- */
@media (min-width:761px){.mx{grid-template-rows:52px 500px}}
figure .mx+.keys{padding-top:24px}
.mx__read{padding-bottom:28px}
.rc{width:min(680px,100%)!important;font-size:14px}
.rc__sub{font-size:12.5px}
/* ---------- Phones: everything that needs its own layout below tablet width ---------- */
.nw{white-space:nowrap}
.toc__sep{margin-top:6px;padding-top:6px;border-top:1px solid var(--rule)}
.lcard--ours .lcard__i img{border-radius:12px}
.sub{text-wrap:pretty}
@media (max-width:400px){.author .acts{display:none}}
@media (max-width:760px){
/* The report opens zoomed to fit, the way a phone shows a PDF */
.pdf__body{grid-template-columns:1fr;height:560px}
.pdf__thumbs{display:none}
.pdf__stage{padding:14px 12px 0}
.pdf__bar{gap:10px;padding:0 12px}
.pdf__bar .zoom svg{display:none}
.sheet{padding:22px 18px 18px;font-size:12.5px}
.sheet__run{font-size:9px}
.sheet__run img{height:10px}
.sheet__h span{font-size:36px}
.sheet__h b{font-size:20px}
.sheet__lead{font-size:14px!important}
.sheet__dist .lg{flex-wrap:wrap;gap:4px 12px;font-size:11px}
.sheet table{font-size:12px}
.sheet th{font-size:10px}
.sheet td small{font-size:11px}
.sheet .sev{font-size:10px;padding:1px 6px}
.sheet .ref{width:34px}
/* Chart: the 500M label sits above the line's last point, clear of the line */
.ai .lab{display:none}
.author span{white-space:nowrap}
/* An old sidebar rule hid every .menu on phones, including the Contents dropdown */
.toc .toc__list{display:grid}
.toc{position:static}
.bar__in{position:relative}
.toc .toc__list{left:12px;right:12px;width:auto;top:calc(100% - 4px)}
/* Footer ASCII: fewer, larger characters so the wordmark reads at phone size */
.af__art{font-size:calc((100vw - 40px)/50.4)}
}