/* The calm layer (round 7 v3, owner Oct 31: "show the REAL product, never a drawing of an imagined UI"; "Check SurplusOS's
   latest marketing site code! Look how clean their design code is!"). The shared pieces every page reaches for instead of
   hand-rolled boxes, after the SurplusOS marketing site's calm system (components/calm-system.css, the hf- features show,
   the .wdx "Why" points and the joined pricing card), rebuilt on this site's own tokens and type:
   - .hl-frame        a quiet hairline frame: 1px line, radius 24, no fill, no shadow
   - .hl-grid         cells split by 1px hairlines inside one frame (--2, --3, --4 columns)
   - .btn-row         a row of pill buttons
   - .why             plain points: a short title, one line, a hairline above each, no icons, no art
   - .app-shot        a real screen (light and dark captures) in a quiet frame
   - .show            segmented tabs over real screens, one caption and one "See ..." link per tab (home.js)
   - .works-in        the apps Locate works in, each with its own mark at text size
   Loaded on every page after site.css. Both themes; nothing moves with reduced motion. */
:root{--hl:var(--line-strong)}
html[data-theme=dark]{--hl:#2a2a2a}

/* Hairline frames and grids */
.hl-frame{border:1px solid var(--hl);border-radius:24px;background:transparent}
.hl-grid{display:grid;overflow:hidden;border:1px solid var(--hl);border-radius:24px}
/* Each cell draws its right and bottom hairline just outside its box; the frame clips the ones on its own edge. */
.hl-grid>*{min-width:0;box-shadow:1px 0 0 0 var(--hl),0 1px 0 0 var(--hl)}
.hl-grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.hl-grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.hl-grid--4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:900px){.hl-grid--4{grid-template-columns:repeat(2,minmax(0,1fr))}.hl-grid--3{grid-template-columns:minmax(0,1fr)}}
@media (max-width:640px){.hl-grid--2{grid-template-columns:minmax(0,1fr)}.hl-grid,.hl-frame{border-radius:20px}}

