/* Shared stylesheet for the two product pages (personalized-index.html, diversify.html).
   Tokens, type and chrome are copied from home.html so the three pages read as one site.
   Every figure below is DOM drawn: square cells, hairlines, bars. No images, no libraries. */

:root{
  --deep:#05111A; --paper:#F7F9FC; --bone:#E9E7E0; --gold:#CEAF6C; --ink:#111A20;
  --slate:#5B6875; --body:#3F4B57; --line:rgba(17,26,32,.12); --line-dark:rgba(233,231,224,.16);
  --cell:#B8C3CE; --cell-dim:#D6DDE4; --navy:#1D3A52; --rust:#B5533A;
  /* the no-JS floor under every gold surface; the surface itself is a painted canvas */
  --metal:linear-gradient(135deg,#E3CB8C,#B4924E);
  --display:"Bodoni Moda",Georgia,serif;
  --sans:"Archivo",system-ui,sans-serif;
  --mono:"Martian Mono",ui-monospace,monospace;
  --pad:clamp(20px,4.4vw,58px);
  --maxw:1440px;
}
*{box-sizing:border-box}
html{overflow-x:clip;scroll-behavior:smooth}
body{margin:0;max-width:100%;overflow-x:clip;background:var(--paper);color:var(--ink);font-family:var(--sans);line-height:1.6;-webkit-text-size-adjust:100%}
::selection{background:rgba(206,175,108,.34)}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.dark :focus-visible,.panel :focus-visible,.nav.on-dark :focus-visible,.legal :focus-visible{outline-color:var(--bone)}

/* ---------- nav ---------- */
.nav{position:sticky;top:0;z-index:20;height:60px;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:0 var(--pad);color:var(--ink);background:color-mix(in srgb,var(--paper) 88%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.navmark{color:inherit;text-decoration:none;font-family:var(--display);font-variation-settings:"opsz" 24,"wght" 600;font-size:19px;letter-spacing:.005em}
.navr{display:flex;align-items:center;gap:clamp(14px,2vw,24px)}
.login,.navlink{color:inherit;text-decoration:none;opacity:.62;font-family:var(--mono);font-variation-settings:"wdth" 87,"wght" 400;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;padding:8px 2px;border-bottom:1px solid transparent;transition:opacity .2s,border-color .2s;background:none;border-top:0;border-left:0;border-right:0;cursor:pointer}
.login:hover,.login:focus-visible,.navlink:hover,.navlink:focus-visible,.navlink[aria-expanded="true"]{opacity:1;border-bottom-color:currentColor}
.start{background:var(--ink);color:var(--paper);text-decoration:none;border-radius:999px;padding:13px 22px;white-space:nowrap;font-family:var(--sans);font-variation-settings:"wght" 600;font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;transition:filter .18s ease}
.start:hover,.start:focus-visible{filter:brightness(1.15)}
/* over a navy band the bar joins it rather than cutting a light strip across it */
.nav.on-dark{background:color-mix(in srgb,var(--deep) 88%,transparent);color:var(--bone)}
.nav.on-dark .start{background:var(--bone);color:#0A1620}
.menu{position:relative}
.menu-panel{position:absolute;top:calc(100% + 10px);left:-14px;min-width:220px;margin:0;padding:8px;list-style:none;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:0 18px 50px rgba(17,26,32,.14);display:none}
.menu.open .menu-panel{display:block}
.menu-panel li{display:block}
.menu-panel a{display:grid;grid-template-columns:26px 1fr;column-gap:14px;align-items:center;padding:13px 14px;border-radius:9px;text-decoration:none;color:var(--ink)}
.menu-panel a:hover,.menu-panel a:focus-visible{background:var(--paper)}
.menu-panel a b{grid-column:2;display:block;font-family:var(--display);font-variation-settings:"opsz" 24,"wght" 600;font-size:17px;line-height:1.2}
.menu-panel a span{grid-column:2;display:block;margin-top:3px;font-size:12.5px;color:var(--slate)}
.menu-panel a[aria-current="page"] b{color:#8A6E2E}
/* the signature drawing, shrunk to a menu mark: a field of cells with one lifted clear */
.menu-panel a span.mk{grid-column:1;grid-row:1;position:relative;width:26px;height:22px;margin:0;display:block}
.menu-panel a span.mk::before{content:"";position:absolute;left:0;bottom:0;width:18px;height:18px;background:
  linear-gradient(var(--cell),var(--cell)) 0 0/4px 4px no-repeat,
  linear-gradient(var(--cell),var(--cell)) 7px 0/4px 4px no-repeat,
  linear-gradient(var(--cell),var(--cell)) 14px 0/4px 4px no-repeat,
  linear-gradient(var(--cell),var(--cell)) 0 7px/4px 4px no-repeat,
  linear-gradient(var(--cell),var(--cell)) 14px 7px/4px 4px no-repeat,
  linear-gradient(var(--cell),var(--cell)) 0 14px/4px 4px no-repeat,
  linear-gradient(var(--cell),var(--cell)) 7px 14px/4px 4px no-repeat,
  linear-gradient(var(--cell),var(--cell)) 14px 14px/4px 4px no-repeat}
.menu-panel a span.mk::after{content:"";position:absolute;right:0;top:0;width:6px;height:6px;background:var(--metal);box-shadow:0 0 0 1px rgba(45,33,6,.34),2px 3px 5px rgba(70,54,16,.3)}

/* ---------- type ---------- */
.eyebrow{margin:0 0 18px;font-family:var(--mono);font-variation-settings:"wdth" 87,"wght" 400;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--slate)}
h1{margin:0;max-width:19ch;font-family:var(--display);font-variation-settings:"opsz" 96,"wght" 600;font-size:clamp(2.1rem,4.2vw,3.7rem);line-height:1.04;letter-spacing:-.008em}
h2{margin:0;max-width:15ch;font-family:var(--display);font-variation-settings:"opsz" 96,"wght" 600;font-size:clamp(1.9rem,3.6vw,3.05rem);line-height:1.05;letter-spacing:-.008em}
h3.head{margin:0 0 clamp(24px,4vh,40px);max-width:20ch;font-family:var(--display);font-variation-settings:"opsz" 96,"wght" 600;font-size:clamp(1.8rem,3.4vw,2.9rem);line-height:1.05;letter-spacing:-.008em}
.lede{margin:22px 0 0;max-width:44ch;font-family:var(--display);font-variation-settings:"opsz" 40,"wght" 400;font-size:clamp(1.15rem,1.55vw,1.45rem);line-height:1.4;color:var(--body)}
.body{margin:18px 0 0;max-width:52ch;font-family:var(--display);font-variation-settings:"opsz" 40,"wght" 400;font-size:clamp(1.05rem,1.3vw,1.25rem);line-height:1.45;color:var(--body)}
.body + .body{margin-top:14px}
.dark .lede,.dark .body{color:var(--bone)}
.cap{margin:12px 0 0;max-width:62ch;font-family:var(--sans);font-size:12px;line-height:1.6;color:var(--slate)}
.dark .cap{color:#8B98A5}
.dark .eyebrow{color:#7F8C99}

/* ---------- buttons ---------- */
.ctas{display:flex;flex-wrap:wrap;gap:12px 18px;align-items:center;margin-top:26px}
.cta{display:inline-flex;align-items:center;gap:12px;background:var(--ink);color:var(--paper);text-decoration:none;padding:15px 28px;border-radius:999px;font-family:var(--sans);font-variation-settings:"wght" 600;font-size:12px;letter-spacing:.09em;text-transform:uppercase;transition:transform .14s ease,box-shadow .22s ease}
.cta:hover,.cta:focus-visible{box-shadow:0 10px 30px rgba(17,26,32,.2)}
.cta:active{transform:scale(.985)}
.cta i{font-style:normal;font-family:var(--mono);font-variation-settings:"wdth" 87,"wght" 400;transition:transform .22s ease}
.cta:hover i{transform:translateX(3px)}
.cta.light{background:var(--bone);color:#0A1620}
.cta.ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1px var(--line)}
.dark .cta.ghost{color:var(--bone);box-shadow:inset 0 0 0 1px var(--line-dark)}
.link{display:inline-block;font-family:var(--mono);font-variation-settings:"wdth" 87,"wght" 400;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink);text-decoration:none;border-bottom:1px solid rgba(17,26,32,.3);padding-bottom:3px;transition:border-color .2s}
.link:hover{border-bottom-color:var(--gold)}
.dark .link{color:var(--bone);border-bottom-color:rgba(233,231,224,.35)}

/* ---------- sections ---------- */
.sec{position:relative}
.sec.dark{background:var(--deep);color:var(--bone)}
.sec-in{position:relative;max-width:var(--maxw);margin:0 auto;padding:clamp(64px,11vh,128px) var(--pad)}
.sec.hero .sec-in{padding-top:clamp(40px,6vh,76px)}
.sec + .sec.light .sec-in{border-top:1px solid var(--line)}
.two{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(36px,6vw,92px);align-items:start}
.two>.fig{position:sticky;top:90px}
.two.flip{grid-template-columns:minmax(0,6fr) minmax(0,5fr)}
.two.flip>.copy{order:2}
.two.flip>.fig{order:1}
.side{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:clamp(36px,6vw,92px);align-items:start}
.side>.copy{position:sticky;top:90px}
.fig{display:grid;gap:16px}
.hgrid{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(30px,5vw,76px);align-items:center}
.hgrid .fig{position:static}

/* Gold surfaces carry home's painted metal on a canvas; the gradient underneath is the
   fallback. Two stay flat on purpose: the toggle's 9px state dot and the menu mark's 6px
   square are UI indicators, not the material, and at that size a dither is only noise. */
.leaf{position:absolute;inset:0;width:100%;height:100%;display:block;image-rendering:pixelated}


/* ---------- reveal ---------- */
.rv{opacity:0;transform:translateY(14px);transition:opacity .8s ease,transform .8s cubic-bezier(.3,.82,.3,1)}
.rv.on{opacity:1;transform:none}

/* ---------- terms strip, founder, faq ---------- */
.terms{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));max-width:760px;margin-top:clamp(24px,4vh,40px)}
.terms.three{grid-template-columns:repeat(3,minmax(0,1fr));max-width:960px}
.terms.three .term b{font-size:clamp(18px,1.65vw,22px)}
.terms.one{grid-template-columns:minmax(0,320px)}
.term{background:transparent;box-shadow:inset 0 0 0 1px var(--line);padding:clamp(20px,2.6vw,30px)}
.term + .term{margin-left:-1px}
.term em{font-style:normal;display:block;margin-bottom:9px;font-family:var(--mono);font-variation-settings:"wdth" 87,"wght" 400;font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--slate)}
.term b{display:block;font-family:var(--display);font-variation-settings:"opsz" 60,"wght" 600;font-size:clamp(20px,2.1vw,27px);line-height:1.1;color:var(--ink)}
.term span{display:block;margin-top:8px;font-size:13px;color:var(--body)}
.dark .term{box-shadow:inset 0 0 0 1px var(--line-dark)}
.dark .term em{color:#7F8C99}.dark .term b{color:var(--bone)}.dark .term span{color:#A6B3B1}
.founder{margin:0 0 clamp(34px,5vh,52px);padding:0 0 0 18px;border-left:1px solid rgba(206,175,108,.55);max-width:52ch}
.founder p{margin:0 0 12px;font-family:var(--display);font-variation-settings:"opsz" 40,"wght" 400;font-size:clamp(1.05rem,1.4vw,1.35rem);line-height:1.4;color:var(--bone)}
.founder footer{display:flex;align-items:center;gap:12px;font-family:var(--mono);font-variation-settings:"wdth" 87,"wght" 400;font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:#909CA8}
.founder .avatar{position:relative;overflow:hidden;width:36px;height:36px;border-radius:50%;flex:none;background:var(--metal);box-shadow:0 0 0 1px rgba(206,175,108,.45)}
/* a plain ruled list, set like the questions */
.plain{list-style:none;margin:clamp(26px,4vh,42px) 0 0;padding:0;max-width:46ch}
.plain li{padding:19px 0;border-top:1px solid var(--line);font-family:var(--display);font-variation-settings:"opsz" 40,"wght" 600;font-size:clamp(1.15rem,1.55vw,1.4rem);line-height:1.25;color:var(--ink)}
.plain li:last-child{border-bottom:1px solid var(--line)}
.dark .plain li{border-top-color:var(--line-dark);color:var(--bone)}
.dark .plain li:last-child{border-bottom-color:var(--line-dark)}

.faq{margin:0;max-width:62ch}
.faq div{padding:22px 0;border-top:1px solid var(--line)}
.faq div:last-child{border-bottom:1px solid var(--line)}
/* the row is the control: the button fills the dt so the whole line is the hit area,
   and the answer animates from an explicit height the script measures and sets. */
.faq dt{margin:0}
.faq-q{display:flex;align-items:flex-start;gap:clamp(16px,2vw,28px);width:100%;margin:0;padding:0;min-height:44px;background:none;border:0;cursor:pointer;text-align:left;color:inherit;font:inherit}
.faq-q > span{flex:1 1 auto;font-family:var(--display);font-variation-settings:"opsz" 40,"wght" 600;font-size:clamp(1.15rem,1.55vw,1.4rem);line-height:1.25;color:var(--ink)}
.faq-q > i{flex:none;margin-top:.3em;font-style:normal;font-family:var(--mono);font-variation-settings:"wdth" 87,"wght" 400;font-size:15px;line-height:1;color:var(--slate);transition:transform .3s ease}
.faq-q[aria-expanded="true"] > i{transform:rotate(45deg)}
.faq-q:hover > span{color:var(--ink)}
.faq-q:hover > i{color:var(--ink)}
.faq dd{height:0;margin:0;overflow:hidden;transition:height .32s ease}
.faq dd > p{margin:10px 0 0;font-family:var(--display);font-variation-settings:"opsz" 40,"wght" 400;font-size:clamp(1rem,1.2vw,1.12rem);line-height:1.45;color:var(--body)}

/* ================= FIGURES ================= */

/* a field of square cells. one vocabulary, used at four scales. */
.field{--g:clamp(2px,.36vw,5px);display:grid;grid-template-columns:repeat(var(--n,12),1fr);gap:var(--g);width:100%;aspect-ratio:1}
.field i{position:relative;display:block;aspect-ratio:1;background:var(--cell);transition:background .55s ease,box-shadow .55s ease,opacity .55s ease}
.field i.dim{background:var(--cell-dim)}
.field i.hole{background:transparent;box-shadow:inset 0 0 0 1px rgba(17,26,32,.26)}
/* the cells arrive as the figure scrolls in, in reading order, quickly */
.field i{opacity:0}
.rv.on .field i,.field.lit i{opacity:1;transition-delay:calc(var(--i,0) * 3.2ms)}

/* --- figure 1 + 2: the grid with the gold cell lifted out --- */
/* the hero mark: a small dense panel with the cell already resting outside it */
.gfig.sig{padding-right:15%;max-width:520px}
.sig-panel{padding:clamp(12px,1.5vw,20px);box-shadow:inset 0 0 0 1px var(--line);background:#fff}
.sig .field{--g:clamp(1.5px,.22vw,3px)}
.gfig{position:relative;padding-right:20%}
.gfig .field{width:100%}
.gfig .chip{position:absolute;left:0;top:0;width:var(--cw,12px);height:var(--cw,12px);background:var(--metal);
  box-shadow:0 0 0 1px rgba(45,33,6,.34),4px 6px 14px rgba(70,54,16,.22);
  transform:translate(var(--tx,0px),var(--ty,0px)) scale(var(--s,1));transform-origin:0 0;
  transition:transform .85s cubic-bezier(.3,.82,.3,1),box-shadow .85s ease;z-index:2;opacity:0}
.rv.on .gfig .chip,.gfig.lit .chip{opacity:1;transition:transform .85s cubic-bezier(.3,.82,.3,1),box-shadow .85s ease,opacity .5s ease .45s}
.gfig .chip.noanim{transition:none}
.gfig.out .chip{box-shadow:0 0 0 1px rgba(45,33,6,.34),10px 14px 30px rgba(70,54,16,.26)}

/* controls + readout */
.tog{display:flex;flex-wrap:wrap;gap:8px}
.tgl{appearance:none;cursor:pointer;display:inline-flex;align-items:center;gap:9px;background:transparent;border:1px solid var(--line);border-radius:999px;padding:8px 16px 8px 11px;color:var(--slate);font-family:var(--mono);font-variation-settings:"wdth" 87,"wght" 400;font-size:10px;letter-spacing:.07em;text-transform:uppercase;transition:color .2s,border-color .2s,background .2s}
.tgl::before{content:"";width:9px;height:9px;flex:none;background:transparent;box-shadow:inset 0 0 0 1px rgba(17,26,32,.3);transition:background .25s ease,box-shadow .25s ease}
.tgl:hover{border-color:rgba(17,26,32,.28);color:var(--ink)}
.tgl[aria-pressed="true"]{color:var(--ink);border-color:rgba(17,26,32,.3);background:rgba(17,26,32,.035)}
.tgl[aria-pressed="true"]::before{background:var(--metal);box-shadow:0 0 0 1px rgba(45,33,6,.34)}
.readout{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin:0;padding:13px 0 0;border-top:1px solid var(--line);font-family:var(--mono);font-variation-settings:"wdth" 87,"wght" 400;font-size:10px;letter-spacing:.07em;text-transform:uppercase;color:var(--slate)}
.readout b{font-variation-settings:"wdth" 87,"wght" 600;font-size:15px;letter-spacing:.02em;color:var(--ink);font-variant-numeric:tabular-nums}

/* --- figure 3: one day in the index --- */
.dayfig .field i.down{background:rgba(181,83,58,.10);box-shadow:inset 0 0 0 1px rgba(181,83,58,.5)}
.dayfig .field i.down::after{content:"";position:absolute;left:100%;top:50%;width:var(--g);height:1px;background:rgba(181,83,58,.55)}
.dayfig .field i.repl{background:transparent;box-shadow:inset 0 0 0 1px rgba(17,26,32,.32)}
.daykey{display:flex;flex-wrap:wrap;gap:6px 20px;margin:0;font-family:var(--mono);font-variation-settings:"wdth" 87,"wght" 400;font-size:9.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--slate)}
.daykey span{display:inline-flex;align-items:center;gap:8px}
.daykey i{width:10px;height:10px;flex:none}
.daykey i.k-down{background:rgba(181,83,58,.10);box-shadow:inset 0 0 0 1px rgba(181,83,58,.5)}
.daykey i.k-repl{box-shadow:inset 0 0 0 1px rgba(17,26,32,.32)}

/* --- figure 4: before and after --- */
.ba{display:grid;grid-template-columns:minmax(0,1fr) clamp(60px,7.5vw,116px) minmax(0,1fr);
  grid-template-rows:auto auto;column-gap:clamp(14px,2vw,26px);align-items:start}
.ba-f{display:contents}
.ba-f:nth-of-type(1) .ba-box{grid-area:1 / 1}
.ba-f:nth-of-type(1) figcaption{grid-area:2 / 1}
.ba-f:nth-of-type(2) .ba-box{grid-area:1 / 3}
.ba-f:nth-of-type(2) figcaption{grid-area:2 / 3}
.ba-box{position:relative;aspect-ratio:1;padding:clamp(12px,1.7vw,22px);box-shadow:inset 0 0 0 1px var(--line);display:grid;place-items:center}
.ba-box .field{--g:clamp(1.5px,.2vw,3px)}
.ba-one{position:relative;display:block;width:100%;height:100%;background:var(--metal);box-shadow:0 0 0 1px rgba(45,33,6,.34),10px 14px 34px rgba(70,54,16,.24)}
.ba figcaption{margin-top:14px;max-width:26ch;font-family:var(--sans);font-size:12px;line-height:1.55;color:var(--slate)}
.ba figcaption b{display:block;font-variation-settings:"wght" 650;color:var(--ink)}
/* the span from one frame to the other, ticked once a year */
.ba-bridge{grid-area:1 / 2;align-self:center;position:relative;width:100%;height:1px;background:var(--line)}
.ba-bridge i{position:absolute;top:-3.5px;width:1px;height:8px;background:rgba(17,26,32,.4)}
.ba-bridge i:nth-child(1){left:0}.ba-bridge i:nth-child(2){left:25%}.ba-bridge i:nth-child(3){left:50%}
.ba-bridge i:nth-child(4){left:75%}.ba-bridge i:nth-child(5){right:0}
.ba > .ba-span{grid-area:2 / 2;justify-self:center}
.ba-span{margin:14px 0 0;white-space:nowrap;font-family:var(--mono);font-variation-settings:"wdth" 87,"wght" 400;font-size:9px;letter-spacing:.09em;text-transform:uppercase;color:var(--slate)}
.ba-span.phone{display:none}

/* --- figure 5: pace bars, on a navy panel like the home chart --- */
.panel{background:var(--deep);color:var(--bone);padding:clamp(22px,2.6vw,34px)}
.panel .readout{border-top-color:var(--line-dark);color:#7F8C99}
.pace{display:grid;gap:14px}
.pacehead{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between}
.pacehead em{font-style:normal;font-family:var(--mono);font-variation-settings:"wdth" 87,"wght" 400;font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:#7F8C99}
.pill{display:inline-flex;border:1px solid var(--line-dark);border-radius:999px;padding:3px}
.pill button{appearance:none;cursor:pointer;background:none;border:0;padding:8px 15px;border-radius:999px;font-family:var(--mono);font-variation-settings:"wdth" 87,"wght" 400;font-size:10px;letter-spacing:.07em;text-transform:uppercase;color:#93A0AC;transition:background .25s ease,color .25s ease}
.pill button:hover{color:var(--bone)}
.pill button[aria-pressed="true"]{background:var(--bone);color:#0A1620}
.plot{position:relative;display:flex;align-items:flex-end;justify-content:center;gap:clamp(10px,1.8vw,26px);height:clamp(190px,24vw,268px);border-bottom:1px solid var(--line-dark);padding-bottom:0}
.pcol{position:relative;flex:1 1 0;max-width:120px;height:100%}
/* the plan's whole tax bill beside the bill for selling in one year, total against total */
.pcol.tot{margin-left:clamp(24px,3.6vw,52px)}
.pcol.tot::before{content:"";position:absolute;left:calc(-1 * clamp(12px,1.8vw,26px));top:0;bottom:0;width:1px;background:var(--line-dark)}
.ptick{position:absolute;left:0;right:0;bottom:55.8%;height:0;border-top:1px dashed rgba(224,138,113,.9);z-index:4;opacity:0;transition:opacity .6s ease .55s}
.pace.go .ptick{opacity:1}
.ptick em{position:absolute;right:0;bottom:6px;font-style:normal;white-space:nowrap;font-family:var(--mono);font-variation-settings:"wdth" 87,"wght" 400;font-size:8.5px;letter-spacing:.09em;text-transform:uppercase;color:#E08A71}
.pcol i{position:absolute;left:0;right:0;bottom:0;display:block;transform-origin:50% 100%;transform:scaleY(0);transition:transform .9s cubic-bezier(.3,.82,.3,1) var(--pd,0s)}
.pace.go .pcol i{transform:none}
.pcol .p-sold{background:var(--bone);height:var(--h-sold,100%);z-index:1}
.pcol .p-gain{background:#4E6C85;height:var(--h-gain,62%);z-index:2}
.pcol .p-tax{background:var(--rust);height:var(--h-tax,10%);z-index:3}
.paceyrs{display:flex;justify-content:center;gap:clamp(10px,1.8vw,26px);margin:10px 0 0}
.paceyrs span.tot{margin-left:clamp(24px,3.6vw,52px)}
.paceyrs span{flex:1 1 0;max-width:120px;text-align:center;font-family:var(--mono);font-variation-settings:"wdth" 87,"wght" 400;font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:#7F8C99}
.pkey{display:flex;flex-wrap:wrap;gap:6px 18px;margin:0;font-family:var(--mono);font-variation-settings:"wdth" 87,"wght" 400;font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;color:#7F8C99}
.pkey span{display:inline-flex;align-items:center;gap:8px}
.pkey i{width:14px;height:9px;flex:none}
.pkey i.k-sold{background:var(--bone)}
.pkey i.k-gain{background:#4E6C85}
.pkey i.k-tax{background:var(--rust)}
.panel .cap{color:#7F8C99;margin-top:4px}

/* --- figure 6: the document cards --- */
/* the page's white surfaces are hairline only; the menu panel keeps its radius and drop
   shadow because it is chrome floating over the page, not a surface sitting on it */
.doc{margin:0;max-width:364px;background:#fff;box-shadow:0 0 0 1px var(--line);padding:clamp(22px,2.4vw,30px)}
#losses .doc{max-width:420px}
#losses .netfig{grid-template-columns:136px minmax(0,1fr)}
#losses .netcap{width:136px}
.doc-t{margin:0;font-family:var(--display);font-variation-settings:"opsz" 24,"wght" 600;font-size:clamp(1.05rem,1.3vw,1.24rem);line-height:1.2;color:var(--ink)}
.doc-r{width:34px;height:2px;margin:12px 0 0;background:var(--gold)}
.doc ul{list-style:none;margin:clamp(18px,2vw,26px) 0 0;padding:0}
.doc li{padding:14px 0;border-top:1px solid var(--line);font-family:var(--mono);font-variation-settings:"wdth" 87,"wght" 400;font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--slate);line-height:1.7}
.doc li:last-child{border-bottom:1px solid var(--line)}

/* the tax report, drawn: harvested losses stacking against the gain, the net is what is left */
.netfig{display:grid;grid-template-columns:112px minmax(0,1fr);column-gap:clamp(14px,1.6vw,22px);margin:clamp(20px,2.4vw,28px) 0 0}
.netbar{position:relative;height:clamp(180px,17vw,214px);background:#8C9AA8;box-shadow:inset 0 0 0 1px rgba(17,26,32,.14)}
.nb-loss{position:absolute;left:0;right:0;bottom:0;height:var(--loss,58%);display:flex;flex-direction:column;gap:0}
.nb-loss i{flex:1;display:block;background:var(--rust);box-shadow:inset 0 1px 0 rgba(255,244,238,.26);transform:scaleY(0);transform-origin:50% 100%;transition:transform .55s cubic-bezier(.3,.82,.3,1) var(--nd,0s)}
.rv.on .nb-loss i,.doc.lit .nb-loss i{transform:none}
.netnote{position:relative;height:clamp(180px,17vw,214px)}
.netnote span{position:absolute;left:0;right:0;display:flex;align-items:center;padding-left:14px;border-left:1px solid var(--line);
  font-family:var(--mono);font-variation-settings:"wdth" 87,"wght" 400;font-size:9.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--slate)}
.netnote .a-net{top:0;height:var(--net,42%)}
.netnote .a-net{color:var(--ink);font-variation-settings:"wdth" 87,"wght" 600}
.netnote .a-loss{top:var(--net,42%);bottom:0;border-left-color:rgba(181,83,58,.5);color:#8A4A32}
.netcap{margin:10px 0 0;width:112px;text-align:center;font-family:var(--mono);font-variation-settings:"wdth" 87,"wght" 400;font-size:9.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--slate)}

/* ============ PRODUCT UI KIT ============
   One vocabulary shared by home and the product pages: the step timeline, and the
   mock interface cards that sit beside it. The cards are drawn in HTML on a bone
   tinted panel, sans at small sizes, mono for every number, one hairline, one
   radius. They are drawings of the product, not screenshots, and each one is
   captioned as illustrative. Colour: a muted categorical set taken from the site's
   own palette, so a sector and the holdings inside it always agree. Gold is never
   in that set; gold only ever means your position. */
:root{
  --ui-panel:#EAEEF5; --ui-face:#fff; --ui-line:rgba(17,26,32,.11);
  --ui-hair:rgba(17,26,32,.07); --ui-ink:#111A20; --ui-mute:#6B7885; --ui-r:10px;
  --c-navy:#1D3A52; --c-slate:#7E8C99; --c-sage:#6E8072;
  --c-teal:#46707A; --c-green:#2F7259; --c-plum:#7A6B78; --c-rust:#B5533A;
}

/* ---- the timeline ---- */
.tl{display:grid; grid-template-columns:minmax(0,1fr) 1px minmax(0,1fr);
    column-gap:clamp(26px,3.6vw,54px); align-items:start; margin-top:clamp(34px,5vh,58px)}
.tl-rail{grid-column:2; grid-row:1; align-self:stretch; background:var(--ui-line)}
.tl-vis{grid-column:1; grid-row:1; position:sticky; top:calc(60px + 24px)}
.tl-stack{position:relative}
.tl-steps{grid-column:3; grid-row:1; list-style:none; margin:0; padding:0 0 clamp(40px,12vh,140px)}
/* each step owns a beat of scroll, so the card it belongs to stays paired with it all
   the way to the last one; the node rides with the number rather than the box */
.tstep{position:relative; min-height:520px; padding:0; display:flex; flex-direction:column; justify-content:center}
.tstep em::before{content:""; position:absolute; top:3px;
  left:calc(-1 * clamp(26px,3.6vw,54px) - 5.5px); width:10px; height:10px;
  background:var(--paper); box-shadow:inset 0 0 0 1px rgba(17,26,32,.28);
  transition:background .35s ease, box-shadow .35s ease}
.tstep.on em::before{background:linear-gradient(135deg,#E3CB8C,#B4924E);
  box-shadow:0 0 0 1px rgba(45,33,6,.38), 2px 3px 7px rgba(70,54,16,.26)}
.tstep em{position:relative; display:block; font-style:normal; font-family:var(--mono);
  font-variation-settings:"wdth" 87,"wght" 400; font-size:10px; letter-spacing:.17em;
  color:#8C98A5; transition:color .3s ease}
.tstep.on em{color:#8A6E2E}
.tstep b{display:block; margin-top:11px; max-width:18ch; text-wrap:balance; font-family:var(--display);
  font-variation-settings:"opsz" 40,"wght" 600; font-size:clamp(1.46rem,2.13vw,2.02rem);
  line-height:1.12; letter-spacing:-.006em; color:var(--ui-ink)}
.tstep p{margin:10px 0 0; max-width:36ch; font-family:var(--display);
  font-variation-settings:"opsz" 40,"wght" 400; font-size:clamp(1rem,1.18vw,1.14rem);
  line-height:1.45; color:#3F4B57}

/* ---- the mock interface card ---- */
.uic{background:var(--ui-panel); border:1px solid var(--ui-line); border-radius:14px;
     box-shadow:0 1px 2px rgba(17,26,32,.04), 0 26px 60px -34px rgba(20,34,52,.34);
     padding:clamp(20px,2.2vw,30px); display:flex; flex-direction:column;
     opacity:0; transform:translateY(8px); transition:opacity .45s ease, transform .45s ease;
     pointer-events:none}
.uic.on{opacity:1; transform:none; pointer-events:auto}
/* the cards are stacked in one grid cell, so the panel is always as tall as the tallest
   of them and nothing jumps as the reader scrolls from one step to the next */
.tl-stack{display:grid; min-height:480px}
.tl-stack > .uic{grid-area:1 / 1}
.uic h4{margin:0 0 5px; font-family:var(--sans); font-variation-settings:"wght" 620;
        font-size:14.5px; letter-spacing:-.004em; color:var(--ui-ink)}
.uic .sub{margin:0 0 20px; font-family:var(--mono); font-variation-settings:"wdth" 87,"wght" 400;
          font-size:9.5px; letter-spacing:.12em; text-transform:uppercase; color:#8C98A5}
.uic .cap{margin:auto 0 0; padding-top:18px; font-family:var(--sans); font-size:11.5px; line-height:1.5; color:var(--ui-mute)}

/* a face: the white sheet a list or a field sits on */
/* the body holds everything between the header and the caption, and its last white face
   grows to fill the frame, so the interface reads as a screenshot rather than a small card
   floating in a large panel. the header never moves between beats. */
.uic-body{flex:1; display:flex; flex-direction:column; min-height:0}
/* the face that grows is the interface surface. a card with only a few rows caps its face
   short of the frame and gives its rows more height, so it reads as a small screen rather
   than a long list that failed to load. */
.uic-body > *:last-child{flex:1}
.uic-body.stretch > *:last-child{display:flex; flex-direction:column}
.uic-body.stretch .pick{flex:1; font-size:16px}
.uic-body.stretch > *:last-child > .row{flex:1}
.face{background:var(--ui-face); border:1px solid var(--ui-line); border-radius:var(--ui-r);
      box-shadow:0 1px 2px rgba(17,26,32,.05); overflow:hidden}
.face + .face{margin-top:8px}

/* row: the workhorse. mark, label, value */
.row{display:flex; align-items:center; gap:13px; padding:16px; font-family:var(--sans); font-size:15px; color:var(--ui-ink)}
.row + .row{border-top:1px solid var(--ui-hair)}
.row .nm{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.row .nm small{display:block; font-size:12px; color:var(--ui-mute)}
.row .nm-tag{display:flex; align-items:center; gap:10px; overflow:visible}
.row .tag{display:inline-flex; align-items:center; padding:3px 8px; border-radius:6px; flex:none;
     background:rgba(29,58,82,.10); color:#2E4B66;
     font-family:var(--mono); font-variation-settings:"wdth" 87,"wght" 500;
     font-size:9px; letter-spacing:.08em; text-transform:uppercase}
.row .num{margin-left:auto; font-family:var(--mono); font-variation-settings:"wdth" 87,"wght" 400;
          font-size:13px; letter-spacing:0; color:var(--ui-ink); font-variant-numeric:tabular-nums; white-space:nowrap}
/* --up / --down, not .pos / .neg: home's hero already owns .pos and would absolutely
   position these values off the row. same reason .prog .bar became .prog-bar. */
.row .num--down{color:var(--c-rust)}
.row .num--up{color:var(--c-sage)}
.row .num.mute{color:var(--ui-mute)}
.row .num.gain{color:var(--c-green)}
.row.out{opacity:.5}
.row.you{background:rgba(206,175,108,.13)}

/* the brand mark tile */
.bm{width:30px; height:30px; flex:none; border-radius:6px; background:#fff;
    box-shadow:inset 0 0 0 1px var(--ui-hair); display:grid; place-items:center; overflow:hidden}
.bm img{width:20px; height:20px; object-fit:contain; display:block}
/* no square symbol in the asset: a two letter monogram on the face, never an invented mark */
.bm.mg{font-family:var(--mono); font-variation-settings:"wdth" 75,"wght" 500;
       font-size:11px; letter-spacing:.02em; color:var(--ui-mute)}

/* choice rows: a picker */
.pick{display:flex; align-items:center; gap:13px; padding:17px 16px; font-family:var(--sans); font-size:15px; color:var(--ui-ink); cursor:default}
.pick + .pick{border-top:1px solid var(--ui-hair)}
.pick i{width:17px; height:17px; flex:none; border-radius:50%; box-shadow:inset 0 0 0 1px rgba(17,26,32,.26)}
.pick.sel i{background:radial-gradient(circle at 50% 50%, #fff 0 3.4px, var(--c-navy) 3.8px 100%); box-shadow:none}
.pick.sel{font-variation-settings:"wght" 600}
.pick .num{margin-left:auto}

/* toggles */
.tg{width:34px; height:20px; flex:none; border-radius:999px; background:rgba(17,26,32,.13); position:relative; transition:background .3s ease}
.tg::after{content:""; position:absolute; top:2.5px; left:2.5px; width:15px; height:15px; border-radius:50%; background:#fff;
           box-shadow:0 1px 2px rgba(17,26,32,.3); transition:transform .3s ease}
.tg.on{background:var(--c-navy)}
.tg.on::after{transform:translateX(14px)}
.tg.gold.on{background:linear-gradient(135deg,#C8AC6A,#9C7B3C)}

/* a logo wall, sitting on a white surface so the surface is what grows in the frame */
.face.pad{padding:14px; display:flex; flex-direction:column}
.face.pad > .wall{flex:1}
.wall{display:grid; grid-template-columns:repeat(3,1fr); gap:8px; align-content:space-evenly}
.wall span{height:72px; border-radius:var(--ui-r); background:var(--ui-face);
           border:1px solid var(--ui-line); display:grid; place-items:center; padding:9px;
           font-family:var(--mono); font-variation-settings:"wdth" 87,"wght" 700;
           font-size:18px; letter-spacing:.04em; color:#1B2732}
.wall img{max-width:38px; max-height:22px; object-fit:contain; display:block}
/* a square app style mark carries its own tile, so it is given the height a wordmark
   crop cannot use; that is what keeps all six at one optical mass */
.wall .sym img{max-width:44px; max-height:44px}
/* the mark supplied for this brand is the white lockup, so it is inked to read on the tile */
.wall .inv img,.bm .inv{filter:brightness(0); opacity:.86}

/* a stacked bar and its key */
.stack{display:flex; height:20px; border-radius:4px; overflow:hidden; background:var(--ui-face); box-shadow:inset 0 0 0 1px var(--ui-line)}
.stack i{display:block; transition:flex-grow .5s ease}
.seg-navy{background:var(--c-navy)} .seg-slate{background:var(--c-slate)} .seg-sage{background:var(--c-sage)}
.seg-teal{background:var(--c-teal)} .seg-plum{background:var(--c-plum)} .seg-rust{background:var(--c-rust)}
.sw{width:11px; height:11px; flex:none; border-radius:3px}

/* a value field */
.vfield{padding:17px 16px; display:flex; flex-direction:column; align-items:flex-start; gap:7px}
.vfield b{font-family:var(--display); font-variation-settings:"opsz" 40,"wght" 600; font-size:32px; color:var(--ui-ink); line-height:1}
.vfield span{font-family:var(--mono); font-size:11px; letter-spacing:.09em; text-transform:uppercase; color:var(--ui-mute)}
.caret{margin-left:auto; font-family:var(--mono); font-size:10px; color:var(--ui-mute)}

/* a progress row */
.prog{padding:15px 16px}
.prog + .prog{border-top:1px solid var(--ui-hair)}
.prog .top{display:flex; align-items:center; gap:13px; font-family:var(--sans); font-size:15px; color:var(--ui-ink)}
.prog .top .num{margin-left:auto; font-family:var(--mono); font-variation-settings:"wdth" 87,"wght" 400;
                font-size:13px; color:var(--ui-ink); font-variant-numeric:tabular-nums}
.prog-bar{margin-top:10px; height:6px; border-radius:3px; background:rgba(17,26,32,.09); overflow:hidden}
.prog-bar i{display:block; height:100%; background:var(--c-navy); border-radius:3px; width:var(--p,20%)}

/* the year rail */
.rail{position:relative; height:1px; margin:20px 8px 0; background:var(--ui-line)}
.rail i{position:absolute; top:-3.5px; width:1px; height:8px; background:rgba(17,26,32,.3)}
.rail i:nth-child(1){left:0} .rail i:nth-child(2){left:25%} .rail i:nth-child(3){left:50%}
.rail i:nth-child(4){left:75%} .rail i:nth-child(5){right:0}
.raillab{display:flex; justify-content:space-between; margin:11px 8px 0;
         font-family:var(--mono); font-variation-settings:"wdth" 87,"wght" 400; font-size:10px;
         letter-spacing:.08em; text-transform:uppercase; color:var(--ui-mute)}

/* a document thumbnail */
.sheet-m{padding:16px; display:grid; gap:8px}
.sheet-m i{display:block; height:7px; border-radius:2px; background:rgba(17,26,32,.08); width:var(--w,100%)}
.sheet-m i.ui-hd{height:9px; background:rgba(17,26,32,.17)}

/* a note inside a card */
.uic .note{margin:14px 0 0; font-family:var(--sans); font-size:11.5px; line-height:1.55; color:var(--ui-mute)}

/* ---- the holdings card plays its one move: your stock leaving the index ----
   the row arrives switched on and ordinary, then the toggle slides off, the row
   greys and its label names it. replays whenever the step is entered again. */
.uic .row.pull{transition:opacity .5s ease}
.uic .row.pull .nm{transition:none}
.uic .row.pull .tag{opacity:0; transition:opacity .45s ease .12s}
.uic .row.pull .tg{transition:background .45s ease}
.uic .row.pull .tg::after{transition:transform .45s ease}
.uic.pulled .row.pull{opacity:.72}
.uic.pulled .row.pull .tag{opacity:1}
.uic.pulled .row.pull .tg{background:rgba(17,26,32,.13)}
.uic.pulled .row.pull .tg::after{transform:none}

/* ---- the plan chart: two lines on one plot, drawn in on arrival ---- */
.chart{display:block; width:100%; height:auto; overflow:visible}
.chart .grid{stroke:rgba(17,26,32,.10); stroke-width:1}
.chart .tick{stroke:rgba(17,26,32,.22); stroke-width:1}
.chart .ln{fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round;
           stroke-dasharray:1; stroke-dashoffset:1; transition:stroke-dashoffset 1s ease .1s}
.uic.drawn .chart .ln{stroke-dashoffset:0}
.chart .ln-stock{stroke:#BE9C50}
.chart .ln-tax{stroke:var(--c-rust)}
.chart text{font-family:var(--mono); font-size:7px; letter-spacing:.04em; fill:var(--ui-mute)}
.chartface{display:flex; flex-direction:column; justify-content:center}
.chartkey{display:flex; flex-wrap:wrap; gap:6px 18px; margin:14px 0 0;
          font-family:var(--mono); font-variation-settings:"wdth" 87,"wght" 400;
          font-size:9.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--ui-mute)}
.chartkey span{display:inline-flex; align-items:center; gap:8px}
.chartkey i{width:14px; height:2px; flex:none; border-radius:2px}
.chartkey i.k-stock{background:#BE9C50}
.chartkey i.k-tax{background:var(--c-rust)}

/* a figure that is a number first, set in the face the numbers are set in */
.vfield.mono b{font-family:var(--mono); font-variation-settings:"wdth" 87,"wght" 600;
               font-size:27px; letter-spacing:.01em; font-variant-numeric:tabular-nums}

/* ---- timeline on a phone: the card sits above the step it belongs to ---- */
@media (max-width:1000px){
  .tl{display:flex; flex-direction:column; gap:0; margin-top:clamp(26px,4vh,40px)}
  .tl-rail{display:none}
  .tl-vis,.tl-stack,.tl-steps{display:contents}
  .uic{opacity:1; transform:none; pointer-events:auto; margin-top:16px;
       box-shadow:0 1px 2px rgba(17,26,32,.04), 0 14px 34px -22px rgba(20,34,52,.30)}
  .tstep{margin-top:clamp(26px,4vh,40px)}
  .tl-stack > .uic{align-self:stretch}
  .tstep{min-height:0; padding:16px 0 0; display:block}
  .tstep em::before{display:none}
  .tstep:first-child{padding-top:16px}
  .tstep b,.tstep p{max-width:100%}
  .tl-steps .tstep:nth-child(1){order:1} .tl-stack .uic:nth-child(1){order:2}
  .tl-steps .tstep:nth-child(2){order:3} .tl-stack .uic:nth-child(2){order:4}
  .tl-steps .tstep:nth-child(3){order:5} .tl-stack .uic:nth-child(3){order:6}
  .tl-steps .tstep:nth-child(4){order:7} .tl-stack .uic:nth-child(4){order:8}
  .tl-steps .tstep:nth-child(5){order:9} .tl-stack .uic:nth-child(5){order:10}
}

/* ---- Built in: six cards, two columns, never three ---- */
.feat{display:grid; grid-template-columns:repeat(12,minmax(0,1fr));
      column-gap:clamp(20px,2.4vw,34px); row-gap:clamp(40px,6vh,76px);
      margin-top:clamp(32px,5vh,56px)}
.feat .c7{grid-column:span 7}
.feat .c5{grid-column:span 5}
.feat .c12{grid-column:span 12; display:grid; grid-template-columns:minmax(0,5fr) minmax(0,6fr);
           column-gap:clamp(26px,4vw,72px); align-items:center}
.feat .c12 .uic{margin-top:0}
.feat article{display:flex; flex-direction:column}
.feat .eyebrow{margin:0 0 12px}
/* classes, not bare types: a card inside a feature must keep the card's own type scale */
.feat .fh{margin:0; max-width:16ch; text-wrap:balance; font-family:var(--display);
         font-variation-settings:"opsz" 40,"wght" 600; font-size:clamp(1.3rem,1.8vw,1.7rem);
         line-height:1.14; letter-spacing:-.006em; color:var(--ui-ink)}
.feat .ftxt{margin:11px 0 0; max-width:40ch; font-family:var(--display);
        font-variation-settings:"opsz" 40,"wght" 400; font-size:clamp(1rem,1.15vw,1.12rem);
        line-height:1.45; color:#3F4B57}
/* the mock runs past the column's right edge: a screenshot of something larger,
   not a diagram boxed inside the text measure. the section clips it. */
.feat .uic{opacity:1; transform:none; pointer-events:auto; margin-top:clamp(20px,2.4vh,28px); margin-right:-40px}
@media (max-width:820px){
  .feat{grid-template-columns:minmax(0,1fr); row-gap:clamp(34px,5vh,52px)}
  .feat .c7,.feat .c5,.feat .c12{grid-column:auto}
  .feat .c12{display:block}
  .feat .uic{margin-right:0}
  .feat .c12 .uic{margin-top:clamp(20px,2.4vh,28px)}
}

/* ---- What you get: two hairline boxes on the paper ---- */
.pair{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(20px,2.6vw,36px);
      margin-top:clamp(30px,4.5vh,52px)}
.pbox{border:1px solid var(--ui-line); padding:clamp(22px,2.6vw,34px); display:flex; flex-direction:column}
.pbox .art{margin-bottom:clamp(22px,2.6vw,32px); min-height:290px; display:grid; place-items:center}
.pbox h4{margin:0; font-family:var(--display); font-variation-settings:"opsz" 40,"wght" 600;
         font-size:clamp(1.35rem,1.9vw,1.8rem); line-height:1.14; color:var(--ui-ink)}
.pbox p{margin:11px 0 0; max-width:34ch; font-family:var(--display);
        font-variation-settings:"opsz" 40,"wght" 400; font-size:clamp(1rem,1.15vw,1.12rem);
        line-height:1.45; color:#3F4B57}
.pbox .link{margin-top:auto; padding-top:clamp(18px,2.4vh,26px)}
@media (max-width:820px){ .pair{grid-template-columns:minmax(0,1fr)} }

.featcap{margin:clamp(24px,3.5vh,38px) 0 0; font-family:var(--sans); font-size:12px; color:var(--ui-mute)}

/* ---- a ruled three-row list, set like the questions ---- */
.rule3{margin:clamp(26px,4vh,44px) 0 0; padding:0; list-style:none}
.rule3 li{display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:clamp(20px,4vw,56px);
          padding:24px 0; border-top:1px solid var(--ui-line)}
.rule3 li:last-child{border-bottom:1px solid var(--ui-line)}
.rule3 b{font-family:var(--display); font-variation-settings:"opsz" 40,"wght" 600;
         font-size:clamp(1.15rem,1.5vw,1.38rem); line-height:1.22; color:var(--ui-ink)}
.rule3 span{font-family:var(--display); font-variation-settings:"opsz" 40,"wght" 400;
            font-size:clamp(1rem,1.18vw,1.12rem); line-height:1.45; color:#3F4B57}
@media (max-width:820px){ .rule3 li{grid-template-columns:minmax(0,1fr); gap:8px} }

/* ---------- footer ---------- */
.legal{background:var(--deep);color:var(--bone)}
.legal-in{max-width:min(var(--maxw),1180px);margin:0 auto;padding:40px var(--pad) 46px}
.legal-links{display:flex;flex-wrap:wrap;gap:8px 22px;margin:0 0 20px;font-family:var(--mono);font-variation-settings:"wdth" 87,"wght" 400;font-size:10px;letter-spacing:.08em;text-transform:uppercase}
.legal-links a{color:#A6B3B1;text-decoration:none;border-bottom:1px solid rgba(233,231,224,.18);padding-bottom:2px}
.legal-links a:hover{color:var(--bone);border-bottom-color:var(--bone)}
.legal-in p{margin:0 0 10px;font-size:11px;line-height:1.6;color:#7A8886}
.mob-login,.mob-pricing{display:none}

/* ---------- breakpoints ---------- */
@media (max-width:1100px){
  .two,.side,.tl,.hgrid{grid-template-columns:minmax(0,1fr)}
  .hgrid .fig{max-width:460px}
  .two.flip>.copy{order:1}.two.flip>.fig{order:2}
  .side>.copy{position:static}
  .two>.fig{order:2}.two>.copy{order:1}
  .terms,.terms.three{grid-template-columns:minmax(0,1fr)}
  .term + .term{margin-left:0;margin-top:-1px}
  .tl-vis{position:sticky;top:60px;z-index:1;background:var(--paper);padding-bottom:14px}
  .tl-stack{max-width:340px;margin-inline:auto}
  .tl-steps{padding-top:6px}
}
@media (max-width:700px){
  h1{max-width:100%;font-size:clamp(2rem,8.6vw,3rem);font-variation-settings:"opsz" 16,"wght" 700;letter-spacing:.002em}
  h2,h3.head{max-width:100%;font-size:clamp(1.75rem,7.2vw,2.3rem);line-height:1.09;letter-spacing:.002em;font-variation-settings:"opsz" 16,"wght" 700}
  .lede,.body,.faq dd > p,.tstep span,.founder p{font-variation-settings:"opsz" 16,"wght" 500}
  .lede{font-size:1.14rem}.body{font-size:1.04rem}
  .tstep b,.faq-q > span,.doc-t{font-variation-settings:"opsz" 16,"wght" 700}
  .term b{font-size:1.5rem;font-variation-settings:"opsz" 16,"wght" 700}
  .navmark{font-variation-settings:"opsz" 14,"wght" 700}
  .ctas{flex-direction:column;align-items:stretch}
  .cta{display:flex;justify-content:center;width:100%;padding:15px 24px;font-size:12.5px}
  .menu-panel{position:fixed;left:var(--pad);right:var(--pad);top:64px;min-width:0}
  /* the bar cannot hold five items at this width, so Pricing and Log in move to the
     footer the way Log in already did, and the longer pill loses some of its padding */
  .login{display:none}
  .legal-links .mob-login,.legal-links .mob-pricing{display:inline}
  .start{padding:12px 15px;font-size:10.5px;letter-spacing:.05em}
  .ba{grid-template-columns:1fr 56px 1fr;column-gap:8px}
  .ba-box{padding:10px}
  .ba-span{display:none}
  .ba-span.phone{display:block;text-align:center;margin:16px 0 0}
  .ba figcaption{font-size:11.5px}
  .tgl,.pill button{min-height:44px}
  .netfig{grid-template-columns:92px minmax(0,1fr)}
  .netcap{width:92px}
  .netbar,.netnote{height:186px}
  .gfig{padding-right:22%}
  .gfig.sig{padding-right:23%}
  .plot{height:150px}
  .doc{max-width:none}
  .tl-stack{max-width:none}
  .readout{flex-direction:column;align-items:flex-start;gap:4px}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .rv,.field i,.gfig .chip,.pcol i,.ptick,.nb-loss i,.uic,.uic .row.pull,.uic .row.pull .tag,.uic .row.pull .tg,.chart .ln,.tstep::before,
  .rv{opacity:1;transform:none}
  .field i,.gfig .chip{opacity:1}
}

/* last word on motion: these rules are declared after the kit, so a reader who asks for
   less motion gets the end state of both moves rather than a shortened version of them. */
@media (prefers-reduced-motion:reduce){
  .uic,.uic .row.pull,.uic .row.pull .tag,.uic .row.pull .tg,
  .uic .row.pull .tg::after,.chart .ln,.tstep::before,
  .faq dd,.faq-q > i{transition:none !important}
}

/* ---------- getting started: title and lede centred over the timeline ---------- */
.how-hd{text-align:center}
.how-hd h3.head{max-width:22ch;margin-left:auto;margin-right:auto;margin-bottom:14px}
.how-hd .lede{max-width:46ch;margin-left:auto;margin-right:auto}

/* ---------- pricing ---------- */
/* the rate sentence is a shade over the 44ch measure, so balance it rather than
   leave "up." alone on a second line */
.sec.hero .lede{text-wrap:balance}
.covers{margin:clamp(24px,4vh,40px) 0 0;padding:0;list-style:none;max-width:760px}
.covers li{padding:18px 0;border-top:1px solid var(--line);font-family:var(--display);font-variation-settings:"opsz" 40,"wght" 400;font-size:clamp(1.05rem,1.3vw,1.25rem);line-height:1.45;color:var(--ink)}
.covers li:last-child{border-bottom:1px solid var(--line)}