/* Figures in one hairline card: the number large, its label under it (a dl: dt, then dd, shown number first) */
.stats{margin:0}
.stats>div{display:flex;flex-direction:column;gap:6px;padding:28px 30px}
.stats dt{order:2;color:var(--muted);font-size:15px}
.stats dd{order:1;margin:0;color:var(--ink);font:600 32px/1.15 var(--font);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
@media (max-width:640px){.stats>div{padding:22px 20px}.stats dd{font-size:26px}}

/* A real screen with plain points under it */
.why.shot-points{margin-top:48px}
@media (max-width:640px){.why.shot-points{margin-top:32px}}

/* Button rows */
.btn-row{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.btn-row--center{justify-content:center}

/* Plain points (Apple's "Why Mac"): a short title and one line, a hairline above each */
.why{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0 32px;margin:0;padding:0;list-style:none}
.why--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.why>*{padding-top:20px;border-top:1px solid var(--hl)}
.why h3{margin:0 0 8px;font-size:17px;font-weight:600;line-height:1.35;letter-spacing:-.01em}
.why p{color:var(--muted);font-size:15px;line-height:1.55}
.why .why-n{display:block;margin-bottom:10px;color:var(--ink);font-size:40px;font-weight:600;line-height:1.05;letter-spacing:-.025em;font-variant-numeric:tabular-nums}
@media (max-width:1023px){.why,.why--3{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 28px}}
@media (max-width:599px){.why,.why--3{grid-template-columns:minmax(0,1fr);gap:24px}.why .why-n{font-size:32px}}

/* A real screen in a quiet frame. Desktop captures are 1440 wide; a phone gets the app's own phone layout, framed like a
   phone screen. Dark and light captures swap with the theme (site.css .shot-dark/.shot-light). */
.app-shot{margin:0}
.app-frame{overflow:hidden;border:1px solid var(--hl);border-radius:18px;background:var(--bg);box-shadow:0 1px 2px rgb(0 0 0 / .04),0 28px 60px -34px rgb(0 0 0 / .28)}
html[data-theme=dark] .app-frame{box-shadow:0 28px 60px -34px rgb(0 0 0 / .9)}
.app-frame img{display:block;width:100%;height:auto}
.app-shot--mcp .app-frame,.app-shot--ai .app-frame{border-radius:24px}
@media (max-width:640px){
  .app-frame{max-width:320px;margin-inline:auto;border-radius:24px}
  .app-shot--ai .app-frame,.app-shot--mcp .app-frame{max-width:none}}

/* The show: segmented tabs over real screens. Without script every screen shows in turn, each under its caption. */
.show-tabs{display:flex;gap:4px;width:max-content;max-width:100%;margin:0 auto 32px;padding:4px;overflow-x:auto;border:1px solid var(--hl);border-radius:999px;scrollbar-width:none}
.show-tabs::-webkit-scrollbar{display:none}
html:not(.js) .show-tabs{display:none}
.show-tab{position:relative;flex:none;min-height:36px;padding:0 18px;border:0;border-radius:999px;background:none;color:var(--muted);font:500 14px/1 var(--font);white-space:nowrap;cursor:pointer;transition:color .2s var(--ease),background-color .2s var(--ease),box-shadow .2s var(--ease)}
.show-tab:hover{color:var(--ink)}
.show-tab[aria-selected=true]{background:var(--raised);box-shadow:0 0 0 1px var(--hl),0 1px 2px rgb(0 0 0 / .06);color:var(--ink)}
html[data-theme=dark] .show-tab[aria-selected=true]{background:#1f1f1f;box-shadow:0 0 0 1px #333}
.show-tab:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.show-stage{max-width:1200px;margin:0 auto}
html.js .show-panel:not(.is-on),html.js .show-panel:not(.is-on) picture{display:none}  /* the pictures too, so an unseen tab's screens are never fetched */
html:not(.js) .show-panel+.show-panel{margin-top:56px}
.show-panel.is-on{animation:show-in .35s var(--ease)}
@keyframes show-in{from{opacity:0;transform:translateY(8px)}}
.show-caption{max-width:560px;margin:22px auto 0;color:var(--muted);font-size:15px;line-height:1.55;text-align:center;text-wrap:balance}
.show-caption a{color:var(--ink);font-weight:500;text-decoration:none;white-space:nowrap}
.show-caption a:hover{text-decoration:underline;text-underline-offset:3px}
/* The in-chat sheet is narrower than a window: it sits centred on the page's quiet surface, at the window's proportions. */
.show-panel .app-shot--mcp{display:grid;place-items:center;aspect-ratio:1440/900;border-radius:18px;background:var(--surface)}
.show-panel .app-shot--mcp .app-frame{width:min(60%,700px)}
.tab-s{display:none}
@media (max-width:640px){.show-tabs{margin-bottom:20px}.show-tab{padding:0 15px}.tab-l{display:none}.tab-s{display:inline}
  .show-panel .app-shot--mcp{display:block;aspect-ratio:auto;background:none}.show-panel .app-shot--mcp .app-frame{width:auto}}
@media (prefers-reduced-motion:reduce){.show-panel.is-on{animation:none}.show-tab{transition:none}}

/* The apps Locate works in: each one's own mark at text size, then its name */
.works-in{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px 22px;margin:28px 0 0;padding:0;color:var(--muted);font-size:14px;list-style:none}
.works-in>p{margin:0}
.works-in ul{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 20px;margin:0;padding:0;list-style:none}
.works-in li{display:flex;align-items:center;gap:8px;color:var(--ink);font-weight:500;white-space:nowrap}
.works-in .app-tile{width:22px;height:22px;border-radius:6px;box-shadow:inset 0 0 0 1px rgb(0 0 0 / .08)}
html[data-theme=dark] .works-in .app-tile{box-shadow:inset 0 0 0 1px rgb(255 255 255 / .12)}
.works-in .app-tile svg{width:13px;height:13px}
.works-in .app-codex svg{width:16px;height:16px}
/* Phones (owner, Nov 2: the two-column list left Cursor alone and sat off the centered label): one centered row of the
   five marks on equal tiles, the names kept for screen readers. */
@media (max-width:640px){
  .works-in{flex-direction:column;gap:14px;margin-top:28px;font-size:14px}
  .works-in ul{display:flex;flex-wrap:nowrap;justify-content:center;gap:14px}
  .works-in li{gap:0}
  .works-in li>span:last-child{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .works-in .app-tile{width:44px;height:44px;border-radius:12px}
  .works-in .app-tile svg{width:24px;height:24px}
  .works-in .app-codex svg{width:28px;height:28px}
}
/* The in-chat sheet is captured alone, its corners clear: no frame of ours, a shadow that follows its own shape. */
.app-shot--mcp .app-frame{overflow:visible;border:0;border-radius:0;background:none;box-shadow:none}
.app-shot--mcp img{filter:drop-shadow(0 1px 1px rgb(0 0 0 / .06)) drop-shadow(0 26px 40px rgb(0 0 0 / .16))}
html[data-theme=dark] .app-shot--mcp img{filter:drop-shadow(0 26px 40px rgb(0 0 0 / .7))}

/* Round 7 system (owner, Oct 31: "this looks vibecoded", "only text and text basic website"; the unslop method by Damir
   Sokolovsky, CC BY 4.0). Monochrome: the owner tried Locate blue and rejected it ("this blue color does not match the
   vibe"), so the one strong element is ink, used for the primary action and nothing decorative. Buttons are flat (no drop
   shadow), 44px with 20px sides. Section labels are gone: the headline carries the section. A 4px rhythm: 96px between
   sections on desktop, 64px on phones. */
:root{--accent:#171717;--accent-hover:#2e2e2e;--accent-ink:#171717;--accent-bg:#ebebeb}
html[data-theme=dark]{--accent:#ededed;--accent-hover:#fff;--accent-ink:#ededed;--accent-bg:#232323}
.button{min-height:44px;padding:0 20px;font-size:15px}
.header-cta{min-height:36px;padding:0 16px;font-size:14px}
.button.primary,html[data-theme] :is(.hero .actions,.final .actions,.plan) .button.primary{background:var(--primary);color:var(--primary-ink);box-shadow:none}
.button.primary:hover,html[data-theme] :is(.hero .actions,.final .actions,.plan) .button.primary:hover{background:var(--primary-hover)}
html[data-theme] :is(.hero .actions,.final .actions,.plan) .button:not(.primary),.button.quiet{background:var(--raised);box-shadow:0 0 0 1px var(--line-strong)}
html[data-theme] :is(.hero .actions,.final .actions,.plan) .button:not(.primary):hover{background:var(--surface)}
.button:active{transform:scale(.98)}
html.scrolled .site-header .wrap{box-shadow:0 0 0 1px rgba(0,0,0,.07),0 8px 24px -16px rgba(0,0,0,.22)}
html[data-theme=dark].scrolled .site-header .wrap,html[data-theme=dark] .site-header .wrap{box-shadow:0 0 0 1px rgba(255,255,255,.08)}
.section{padding:96px 0}
.section-head{margin-bottom:48px}
/* Hero and closing buttons stay small and quiet on desktop (owner, Oct 31: "a bit minimal, they are looking big"). */
:is(.hero,.final) .actions .button{min-height:38px;padding:0 16px;font-size:14px}
@media (max-width:640px){.section{padding:64px 0}.section-head{margin-bottom:28px}.button{padding:0 16px}:is(.hero,.final) .actions .button{min-height:42px}}
@media (forced-colors:active){.button.primary{border:1px solid ButtonText}}

/* Footer, round 7 v6 (owner, Oct 31: "use footer like SurplusOS marketing"; their components/Footer.tsx, FooterSilk.tsx and
   globals.css footer theme at 218a058, read only, rebuilt in our own code). Light: a pale ground with soft silk bands drifting
   very slowly. Dark: black silk folds with a bright crease, darkened under the links. The page fades into it, the brand
   and the link columns sit side by side, a quiet last row, and the name in brushed metal with a light that follows the
   pointer (site.js). Headings stay in sentence case. */
/* Light (owner, Nov 1: the pale grey name with its band read washed out): the name is polished graphite catching the
   same horizon as the dark footer, the links one step stronger, the silk neutral. */
.lf{--lf-bg:#f5f5f7;--lf-fg:#1d1d1f;--lf-fg-2:rgb(29 29 31 / .8);--lf-fg-3:rgb(29 29 31 / .66);--lf-line:rgb(0 0 0 / .09);
  --lf-s1:#fff;--lf-s2:#e4e8ee;--lf-s3:#eceef2;--lf-m1:#5b5e66;--lf-m2:#1d1d1f;--lf-m3:#3a3c42;
  position:relative;overflow:hidden;padding:96px 0 0;border-top:0;background:var(--lf-bg);color:var(--lf-fg-2);font-size:14px;-webkit-font-smoothing:antialiased}
html[data-theme=dark] .lf{--lf-bg:#000;--lf-fg:#f5f5f7;--lf-fg-2:rgb(235 235 245 / .72);--lf-fg-3:rgb(235 235 245 / .55);--lf-line:rgb(255 255 255 / .1);
  --lf-m1:#4c4c50;--lf-m2:#1f1f22;--lf-m3:#343438}
.lf::before{content:'';position:absolute;inset:0 0 auto;z-index:1;height:160px;pointer-events:none;background:linear-gradient(180deg,var(--bg),transparent)}
.lf-in{position:relative;z-index:2}
.lf-silk,.lf-lx{position:absolute;inset:0;pointer-events:none;contain:paint;clip-path:inset(0)}
.lf-silk svg{width:100%;height:100%}
.lf-s1{stop-color:var(--lf-s1)}.lf-s2{stop-color:var(--lf-s2)}.lf-s3{stop-color:var(--lf-s3)}
.lf-band{transform-box:fill-box;transform-origin:center;will-change:transform}
.lf-band-1{opacity:.95;animation:lfSilk1 38s ease-in-out infinite alternate}
.lf-band-2{opacity:.7;animation:lfSilk2 46s ease-in-out infinite alternate}
.lf-band-3{opacity:.55;animation:lfSilk3 32s ease-in-out infinite alternate}
@keyframes lfSilk1{from{transform:translate3d(-4%,0,0) scaleY(1)}to{transform:translate3d(4%,-3%,0) scaleY(1.18)}}
@keyframes lfSilk2{from{transform:translate3d(5%,2%,0) scaleY(1.1)}to{transform:translate3d(-5%,-2%,0) scaleY(.9)}}
@keyframes lfSilk3{from{transform:translate3d(-3%,2%,0)}to{transform:translate3d(3%,-2%,0)}}
.lf-lx{display:none;overflow:hidden;background:#000}
html[data-theme=dark] .lf-silk{display:none}
html[data-theme=dark] .lf-lx{display:block}
.lf-fold{position:absolute;width:150vmin;height:78vmin;border-radius:50%;will-change:transform;animation:lfDrift 60s ease-in-out infinite alternate}
.lf-fold-tr{top:-30vmin;right:-50vmin;transform:rotate(36deg);-webkit-mask-image:radial-gradient(ellipse 70% 80% at 62% 38%,#000 25%,rgb(0 0 0 / .55) 50%,transparent 74%);mask-image:radial-gradient(ellipse 70% 80% at 62% 38%,#000 25%,rgb(0 0 0 / .55) 50%,transparent 74%)}
.lf-fold-bl{bottom:-30vmin;left:-40vmin;transform:rotate(36deg);animation-delay:-30s;-webkit-mask-image:radial-gradient(ellipse 70% 80% at 40% 62%,#000 22%,rgb(0 0 0 / .5) 48%,transparent 72%);mask-image:radial-gradient(ellipse 70% 80% at 40% 62%,#000 22%,rgb(0 0 0 / .5) 48%,transparent 72%)}
.lf-sheen,.lf-crease{position:absolute;inset:0;border-radius:inherit}
.lf-sheen{background:linear-gradient(180deg,transparent 24%,rgb(255 255 255 / .06) 33%,rgb(255 255 255 / .28) 41%,rgb(255 255 255 / .7) 46%,rgb(255 255 255 / .98) 48%,rgb(255 255 255 / .34) 51%,rgb(255 255 255 / .06) 55%,rgb(255 255 255 / .18) 59%,rgb(255 255 255 / .46) 62%,rgb(255 255 255 / .14) 65%,rgb(255 255 255 / .03) 70%,transparent 78%);filter:blur(14px);opacity:.5}
.lf-crease{background:linear-gradient(180deg,transparent 47.3%,rgb(255 255 255 / .95) 47.9%,rgb(255 255 255 / .22) 48.5%,transparent 49.8%);filter:blur(2.5px);opacity:.45}
.lf-fold-bl .lf-sheen{filter:blur(20px);opacity:.3}.lf-fold-bl .lf-crease{opacity:.22}
.lf-vignette{position:absolute;inset:0;background:radial-gradient(ellipse 58% 62% at 45% 42%,#000 0%,rgb(0 0 0 / .92) 42%,rgb(0 0 0 / .45) 74%,transparent 100%)}
@keyframes lfDrift{from{transform:rotate(36deg) translate3d(0,0,0)}to{transform:rotate(36deg) translate3d(-6vmin,4vmin,0)}}
.lf-top{display:grid;grid-template-columns:minmax(240px,.9fr) minmax(560px,1.1fr);gap:40px 80px}
.lf .footer-about{max-width:28rem}
.lf .footer-about .brand{color:var(--lf-fg)}
.lf .footer-about p{max-width:none;margin-top:16px;color:var(--lf-fg-2);font-size:15px;line-height:1.6}
.lf .footer-about .lf-fine{margin-top:12px;color:var(--lf-fg-3);font-size:13px}
.lf-fine a{color:inherit;text-decoration:underline;text-decoration-color:var(--lf-line);text-underline-offset:2px}
.lf-fine a:hover{color:var(--lf-fg)}
.lf .footer-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:36px 40px}
.lf .footer-grid h2{margin:0;color:var(--lf-fg);font:500 13px/1 var(--font);letter-spacing:0}
.lf .footer-grid ul{display:grid;gap:9px;margin-top:20px}
.lf .footer-grid a{display:inline;min-height:0;padding:0;color:var(--lf-fg-3);font-size:14px;line-height:1.35;transition:color .2s var(--ease)}
.lf .footer-grid a:hover{color:var(--lf-fg)}
.lf .footer-bottom{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 20px;margin-top:56px;padding-top:20px;border-top:1px solid var(--lf-line);color:var(--lf-fg-3);font-size:13px}
.footer-quick{display:flex;flex-wrap:wrap;gap:4px 20px}
.footer-quick a{color:var(--lf-fg-2);text-decoration:none;transition:color .2s var(--ease)}
.footer-quick a:hover{color:var(--lf-fg)}
.footer-social{display:flex;flex-wrap:wrap;align-items:center;gap:2px}
.footer-social a{display:grid;place-items:center;width:32px;height:32px;color:var(--lf-fg-2)}
.footer-social a:hover{color:var(--lf-fg)}
.footer-social svg{width:16px;height:16px}
.lf-wm-wrap{margin-top:40px;padding-bottom:40px;-webkit-user-select:none;user-select:none}
.lf-wm{display:block;width:100%;height:auto;overflow:visible}
.lf-wm-type{font-family:var(--font);letter-spacing:-.045em}
.lf-m1{stop-color:var(--lf-m1)}.lf-m2{stop-color:var(--lf-m2)}.lf-m3{stop-color:var(--lf-m3)}
.lf-wm-light{opacity:0;transition:opacity .35s ease}
.lf-spot0{stop-color:#fff;stop-opacity:.7}.lf-spot1{stop-color:#fff;stop-opacity:.22}
html[data-theme=dark] .lf-spot0{stop-opacity:.22}html[data-theme=dark] .lf-spot1{stop-opacity:.07}
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){.lf-wm:hover .lf-wm-light{opacity:1}}
/* The reveal as the footer scrolls in: opacity and a short rise, the wordmark last (site.js sets data-lf) */
@media (prefers-reduced-motion:no-preference){
  .lf[data-lf=wait] .lf-rv{opacity:0;transform:translate3d(0,16px,0)}
  .lf[data-lf=wait] .lf-wm-wrap{transform:translate3d(0,30px,0)}
  .lf[data-lf=in] .lf-rv{transition:opacity .65s cubic-bezier(.22,1,.36,1),transform .65s cubic-bezier(.22,1,.36,1)}
  .lf[data-lf=in] .footer-grid{transition-delay:.1s}.lf[data-lf=in] .footer-bottom{transition-delay:.2s}
  .lf[data-lf=in] .lf-wm-wrap{transition-duration:1.1s;transition-delay:.28s}
}
@media (prefers-reduced-motion:reduce){.lf-band,.lf-fold{animation:none}}
@media (max-width:1023px){.lf-top{grid-template-columns:minmax(0,1fr)}}
@media (max-width:640px){.lf{padding-top:64px}.lf .footer-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.lf-sheen{opacity:.32}.lf-crease{opacity:.28}.lf-wm-wrap{margin-top:28px;padding-bottom:24px}}

/* The closing call to action (round 7 v7): the Locate app icon over the last line, the way Apple closes a product page;
   no sky, no box (owner: "don't overuse sky everywhere"). */
.final .final-panel{padding-top:88px}
.final-icon{display:grid;place-items:center;width:72px;height:72px;margin:0 auto 28px;border-radius:18px;background:linear-gradient(180deg,#2a2a2d,#0b0b0c);color:#fff;
  box-shadow:inset 0 1px 0 rgb(255 255 255 / .18),0 1px 2px rgb(0 0 0 / .2),0 20px 40px -20px rgb(0 0 0 / .5)}
.final-icon svg{width:34px;height:34px;fill:currentColor}
html[data-theme=dark] .final-icon{background:linear-gradient(180deg,#fff,#e6e6e8);color:#0b0b0c;box-shadow:0 20px 40px -20px rgb(0 0 0 / .9)}
@media (max-width:640px){.final-icon{width:60px;height:60px;border-radius:15px;margin-bottom:22px}.final-icon svg{width:28px;height:28px}}

/* The product tabs' Liquid Glass (owner, Oct 31: "I want exact Apple's liquid glass"; Oct 23: clear, no tint, no colour
   fringe, only on this tab pill). The lens floats above the labels: its backdrop is bent at the rim by home.js's
   displacement map (Chromium), it carries specular light on its upper-left and lower-right edges and a soft contact shadow,
   and the label under it reads through it. Other browsers: the same rims over a clear blur. */
.lg-defs{position:absolute;width:0;height:0;overflow:hidden}
.show-tabs.has-lens{position:relative;isolation:isolate;background:rgb(0 0 0 / .045)}
html[data-theme=dark] .show-tabs.has-lens{background:rgb(255 255 255 / .05)}
.show-lens{position:absolute;top:4px;bottom:4px;left:0;z-index:2;border-radius:999px;pointer-events:none;will-change:transform;
  background:rgb(255 255 255 / .22);
  box-shadow:inset 1.5px 1.5px 0 -.5px rgb(255 255 255 / .95),inset -1.5px -1.5px 0 -.5px rgb(255 255 255 / .6),inset 0 0 0 .5px rgb(255 255 255 / .4),
    inset 0 0 14px rgb(255 255 255 / .28),0 0 0 .5px rgb(0 0 0 / .06),0 2px 4px rgb(0 0 0 / .06),0 8px 20px -8px rgb(0 0 0 / .28);
  -webkit-backdrop-filter:blur(1.5px) saturate(1.7) brightness(1.05);backdrop-filter:blur(1.5px) saturate(1.7) brightness(1.05)}
.show-lens.is-refract{-webkit-backdrop-filter:url(#lg-lens) saturate(1.7) brightness(1.06);backdrop-filter:url(#lg-lens) saturate(1.7) brightness(1.06)}
html[data-theme=dark] .show-lens{background:rgb(255 255 255 / .06);
  box-shadow:inset 1.5px 1.5px 0 -.5px rgb(255 255 255 / .5),inset -1.5px -1.5px 0 -.5px rgb(255 255 255 / .22),inset 0 0 0 .5px rgb(255 255 255 / .16),
    inset 0 0 14px rgb(255 255 255 / .07),0 8px 22px -8px rgb(0 0 0 / .85)}
html[data-theme=dark] .show-lens.is-refract{-webkit-backdrop-filter:url(#lg-lens) saturate(1.5) brightness(1.2);backdrop-filter:url(#lg-lens) saturate(1.5) brightness(1.2)}
.show-tabs.has-lens .show-tab[aria-selected=true],html[data-theme=dark] .show-tabs.has-lens .show-tab[aria-selected=true]{background:none;box-shadow:none;color:var(--ink)}
.show-tabs.has-lens.is-peek .show-tab[aria-selected=true]{color:var(--muted)}
.show-tabs.has-lens .show-tab:hover,.show-tabs.has-lens .show-tab:focus-visible{color:var(--ink)}
/* The labels sit above the glass (owner, Nov 1: the lens blurred the chosen label): the lens bends the pill's own surface
   at its rim, never the text. */
.show-tabs.has-lens .show-tab{z-index:3}
@media (forced-colors:active){.show-lens{border:1px solid CanvasText}}
/* Terms and Privacy (Nov 2): one readable column under the centered heading. */
.legal .prose{margin-inline:auto}
.legal .prose h3{margin-top:28px}
/* Phone menu (owner, Nov 2: "keep it clean"): a full sheet, the four destinations set large, Sign in and Request access
   side by side at the foot. Nothing else; the tools, guides and the rest live in the footer. */
.menu-panel{gap:0;width:100%;padding:12px 20px max(24px,env(safe-area-inset-bottom));border-left:0}
.menu-top{min-height:48px;margin-bottom:24px}
.menu .menu-main{display:grid;gap:4px}
.menu .menu-main a{min-height:52px;color:var(--ink);font-size:30px;font-weight:600;line-height:38px;letter-spacing:-.022em}
.menu .menu-main a:not([aria-current=page]){color:var(--ink-2)}
.menu .menu-main a:active{opacity:.6}
.menu-actions{display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr));gap:10px;margin-top:auto;padding-top:24px}
.menu .menu-actions .button{min-height:48px;justify-content:center;font-size:16px}
@media (prefers-reduced-motion:no-preference){
  .menu[open] .menu-main a,.menu[open] .menu-actions{animation:menu-in .45s var(--ease) both}
  .menu[open] .menu-main a:nth-child(2){animation-delay:.04s}.menu[open] .menu-main a:nth-child(3){animation-delay:.08s}
  .menu[open] .menu-main a:nth-child(4){animation-delay:.12s}.menu[open] .menu-actions{animation-delay:.16s}}
@keyframes menu-in{from{opacity:0;transform:translateY(10px)}}
/* Guides and articles (owner, Nov 2: "complete overhaul … not some ugly 90s blog design", "space on the right side"):
   one centred reading column for the heading and the text, the contents in a sticky rail to its left on wide screens and
   folded above the text on smaller ones (site.js), larger type, a calmer rhythm. */
.hero.plain.left .hero-copy.article-head,.article-head{max-width:680px;margin-inline:auto}
.article-head>*{max-width:none}
.article-head .lead{margin-top:20px;color:var(--muted);font-size:21px;line-height:1.5}
.article-head .byline{gap:6px 20px;margin-top:28px;padding-top:18px;border-top:1px solid var(--line);font-size:14px}
@media (max-width:640px){.article-head .byline{flex-direction:column;gap:4px}}
.article-grid{grid-template-columns:200px minmax(0,680px) 200px;gap:0 56px;justify-content:center}
.article-grid>.prose{grid-column:2;grid-row:1;min-width:0}
.article-grid>.toc{grid-column:1;grid-row:1;padding-left:0;border-left:0}
.article-grid>.prose{max-width:680px;font-size:19px;line-height:1.7}
.article-grid>.prose>*+*{margin-top:1.15em}
.article-grid>.prose h2{margin-top:72px;font:600 30px/1.2 var(--font);letter-spacing:-.022em;scroll-margin-top:calc(var(--header-h) + 24px)}
.article-grid>.prose h3{margin-top:40px;font-size:21px;font-weight:600;letter-spacing:-.012em;scroll-margin-top:calc(var(--header-h) + 24px)}
.article-grid>.prose>h2:first-child,.article-grid>.prose>.callout+h2{margin-top:56px}
.article-grid>.prose .callout{padding:24px 28px;border-radius:20px;color:var(--ink-2);font-size:17px;line-height:1.65}
.article-grid>.prose .callout strong{margin-bottom:8px;font-size:15px;font-weight:600}
.article-grid>.toc>p{margin-bottom:12px;color:var(--ink);font-size:13px;font-weight:600}
.article-grid>.toc ol{gap:0}
.article-grid>.toc a{display:block;padding:6px 0;color:var(--muted);font-size:14px;line-height:1.35;transition:color .15s var(--ease)}
.article-grid>.toc a:hover,.article-grid>.toc a.is-on{color:var(--ink)}
.article-grid>.toc a.is-on{font-weight:500}
.toc-toggle{display:none}
@media (max-width:1199px){
  .article-grid{grid-template-columns:minmax(0,680px);gap:0}
  .article-grid>.prose{grid-column:1;grid-row:2}
  .article-grid>.toc{grid-column:1;grid-row:1;position:static;margin-bottom:40px;padding:4px 18px;border:0;border-radius:16px;background:var(--surface)}
  html.js .article-grid>.toc>p{display:none}
  html.js .toc-toggle{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:48px;padding:0;border:0;background:none;color:var(--ink);font:600 15px/1 var(--font);cursor:pointer}
  .toc-toggle::after{content:'';width:8px;height:8px;margin:-4px 4px 0 0;border-right:1.5px solid var(--muted);border-bottom:1.5px solid var(--muted);transform:rotate(45deg);transition:transform .2s var(--ease)}
  .toc.is-open .toc-toggle::after{margin-top:4px;transform:rotate(225deg)}
  html.js .toc:not(.is-open) ol{display:none}
  .article-grid>.toc ol{padding-bottom:12px}
  .toc-toggle:focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:8px}
}
@media (max-width:640px){
  .article-head .lead{font-size:19px}
  .article-grid>.prose{font-size:17px}
  .article-grid>.prose h2{margin-top:56px;font-size:25px}
  .article-grid>.prose h3{margin-top:32px;font-size:19px}
  .article-grid>.prose .callout{padding:20px;font-size:16px}
}

/* Guides hub (November 5): every live guide as a hairline row in the reading column, newest first. The title carries the
   weight, the summary and date stay quiet, and a phone stacks the date under the summary. */
.guide-index .guide-list{margin:0;padding:0;list-style:none;border-bottom:1px solid var(--line)}
.guide-index .guide-list li{margin:0;border-top:1px solid var(--line)}
.guide-index .guide-list a{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 32px;padding:22px 0;color:inherit;text-decoration:none}
.guide-index .guide-title{color:var(--ink);font-size:19px;font-weight:600;line-height:1.4;letter-spacing:-.012em}
.guide-index .guide-summary{grid-column:1;color:var(--muted);font-size:15px;line-height:1.6}
.guide-index .guide-list time{grid-column:2;grid-row:1;padding-top:3px;color:var(--muted);font-size:14px;white-space:nowrap}
.guide-index .guide-list a:hover .guide-title{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.guide-index .guide-list a:focus-visible{outline:2px solid var(--focus);outline-offset:4px;border-radius:8px}
@media (max-width:640px){
  .guide-index .guide-list a{grid-template-columns:minmax(0,1fr);gap:6px;padding:20px 0}
  .guide-index .guide-title{font-size:17px}
  .guide-index .guide-list time{grid-column:1;grid-row:auto;padding-top:0;font-size:13px}
}