/* ============ Twenty+One theme, dark-first world, light world, one amber ============ */ :root{ /* the dark world (default) */ --w-canvas:#08080D; --w-canvas-2:#0C0C13; --w-canvas-3:#10101A; --w-surface:#101018; --w-card1:#11111A; --w-card2:#0D0D15; --w-ink:#EDEDF2; --w-ink-strong:#F2F2F7; --w-body:#C6C6D2; --w-soft:#8E8EA0; --w-soft2:#A2A2B0; --w-hair:color-mix(in oklab,var(--w-ink) 14%,transparent); --blk-f1:#1B1B2C; --blk-f2:#12121D; --blk-t1:#232336; --blk-t2:#191926; --blk-s:#0C0C14; --blk-edge:color-mix(in oklab,var(--w-ink) 24%,transparent); --blk-label:#A6A6BA; --close-scrim-a:rgba(8,8,13,.92); --close-scrim-b:rgba(8,8,13,.6); --tue-from:#08080D; /* paper (the light half of the journey, same in both themes) */ --tp-paper:#F3F1EC; --tp-paper-surface:#FBFAF7; --tp-paper-ink:#17161D; --tp-paper-body:#3A3944; --tp-paper-soft:#565460; --tp-paper-accent:#A15E08; --tp-amber:#F2A33C; --tp-hair-dark:color-mix(in oklab,#EDEDF2 14%,transparent); --tp-hair-paper:color-mix(in oklab,#17161D 16%,transparent); /* engine tokens follow the world */ --sc-canvas:var(--w-canvas); --sc-surface:var(--w-surface); --sc-ink:var(--w-ink); --sc-ink-soft:var(--w-soft2); --sc-accent:#F2A33C; --sc-accent-ink:#1A1206; --sc-font-display:"Archivo",system-ui,sans-serif; --sc-font-text:"Instrument Sans",system-ui,sans-serif; --sc-font-mono:"IBM Plex Mono",ui-monospace,monospace; /* Public type roles: pages use roles, never one-off paragraph sizes. */ --tp-type-lede:var(--sc-t-lg); --tp-type-body:clamp(1.0625rem,1rem + .3vw,1.25rem); --tp-type-question:clamp(1.05rem,1rem + .3vw,1.18rem); --tp-type-small:.9rem; --tp-type-label:.62rem; } html[data-tptheme="dark"]{ --tp-paper:#08080D; --tp-paper-surface:#101018; --tp-paper-ink:#EDEDF2; --tp-paper-body:#C6C6D2; --tp-paper-soft:#A2A2B0; --tp-paper-accent:#F2A33C; --tp-hair-paper:color-mix(in oklab,#EDEDF2 14%,transparent); color-scheme:dark; } html[data-tptheme="light"]{ --w-canvas:#EEECE6; --w-canvas-2:#EAE7E0; --w-canvas-3:#E4E1D9; --w-surface:#FBFAF7; --w-card1:#FFFFFF; --w-card2:#F6F4EE; --w-ink:#17161D; --w-ink-strong:#0B0A10; --w-body:#3A3944; --w-soft:#6A6875; --w-soft2:#565460; --blk-f1:#FFFFFF; --blk-f2:#EFEDE7; --blk-t1:#F8F6F0; --blk-t2:#E7E4DC; --blk-s:#D9D5CC; --blk-edge:color-mix(in oklab,#17161D 32%,transparent); --blk-label:#565460; --close-scrim-a:rgba(238,236,230,.93); --close-scrim-b:rgba(238,236,230,.62); --tue-from:#E2DED6; color-scheme:light; } body{font-size:var(--tp-type-body)} @media (prefers-color-scheme: light){ html:not([data-tptheme="dark"]):not([data-tptheme="light"]){ --w-canvas:#EEECE6; --w-canvas-2:#EAE7E0; --w-canvas-3:#E4E1D9; --w-surface:#FBFAF7; --w-card1:#FFFFFF; --w-card2:#F6F4EE; --w-ink:#17161D; --w-ink-strong:#0B0A10; --w-body:#3A3944; --w-soft:#6A6875; --w-soft2:#565460; --blk-f1:#FFFFFF; --blk-f2:#EFEDE7; --blk-t1:#F8F6F0; --blk-t2:#E7E4DC; --blk-s:#D9D5CC; --blk-edge:color-mix(in oklab,#17161D 32%,transparent); --blk-label:#565460; --close-scrim-a:rgba(238,236,230,.93); --close-scrim-b:rgba(238,236,230,.62); --tue-from:#E2DED6; } } html{scroll-behavior:smooth} @media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}} /* language gate, set on before mount */ html[lang="nl"] .Len{display:none!important} html[lang="en"] .Lnl{display:none!important} .tp-sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important} .tp-skip{position:fixed;z-index:100;top:.75rem;left:.75rem;transform:translateY(-180%);padding:.72rem 1rem; border-radius:10px;background:var(--tp-amber);color:#1A1206;font-weight:600;text-decoration:none; box-shadow:0 8px 28px rgba(0,0,0,.28);transition:transform 160ms var(--sc-ease-out)} .tp-skip:focus{transform:none;outline:3px solid #EDEDF2;outline-offset:3px} /* ============ chrome (the pill stays dark in both worlds) ============ */ .tp-bar{position:fixed;top:14px;left:50%;transform:translateX(-50%);z-index:60; display:flex;align-items:center;gap:1rem;padding:.55rem .6rem .55rem 1.05rem; background:color-mix(in srgb,#0B0B12 86%,transparent); border:1px solid var(--tp-hair-dark);border-radius:999px; backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px); box-shadow:0 10px 30px -12px rgba(4,4,10,.6);} .tp-mark{font-family:var(--sc-font-display);font-weight:600;font-size:1.02rem; letter-spacing:-0.01em;color:#EDEDF2;text-decoration:none;white-space:nowrap;display:inline-flex;align-items:center;gap:.06em} .tp-mark .plus{display:inline-flex;align-items:center;justify-content:center;inline-size:.92em;block-size:.92em;flex:none;line-height:1} .tp-plusfig{display:block} .tp-mark .plus{color:var(--tp-amber);font-weight:700} /* POPPETJE:START styles (delete with the experiment) */ .tp-plusfig{width:.92em;height:.92em;vertical-align:-.12em;fill:none;stroke:var(--tp-amber);stroke-width:3;stroke-linecap:round} .tp-plusfig .pf-person circle{fill:var(--tp-amber);stroke:none} .tp-plusfig g{transition:opacity 1.25s cubic-bezier(.16,1,.3,1),transform 1.25s cubic-bezier(.16,1,.3,1);transform-origin:center} .tp-plusfig .pf-person{opacity:0;transform:scale(.6)} html.tp-person .tp-plusfig .pf-plus{opacity:0;transform:rotate(90deg) scale(.6)} html.tp-person .tp-plusfig .pf-person{opacity:1;transform:none} .tp-fig-inline{width:.85em;height:.85em;vertical-align:-.1em;fill:none;stroke:var(--tp-amber);stroke-width:2.6;stroke-linecap:round} .tp-fig-inline circle{fill:var(--tp-amber);stroke:none} @media(prefers-reduced-motion:reduce){.tp-plusfig g{transition:none}} /* POPPETJE:END styles */ /* section rail: a quiet chapter index in the pill (the world stays one shot, you just get a lift) */ /* the pill centred via left:50% could only ever be 50vw wide; auto margins give it the whole viewport */ .tp-bar{left:0;right:0;transform:none;width:max-content;margin-inline:auto;max-width:calc(100vw - 24px)} .tp-nav{display:flex;align-items:center;gap:.1rem;min-width:0;flex:0 1 auto; overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;-ms-overflow-style:none} .tp-nav::-webkit-scrollbar{display:none} .tp-nav.is-scrollable{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 12px,#000 calc(100% - 12px),transparent 100%); mask-image:linear-gradient(90deg,transparent 0,#000 12px,#000 calc(100% - 12px),transparent 100%)} .tp-nav a{position:relative;font-family:var(--sc-font-text);font-size:.9rem;font-weight:500; color:#A2A2B0;text-decoration:none;white-space:nowrap;padding:.4rem .5rem .46rem;border-radius:999px; transition:color 140ms var(--sc-ease-out)} .tp-nav a:hover{color:#EDEDF2} .tp-nav a:focus-visible{outline:2px solid var(--tp-amber);outline-offset:-2px} .tp-nav a::after{content:"";position:absolute;left:.5rem;right:.5rem;bottom:.16rem;height:1.5px;border-radius:2px; background:var(--tp-amber);transform:scaleX(0);transition:transform 220ms var(--sc-ease-out)} .tp-nav a[aria-current="true"],.tp-nav a[aria-current="page"]{color:#EDEDF2} .tp-nav a[aria-current="true"]::after,.tp-nav a[aria-current="page"]::after{transform:scaleX(1)} .tp-nav a.tp-nav-page-first{margin-left:.55rem;padding-left:1rem} .tp-nav a.tp-nav-page-first::before{content:"";position:absolute;left:.08rem;top:50%;width:1px;height:1.15rem; transform:translateY(-50%);background:var(--tp-hair-dark)} @media(prefers-reduced-motion:reduce){.tp-nav a,.tp-nav a::after{transition:none}} /* only the rail may give up room; without this the squeeze eats the wordmark's figure */ .tp-mark,.tp-lang,.tp-theme,.tp-bar .tp-cta{flex:none} .tp-plusfig{flex:none} /* burger: hidden while the rail fits inline, the whole menu once it does not */ .tp-burger{display:none;order:9;place-items:center;align-content:center;width:2rem;height:2rem;padding:0;cursor:pointer; background:none;border:1px solid var(--tp-hair-dark);border-radius:999px;color:#A2A2B0} .tp-burger:hover{color:#EDEDF2} .tp-burger:focus-visible{outline:2px solid var(--tp-amber);outline-offset:2px} .tp-burger i{display:block;width:14px;height:1.5px;border-radius:2px;background:currentColor; transition:transform 200ms var(--sc-ease-out),opacity 120ms var(--sc-ease-out)} .tp-burger i+i{margin-top:3.5px} .tp-bar.nav-open .tp-burger{color:#EDEDF2} .tp-bar.nav-open .tp-burger i:nth-child(1){transform:translateY(5px) rotate(45deg)} .tp-bar.nav-open .tp-burger i:nth-child(2){opacity:0} .tp-bar.nav-open .tp-burger i:nth-child(3){transform:translateY(-5px) rotate(-45deg)} @media(prefers-reduced-motion:reduce){.tp-burger i{transition:none}} /* once the row stops fitting the rail folds into a menu, so the pill stays a pill instead of shrinking into a keyhole. Seven chapters need ~1010px of row. */ @media(max-width:1120px){ .tp-burger{display:grid} .tp-bar .tp-lang{margin-left:auto} .tp-nav{position:absolute;top:calc(100% + 10px);right:0;z-index:1; flex-direction:column;align-items:stretch;gap:.05rem;min-width:13rem;padding:.4rem;overflow:visible; background:#0B0B12;border:1px solid var(--tp-hair-dark);border-radius:16px; box-shadow:0 18px 44px -16px rgba(4,4,10,.75); opacity:0;transform:translateY(-6px);pointer-events:none; transition:opacity 160ms var(--sc-ease-out),transform 160ms var(--sc-ease-out)} .tp-nav.is-scrollable{-webkit-mask-image:none;mask-image:none} .tp-bar.nav-open .tp-nav{opacity:1;transform:none;pointer-events:auto} .tp-nav a{font-size:1rem;padding:.62rem .7rem .62rem .95rem;border-radius:11px} .tp-nav a[aria-current="true"],.tp-nav a[aria-current="page"]{background:color-mix(in srgb,#EDEDF2 8%,transparent)} .tp-nav a.tp-nav-page-first{margin:.35rem 0 0;padding:.9rem .7rem .62rem .95rem;border-top:1px solid var(--tp-hair-dark);border-radius:0 0 11px 11px} .tp-nav a.tp-nav-page-first::before{display:none} /* the amber marker turns on its side with the list */ .tp-nav a::after{left:.42rem;right:auto;top:50%;bottom:auto;width:2px;height:1.05em; transform:translateY(-50%) scaleY(0)} .tp-nav a[aria-current="true"]::after,.tp-nav a[aria-current="page"]::after{transform:translateY(-50%) scaleY(1)} } @media(max-width:1120px) and (prefers-reduced-motion:reduce){.tp-nav{transition:none}} /* the pill is fixed, so flow beats must not land under it */ #pillars,#proof,#proof-sprint,#pricing,#engineering,#about,#faq,#start{scroll-margin-top:5.25rem} .tp-lang{display:flex;gap:.1rem;border:1px solid var(--tp-hair-dark);border-radius:999px;padding:.14rem} .tp-lang button{font-family:var(--sc-font-mono);font-size:.68rem;letter-spacing:.06em; background:none;border:0;color:#A2A2B0;padding:.28rem .55rem;border-radius:999px;cursor:pointer} .tp-lang button[aria-pressed="true"]{background:#EDEDF2;color:#101018} .tp-lang button:focus-visible{outline:2px solid var(--tp-amber);outline-offset:2px} .tp-theme{position:relative;background:none;border:1px solid var(--tp-hair-dark);border-radius:999px;color:#A2A2B0; width:2rem;height:2rem;cursor:pointer;font-size:.88rem;line-height:1;display:grid;place-items:center; transition:color 160ms var(--sc-ease-out),background 160ms var(--sc-ease-out),transform 160ms var(--sc-ease-out)} .tp-theme::after{content:"";position:absolute;inset:4px;border:1px solid currentColor;border-radius:50%;opacity:.22} .tp-theme:hover{color:#EDEDF2} .tp-theme:active{transform:rotate(16deg) scale(.94)} .tp-theme:focus-visible{outline:2px solid var(--tp-amber);outline-offset:2px} .tp-cta{display:inline-block;font-family:var(--sc-font-text);font-weight:600;font-size:.9rem; background:var(--tp-amber);color:#1A1206;text-decoration:none; padding:.62rem 1.15rem;border-radius:999px;white-space:nowrap; transition:transform 140ms var(--sc-ease-out),box-shadow 140ms var(--sc-ease-out); box-shadow:0 6px 20px -8px rgba(242,163,60,.45)} .tp-cta:hover{transform:translateY(-1px)} .tp-cta:active{transform:translateY(1px) scale(.98)} .tp-cta:focus-visible{outline:2px solid #EDEDF2;outline-offset:3px} .tp-cta--lg{font-size:1rem;padding:.85rem 1.6rem} .tp-ghost{display:inline-block;font-weight:500;font-size:.9rem;color:var(--w-ink);text-decoration:none; padding:.62rem 1.15rem;border-radius:999px;border:1px solid var(--w-hair); transition:border-color 140ms var(--sc-ease-out),background 140ms var(--sc-ease-out)} .tp-ghost:hover{border-color:color-mix(in oklab,var(--w-ink) 34%,transparent)} .tp-ghost:focus-visible{outline:2px solid var(--tp-amber);outline-offset:3px} @media(max-width:700px){.tp-bar{gap:.6rem;top:10px;max-width:calc(100vw - 20px)}.tp-bar .tp-cta{display:none}} /* ============ hero, the crew at work ============ */ .tp-hero-stage{display:flex;align-items:center;overflow:hidden} .tp-hero-stage::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:1;opacity:.16;filter:blur(.55px); background:linear-gradient(var(--w-hair) 1px,transparent 1px),linear-gradient(90deg,var(--w-hair) 1px,transparent 1px); background-size:72px 72px;mask-image:linear-gradient(to bottom,transparent 2%,black 24%,black 78%,transparent 100%)} .tp-hero-canvas{position:absolute;inset:0;width:100%;height:100%} .tp-hero-copy{position:relative;z-index:3;text-align:left;width:100%;max-width:78rem; padding-left:max(var(--sc-gutter),5vw);padding-right:var(--sc-gutter)} .tp-hero-copy h1{font-size:clamp(4rem,8.4vw,9rem);line-height:.92;letter-spacing:-.055em; font-weight:600;color:var(--w-ink-strong);text-wrap:balance;margin:0 0 1.4rem} .tp-hero-copy h1 .row{display:block} .tp-nowrap{white-space:nowrap} .tp-hero-sub{font-size:var(--tp-type-lede);line-height:1.55;color:var(--w-body);max-width:38rem;margin:0 0 2.2rem;text-wrap:pretty} .tp-hero-ctas{display:flex;gap:.9rem;flex-wrap:wrap} @media(max-width:1200px){.tp-hero-copy h1{font-size:clamp(4rem,7vw,5.75rem)}} @media(max-width:900px){.tp-hero-copy h1{font-size:clamp(3.25rem,7.8vw,4.5rem)}} /* ============ problem (flow, world ground) ============ */ .tp-problem{position:relative;background:transparent;overflow:clip} .tp-ghostwords{position:absolute;inset:0;pointer-events:none;z-index:0} .tp-ghostwords span{position:absolute;font-family:var(--sc-font-display);font-weight:700; font-size:clamp(3rem,9vw,8.5rem);letter-spacing:-.03em;white-space:nowrap; color:color-mix(in oklab,var(--w-ink) 5%,transparent)} .tp-problem .sc-wrap{position:relative;z-index:2} .tp-problem h2{font-size:var(--sc-t-3xl);line-height:1.02;letter-spacing:var(--sc-track-tight); font-weight:600;max-width:24ch;text-wrap:balance;margin:0 0 clamp(4rem,8vw,7rem)} .tp-prose p{max-width:var(--sc-measure);font-size:var(--tp-type-body);line-height:1.68; letter-spacing:.004em;color:var(--w-body);margin:0 0 1.35rem;text-wrap:pretty} .tp-prose p strong{color:var(--w-ink-strong);font-weight:600} .tp-prose p em{color:var(--w-ink)} .tp-problem-columns{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(3rem,7vw,7rem);max-width:76rem} .tp-problem-columns>div{display:flex;flex-direction:column;gap:clamp(1.25rem,2vw,2rem)} .tp-problem-columns p{max-width:none;margin:0} .tp-problem-declaration{font-family:var(--sc-font-display);font-size:clamp(1.9rem,2.2vw,2.5rem);font-weight:600; line-height:1.08;letter-spacing:var(--sc-track-snug);color:var(--w-ink-strong);max-width:none;text-wrap:balance; border-top:1px solid var(--w-hair);margin:clamp(7rem,14vw,14rem) 0 0;padding:clamp(3rem,6vw,5.5rem) 0 clamp(3rem,6vw,5rem)} @media(max-width:800px){ .tp-problem-columns{grid-template-columns:1fr;gap:1.25rem} .tp-problem-columns>div{gap:1.25rem} .tp-problem-declaration{font-size:clamp(1.75rem,7.5vw,2.35rem);margin-top:6rem;padding:2.8rem 0 1rem} } /* ============ the equation (peak) ============ */ .tp-eq-stage{overflow:hidden} .tp-eq-grid{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,44rem) minmax(0,1fr); gap:clamp(2rem,5vw,6rem);align-items:center;width:min(100%,var(--sc-maxw)); margin-inline:auto;padding:0 var(--sc-gutter);height:100%} .tp-eq-copy h2{font-size:var(--sc-t-2xl);line-height:1.04;letter-spacing:var(--sc-track-snug);font-weight:600;margin:0 0 1.6rem} .tp-eq-copy .tp-prose p{font-size:var(--tp-type-body);line-height:1.68;margin-bottom:1.05rem} .tp-eq-floor{position:absolute;inset:0;z-index:0; background: linear-gradient(var(--w-canvas) 55%, transparent 78%), repeating-linear-gradient(90deg, color-mix(in oklab,var(--w-ink) 4%,transparent) 0 1px, transparent 1px 88px), repeating-linear-gradient(0deg, color-mix(in oklab,var(--w-ink) 4%,transparent) 0 1px, transparent 1px 88px); } .tp-tower-wrap{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:min(78vh,720px)} .tp-tower{position:relative;display:flex;flex-direction:column-reverse;align-items:center;gap:4px} .tp-blk{position:relative;width:clamp(170px,17vw,250px);height:clamp(16px,2.6vh,26px); --k:clamp(0, calc((var(--sc-p,0) - var(--t,0)) * 18), 1); opacity:var(--k); transform:translate3d(var(--x,0), calc((1 - var(--k)) * -16vh), 0);} .tp-blk .f{position:absolute;inset:0;background:linear-gradient(180deg,var(--blk-f1),var(--blk-f2)); border:1px solid var(--blk-edge);border-radius:2px; display:flex;align-items:center;padding:0 .55rem} .tp-blk .f span{font-family:var(--sc-font-mono);font-size:.54rem;letter-spacing:.14em;color:var(--blk-label);user-select:none} .tp-blk .t{position:absolute;left:0;right:0;height:10px;top:-10px;transform:skewX(-44deg);transform-origin:bottom left; background:linear-gradient(180deg,var(--blk-t1),var(--blk-t2));border:1px solid var(--blk-edge);border-bottom:0} .tp-blk .s{position:absolute;top:-10px;bottom:0;width:10px;right:-10px;transform:skewY(-46deg);transform-origin:top left; background:var(--blk-s);border:1px solid color-mix(in oklab,var(--w-ink) 9%,transparent);border-left:0} .tp-blk--one .f{background:linear-gradient(180deg,#F7B45A,#DE8F27);border-color:color-mix(in oklab,#F2A33C 70%,#fff 10%); box-shadow:0 10px 34px -8px rgba(242,163,60,.4), inset 0 1px 0 rgba(255,255,255,.35)} .tp-blk--one .f span{color:#2A1A04;font-weight:500} .tp-blk--one .t{background:linear-gradient(180deg,#FFD08A,#F2A33C);border-color:rgba(255,255,255,.3)} .tp-blk--one .s{background:#B4740F;border-color:rgba(255,255,255,.12)} .tp-eq-read{margin-top:1.6rem;text-align:center;font-family:var(--sc-font-mono)} .tp-eq-read .line1{font-size:.8rem;letter-spacing:.18em;color:var(--w-soft);min-height:1.4em} .tp-eq-read .line2{font-family:var(--sc-font-display);font-weight:700;font-size:clamp(2.6rem,4.6vw,4.2rem); letter-spacing:-.02em;color:var(--w-ink-strong);line-height:1;margin-top:.35rem;min-height:1.05em;position:relative} .tp-eq-read .line2 .u{color:var(--tp-amber)} .tp-eq-read .line3{font-family:var(--sc-font-text);font-size:.95rem;color:var(--w-body);margin-top:.7rem;opacity:0;transition:opacity 300ms var(--sc-ease-out)} .tp-eq-read.done .line3{opacity:1} @media(max-width:900px){ /* One column, and the tower owns whatever the copy leaves: a fixed 34vh well was smaller than 21 blocks plus the readout, so the stack overflowed upward into the prose. auto + minmax(0,1fr) makes that impossible; sizeTower() then fills the well, so the blocks are as large as the phone allows instead of thumbnails. */ .tp-eq-grid{grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr); align-content:stretch;align-items:stretch;gap:.9rem;overflow:hidden; padding:5.5rem var(--sc-gutter) 1.1rem} .tp-eq-copy h2{font-size:var(--sc-t-xl);margin-bottom:.8rem} .tp-eq-copy .tp-prose p{font-size:.82rem;line-height:1.5;margin-bottom:.6rem} .tp-eq-copy .tp-prose p:nth-of-type(2){display:none} /* the workflow para returns in the loop rail right below */ .tp-eq-copy .tp-prose p:nth-of-type(4){display:none} /* elaborates "No hoping", which the line above already lands */ .tp-tower-wrap{height:auto;min-height:0;overflow:hidden} /* a 16vh drop is ten block-heights on a phone; the entry reads as a fall, not a flicker */ .tp-blk{transform:translate3d(var(--x,0), calc((1 - var(--k)) * -4.5vh), 0)} .tp-blk{width:clamp(180px,54vw,240px);height:var(--blk-h,9px)} .tp-blk .f{padding:0 .45rem} .tp-blk .f span{font-size:clamp(.4rem,calc(var(--blk-h,9px) * .46),.56rem)} .tp-blk .t{height:var(--blk-3d,6px);top:calc(var(--blk-3d,6px) * -1)} .tp-blk .s{width:var(--blk-3d,6px);right:calc(var(--blk-3d,6px) * -1)} .tp-tower{gap:var(--blk-gap,2px)} .tp-eq-read{margin-top:.75rem} .tp-eq-read .line1{font-size:.7rem} .tp-eq-read .line2{font-size:1.85rem} .tp-eq-read .line3{font-size:.85rem;margin-top:.45rem} } /* a short phone has to give the copy back some room before the tower can breathe */ @media(max-width:900px) and (max-height:720px){ .tp-eq-copy h2{font-size:1.45rem;margin-bottom:.6rem} .tp-eq-copy .tp-prose p{font-size:.76rem;line-height:1.45;margin-bottom:.5rem} } @media(prefers-reduced-motion:reduce){ .tp-blk{opacity:1;transform:none} } /* ============ the loop (pan rail) ============ */ .tp-rail{display:flex;align-items:center;gap:clamp(1rem,2vw,1.8rem);padding:0 var(--sc-gutter);height:100%} .tp-railcard{flex:0 0 auto;width:clamp(260px,30vw,380px);min-height:min(58vh,520px); background:linear-gradient(180deg,var(--w-card1),var(--w-card2));border:1px solid var(--w-hair); border-radius:12px;padding:1.6rem 1.5rem;display:flex;flex-direction:column;gap:1rem} .tp-railcard .step{font-family:var(--sc-font-mono);font-size:.66rem;letter-spacing:.2em;color:var(--tp-amber)} html[data-tptheme="light"] .tp-railcard .step{color:var(--tp-paper-accent)} .tp-railcard h3{font-family:var(--sc-font-display);font-weight:600;font-size:var(--sc-t-xl);letter-spacing:var(--sc-track-snug);margin:0} .tp-railcard p{font-size:var(--tp-type-body);line-height:1.65;color:var(--w-body);margin:0;text-wrap:pretty} .tp-railcard svg{margin-top:auto;width:100%;height:auto;color:var(--w-soft)} .tp-railcard svg .hi{color:var(--tp-amber)} html[data-tptheme="light"] .tp-railcard svg .hi{color:var(--tp-paper-accent)} .tp-raillead{flex:0 0 auto;width:clamp(280px,34vw,460px);padding-right:1rem} .tp-raillead h2{font-size:var(--sc-t-3xl);line-height:1;letter-spacing:var(--sc-track-tight);font-weight:600;margin:0 0 1.2rem;text-wrap:balance} .tp-raillead .rule{width:64px;height:1px;background:var(--tp-amber)} .tp-railcoda{flex:0 0 auto;width:clamp(260px,26vw,340px);display:flex;flex-direction:column;gap:1.2rem} .tp-railcoda p{font-family:var(--sc-font-display);font-weight:600;font-size:var(--sc-t-lg);line-height:1.25;color:var(--w-ink);margin:0} @media(prefers-reduced-motion:no-preference){ .tp-railcard,.tp-railcoda{--sk:clamp(0, calc(var(--sc-p,0) * 4.2 - var(--i,0) * .55), 1); opacity:calc(.55 + .45 * var(--sk));transform:translateY(calc((1 - var(--sk)) * 18px))} } /* ============ tuesday (pin, the ground lifts) ============ */ .tp-tue-stage{display:grid;place-items:center; background:color-mix(in oklab, var(--tp-paper) calc(clamp(0, (var(--sc-p,0) - .3) * 2.5, 1) * 100%), var(--tue-from))} .tp-tue-inner{max-width:46rem;padding:0 var(--sc-gutter);text-align:left;color:var(--tp-paper-ink)} .tp-tue-fade{} /* the night shift: the crew works in the dark, fades as the light arrives */ .tp-tue-night{position:absolute;inset:0;pointer-events:none; opacity:clamp(0, calc(1 - (var(--sc-p,0) - .28) * 3.6), 1)} .tp-tue-night .nw{position:absolute;left:var(--nx);top:var(--ny);font-family:var(--sc-font-mono); font-size:.68rem;letter-spacing:.14em;color:var(--w-soft);white-space:nowrap} .tp-tue-night .nw::before{content:"";display:inline-block;width:5px;height:5px;border-radius:50%; background:var(--tp-amber);margin-right:.5rem;vertical-align:middle} @media(prefers-reduced-motion:no-preference){ .tp-tue-night .nw{animation:tpNight 2.8s ease-in-out infinite;animation-delay:var(--nd,0s)} @keyframes tpNight{0%,100%{opacity:.22}50%{opacity:.95}} } @media(prefers-reduced-motion:reduce){.tp-tue-night{display:none}} .tp-tue-sun{position:absolute;left:50%;top:18%;transform:translateX(-50%);width:min(46vw,520px);height:2px; background:linear-gradient(90deg,transparent,var(--tp-amber),transparent); opacity:calc(.25 + .75 * var(--sc-p,0));pointer-events:none} .tp-tue-sun::after{content:"";position:absolute;left:50%;top:-70px;transform:translateX(-50%);width:340px;height:140px; background:radial-gradient(closest-side, rgba(242,163,60,.18), transparent);} .tp-tue-inner .kicker{font-family:var(--sc-font-mono);font-size:.7rem;letter-spacing:.22em;text-transform:uppercase; color:var(--tp-paper-accent);margin-bottom:1.6rem} .tp-tue-inner p{font-size:var(--tp-type-lede);line-height:1.6;margin:0 0 1.3rem;text-wrap:pretty} .tp-tue-inner p strong{font-weight:600;color:var(--tp-paper-ink)} @media(prefers-reduced-motion:reduce){ .tp-tue-stage{background:var(--tp-paper)} } /* ============ paper world (pillars, proof, offer, faq) ============ */ .tp-paper{background:var(--tp-paper);--sc-ink:var(--tp-paper-ink);--sc-ink-soft:var(--tp-paper-soft); color:var(--tp-paper-ink)} .tp-paper ::selection{background:color-mix(in oklab,var(--tp-amber) 40%,transparent)} .tp-paper h2.tp-h{font-size:var(--sc-t-3xl);line-height:1.02;letter-spacing:var(--sc-track-tight); font-weight:600;max-width:22ch;text-wrap:balance;margin:0 0 3.4rem;color:var(--tp-paper-ink)} .tp-paper h2.tp-h>.Len,.tp-paper h2.tp-h>.Lnl,#engineering h2.tp-h>.Len,#engineering h2.tp-h>.Lnl{ display:block;max-width:100%;overflow-wrap:anywhere} .tp-paper .tp-prose p{color:var(--tp-paper-body)} .tp-paper .tp-prose p strong{color:var(--tp-paper-ink)} /* proof signal — editorial scrollytelling, not a grid of feature cards */ #pillars h2.tp-h{margin-bottom:0;max-width:18ch} .tp-proof-flow{display:grid;grid-template-columns:minmax(17rem,.72fr) minmax(0,1.32fr); gap:clamp(3rem,8vw,8rem);align-items:start;margin-top:clamp(3.5rem,8vw,7rem)} .tp-proof-orbit{position:sticky;top:6.4rem;align-self:start;height:calc(100vh - 8.4rem);min-height:31rem; display:grid;place-items:center;align-content:center} .tp-proof-orbit-frame{position:relative;width:min(100%,28rem);aspect-ratio:1} .tp-proof-orbit svg{display:block;width:100%;height:100%;overflow:visible} .tp-orbit-ring{fill:none;stroke:var(--tp-hair-paper);stroke-width:1} .tp-orbit-ring--inner{stroke-dasharray:2 9;opacity:.72} .tp-orbit-progress{fill:none;stroke:var(--tp-paper-accent);stroke-width:2;stroke-linecap:round; stroke-dasharray:942;stroke-dashoffset:942;transform:rotate(-90deg);transform-origin:220px 220px; transition:stroke-dashoffset 900ms var(--sc-ease-out)} .tp-proof-flow[data-active="1"] .tp-orbit-progress{stroke-dashoffset:754} .tp-proof-flow[data-active="2"] .tp-orbit-progress{stroke-dashoffset:566} .tp-proof-flow[data-active="3"] .tp-orbit-progress{stroke-dashoffset:377} .tp-proof-flow[data-active="4"] .tp-orbit-progress{stroke-dashoffset:188} .tp-proof-flow[data-active="5"] .tp-orbit-progress{stroke-dashoffset:0} .tp-orbit-node line{stroke:var(--tp-hair-paper);stroke-width:1;stroke-dasharray:170;stroke-dashoffset:170; transition:stroke-dashoffset 700ms var(--sc-ease-out),stroke 300ms var(--sc-ease-out)} .tp-orbit-node circle:not(.tp-node-pulse){fill:var(--tp-paper);stroke:var(--tp-paper-soft);stroke-width:1.4; transition:fill 300ms var(--sc-ease-out),stroke 300ms var(--sc-ease-out),r 300ms var(--sc-ease-out)} .tp-orbit-node .tp-node-pulse{fill:none;stroke:var(--tp-paper-accent);stroke-width:1.4;opacity:0} .tp-orbit-node.is-past line,.tp-orbit-node.is-active line{stroke-dashoffset:0;stroke:color-mix(in oklab,var(--tp-paper-accent) 65%,var(--tp-hair-paper))} .tp-orbit-node.is-past circle:not(.tp-node-pulse){fill:var(--tp-paper-accent);stroke:var(--tp-paper-accent)} .tp-orbit-node.is-active circle:not(.tp-node-pulse){r:11;fill:var(--tp-amber);stroke:var(--tp-paper-accent)} .tp-orbit-hand{transform:rotate(calc(var(--proof-turn,0) * 72deg));transform-origin:220px 220px; transition:transform 900ms var(--sc-ease-out)} .tp-orbit-hand line{stroke:var(--tp-paper-accent);stroke-width:2}.tp-orbit-hand circle{fill:var(--tp-amber);stroke:var(--tp-paper);stroke-width:4} .tp-orbit-core{fill:var(--tp-paper-ink)}.tp-orbit-core-ring{fill:none;stroke:var(--tp-paper-accent);stroke-width:1;stroke-dasharray:3 7} .tp-orbit-u{font-family:var(--sc-font-display);font-weight:600;font-size:54px;fill:var(--tp-paper);text-anchor:middle;dominant-baseline:middle} .tp-orbit-pulse{fill:none;stroke:var(--tp-paper-accent);stroke-width:1;opacity:0;transform-origin:220px 220px} .tp-proof-readout{position:absolute;left:50%;bottom:2%;transform:translateX(-50%);display:flex;align-items:center;gap:.9rem; padding:.55rem .85rem;border:1px solid var(--tp-hair-paper);border-radius:999px;background:color-mix(in oklab,var(--tp-paper) 88%,transparent); backdrop-filter:blur(8px);white-space:nowrap} .tp-proof-readout span{font-family:var(--sc-font-mono);font-size:.58rem;letter-spacing:.15em;color:var(--tp-paper-accent)} .tp-proof-readout b{font-family:var(--sc-font-mono);font-size:.58rem;font-weight:400;letter-spacing:.11em;text-transform:uppercase;color:var(--tp-paper-soft)} .tp-pillars{counter-reset:pillar} .tp-pillar{position:relative;counter-increment:pillar;min-height:min(72vh,47rem);display:grid;align-content:center; padding:clamp(4rem,9vw,7.5rem) 0;border-top:1px solid var(--tp-hair-paper)} .tp-pillar:last-child{border-bottom:1px solid var(--tp-hair-paper)} .tp-pillar::before{content:"0" counter(pillar) " / 05";display:block;margin-bottom:clamp(1.8rem,4vw,3.3rem); font-family:var(--sc-font-mono);font-size:.6rem;letter-spacing:.18em;color:var(--tp-paper-accent)} .tp-pillar::after{content:"";position:absolute;left:0;top:-1px;width:clamp(3rem,10vw,8rem);height:2px; background:var(--tp-paper-accent);transform:scaleX(0);transform-origin:left;transition:transform 720ms var(--sc-ease-out)} .tp-pillar h2,.tp-pillar h3{font-family:var(--sc-font-display);font-weight:600;font-size:clamp(2.45rem,4.6vw,5.2rem);line-height:.98; letter-spacing:var(--sc-track-tight);margin:0 0 1.5rem;color:var(--tp-paper-ink);max-width:12ch;text-wrap:balance; overflow-wrap:anywhere;transition:color 360ms var(--sc-ease-out),transform 700ms var(--sc-ease-out)} .tp-pillar p{font-size:var(--tp-type-body);line-height:1.72;color:var(--tp-paper-body);margin:0;max-width:60ch;text-wrap:pretty} .tp-proof-enhanced .tp-pillar{opacity:.3;transform:translateY(2rem);transition:opacity 520ms var(--sc-ease-out),transform 720ms var(--sc-ease-out)} .tp-proof-enhanced .tp-pillar.is-past{opacity:.5;transform:none}.tp-proof-enhanced .tp-pillar.is-active{opacity:1;transform:none} .tp-pillar.is-active::after{transform:scaleX(1)} .tp-pillar.is-active h3{color:color-mix(in oklab,var(--tp-paper-ink) 86%,var(--tp-paper-accent))} .tp-pillar--proven{min-height:min(82vh,52rem)} .tp-proof-signal{display:grid;grid-template-columns:1.25fr 1fr;margin-top:clamp(2.4rem,5vw,4rem); border-top:1px solid var(--tp-hair-paper);border-bottom:1px solid var(--tp-hair-paper)} .tp-proof-metric{display:flex;flex-direction:column;justify-content:center;min-height:9rem;padding:1.35rem 1.4rem 1.25rem 0} .tp-proof-metric+.tp-proof-metric{border-left:1px solid var(--tp-hair-paper);padding-left:1.4rem} .tp-proof-metric b{font-family:var(--sc-font-display);font-size:clamp(2.3rem,4.5vw,4.7rem);line-height:.88; letter-spacing:var(--sc-track-tight);color:var(--tp-paper-accent);font-variant-numeric:tabular-nums} .tp-proof-metric span{font-family:var(--sc-font-mono);font-size:.58rem;line-height:1.5;letter-spacing:.13em; text-transform:uppercase;color:var(--tp-paper-soft);margin-top:.75rem} @media(prefers-reduced-motion:no-preference){ .tp-orbit-node.is-active .tp-node-pulse{animation:tpProofPulse 1.8s var(--sc-ease-out) infinite} @keyframes tpProofPulse{0%{r:11;opacity:.52}100%{r:27;opacity:0}} } @media(max-width:920px){ .tp-proof-flow{grid-template-columns:1fr;gap:2.2rem;margin-top:3.2rem} .tp-proof-orbit{position:relative;top:auto;height:auto;min-height:0;display:grid;grid-template-columns:7.5rem minmax(0,1fr); place-items:center start;gap:1rem;padding:1rem 0;border-top:1px solid var(--tp-hair-paper);border-bottom:1px solid var(--tp-hair-paper)} .tp-proof-orbit-frame{width:7.5rem}.tp-proof-readout{position:relative;left:auto;bottom:auto;transform:none;justify-self:start} .tp-pillar{min-height:0;padding:clamp(4rem,12vw,6rem) 0}.tp-proof-enhanced .tp-pillar{opacity:1;transform:none} } @media(max-width:560px){ .tp-proof-orbit{grid-template-columns:5.8rem minmax(0,1fr)}.tp-proof-orbit-frame{width:5.8rem}.tp-proof-readout b{display:none} .tp-pillar h2,.tp-pillar h3{font-size:clamp(2.35rem,12vw,3.5rem)}.tp-proof-signal{grid-template-columns:1fr}.tp-proof-metric+.tp-proof-metric{border-left:0;border-top:1px solid var(--tp-hair-paper);padding-left:0} } @media(prefers-reduced-motion:reduce){ .tp-proof-enhanced .tp-pillar{opacity:1;transform:none;transition:none}.tp-pillar::after{transform:scaleX(1);transition:none} .tp-orbit-hand,.tp-orbit-progress,.tp-orbit-node line,.tp-orbit-node circle{transition:none} } /* proof */ .tp-cases{display:grid;grid-template-columns:7fr 5fr;gap:1.4rem;margin-bottom:3.4rem} .tp-case{background:var(--tp-paper-surface);border:1px solid var(--tp-hair-paper);border-radius:14px; padding:2rem 1.9rem;display:flex;flex-direction:column;gap:.7rem;min-height:15rem} .tp-case .tag{font-family:var(--sc-font-mono);font-size:.66rem;letter-spacing:.2em;color:var(--tp-paper-accent);text-transform:uppercase} .tp-case h3{font-family:var(--sc-font-display);font-weight:600;font-size:var(--sc-t-xl);margin:0;color:var(--tp-paper-ink)} .tp-case p{font-size:var(--tp-type-body);line-height:1.68;color:var(--tp-paper-body);margin:0;text-wrap:pretty} .tp-case a{margin-top:auto;padding-top:1rem;color:var(--tp-paper-ink);font-weight:600;font-size:.92rem; text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px} .tp-case a:hover{color:var(--tp-paper-accent)} .tp-case a:focus-visible{outline:2px solid var(--tp-paper-accent);outline-offset:3px} @media(max-width:860px){.tp-cases{grid-template-columns:1fr}} .tp-stats{display:grid;grid-template-columns:repeat(6,1fr);border-top:1px solid var(--tp-hair-paper); border-bottom:1px solid var(--tp-hair-paper)} .tp-stat{padding:1.5rem .6rem;border-left:1px solid var(--tp-hair-paper);text-align:center} .tp-stat:first-child{border-left:0} .tp-stat .n{font-family:var(--sc-font-display);font-weight:700;font-size:clamp(1.5rem,2.6vw,2.4rem); letter-spacing:-.02em;color:var(--tp-paper-ink);font-variant-numeric:tabular-nums} .tp-stat .n em{font-style:normal;color:var(--tp-paper-accent)} .tp-stat .l{font-family:var(--sc-font-mono);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase; color:var(--tp-paper-soft);margin-top:.45rem;line-height:1.5;text-wrap:balance} @media(max-width:960px){.tp-stats{grid-template-columns:repeat(3,1fr)}.tp-stat:nth-child(4){border-left:0}} @media(max-width:560px){.tp-stats{grid-template-columns:repeat(2,1fr)}.tp-stat{border-left:0;border-top:1px solid var(--tp-hair-paper)}.tp-stat:nth-child(-n+2){border-top:0}} /* offer, a full-bleed dark commitment between proof and the open pricing ledger */ #proof-sprint .sc-wrap{width:100%;max-width:none;padding-inline:0} .tp-offer-block{background:#111119;color:#EDEDF2;border-radius:0; padding-block:clamp(3rem,6vw,6rem);padding-inline:max(var(--sc-gutter),calc((100vw - var(--sc-maxw))/2 + var(--sc-gutter))); position:relative;overflow:hidden;border-top:1px solid var(--tp-hair-dark);border-bottom:1px solid var(--tp-hair-dark); box-shadow:0 30px 80px -30px rgba(10,10,20,.5)} .tp-offer-grid{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1.08fr) minmax(20rem,.82fr); gap:clamp(2.2rem,7vw,7rem);align-items:start} .tp-offer-block h2{font-size:var(--sc-t-2xl);line-height:1.05;letter-spacing:var(--sc-track-snug); font-weight:600;max-width:20ch;text-wrap:balance;margin:0;color:#F2F2F7} .tp-offer-block h2 .eur{color:var(--tp-amber)} .tp-offer-copy{padding-top:.35rem} .tp-offer-block p{font-size:var(--tp-type-body);line-height:1.68;color:#C6C6D2;max-width:58ch;margin:0;text-wrap:pretty} .tp-offer-block .rather{font-family:var(--sc-font-display);font-weight:600;color:#EDEDF2;font-size:var(--sc-t-lg);margin:0} .tp-offer-action{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;flex-wrap:wrap; padding-top:1.6rem;margin-top:1.6rem;border-top:1px solid var(--tp-hair-dark)} .tp-offer-meter{position:relative;z-index:1;display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-top:clamp(2.6rem,5vw,4.5rem)} .tp-offer-sprint,.tp-offer-total{position:relative;min-height:8rem;border:1px solid var(--tp-hair-dark);border-radius:16px;padding:1.1rem 1.2rem; display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;background:color-mix(in srgb,#171720 84%,transparent)} .tp-offer-sprint::before{content:attr(data-label);position:absolute;left:1.2rem;top:1rem;font-family:var(--sc-font-mono); font-size:.58rem;letter-spacing:.15em;color:#8E8EA0} .tp-offer-sprint b{font-family:var(--sc-font-display);font-size:clamp(2rem,4vw,3.6rem);line-height:.9;color:#F2F2F7} .tp-offer-sprint em{font-family:var(--sc-font-mono);font-size:.62rem;font-style:normal;letter-spacing:.12em;color:#8E8EA0} .tp-offer-total{grid-column:1/-1;min-height:auto;align-items:center;border-color:color-mix(in srgb,var(--tp-amber) 42%,transparent); background:color-mix(in srgb,var(--tp-amber) 9%,#111119)} .tp-offer-total span{font-family:var(--sc-font-mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:#C6C6D2} .tp-offer-total b{font-family:var(--sc-font-display);font-size:clamp(1.4rem,3vw,2.5rem);color:var(--tp-amber)} .tp-offer-glow{position:absolute;right:-140px;top:-140px;width:420px;height:420px;border-radius:50%; background:radial-gradient(closest-side, rgba(242,163,60,.14), transparent);pointer-events:none} @media(max-width:860px){.tp-offer-grid{grid-template-columns:1fr;gap:1.7rem}.tp-offer-block h2{max-width:22ch}.tp-offer-copy{padding-top:0}} @media(max-width:560px){ .tp-offer-meter{gap:.7rem}.tp-offer-sprint{min-height:7rem;padding:.9rem}.tp-offer-sprint::before{left:.9rem;top:.8rem} .tp-offer-sprint b{font-size:1.8rem}.tp-offer-sprint em{font-size:.54rem}.tp-offer-action{align-items:flex-start;flex-direction:column} .tp-offer-total{align-items:flex-start;flex-direction:column}.tp-offer-total b{font-size:1.65rem} } /* faq */ .tp-faq{max-width:52rem} .tp-faq details{border-top:1px solid var(--tp-hair-paper)} .tp-faq details:last-child{border-bottom:1px solid var(--tp-hair-paper)} .tp-faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:1.5rem;align-items:baseline; padding:1.3rem 0;font-family:var(--sc-font-text);font-weight:600;font-size:var(--tp-type-question);line-height:1.5;color:var(--tp-paper-ink)} .tp-faq summary::-webkit-details-marker{display:none} .tp-faq summary::after{content:"+";font-family:var(--sc-font-mono);color:var(--tp-paper-accent);flex:0 0 auto;transition:transform 160ms var(--sc-ease-out)} .tp-faq details[open] summary::after{transform:rotate(45deg)} .tp-faq summary:focus-visible{outline:2px solid var(--tp-paper-accent);outline-offset:3px} .tp-faq .a{padding:0 0 1.4rem;max-width:60ch} .tp-faq .a p{font-size:var(--tp-type-body);line-height:1.7;color:var(--tp-paper-body);margin:0;text-wrap:pretty} .tp-faq .a p em{color:var(--tp-paper-ink)} /* ============ close ============ */ .tp-close-stage{--tp-close-footer-safe:0px;display:grid;place-items:center;background:var(--w-canvas);overflow:hidden} .tp-close-canvas{position:absolute;inset:0 0 auto;width:100%;height:calc(100% - var(--tp-close-footer-safe))} .tp-close-inner{position:relative;z-index:3;text-align:center;padding:3rem var(--sc-gutter); display:flex;flex-direction:column;align-items:center;gap:1.5rem;width:100%} /* scrim only where the text sits, the constellation keeps its light elsewhere */ .tp-close-scrim{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2; width:min(96vw,920px);height:min(76vh,560px);pointer-events:none; background:radial-gradient(closest-side, var(--close-scrim-a) 46%, var(--close-scrim-b) 70%, transparent 100%)} .tp-close-eq{font-family:var(--sc-font-mono);font-size:.74rem;letter-spacing:.16em;color:var(--w-body);max-width:min(68vw,54rem)} .tp-close-eq b{color:var(--tp-amber);font-weight:500} html[data-tptheme="light"] .tp-close-eq b{color:var(--tp-paper-accent)} .tp-close-inner h2{font-size:var(--sc-t-3xl);line-height:1;letter-spacing:var(--sc-track-tight); font-weight:600;color:var(--w-ink-strong);margin:0;max-width:min(66vw,58rem);text-wrap:balance} .tp-close-actions{display:flex;flex-direction:column;align-items:center;gap:.85rem} .tp-close-secondary{display:flex;align-items:center;justify-content:center;gap:.45rem;flex-wrap:wrap} .tp-close-secondary a{display:inline-flex;align-items:center;justify-content:center;min-height:2.15rem;padding:.46rem .78rem; border:1px solid var(--w-hair);border-radius:999px;background:color-mix(in oklab,var(--w-canvas) 82%,transparent); font-family:var(--sc-font-mono);font-size:.58rem;line-height:1;letter-spacing:.13em;text-transform:uppercase; color:var(--w-soft);text-decoration:none;transition:color 180ms var(--sc-ease-out),border-color 180ms var(--sc-ease-out),transform 180ms var(--sc-ease-out)} .tp-close-secondary a:hover{color:var(--w-ink);border-color:color-mix(in oklab,var(--w-ink) 32%,transparent);transform:translateY(-1px)} .tp-close-secondary a:focus-visible{outline:2px solid var(--tp-amber);outline-offset:2px} .tp-foot{position:absolute;left:0;right:0;bottom:0;z-index:3;display:flex;justify-content:space-between;align-items:center; gap:1rem;padding:1.2rem var(--sc-gutter);border-top:1px solid var(--w-hair);flex-wrap:wrap} .tp-foot span,.tp-foot a{font-family:var(--sc-font-mono);font-size:.68rem;letter-spacing:.08em;color:var(--w-soft);text-decoration:none} .tp-foot a:hover{color:var(--w-ink)} .tp-foot a:focus-visible{outline:2px solid var(--tp-amber);outline-offset:2px} .tp-foot .tp-close-secondary{display:flex;align-items:center;gap:.4rem} .tp-foot .tp-close-secondary a{min-height:1.9rem;padding:.4rem .7rem;border:1px solid var(--w-hair);border-radius:999px; background:transparent;font-size:.55rem;letter-spacing:.12em;text-transform:uppercase;color:var(--w-soft)} .tp-foot .tp-close-secondary a:hover{color:var(--w-ink);border-color:color-mix(in oklab,var(--w-ink) 32%,transparent)} /* ============ start dialog (contact) ============ */ .tp-dialog{border:0;border-radius:18px;background:#111119;color:#EDEDF2;padding:0; max-width:30rem;width:calc(100vw - 2.5rem);box-shadow:0 40px 120px -30px rgba(0,0,0,.7)} .tp-dialog::backdrop{background:rgba(4,4,10,.65);backdrop-filter:blur(4px)} .tp-dialog-inner{padding:2.1rem 2rem 1.8rem;display:flex;flex-direction:column;gap:1rem;position:relative} .tp-dialog h3{font-family:var(--sc-font-display);font-weight:600;font-size:var(--sc-t-xl);margin:0;color:#F2F2F7} .tp-dialog .sub{font-size:.92rem;line-height:1.55;color:#C6C6D2;margin:0} .tp-dialog label{display:flex;flex-direction:column;gap:.35rem;font-family:var(--sc-font-mono); font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:#8E8EA0} .tp-dialog input,.tp-dialog textarea{font-family:var(--sc-font-text);font-size:.95rem;color:#EDEDF2; background:#0B0B12;border:1px solid var(--tp-hair-dark);border-radius:10px;padding:.7rem .8rem;resize:vertical} .tp-dialog input:focus-visible,.tp-dialog textarea:focus-visible{outline:2px solid var(--tp-amber);outline-offset:1px} .tp-dialog .row{display:grid;grid-template-columns:1fr 1fr;gap:.8rem} @media(max-width:560px){.tp-dialog .row{grid-template-columns:1fr}} .tp-dialog .actions{display:flex;align-items:center;gap:1rem;margin-top:.4rem;flex-wrap:wrap} .tp-dialog .actions button.tp-cta{border:0;cursor:pointer} .tp-dialog .mailline{font-size:.8rem;color:#8E8EA0} .tp-dialog .mailline a{color:#C6C6D2} .tp-dialog .x{position:absolute;top:.9rem;right:.9rem;background:none;border:1px solid var(--tp-hair-dark); border-radius:999px;width:2rem;height:2rem;color:#A2A2B0;cursor:pointer;font-size:1rem;line-height:1} .tp-dialog .x:hover{color:#EDEDF2} .tp-dialog .x:focus-visible{outline:2px solid var(--tp-amber);outline-offset:2px} /* misc */ .sc-section .sc-wrap{width:min(100%,var(--sc-maxw));margin-inline:auto;padding-inline:var(--sc-gutter)} /* ============ pricing (one number, moving through an open ledger) ============ */ #pricing .tp-h{font-family:var(--sc-font-display);font-size:var(--sc-t-3xl);line-height:1.01; letter-spacing:var(--sc-track-tight);font-weight:600;max-width:15ch;text-wrap:balance;margin:0 0 1.5rem; overflow-wrap:anywhere} .tp-pricing-head{max-width:68rem} .tp-pricing-head .tp-prose p{font-size:var(--tp-type-body);line-height:1.7;max-width:62ch} .tp-pricing-flow{display:block;margin-top:3.2rem} .tp-price-key{position:relative;padding:1.35rem 0 1.5rem; border-top:1px solid var(--tp-hair-paper);border-bottom:1px solid var(--tp-hair-paper)} .tp-price{display:flex;align-items:baseline;gap:.75rem;flex-wrap:wrap;margin:0 0 2rem} .tp-price .n{font-family:var(--sc-font-display);font-weight:700;font-size:clamp(3rem,7.5vw,5.6rem); letter-spacing:-.04em;line-height:.88;color:var(--tp-paper-ink);font-variant-numeric:tabular-nums} .tp-price .u{font-family:var(--sc-font-text);font-size:var(--sc-t-lg);color:var(--tp-paper-soft)} .tp-price-key .tp-price{display:flex;margin:0;align-items:flex-end;gap:clamp(1rem,2.5vw,2.25rem)} .tp-price-key .tp-price .n,.tp-price-key .tp-price .u{display:block} .tp-price-key .tp-price .u{font-size:var(--tp-type-body);line-height:1.5;margin:0 0 .3rem;max-width:none} .tp-price-rules{list-style:none;padding:1.15rem 0 0;margin:1.15rem 0 0;border-top:1px solid var(--tp-hair-paper)} .tp-price-rules li{font-family:var(--sc-font-mono);font-size:.64rem;line-height:1.55;letter-spacing:.09em; text-transform:uppercase;color:var(--tp-paper-soft);padding:.28rem 0} .tp-price-rules li::before{content:"+";color:var(--tp-paper-accent);margin-right:.55rem} .tp-price-map{list-style:none;padding:1.1rem 0 0;margin:1.1rem 0 0;border-top:1px solid var(--tp-hair-paper); display:grid;gap:.12rem} .tp-price-map li{display:grid;grid-template-columns:2rem minmax(0,1fr);align-items:center;gap:.55rem; font-family:var(--sc-font-mono);font-size:.58rem;line-height:1.35;letter-spacing:.12em; text-transform:uppercase;color:color-mix(in oklab,var(--tp-paper-soft) 72%,transparent); padding:.34rem 0;transition:color 320ms var(--sc-ease-out)} .tp-price-map li::before{content:attr(data-price-map);display:block;width:.82rem;border-top:1px solid currentColor; transition:width 420ms var(--sc-ease-out),border-color 320ms var(--sc-ease-out)} .tp-price-map li.is-active{color:var(--tp-paper-accent)} .tp-price-map li.is-active::before{width:1.85rem;border-color:var(--tp-paper-accent)} .tp-pricing-story{min-width:0} .tp-pricing-story>.tp-block{position:relative;min-height:min(72vh,52rem);margin-top:0; padding:clamp(5.5rem,9vw,8.5rem) 0;border-top:1px solid var(--tp-hair-paper)} .tp-pricing-story>.tp-block:last-child{padding-bottom:0} .tp-pricing-story>.tp-block::before{content:attr(data-step);display:block;margin-bottom:.75rem; font-family:var(--sc-font-mono);font-size:.62rem;letter-spacing:.18em;color:var(--tp-paper-accent)} .tp-pricing-story>.tp-block::after{content:"";position:absolute;left:0;top:-1px;width:clamp(3rem,10vw,8rem);height:2px; background:var(--tp-paper-accent);transform:scaleX(0);transform-origin:left;transition:transform 720ms var(--sc-ease-out)} .tp-pricing-enhanced .tp-pricing-story>.tp-block{opacity:.3;transform:translateY(2rem); transition:opacity 520ms var(--sc-ease-out),transform 720ms var(--sc-ease-out)} .tp-pricing-enhanced .tp-pricing-story>.tp-block.is-past{opacity:.52;transform:none} .tp-pricing-enhanced .tp-pricing-story>.tp-block.is-active{opacity:1;transform:none} .tp-pricing-story>.tp-block.is-active::after{transform:scaleX(1)} @media(max-width:1040px){ .tp-pricing-flow{margin-top:2.4rem} .tp-price-rules{margin:0;border-top:0;padding:0} .tp-price-map{grid-column:1/-1;grid-template-columns:repeat(5,minmax(0,1fr));gap:.5rem;padding-top:.9rem} .tp-price-map li{display:block;padding:.25rem 0}.tp-price-map li::before{margin-bottom:.38rem} .tp-pricing-story>.tp-block{min-height:0} .tp-pricing-enhanced .tp-pricing-story>.tp-block{opacity:1;transform:none} } @media(max-width:580px){ .tp-price-key .tp-price{display:block}.tp-price-key .tp-price .u{margin:.75rem 0 0} .tp-price-rules{margin-top:1.15rem;border-top:1px solid var(--tp-hair-paper);padding-top:1.15rem} .tp-price-map{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:1.2rem;padding-bottom:.3rem} .tp-price-map li{flex:0 0 7.2rem;scroll-snap-align:start} } .tp-block{border-top:1px solid var(--tp-hair-paper);padding-top:1.6rem;margin-top:3.2rem} .tp-block > h2{font-family:var(--sc-font-display);font-weight:600;font-size:clamp(2.35rem,4.3vw,4.8rem);line-height:.99; letter-spacing:var(--sc-track-tight);color:var(--tp-paper-ink);margin:0 0 1.7rem;max-width:14ch;text-wrap:balance; overflow-wrap:anywhere} .tp-block > h3{font-family:var(--sc-font-text);font-weight:600;font-size:1.02rem;color:var(--tp-paper-ink); margin:2rem 0 .2rem} .tp-block p{font-size:var(--tp-type-body);line-height:1.68;color:var(--tp-paper-body);margin:0 0 1.15rem;max-width:var(--sc-measure);text-wrap:pretty} .tp-block p strong{color:var(--tp-paper-ink);font-weight:600} .tp-block p em{color:var(--tp-paper-ink)} .tp-block p.foot{font-size:var(--tp-type-small);line-height:1.62;color:var(--tp-paper-soft);max-width:80ch} .tp-block p:last-child{margin-bottom:0} /* Pricing is an editorial page, not a stack of compact component sections. Keep the data full-width and give the argument a slower reading rhythm. */ .tp-pricing-story>.tp-block>h2{font-size:clamp(2.9rem,4.4vw,4.9rem);max-width:19ch;margin-bottom:clamp(2.3rem,4vw,3.6rem)} .tp-pricing-story>.tp-block>h2:not(:first-child){margin-top:clamp(5.5rem,9vw,8.5rem)} .tp-pricing-story>.tp-block>h3{margin-top:clamp(3.5rem,6vw,5.5rem);margin-bottom:1.2rem} .tp-pricing-story>.tp-block>p{max-width:56rem;font-size:var(--tp-type-body);line-height:1.75;margin-bottom:1.8rem} .tp-pricing-story>.tp-block>p.foot{max-width:68rem;font-size:var(--tp-type-small);line-height:1.7;margin-top:1.8rem} .tp-pricing-story>.tp-block>.tp-price-graphic{margin:clamp(2.8rem,5vw,4.5rem) 0 clamp(3rem,5.5vw,5rem);padding:2rem 0 2.2rem} .tp-pricing-story>.tp-block>.tp-callout{max-width:60rem;margin:clamp(2.8rem,5vw,4.5rem) 0;padding:.35rem 0 .35rem 2rem} .tp-pricing-story>.tp-block>.tp-callout p{font-size:var(--tp-type-body);line-height:1.72} .tp-pricing-story>.tp-block>.tp-receipt{margin:clamp(3rem,5.5vw,5rem) 0 0;max-width:62rem} .tp-pricing-story>.tp-block>.tp-shapes{margin-top:2.2rem} /* tables: a wide grid on a desk, one card per row on a phone */ .tp-tablewrap{margin:1.5rem 0 1.1rem} .tp-tablewrap--scroll{overflow-x:auto;overscroll-behavior-x:contain} .tp-tbl{width:100%;border-collapse:collapse;text-align:left} .tp-tbl thead th{font-family:var(--sc-font-mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase; font-weight:400;color:var(--tp-paper-soft);padding:0 1.1rem .65rem 0; border-bottom:1px solid var(--tp-hair-paper);vertical-align:bottom} .tp-tbl td{padding:1.05rem 1.1rem 1.05rem 0;border-bottom:1px solid var(--tp-hair-paper); font-size:.92rem;line-height:1.55;color:var(--tp-paper-body);vertical-align:top} .tp-tbl td strong{color:var(--tp-paper-ink);font-weight:600} .tp-tbl td.num{font-family:var(--sc-font-mono);font-size:.8rem;white-space:nowrap;color:var(--tp-paper-ink)} .tp-tbl td.eur{font-family:var(--sc-font-mono);font-size:.8rem;white-space:nowrap;color:var(--tp-paper-accent)} .tp-tbl .lbl{display:none} @media(max-width:820px){ .tp-tablewrap{overflow:visible} .tp-tablewrap--scroll{overflow-x:auto;max-width:100%;overscroll-behavior-x:contain} .tp-tbl,.tp-tbl tbody,.tp-tbl tr,.tp-tbl td{display:block;width:auto} .tp-tbl thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)} .tp-tbl tr{border-bottom:1px solid var(--tp-hair-paper);padding:1.3rem 0} .tp-tbl tr:first-child{border-top:1px solid var(--tp-hair-paper)} .tp-tbl td{border:0;padding:0 0 .55rem} .tp-tbl td:last-child{padding-bottom:0} .tp-tbl .lbl{display:block;font-family:var(--sc-font-mono);font-size:.58rem;letter-spacing:.14em; text-transform:uppercase;color:var(--tp-paper-soft);margin-bottom:.15rem} } /* platform ledger: full-width editorial rows, never a carousel of cards */ .tp-platform-scroll{overflow:visible;max-width:100%;padding:0} table.tp-platform-cards,table.tp-platform-cards tbody{display:block;width:100%} table.tp-platform-cards thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)} table.tp-platform-cards tbody tr{position:relative;display:grid; grid-template-columns:minmax(0,1.6fr) minmax(7rem,.58fr) minmax(8.5rem,.72fr) minmax(0,1fr); gap:1rem clamp(1rem,2.3vw,2.2rem);padding:1.45rem 0;border-bottom:1px solid var(--tp-hair-paper); background:none;counter-increment:platform;transition:color 320ms var(--sc-ease-out)} table.tp-platform-cards tbody{counter-reset:platform} table.tp-platform-cards tbody tr::before{content:"0" counter(platform) " / PLATFORM";display:block;margin-bottom:1rem; grid-column:1/-1;font-family:var(--sc-font-mono);font-size:.57rem;letter-spacing:.15em;color:var(--tp-paper-accent)} table.tp-platform-cards td{display:block;width:auto;border:0;padding:0;font-size:.86rem;line-height:1.52} table.tp-platform-cards td:first-of-type{font-size:.96rem;line-height:1.55;min-height:0;padding:0;border:0;margin:0} table.tp-platform-cards td:last-child{padding:0;margin:0} table.tp-platform-cards .lbl{display:block;font-family:var(--sc-font-mono);font-size:.56rem;letter-spacing:.13em; text-transform:uppercase;color:var(--tp-paper-soft);margin-bottom:.22rem} @media(hover:hover){table.tp-platform-cards tbody tr:hover{color:var(--tp-paper-accent)}} @media(max-width:820px){ table.tp-platform-cards tbody tr{display:grid;width:100%;grid-template-columns:1fr 1fr;padding:1.5rem 0} table.tp-platform-cards td:first-of-type,table.tp-platform-cards td:last-child{grid-column:1/-1} table.tp-platform-cards td:first-of-type{padding-bottom:.8rem} table.tp-platform-cards td:last-child{padding-top:.35rem} } @media(max-width:520px){table.tp-platform-cards tbody tr{grid-template-columns:1fr;gap:.8rem}table.tp-platform-cards td{grid-column:1!important}} /* the comparison keeps its columns and scrolls: the point is reading across */ .tp-compare{min-width:46rem;border-collapse:collapse;width:100%;text-align:left} .tp-compare th,.tp-compare td{padding:.9rem 1.1rem;border-bottom:1px solid var(--tp-hair-paper); font-size:.88rem;line-height:1.5;vertical-align:top} .tp-compare thead th{font-family:var(--sc-font-mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase; font-weight:400;color:var(--tp-paper-soft);white-space:nowrap} .tp-compare tbody th{font-family:var(--sc-font-text);font-weight:600;color:var(--tp-paper-ink); width:11rem;position:sticky;left:0;background:var(--tp-paper);padding-left:0} .tp-compare td{color:var(--tp-paper-body)} .tp-compare .us{background:color-mix(in oklab,var(--tp-amber) 9%,transparent);color:var(--tp-paper-ink)} .tp-compare .us strong{color:var(--tp-paper-ink)} .tp-compare thead th.us{color:var(--tp-paper-accent)} .tp-scrollhint{font-family:var(--sc-font-mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase; color:var(--tp-paper-soft);margin:.2rem 0 0} @media(min-width:1100px){.tp-scrollhint{display:none}} .tp-platform-hint{display:block!important;margin:.35rem 0 1.35rem} /* one quiet signal per chapter, integrated into the page rather than boxed */ .tp-price-graphic{position:relative;overflow:hidden;margin:2rem 0 2.2rem;padding:1.25rem 0 1.4rem; min-height:9rem;border-top:1px solid var(--tp-hair-paper);border-bottom:1px solid var(--tp-hair-paper);background:none} .tp-graphic-kicker{display:flex;justify-content:space-between;gap:1rem;margin-bottom:1.35rem; font-family:var(--sc-font-mono);font-size:.58rem;letter-spacing:.14em;text-transform:uppercase;color:var(--tp-paper-soft)} .tp-price-graphic .tp-draw{transform-origin:left center;transform:scaleX(.08);opacity:.25; transition:transform 1.05s var(--sc-ease-out),opacity 650ms var(--sc-ease-out)} .tp-price-graphic.sc-in .tp-draw{transform:scaleX(1);opacity:1} .tp-own-plot{display:grid;gap:1.1rem;padding:.35rem 0} .tp-own-row{display:grid;grid-template-columns:5rem minmax(0,1fr);align-items:center;gap:1rem; font-family:var(--sc-font-mono);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:var(--tp-paper-soft)} .tp-own-track{position:relative;height:1.45rem;border-bottom:1px solid color-mix(in oklab,var(--tp-paper-soft) 45%,transparent)} .tp-own-track i{position:absolute;left:0;bottom:-2px;width:100%;height:4px;border-radius:999px;background:repeating-linear-gradient(90deg,#8D8B94 0 11%,transparent 11% 14%)} .tp-own-row--own .tp-own-track i{height:7px;background:linear-gradient(90deg,var(--tp-paper-accent) 0 62%,transparent 62%)} .tp-own-row--own .tp-own-track::after{content:"";position:absolute;left:62%;bottom:-5px;width:12px;height:12px; border-radius:50%;background:var(--tp-paper-accent);box-shadow:0 0 0 6px color-mix(in oklab,var(--tp-paper-accent) 16%,transparent)} .tp-proof-plot{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:1.2rem} .tp-proof-sprint{position:relative;display:grid;place-items:center;min-height:6.4rem;border-top:1px solid var(--tp-hair-paper); border-bottom:1px solid var(--tp-hair-paper);background:none;font-family:var(--sc-font-display); font-size:clamp(1.5rem,3vw,2.2rem);font-weight:600;color:var(--tp-paper-ink)} .tp-proof-sprint small{position:absolute;left:.7rem;top:.55rem;font-family:var(--sc-font-mono);font-size:.54rem; font-weight:400;letter-spacing:.13em;color:var(--tp-paper-soft)} .tp-proof-plus{font-family:var(--sc-font-display);font-size:1.8rem;color:var(--tp-paper-accent)} .tp-cadence-plot{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:end;gap:1rem;height:7rem;padding:.25rem .2rem 0} .tp-cadence-col{display:grid;grid-template-rows:1fr auto;align-items:end;gap:.55rem;height:100%;font-family:var(--sc-font-mono); font-size:.6rem;letter-spacing:.09em;color:var(--tp-paper-soft);text-align:center} .tp-cadence-col i{display:block;height:var(--h);border:1px solid color-mix(in oklab,var(--tp-paper-accent) 48%,var(--tp-hair-paper)); background:linear-gradient(to top,color-mix(in oklab,var(--tp-paper-accent) 18%,transparent),transparent);transform-origin:bottom} .tp-compare-plot{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.75rem} .tp-compare-lane{min-height:6.5rem;padding:.9rem 0;border-top:1px solid var(--tp-hair-paper);display:flex;flex-direction:column; justify-content:space-between;font-family:var(--sc-font-mono);font-size:.58rem;line-height:1.45;letter-spacing:.1em;text-transform:uppercase;color:var(--tp-paper-soft)} .tp-compare-lane i{display:block;width:48%;border-top:2px solid currentColor} .tp-compare-lane--us{color:var(--tp-paper-accent);border-color:var(--tp-paper-accent)} .tp-price-details{margin:1.4rem 0 1.7rem;border-top:1px solid var(--tp-hair-paper);border-bottom:1px solid var(--tp-hair-paper)} .tp-price-details summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:1rem; padding:1rem 0;font-family:var(--sc-font-mono);font-size:.64rem;letter-spacing:.13em;text-transform:uppercase;color:var(--tp-paper-ink)} .tp-price-details summary::-webkit-details-marker{display:none}.tp-price-details summary::after{content:"+";font-size:1rem;color:var(--tp-paper-accent)} .tp-price-details[open] summary::after{content:"−"}.tp-price-details[open] summary{border-bottom:1px solid var(--tp-hair-paper)} @media(max-width:640px){ .tp-price-graphic{padding:1rem;min-height:9rem}.tp-proof-plot{gap:.55rem}.tp-proof-sprint{min-height:5.6rem;font-size:1.35rem} .tp-own-row{grid-template-columns:4.2rem minmax(0,1fr)}.tp-compare-plot{grid-template-columns:1fr}.tp-compare-lane{min-height:4.5rem} } @media(prefers-reduced-motion:reduce){.tp-price-graphic .tp-draw{transform:none;opacity:1;transition:none}} /* callouts: the lines that are set apart on purpose */ .tp-callout{border-left:2px solid var(--tp-amber);padding:.15rem 0 .15rem 1.35rem;margin:1.7rem 0;max-width:68ch} .tp-callout p{margin:0;font-size:var(--tp-type-body);line-height:1.68;color:var(--tp-paper-body)} .tp-callout p+p{margin-top:.9rem} .tp-callout p strong{color:var(--tp-paper-ink)} .tp-receipt{font-family:var(--sc-font-mono);font-size:.78rem;line-height:1.6;letter-spacing:.01em; color:var(--tp-paper-accent);margin:1.4rem 0 0;max-width:74ch} .tp-shapes{display:grid;grid-template-columns:1fr;gap:0;margin-top:1.2rem;counter-reset:shape} .tp-shape{position:relative;display:grid;grid-template-columns:2.5rem minmax(0,.7fr) minmax(0,1fr);gap:1rem; background:none;border-top:1px solid var(--tp-hair-paper);border-radius:0;padding:1.35rem 0;counter-increment:shape} .tp-shape::before{content:"0" counter(shape);font-family:var(--sc-font-mono);font-size:.6rem;letter-spacing:.14em;color:var(--tp-paper-accent);padding-top:.18rem} .tp-shape h4{font-family:var(--sc-font-display);font-weight:600;font-size:1.02rem;color:var(--tp-paper-ink);margin:0 0 .55rem} .tp-shape p{font-size:.92rem;line-height:1.58;color:var(--tp-paper-body);margin:0;max-width:none} @media(max-width:700px){.tp-shape{grid-template-columns:2rem minmax(0,1fr)}.tp-shape p{grid-column:2}} /* ============ engineering leaders: four technical lanes, back in the dark world ============ */ #engineering{position:relative;overflow:hidden;background:var(--w-canvas);color:var(--w-ink)} #engineering .sc-wrap{position:relative;z-index:1} .tp-eng-head{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(18rem,.7fr);gap:clamp(2rem,7vw,7rem); align-items:end;margin-bottom:4rem} #engineering .tp-h{font-family:var(--sc-font-display);font-size:var(--sc-t-3xl);line-height:1.02;letter-spacing:var(--sc-track-tight); font-weight:600;max-width:13ch;text-wrap:balance;color:var(--w-ink-strong);margin:0} #engineering .tp-eng-head .tp-prose p{color:var(--w-body);margin:0} #engineering .tp-eng-head .tp-prose p{font-size:var(--tp-type-body);line-height:1.7} .tp-eng-rail{border-top:1px solid var(--w-hair);counter-reset:eng} .tp-eng-row{position:relative;display:grid;grid-template-columns:4.5rem minmax(13rem,.66fr) minmax(0,1.25fr); gap:clamp(1.4rem,4vw,4.5rem);padding:2.15rem 0;border-bottom:1px solid var(--w-hair);counter-increment:eng} .tp-eng-row::before{content:"0" counter(eng);font-family:var(--sc-font-mono);font-size:.66rem; letter-spacing:.18em;color:var(--tp-amber);padding-top:.35rem} .tp-eng-row::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--tp-amber); transform:scaleX(0);transform-origin:left;transition:transform 900ms var(--sc-ease-out) 120ms;opacity:.62} .tp-eng-row.sc-in::after{transform:scaleX(1)} .tp-eng-row :is(h2,h3){font-family:var(--sc-font-display);font-weight:600;font-size:var(--sc-t-xl); line-height:1.08;letter-spacing:var(--sc-track-snug);color:var(--w-ink-strong);margin:0;text-wrap:balance} .tp-eng-row p{font-size:var(--tp-type-body);line-height:1.7;color:var(--w-body);margin:0;max-width:66ch;text-wrap:pretty} .tp-eng-cta{margin:2.8rem 0 0;display:flex;align-items:center;gap:1rem;flex-wrap:wrap} .tp-eng-cta::before{content:"// TECHNICAL DEEP-DIVE";font-family:var(--sc-font-mono);font-size:.6rem; letter-spacing:.14em;color:var(--w-soft)} @media(max-width:900px){ .tp-eng-head{grid-template-columns:1fr;gap:1.5rem;margin-bottom:3rem} .tp-eng-row{grid-template-columns:3rem minmax(0,1fr);gap:1rem 1.25rem} .tp-eng-row p{grid-column:2} } @media(max-width:560px){.tp-eng-row{grid-template-columns:2.2rem minmax(0,1fr);padding:1.7rem 0}.tp-eng-cta::before{width:100%}} /* ============ about: one vertical editorial company journey ============ */ .tp-about-stage{position:relative;overflow:hidden;background:var(--tp-paper);color:var(--tp-paper-ink); --sc-ink:var(--tp-paper-ink);--sc-ink-soft:var(--tp-paper-soft)} .tp-about-stage::before{content:"";position:absolute;inset:0;pointer-events:none; background:radial-gradient(circle at 12% 22%,color-mix(in oklab,var(--tp-amber) 12%,transparent),transparent 28rem); opacity:.66} .tp-about-rail{position:relative;z-index:1;display:block;height:auto} .tp-about-intro{position:relative;padding:0 0 clamp(5rem,10vw,9rem)} .tp-about-intro h1{font-family:var(--sc-font-display);font-size:var(--sc-t-3xl);line-height:.94; letter-spacing:-.055em;font-weight:600;margin:0;max-width:11ch;text-wrap:balance} .tp-about-morph{position:absolute;z-index:0;top:clamp(1rem,3vw,3.5rem);right:clamp(1rem,5vw,6rem); width:clamp(10rem,18vw,18rem);aspect-ratio:1;display:grid;place-items:center;color:var(--tp-paper-accent); filter:drop-shadow(0 0 1.6rem color-mix(in oklab,var(--tp-amber) 28%,transparent));pointer-events:none} .tp-about-morph-ring{position:absolute;inset:3%;border:1px solid color-mix(in oklab,var(--tp-paper-accent) 34%,transparent); border-radius:50%;animation:tpAboutRing 8s ease-in-out infinite} .tp-about-morph-ring::before,.tp-about-morph-ring::after{content:"";position:absolute;border:1px solid currentColor; border-radius:50%;opacity:.13} .tp-about-morph-ring::before{inset:14%}.tp-about-morph-ring::after{inset:31%} .tp-about-morph svg{width:72%;overflow:visible;fill:none;stroke:currentColor;stroke-width:3; stroke-linecap:round;stroke-linejoin:round} .tp-about-morph .am-plus,.tp-about-morph .am-person{transform-box:fill-box;transform-origin:center} .tp-about-morph .am-plus{animation:tpAboutPlus 8s cubic-bezier(.23,1,.32,1) infinite} .tp-about-morph .am-person{animation:tpAboutPerson 8s cubic-bezier(.23,1,.32,1) infinite} .tp-about-morph .am-person circle{fill:currentColor;stroke:none} @keyframes tpAboutPlus{0%,34%{opacity:1;transform:rotate(0) scale(1)}44%,92%{opacity:0;transform:rotate(90deg) scale(.68)}100%{opacity:1;transform:rotate(180deg) scale(1)}} @keyframes tpAboutPerson{0%,38%{opacity:0;transform:scale(.68)}48%,86%{opacity:1;transform:scale(1)}96%,100%{opacity:0;transform:scale(.82)}} @keyframes tpAboutRing{0%,34%,100%{opacity:.38;transform:scale(.9)}50%,86%{opacity:.7;transform:scale(1)}} .tp-about-panel{position:relative;display:grid;grid-template-columns:minmax(12rem,.62fr) minmax(0,1.25fr); gap:clamp(2rem,7vw,7rem);width:100%;min-height:0;padding:clamp(3.8rem,8vw,7rem) 0; border-top:1px solid var(--tp-hair-paper);align-items:start;align-content:start} .tp-about-panel--lead,.tp-about-panel--team{width:100%} .tp-about-step{font-family:var(--sc-font-mono);font-size:.62rem;letter-spacing:.18em; text-transform:uppercase;color:var(--tp-paper-accent);margin-bottom:1.3rem;grid-column:1;grid-row:1} .tp-about-panel h2{font-family:var(--sc-font-display);font-size:var(--sc-t-3xl);line-height:1.01; letter-spacing:var(--sc-track-tight);font-weight:600;max-width:13ch;text-wrap:balance;margin:0;grid-column:1;grid-row:2} .tp-about-panel h3{font-family:var(--sc-font-display);font-size:var(--sc-t-2xl);line-height:1.04; letter-spacing:var(--sc-track-snug);font-weight:600;max-width:16ch;text-wrap:balance;margin:0;grid-column:1;grid-row:2} .tp-about-panel>p{font-size:1rem;line-height:1.66;color:var(--tp-paper-body);max-width:58ch;margin:0 0 1rem;text-wrap:pretty;grid-column:2} .tp-about-panel:not(.tp-about-panel--team)>p:nth-of-type(1){grid-row:1}.tp-about-panel:not(.tp-about-panel--team)>p:nth-of-type(2){grid-row:2} .tp-about-panel:not(.tp-about-panel--team)>p:nth-of-type(3){grid-row:3}.tp-about-panel:not(.tp-about-panel--team)>p:nth-of-type(4){grid-row:4} .tp-about-panel:not(.tp-about-panel--team)>p{font-size:var(--tp-type-lede);line-height:1.5;color:var(--tp-paper-ink);max-width:40ch;align-self:start} .tp-about-panel .tp-mission{margin:0} .tp-about-formula{font-family:var(--sc-font-display);font-weight:700;font-size:clamp(3.4rem,7vw,6.4rem)!important; line-height:.92!important;letter-spacing:-.055em;color:var(--tp-paper-ink)!important;margin:2rem 0 1rem!important} .tp-about-formula b{color:var(--tp-paper-accent);font-weight:700} .tp-eqline{font-family:var(--sc-font-display);font-weight:700;font-size:var(--sc-t-lg)!important; letter-spacing:var(--sc-track-snug);color:var(--tp-paper-ink)!important;margin:0!important} .tp-team{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.2rem 1.6rem;grid-column:2; grid-row:2;border-top:1px solid var(--tp-hair-paper);padding-top:1.5rem;margin-top:.5rem} .tp-member .nm{font-family:var(--sc-font-display);font-weight:600;font-size:1.05rem; letter-spacing:var(--sc-track-snug);color:var(--tp-paper-ink)} .tp-member .rl{font-family:var(--sc-font-mono);font-size:.64rem;letter-spacing:.14em;text-transform:uppercase; color:var(--tp-paper-accent);margin-top:.35rem} .tp-signoff{font-size:var(--tp-type-body)!important;line-height:1.68!important;color:var(--tp-paper-ink)!important; max-width:56ch!important;margin:2rem 0 1.5rem!important;text-wrap:pretty} .tp-about-panel--team>.tp-signoff{grid-row:3}.tp-about-panel>.tp-cta{grid-column:2;grid-row:4;justify-self:start} .tp-about-panel--team{grid-template-areas:"step content" "title body"; grid-template-rows:auto auto;align-items:start} .tp-about-panel--team>.tp-about-step{grid-area:step} .tp-about-panel--team>h2{grid-area:title} .tp-about-panel--team>.tp-team-body{grid-area:body;min-width:0} .tp-team-body>.tp-team{grid-column:auto;grid-row:auto} .tp-team-body>p.tp-signoff{display:block;margin:2rem 0 1.5rem!important} .tp-team-body>.tp-cta{display:inline-block} @media(max-width:700px){ .tp-about-intro{padding-bottom:4rem}.tp-about-intro h1{font-size:clamp(3rem,13vw,4.5rem)} .tp-about-morph{display:none} .tp-about-panel,.tp-about-panel--lead,.tp-about-panel--team{display:block;width:100%;min-height:0;padding:3.7rem 0} .tp-about-panel h2{font-size:clamp(2.6rem,13vw,3.5rem)} .tp-about-panel h3{font-size:2rem} .tp-about-panel:not(.tp-about-panel--team)>p,.tp-about-panel .tp-mission{font-size:var(--tp-type-lede);line-height:1.5} .tp-about-formula{font-size:3.7rem!important;margin-top:1.35rem!important} .tp-team{gap:1rem}.tp-member .nm{font-size:.9rem}.tp-member .rl{font-size:.55rem} .tp-signoff{font-size:var(--tp-type-body)!important;line-height:1.62!important;margin:1.3rem 0!important} } @media(prefers-reduced-motion:reduce){ .tp-about-morph-ring,.tp-about-morph .am-plus,.tp-about-morph .am-person{animation:none} .tp-about-morph .am-plus{opacity:0}.tp-about-morph .am-person{opacity:1} } /* ============ start (the 30 minutes) ============ */ #start h2{font-size:var(--sc-t-2xl);line-height:1.04;letter-spacing:var(--sc-track-tight);font-weight:600; color:var(--tp-paper-ink);max-width:20ch;text-wrap:balance;margin:0 0 1.4rem} #start p{font-size:var(--tp-type-body);line-height:1.68;color:var(--tp-paper-body);max-width:var(--sc-measure);margin:0 0 2rem;text-wrap:pretty} .tp-tight{padding-block-start:calc(var(--sc-section) * .4)} /* ============ focused pages: Pricing and For CTOs ============ */ .tp-subpage-body{background:var(--tp-paper);color:var(--tp-paper-ink)} .tp-subpage-body main{min-height:100vh} .tp-subpage-body #pricing,.tp-subpage-body #engineering{padding-top:clamp(8.5rem,12vw,11rem)} .tp-subpage-body #pricing{padding-bottom:clamp(5rem,10vw,9rem)} .tp-subpage-body #engineering{min-height:calc(100vh - 5rem);padding-bottom:clamp(5rem,10vw,9rem)} .tp-subpage-body .tp-page-foot{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap; padding:1.25rem var(--sc-gutter);border-top:1px solid var(--tp-hair-paper);background:var(--tp-paper)} .tp-subpage-body .tp-page-foot span,.tp-subpage-body .tp-page-foot a{font-family:var(--sc-font-mono);font-size:.64rem; letter-spacing:.09em;text-transform:uppercase;color:var(--tp-paper-soft);text-decoration:none} .tp-subpage-body .tp-page-foot a:hover{color:var(--tp-paper-accent)} .tp-subpage-body--dark .tp-page-foot{background:var(--w-canvas-2);border-color:var(--w-hair)} .tp-subpage-body--dark .tp-page-foot span,.tp-subpage-body--dark .tp-page-foot a{color:var(--w-soft2)} .tp-subpage-body--dark .tp-page-foot a:hover{color:var(--tp-amber)} .tp-page-back{display:inline-flex;align-items:center;gap:.55rem;margin-bottom:2rem;font-family:var(--sc-font-mono); font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--tp-paper-soft);text-decoration:none} .tp-page-back::before{content:"←";color:var(--tp-paper-accent)} #engineering .tp-page-back{color:var(--w-soft2)}#engineering .tp-page-back::before{color:var(--tp-amber)} .tp-page-back:hover{color:var(--tp-paper-ink)}#engineering .tp-page-back:hover{color:var(--w-ink)} @media(max-width:580px){.tp-subpage-body #pricing,.tp-subpage-body #engineering{padding-top:7.5rem}} /* ============ mobile release pass ============ */ @media(max-width:700px){ .sc-section{padding-block:clamp(4.5rem,16vw,6.5rem)} .tp-tight{padding-block-start:3.5rem} .tp-bar{width:calc(100vw - 20px);justify-content:space-between;padding:.4rem .48rem .4rem .72rem} .tp-mark{font-size:.94rem}.tp-burger,.tp-theme{width:2.5rem;height:2.5rem}.tp-lang button{min-height:2.15rem;padding-inline:.52rem} .tp-nav{top:calc(100% + .55rem);right:0;left:auto;width:min(18rem,calc(100vw - 20px));max-height:calc(100svh - 5.5rem);overflow-y:auto} .tp-nav a{min-height:2.75rem;display:flex;align-items:center} .tp-hero-stage{align-items:flex-start} .tp-hero-canvas{inset:62% 0 0;height:38%;mask-image:linear-gradient(to bottom,transparent 0,black 18%,black 100%);-webkit-mask-image:linear-gradient(to bottom,transparent 0,black 18%,black 100%)} .tp-hero-copy{height:62svh;padding:5.8rem var(--sc-gutter) 1rem;align-self:flex-start;display:flex;flex-direction:column;justify-content:flex-start} .tp-hero-copy h1{font-size:clamp(2.45rem,12vw,3.55rem);line-height:.97;margin-bottom:1.15rem} .tp-hero-sub{font-size:var(--tp-type-lede);line-height:1.52;margin-bottom:1.55rem;max-width:34rem} .tp-cta--lg{font-size:.92rem;padding:.78rem 1.3rem} .tp-problem h2,.tp-paper h2.tp-h{font-size:clamp(2.35rem,11vw,3.35rem);overflow-wrap:anywhere} .tp-problem .tp-prose p{font-size:var(--tp-type-body);line-height:1.62} .tp-ghostwords{opacity:.58} .tp-rail{gap:.85rem;padding-inline:var(--sc-gutter)} .tp-raillead{width:calc(100vw - 3rem)}.tp-raillead h2{font-size:clamp(2.5rem,12vw,3.5rem)} .tp-railcard{width:calc(100vw - 3rem);min-height:min(62svh,34rem);padding:1.3rem 1.2rem} .tp-railcard p{font-size:var(--tp-type-body);line-height:1.55}.tp-railcoda{width:calc(100vw - 3rem)} .tp-tue-inner{padding:5.5rem var(--sc-gutter) 2rem}.tp-tue-inner .kicker{margin-bottom:1.1rem} .tp-tue-inner p{font-size:var(--tp-type-lede);line-height:1.57;margin-bottom:1rem} .tp-tue-night .nw{font-size:.55rem}.tp-tue-night .nw:nth-child(even){display:none} #tuesday{height:auto!important}#tuesday .tp-tue-stage{position:relative;min-height:100svh;height:auto;padding-block:clamp(6rem,24vw,8rem)} #tuesday [data-sc-cue]{opacity:1!important;transform:none!important;pointer-events:auto!important} #pillars h2.tp-h{max-width:14ch} .tp-pillar p{font-size:var(--tp-type-body);line-height:1.65} .tp-cases{gap:1rem}.tp-case{padding:1.3rem}.tp-case h3{font-size:1.35rem} .tp-offer-block{padding-block:3.8rem}.tp-offer-block h2{font-size:clamp(2.15rem,10.5vw,3rem)} .tp-offer-block p{font-size:var(--tp-type-body)}.tp-offer-meter{margin-top:2.3rem} .tp-faq summary{font-size:var(--tp-type-question);line-height:1.45;padding:1.2rem 2.2rem 1.2rem 0} .tp-faq .a p{font-size:var(--tp-type-body);line-height:1.62} #start h2{font-size:clamp(2.25rem,11vw,3.2rem)}#start p{font-size:var(--tp-type-body)} .tp-close-inner{padding:5.2rem var(--sc-gutter) 6.2rem;gap:1.1rem}.tp-close-eq{font-size:.62rem;line-height:1.6} .tp-close-inner h2{font-size:clamp(2.45rem,12vw,3.65rem);max-width:82vw}.tp-close-eq{max-width:82vw} .tp-close-actions{gap:.7rem}.tp-close-secondary a{min-height:2.2rem;padding:.5rem .72rem;font-size:.55rem} .tp-foot{justify-content:center;padding:.8rem var(--sc-gutter)}.tp-foot>span:first-child,.tp-foot>a{display:none} .tp-foot .tp-close-secondary{order:-1}.tp-foot>span:last-child{font-size:.56rem} .tp-dialog{width:calc(100vw - 1.25rem);max-height:calc(100svh - 1.25rem)} .tp-dialog-inner{padding:1.35rem 1.15rem}.tp-dialog h3{font-size:1.6rem;padding-right:2rem} #pricing .tp-h,#engineering .tp-h{font-size:clamp(2.5rem,12vw,3.7rem)} .tp-pricing-head .tp-prose p,#engineering .tp-eng-head .tp-prose p{font-size:var(--tp-type-body);line-height:1.68} .tp-price .n{font-size:clamp(3.2rem,17vw,4.8rem)} .tp-price-map{scrollbar-width:none}.tp-price-map::-webkit-scrollbar{display:none} .tp-pricing-story>.tp-block{padding:3.8rem 0} .tp-block>h2{font-size:clamp(2.25rem,10.5vw,3.25rem);max-width:15ch} .tp-block p,.tp-callout p{font-size:var(--tp-type-body);line-height:1.62} .tp-graphic-kicker{flex-wrap:wrap;line-height:1.55}.tp-price-graphic{margin:1.65rem 0;padding:1.05rem 0} .tp-own-row{grid-template-columns:3.8rem minmax(0,1fr);gap:.65rem}.tp-proof-plot{gap:.45rem} .tp-proof-sprint{font-size:1.3rem;min-height:5.4rem}.tp-proof-plus{font-size:1.25rem} .tp-cadence-plot{gap:.55rem}.tp-cadence-col{font-size:.53rem} .tp-price-details summary{line-height:1.45}.tp-compare{min-width:42rem} .tp-eng-row :is(h2,h3){font-size:clamp(1.55rem,7.5vw,2rem);overflow-wrap:anywhere}.tp-eng-row p{font-size:var(--tp-type-body);line-height:1.62} .tp-subpage-body .tp-page-foot{align-items:flex-start;flex-direction:column;padding-inline:var(--sc-gutter)} } @media(max-width:700px) and (max-height:740px){ .tp-hero-canvas{inset:68% 0 0;height:32%} .tp-hero-copy{height:68svh;padding-top:5.2rem} .tp-hero-copy h1{font-size:clamp(2.15rem,10.7vw,3rem);margin-bottom:.9rem} .tp-hero-sub{font-size:clamp(1rem,4.4vw,1.1rem);line-height:1.45;margin-bottom:1rem} } @media(max-width:700px) and (max-height:650px){ .tp-hero-copy{padding-top:4.7rem} .tp-hero-copy h1{font-size:clamp(2rem,10vw,2.7rem);margin-bottom:.7rem} .tp-hero-sub{font-size:.9rem;line-height:1.36;margin-bottom:.8rem} .tp-hero-copy .tp-cta--lg{font-size:.85rem;padding:.7rem 1.05rem} } @media(max-width:390px){ .tp-bar{gap:.25rem}.tp-mark{font-size:.88rem}.tp-lang button{font-size:.61rem;padding-inline:.42rem}.tp-theme,.tp-burger{width:2.35rem;height:2.35rem} .tp-offer-sprint{min-height:6.3rem;padding:.75rem}.tp-offer-sprint::before{left:.75rem}.tp-offer-sprint b{font-size:1.55rem} .tp-offer-sprint em{display:none}.tp-offer-total b{font-size:1.45rem} .tp-team{grid-template-columns:1fr}.tp-proof-readout{font-size:.54rem} } @media(prefers-reduced-motion:reduce){ .tp-pricing-enhanced .tp-pricing-story>.tp-block{opacity:1;transform:none;transition:none} .tp-pricing-story>.tp-block::after{transform:scaleX(1);transition:none} } /* Reflow floor: at high browser zoom the layout becomes a readable single column. No essential copy or control depends on horizontal scrolling. */ @media(max-width:400px){ .tp-prose p,.tp-block p,.tp-about-panel p,.tp-eng-row p,.tp-faq .a p{overflow-wrap:anywhere} .tp-tbl-wrap,.tp-compare-wrap{max-width:100%;overflow-x:auto;overscroll-behavior-inline:contain} } /* ============ public brand system ============ */ .tp-brand-body{background:var(--tp-paper);color:var(--tp-paper-ink)} #logo,#color,#type,#hierarchy,#components,#voice,#motion,#applications,#press{scroll-margin-top:5.25rem} .tp-brand-hero{position:relative;min-height:min(82svh,54rem);display:flex;align-items:flex-end; padding:clamp(9rem,15vw,13rem) 0 clamp(4rem,8vw,7rem);overflow:hidden;background:#08080D;color:#EDEDF2} .tp-brand-hero::before{content:"";position:absolute;width:clamp(19rem,38vw,38rem);aspect-ratio:1;right:-8%;top:18%; border:1px solid color-mix(in oklab,var(--tp-amber) 48%,transparent);border-radius:50%;opacity:.6;pointer-events:none} .tp-brand-hero::after{content:"21 = U";position:absolute;right:-.05em;bottom:-.19em;font-family:var(--sc-font-display); font-size:clamp(8rem,23vw,23rem);line-height:.8;letter-spacing:-.08em;font-weight:700;color:#EDEDF2;opacity:.025; pointer-events:none;white-space:nowrap} .tp-brand-hero-grid{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1.08fr) minmax(18rem,.62fr); align-items:end;gap:clamp(3rem,8vw,8rem)} .tp-brand-kicker,.tp-brand-section-head>p{font-family:var(--sc-font-mono);font-size:.66rem;line-height:1.4; letter-spacing:.17em;text-transform:uppercase;color:var(--tp-amber);margin:0 0 1.4rem} .tp-brand-hero h1{font-family:var(--sc-font-display);font-size:clamp(3.7rem,8vw,8.4rem);line-height:.88; letter-spacing:-.065em;font-weight:600;max-width:9ch;text-wrap:balance;margin:0} .tp-brand-intro{padding-top:1.6rem;border-top:1px solid color-mix(in oklab,#EDEDF2 18%,transparent)} .tp-brand-intro>p:first-child{font-size:var(--tp-type-lede);line-height:1.55;color:#C6C6D2;max-width:38ch;margin:0} .tp-brand-equation{font-family:var(--sc-font-mono);font-size:.68rem!important;letter-spacing:.08em;color:#8E8EA0!important; margin:2.2rem 0 0!important;text-transform:uppercase} .tp-brand-equation b{font-weight:500;color:var(--tp-amber)} .tp-brand-index{position:relative;z-index:2;background:#0C0C13;border-top:1px solid color-mix(in oklab,#EDEDF2 14%,transparent); border-bottom:1px solid color-mix(in oklab,#EDEDF2 14%,transparent)} .tp-brand-index .sc-wrap{display:grid;grid-template-columns:repeat(9,minmax(0,1fr));padding-block:0} .tp-brand-index a{min-height:5.2rem;display:flex;align-items:center;gap:.45rem;padding:.9rem .8rem;text-decoration:none; border-left:1px solid color-mix(in oklab,#EDEDF2 12%,transparent);font-family:var(--sc-font-mono);font-size:.58rem; letter-spacing:.1em;color:var(--tp-amber);transition:background 180ms var(--sc-ease-out),color 180ms var(--sc-ease-out)} .tp-brand-index a:last-child{border-right:1px solid color-mix(in oklab,#EDEDF2 12%,transparent)} .tp-brand-index a>span,.tp-brand-index a .Len,.tp-brand-index a .Lnl{display:inline-flex;align-items:center;gap:.45rem} .tp-brand-index a span span{color:#A2A2B0} .tp-brand-index a:hover{background:#101018;color:#F2A33C}.tp-brand-index a:hover span span{color:#EDEDF2} .tp-brand-section{position:relative;background:var(--tp-paper);color:var(--tp-paper-ink)} .tp-brand-section--paper{background:var(--tp-paper-surface)} .tp-brand-section--dark{background:#08080D;color:#EDEDF2;--tp-brand-hair:color-mix(in oklab,#EDEDF2 15%,transparent)} .tp-brand-section-head{display:grid;grid-template-columns:minmax(9rem,.3fr) minmax(0,1fr);gap:clamp(2rem,6vw,6rem); align-items:start;border-top:1px solid var(--tp-brand-hair,var(--tp-hair-paper));padding-top:1.25rem;margin-bottom:clamp(3.5rem,7vw,7rem)} .tp-brand-section-head>p{color:var(--tp-paper-accent);margin:0;padding-top:.45rem} .tp-brand-section--dark .tp-brand-section-head>p{color:var(--tp-amber)} .tp-brand-section-head h2{font-family:var(--sc-font-display);font-size:clamp(2.7rem,6vw,6rem);line-height:.94; letter-spacing:-.055em;font-weight:600;max-width:13ch;text-wrap:balance;margin:0} .tp-brand-logo-pair{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--tp-hair-paper);border:1px solid var(--tp-hair-paper)} .tp-brand-logo-field{min-height:clamp(18rem,31vw,28rem);display:flex;flex-direction:column;justify-content:space-between; padding:clamp(1.5rem,3vw,2.5rem);margin:0} .tp-brand-logo-field--dark{background:#08080D;color:#EDEDF2}.tp-brand-logo-field--paper{background:#F3F1EC;color:#17161D} .tp-brand-wordmark{align-self:center;margin:auto;font-family:var(--sc-font-display);font-size:clamp(2.5rem,5vw,5.5rem); line-height:1;font-weight:600;letter-spacing:-.04em;white-space:nowrap} .tp-brand-wordmark span{color:var(--tp-amber)} .tp-brand-logo-field figcaption,.tp-brand-spec-label{font-family:var(--sc-font-mono);font-size:.58rem;line-height:1.45; letter-spacing:.14em;text-transform:uppercase;color:var(--tp-paper-soft)} .tp-brand-logo-field--dark figcaption{color:#8E8EA0}.tp-brand-logo-field--paper figcaption{color:#565460} .tp-brand-logo-notes{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(2rem,6vw,6rem);align-items:center; margin-top:clamp(3rem,6vw,6rem)} .tp-brand-mark-build{border-top:1px solid var(--tp-hair-paper);border-bottom:1px solid var(--tp-hair-paper);padding:2.2rem 0} .tp-brand-mark-build svg{width:100%;height:auto;fill:none;stroke:var(--tp-paper-ink);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round} .tp-brand-mark-build .mark-plus,.tp-brand-mark-build .mark-person{stroke:var(--tp-paper-accent)} .tp-brand-mark-build .mark-arrow{stroke:var(--tp-paper-soft);stroke-dasharray:2 5} .tp-brand-rules p{font-size:var(--tp-type-body);line-height:1.66;color:var(--tp-paper-soft);max-width:56ch;margin:0 0 1rem;text-wrap:pretty} .tp-brand-rules strong{color:var(--tp-paper-ink)} .tp-brand-download{display:inline-flex;align-items:center;gap:.6rem;margin-top:.8rem;font-family:var(--sc-font-mono);font-size:.62rem; letter-spacing:.1em;text-transform:uppercase;color:var(--tp-paper-accent);text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:.25rem} .tp-brand-download::after{content:"↓"}.tp-brand-download:hover{color:var(--tp-paper-ink)} .tp-brand-swatches{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));border:1px solid var(--tp-hair-paper)} .tp-brand-swatches figure{min-width:0;margin:0;border-left:1px solid var(--tp-hair-paper);background:var(--tp-paper)} .tp-brand-swatches figure:first-child{border-left:0}.tp-brand-swatches i{display:block;height:clamp(8rem,15vw,14rem);background:var(--sw)} .tp-brand-swatches figcaption{display:flex;flex-direction:column;gap:.25rem;padding:1rem .85rem 1.2rem} .tp-brand-swatches figcaption b{font-family:var(--sc-font-display);font-size:.9rem}.tp-brand-swatches figcaption>span{font-family:var(--sc-font-mono); font-size:.55rem;letter-spacing:.05em;color:var(--tp-paper-accent)} .tp-brand-swatches figcaption small{font-size:.73rem;line-height:1.35;color:var(--tp-paper-soft)} .tp-brand-principle{max-width:55ch;margin:clamp(2.5rem,5vw,5rem) 0 0 auto;padding-left:1.3rem;border-left:2px solid var(--tp-amber); font-size:clamp(1.15rem,1.7vw,1.55rem);line-height:1.5;color:var(--tp-paper-ink);text-wrap:pretty} .tp-brand-color-rules{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(2rem,6vw,6rem);margin-top:clamp(2.5rem,5vw,5rem)} .tp-brand-color-rules .tp-brand-principle{margin:0;max-width:none} .tp-brand-type-list{border-top:1px solid var(--tp-hair-paper)} .tp-brand-type-list article{display:grid;grid-template-columns:minmax(11rem,.36fr) minmax(0,1fr) minmax(10rem,.34fr);gap:clamp(1.5rem,4vw,4rem); align-items:center;padding:clamp(2rem,4vw,4rem) 0;border-bottom:1px solid var(--tp-hair-paper)} .tp-brand-type-meta{display:flex;flex-direction:column;align-items:flex-start;gap:.2rem}.tp-brand-type-meta b{font-family:var(--sc-font-display);font-size:1.15rem} .tp-brand-type-meta span,.tp-brand-type-meta small{font-family:var(--sc-font-mono);font-size:.58rem;letter-spacing:.1em;color:var(--tp-paper-soft)} .tp-brand-type-meta small{color:var(--tp-paper-accent);margin-top:.8rem} .tp-brand-type-list article>p{margin:0}.tp-brand-type-list article>p:last-child{font-size:.87rem;line-height:1.55;color:var(--tp-paper-soft)} .tp-brand-type-display{font-family:"Archivo",system-ui,sans-serif;font-size:clamp(2.2rem,4.2vw,4.5rem);line-height:.95;letter-spacing:-.05em;font-weight:600} .tp-brand-type-text{font-family:"Instrument Sans",system-ui,sans-serif;font-size:clamp(1.1rem,1.8vw,1.5rem);line-height:1.5} .tp-brand-type-mono{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:clamp(.75rem,1.2vw,1rem);line-height:1.5;color:var(--tp-paper-accent)} .tp-brand-hierarchy{border-top:1px solid var(--tp-hair-paper)} .tp-brand-hierarchy>div{display:grid;grid-template-columns:10rem minmax(0,1fr);gap:2rem;align-items:baseline; padding:clamp(1.5rem,3vw,3rem) 0;border-bottom:1px solid var(--tp-hair-paper)} .tp-brand-hierarchy>div>span{font-family:var(--sc-font-mono);font-size:.57rem;letter-spacing:.1em;color:var(--tp-paper-accent)} .tp-brand-hierarchy p{font-family:var(--sc-font-display);font-weight:600;letter-spacing:-.04em;line-height:1;margin:0} .tp-brand-hierarchy .h-3xl{font-size:clamp(3rem,6vw,6rem)}.tp-brand-hierarchy .h-2xl{font-size:clamp(2.35rem,4.5vw,4.5rem)} .tp-brand-hierarchy .h-xl{font-size:clamp(1.8rem,3vw,3rem)}.tp-brand-hierarchy .h-lg{font-family:var(--sc-font-text);font-size:var(--tp-type-lede);font-weight:500;line-height:1.4} .tp-brand-hierarchy .h-body{font-family:var(--sc-font-text);font-size:var(--tp-type-body);font-weight:400;line-height:1.65;letter-spacing:0;max-width:64ch;color:var(--tp-paper-soft)} .tp-brand-hierarchy .h-question{font-family:var(--sc-font-text);font-size:var(--tp-type-question);font-weight:600;line-height:1.5;letter-spacing:0;color:var(--tp-paper-ink)} .tp-brand-hierarchy .h-small{font-family:var(--sc-font-text);font-size:var(--tp-type-small);font-weight:400;line-height:1.62;letter-spacing:0;color:var(--tp-paper-soft)} .tp-brand-hierarchy .h-label{font-family:var(--sc-font-mono);font-size:var(--tp-type-label);line-height:1.5;letter-spacing:.12em;color:var(--tp-paper-accent)} .tp-brand-type-policy{max-width:70ch;margin:clamp(2.5rem,5vw,4.5rem) 0 0 auto;font-size:var(--tp-type-body);line-height:1.7;color:var(--tp-paper-soft);text-wrap:pretty} .tp-brand-section--dark .tp-brand-spec-label{color:#8E8EA0} .tp-brand-control-row{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--tp-brand-hair);border:1px solid var(--tp-brand-hair);margin-bottom:4rem} .tp-brand-control-row>div{min-height:13rem;display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;padding:1.5rem;background:#0C0C13} .tp-brand-button-secondary{display:inline-flex;align-items:center;min-height:2.9rem;padding:.65rem 1.2rem;border:1px solid color-mix(in oklab,#EDEDF2 24%,transparent); border-radius:999px;color:#EDEDF2;text-decoration:none;font-size:.88rem;font-weight:600;transition:border-color 160ms var(--sc-ease-out),background 160ms var(--sc-ease-out)} .tp-brand-button-secondary:hover{border-color:#EDEDF2;background:color-mix(in oklab,#EDEDF2 6%,transparent)} .tp-brand-text-link{font-family:var(--sc-font-mono);font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;color:#EDEDF2;text-decoration:none; border-bottom:1px solid var(--tp-amber);padding-bottom:.25rem}.tp-brand-text-link::after{content:" ↗";color:var(--tp-amber)} .tp-brand-component-grid{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--tp-brand-hair)} .tp-brand-component-grid article{min-height:15rem;padding:1.8rem 0;border-bottom:1px solid var(--tp-brand-hair)} .tp-brand-component-grid article:nth-child(odd){padding-right:2rem;border-right:1px solid var(--tp-brand-hair)} .tp-brand-component-grid article:nth-child(even){padding-left:2rem} .tp-brand-proof-sample{display:flex;align-items:flex-end;gap:1rem;margin-top:3rem}.tp-brand-proof-sample b{font-family:var(--sc-font-display);font-size:clamp(2.8rem,5vw,5.2rem);line-height:.8;color:var(--tp-amber)} .tp-brand-proof-sample>span{font-size:.86rem;line-height:1.4;color:#A2A2B0;max-width:10ch} .tp-brand-status{display:inline-flex;align-items:center;gap:.7rem;margin-top:3.6rem;font-family:var(--sc-font-mono);font-size:.68rem;letter-spacing:.1em;color:#EDEDF2} .tp-brand-status i{width:.55rem;aspect-ratio:1;border-radius:50%;background:var(--tp-amber);box-shadow:0 0 0 5px color-mix(in oklab,var(--tp-amber) 12%,transparent)} .tp-brand-field{display:flex;flex-direction:column;gap:.7rem;margin-top:2rem;font-family:var(--sc-font-mono);font-size:.6rem;letter-spacing:.09em;color:#A2A2B0} .tp-brand-field input{width:100%;border:0;border-bottom:1px solid color-mix(in oklab,#EDEDF2 25%,transparent);border-radius:0;background:none;padding:.9rem 0;color:#EDEDF2;outline:0} .tp-brand-field input:focus{border-color:var(--tp-amber)} .tp-brand-surface{margin-top:1.6rem;padding:1.4rem;border:1px solid var(--tp-brand-hair);border-bottom-color:var(--tp-amber)} .tp-brand-surface>span{font-family:var(--sc-font-mono);font-size:.58rem;letter-spacing:.1em;color:var(--tp-amber)} .tp-brand-surface b{display:block;font-family:var(--sc-font-display);font-size:1.35rem;margin:.7rem 0}.tp-brand-surface p{font-size:.84rem;line-height:1.5;color:#A2A2B0;margin:0} .tp-brand-token-line{display:grid;grid-template-columns:auto 1fr auto 1.25fr;gap:1.2rem;align-items:baseline;padding:1.35rem 0;border-bottom:1px solid var(--tp-brand-hair)} .tp-brand-token-line span{font-family:var(--sc-font-mono);font-size:.58rem;letter-spacing:.12em;color:var(--tp-amber)} .tp-brand-token-line b{font-family:var(--sc-font-mono);font-size:.65rem;line-height:1.5;color:#A2A2B0;font-weight:400} .tp-brand-voice-grid{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--tp-hair-paper)} .tp-brand-voice-grid article{position:relative;min-height:15rem;padding:2rem 3rem 2rem 0;border-bottom:1px solid var(--tp-hair-paper)} .tp-brand-voice-grid article:nth-child(odd){border-right:1px solid var(--tp-hair-paper)}.tp-brand-voice-grid article:nth-child(even){padding-left:3rem} .tp-brand-voice-grid article>span{font-family:var(--sc-font-mono);font-size:.58rem;letter-spacing:.12em;color:var(--tp-paper-accent)} .tp-brand-voice-grid h3{font-family:var(--sc-font-display);font-size:clamp(1.45rem,2.4vw,2.2rem);line-height:1.05;letter-spacing:-.035em;font-weight:600;max-width:17ch;margin:2rem 0 .9rem} .tp-brand-voice-grid p{font-size:.92rem;line-height:1.58;color:var(--tp-paper-soft);max-width:42ch;margin:0} .tp-brand-voice-grid+blockquote{font-family:var(--sc-font-display);font-size:clamp(2.8rem,6vw,6rem);line-height:.95;letter-spacing:-.055em;font-weight:600; max-width:13ch;margin:clamp(4rem,8vw,8rem) 0 0 auto;color:var(--tp-paper-ink)} .tp-brand-voice-grid+blockquote::before{content:"+";display:block;font-size:.6em;line-height:1;color:var(--tp-amber);margin-bottom:1rem} .tp-brand-motion{display:grid;grid-template-columns:minmax(20rem,.9fr) minmax(0,1.1fr);gap:clamp(3rem,7vw,7rem);align-items:center} .tp-brand-motion-demo{position:relative;min-height:23rem;display:grid;place-items:center;background:#08080D;overflow:hidden} .tp-brand-motion-demo::before{content:"";position:absolute;inset:1.2rem;border:1px solid color-mix(in oklab,#EDEDF2 14%,transparent)} .tp-brand-motion-demo .m-plus{position:absolute;font-family:var(--sc-font-display);font-size:7rem;line-height:1;color:var(--tp-amber);animation:tpBrandPlus 6s var(--sc-ease-in-out) infinite} .tp-brand-motion-demo .m-line{position:absolute;width:30%;height:1px;background:var(--tp-amber);opacity:.35;animation:tpBrandLine 6s var(--sc-ease-in-out) infinite} .tp-brand-motion-demo svg{position:absolute;width:6rem;fill:none;stroke:var(--tp-amber);stroke-width:1.6;stroke-linecap:round;opacity:0;animation:tpBrandPerson 6s var(--sc-ease-in-out) infinite} .tp-brand-motion>div:last-child>p{font-size:1.05rem;line-height:1.65;color:var(--tp-paper-soft);max-width:54ch}.tp-brand-motion strong{color:var(--tp-paper-ink)} .tp-brand-motion dl{margin:2.4rem 0 0;border-top:1px solid var(--tp-hair-paper)} .tp-brand-motion dl>div{display:grid;grid-template-columns:10rem 1fr;padding:.8rem 0;border-bottom:1px solid var(--tp-hair-paper)} .tp-brand-motion dt,.tp-brand-motion dd{font-family:var(--sc-font-mono);font-size:.62rem;letter-spacing:.08em;margin:0}.tp-brand-motion dt{color:var(--tp-paper-accent)}.tp-brand-motion dd{color:var(--tp-paper-soft)} @keyframes tpBrandPlus{0%,28%{opacity:1;transform:none}42%,86%{opacity:0;transform:translateX(5rem) rotate(90deg) scale(.65)}100%{opacity:1;transform:none}} @keyframes tpBrandLine{0%,20%{transform:scaleX(0);opacity:0}38%,56%{transform:scaleX(1);opacity:.4}70%,100%{transform:scaleX(0);opacity:0}} @keyframes tpBrandPerson{0%,38%{opacity:0;transform:translateX(-4rem) scale(.7)}53%,84%{opacity:1;transform:none}100%{opacity:0;transform:translateX(2rem) scale(.9)}} .tp-brand-applications{background:var(--tp-paper);padding-bottom:clamp(6rem,12vw,12rem)} .tp-brand-app-lede{max-width:48ch;margin:-2.2rem 0 clamp(3rem,6vw,6rem) auto;font-size:clamp(1.15rem,1.8vw,1.55rem);line-height:1.5;color:var(--tp-paper-soft);text-wrap:pretty} .tp-brand-doc-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.5rem,4vw,4rem)} .tp-brand-application{min-width:0}.tp-brand-doc-shell{min-height:clamp(30rem,50vw,48rem);display:grid;place-items:center;padding:clamp(1rem,3vw,2.5rem); background:#DEDAD1;border:1px solid var(--tp-hair-paper)} .tp-brand-doc-page{position:relative;width:min(100%,27rem);aspect-ratio:210/297;background:#F8F6F1;color:#17161D;padding:7%;box-shadow:0 20px 50px -28px rgba(23,22,29,.45);overflow:hidden; --tp-paper-ink:#17161D;--tp-paper-body:#3A3944;--tp-paper-soft:#565460;--tp-paper-accent:#A15E08;--tp-hair-paper:color-mix(in oklab,#17161D 16%,transparent)} .tp-brand-doc-page header{display:flex;justify-content:space-between;align-items:flex-start}.tp-brand-doc-page header b{font-family:var(--sc-font-display);font-size:clamp(.75rem,1.4vw,1.15rem);letter-spacing:-.035em} .tp-brand-doc-page header b span{color:var(--tp-amber)}.tp-brand-doc-page header small{font-family:var(--sc-font-mono);font-size:clamp(.28rem,.55vw,.42rem);letter-spacing:.1em;color:var(--tp-paper-accent)} .tp-brand-letter-preview>i{display:block;height:1px;background:var(--tp-hair-paper);margin:18% 0 7%} .tp-brand-letter-layout{display:grid;grid-template-columns:.48fr 1fr;gap:7%}.tp-brand-letter-layout address{font-style:normal;display:flex;flex-direction:column;gap:.35rem} .tp-brand-letter-layout address small{font-family:var(--sc-font-mono);font-size:.37rem;letter-spacing:.1em;color:var(--tp-paper-accent)} .tp-brand-letter-layout address b{font-size:clamp(.48rem,.9vw,.7rem)}.tp-brand-letter-layout address span{font-size:clamp(.42rem,.75vw,.6rem);line-height:1.45;color:var(--tp-paper-soft)} .tp-brand-letter-layout h3{font-family:var(--sc-font-display);font-size:clamp(.9rem,2vw,1.55rem);line-height:.98;letter-spacing:-.04em;margin:0 0 9%} .tp-brand-letter-layout p{font-size:clamp(.42rem,.78vw,.62rem);line-height:1.55;margin:0 0 7%} .tp-brand-doc-page>footer{position:absolute;left:7%;right:7%;bottom:6%;padding-top:2.5%;border-top:1px solid var(--tp-hair-paper);font-family:var(--sc-font-mono); font-size:clamp(.25rem,.5vw,.36rem);letter-spacing:.06em;color:var(--tp-paper-soft)}.tp-brand-doc-page>footer span{float:right} .tp-brand-invoice-title{display:grid;grid-template-columns:1fr .5fr;gap:7%;margin:16% 0 14%}.tp-brand-invoice-title h3{font-family:var(--sc-font-display); font-size:clamp(1.2rem,2.5vw,2rem);line-height:.94;letter-spacing:-.05em;margin:0}.tp-brand-invoice-title h3 em{font-style:normal;color:var(--tp-amber)} .tp-brand-invoice-title dl{margin:0}.tp-brand-invoice-title dt{font-family:var(--sc-font-mono);font-size:.32rem;letter-spacing:.08em;color:var(--tp-paper-accent);margin-bottom:.18rem} .tp-brand-invoice-title dd{font-size:clamp(.38rem,.72vw,.58rem);margin:0 0 .65rem} .tp-brand-invoice-lines{display:grid;grid-template-columns:1fr .2fr .28fr;border-top:1px solid var(--tp-hair-paper);font-size:clamp(.35rem,.68vw,.55rem)} .tp-brand-invoice-lines>*{padding:4% 0;border-bottom:1px solid var(--tp-hair-paper)}.tp-brand-invoice-lines>span{font-family:var(--sc-font-mono);font-size:.31rem;letter-spacing:.06em;color:var(--tp-paper-accent)} .tp-brand-invoice-lines>*:nth-child(3n+2),.tp-brand-invoice-lines>*:nth-child(3n+3){text-align:right}.tp-brand-invoice-total{display:flex;justify-content:space-between;align-items:center;margin-top:8%;padding:5%;background:#08080D;color:#EDEDF2} .tp-brand-invoice-total span{font-family:var(--sc-font-mono);font-size:.32rem;letter-spacing:.07em;color:var(--tp-amber)}.tp-brand-invoice-total b{font-family:var(--sc-font-display);font-size:clamp(.52rem,1vw,.78rem)} .tp-brand-application-copy{padding:1.5rem 0 0}.tp-brand-application-copy h3{font-family:var(--sc-font-display);font-size:clamp(1.8rem,3vw,2.7rem);line-height:1;letter-spacing:-.04em;margin:.7rem 0 1rem} .tp-brand-application-copy p{font-size:.92rem;line-height:1.6;color:var(--tp-paper-soft);max-width:48ch;margin:0} .tp-brand-email{margin-top:clamp(4rem,8vw,8rem);border:1px solid var(--tp-hair-paper);background:#F8F6F1;color:#17161D; --tp-paper-ink:#17161D;--tp-paper-body:#3A3944;--tp-paper-soft:#565460;--tp-paper-accent:#A15E08;--tp-hair-paper:color-mix(in oklab,#17161D 16%,transparent)} .tp-brand-email-chrome{height:3.3rem;display:flex;align-items:center;gap:.45rem;padding:0 1.2rem;border-bottom:1px solid var(--tp-hair-paper);background:#EAE7E0} .tp-brand-email-chrome i{width:.55rem;aspect-ratio:1;border-radius:50%;background:#C8C2B8}.tp-brand-email-chrome i:first-child{background:var(--tp-amber)} .tp-brand-email-chrome>span{margin-left:auto;font-family:var(--sc-font-mono);font-size:.55rem;letter-spacing:.08em;color:var(--tp-paper-soft)} .tp-brand-email-meta{display:grid;grid-template-columns:1.35fr .65fr;border-bottom:1px solid var(--tp-hair-paper)} .tp-brand-email-meta>div{display:flex;flex-direction:column;gap:.35rem;padding:1.2rem 1.5rem}.tp-brand-email-meta>div+div{border-left:1px solid var(--tp-hair-paper)} .tp-brand-email-meta small{font-family:var(--sc-font-mono);font-size:.54rem;letter-spacing:.1em;color:var(--tp-paper-accent)}.tp-brand-email-meta b,.tp-brand-email-meta span{font-size:.86rem} .tp-brand-email-body{max-width:42rem;margin:0 auto;padding:clamp(3rem,7vw,6rem) clamp(1.5rem,5vw,4rem)} .tp-brand-email-body>p:first-child{font-size:.95rem;margin:0 0 2rem}.tp-brand-email-body h3{font-family:var(--sc-font-display);font-size:clamp(2.2rem,4.8vw,4.5rem);line-height:.94;letter-spacing:-.055em;margin:0 0 2rem} .tp-brand-email-body h3+p{font-size:1rem;line-height:1.65;color:var(--tp-paper-soft);max-width:56ch;margin:0 0 2rem} .tp-brand-email-body>a{display:inline-flex;background:var(--tp-amber);color:#1A1206;border-radius:999px;padding:.72rem 1.2rem;text-decoration:none;font-size:.87rem;font-weight:600} .tp-brand-email-signoff{font-size:.84rem;line-height:1.5;margin:3rem 0 0!important;color:var(--tp-paper-soft)}.tp-brand-email-signoff>b{font-family:var(--sc-font-mono);font-size:.58rem;letter-spacing:.1em;color:var(--tp-paper-accent)} .tp-brand-email-signoff>span{font-family:var(--sc-font-display);font-weight:600;color:var(--tp-paper-ink)}.tp-brand-email-signoff>span span{color:var(--tp-amber)} .tp-brand-email>footer{display:grid;grid-template-columns:11rem 1fr;gap:2rem;padding:1.2rem 1.5rem;border-top:1px solid var(--tp-hair-paper);background:#EAE7E0} .tp-brand-email>footer p{font-size:.82rem;line-height:1.5;color:var(--tp-paper-soft);margin:0;max-width:62ch} .tp-brand-press{padding-bottom:clamp(6rem,11vw,11rem)} .tp-press-opening{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(18rem,.55fr);gap:clamp(3rem,7vw,7rem); align-items:start;margin-bottom:clamp(3rem,6vw,6rem)} .tp-press-thesis{font-family:var(--sc-font-display);font-size:clamp(2rem,3.7vw,3.8rem);line-height:1.03;letter-spacing:-.045em; font-weight:600;color:#EDEDF2;max-width:22ch;text-wrap:balance;margin:0} .tp-press-download{display:flex;flex-direction:column;align-items:flex-start;gap:1.1rem;padding:1.4rem 0;border-top:1px solid var(--tp-brand-hair); border-bottom:1px solid var(--tp-brand-hair)} .tp-press-download small{font-size:.76rem;line-height:1.5;color:#8E8EA0;max-width:31ch} .tp-press-facts{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));border:1px solid var(--tp-brand-hair);margin-bottom:clamp(4rem,8vw,8rem)} .tp-press-facts>div{min-width:0;min-height:11rem;display:flex;flex-direction:column;justify-content:space-between;gap:1.5rem;padding:1.3rem;border-left:1px solid var(--tp-brand-hair)} .tp-press-facts>div:first-child{border-left:0}.tp-press-facts>div>span{font-family:var(--sc-font-display);font-size:clamp(1.7rem,2.5vw,2.65rem);line-height:1; letter-spacing:-.045em;font-weight:600;color:var(--tp-amber);white-space:nowrap} .tp-press-facts>div>small{display:block;font-family:var(--sc-font-mono);font-size:.55rem;line-height:1.5;letter-spacing:.09em;text-transform:uppercase;color:#A2A2B0; overflow-wrap:anywhere;text-wrap:balance} .tp-press-facts>div>small>span{display:block;font:inherit;line-height:inherit;letter-spacing:inherit;text-transform:inherit;color:inherit;white-space:normal} .tp-press-copy{background:var(--tp-paper);color:var(--tp-paper-ink);margin-bottom:clamp(4rem,8vw,8rem)} .tp-press-copy article{display:grid;grid-template-columns:minmax(12rem,.42fr) minmax(0,1fr);gap:clamp(2rem,6vw,6rem);padding:clamp(2rem,5vw,4.5rem); border-bottom:1px solid var(--tp-hair-paper)}.tp-press-copy article:last-child{border-bottom:0} .tp-press-copy h3{font-family:var(--sc-font-display);font-size:clamp(1.8rem,3vw,3rem);line-height:1;letter-spacing:-.04em;margin:.8rem 0 0} .tp-press-copy p{font-size:clamp(.98rem,1.25vw,1.12rem);line-height:1.68;color:var(--tp-paper-soft);max-width:68ch;margin:0;text-wrap:pretty} .tp-press-lower{display:grid;grid-template-columns:minmax(17rem,.72fr) minmax(0,1.28fr);gap:clamp(3rem,7vw,7rem);margin-bottom:clamp(4rem,8vw,8rem)} .tp-press-lower h3{font-family:var(--sc-font-display);font-size:clamp(2rem,3.7vw,3.7rem);line-height:.98;letter-spacing:-.045em;max-width:13ch;margin:1rem 0 2rem} .tp-press-founders dl{margin:0;border-top:1px solid var(--tp-brand-hair)}.tp-press-founders dl>div{display:grid;grid-template-columns:1fr auto;gap:1rem; padding:.9rem 0;border-bottom:1px solid var(--tp-brand-hair)} .tp-press-founders dt{font-size:.88rem;color:#EDEDF2}.tp-press-founders dd{font-family:var(--sc-font-mono);font-size:.55rem;letter-spacing:.08em;text-transform:uppercase;color:#8E8EA0;margin:0} .tp-press-marks{display:grid;grid-template-columns:1fr 1fr .55fr;border:1px solid var(--tp-brand-hair)} .tp-press-marks a{min-width:0;display:flex;flex-direction:column;text-decoration:none;border-left:1px solid var(--tp-brand-hair);overflow:hidden} .tp-press-marks a:first-child{border-left:0}.tp-press-marks img,.tp-press-transparent{width:100%;aspect-ratio:4/1;object-fit:cover;display:grid;place-items:center;background:#101018} .tp-press-transparent b{font-family:var(--sc-font-display);font-size:clamp(2rem,5vw,4rem);line-height:1;color:var(--tp-amber)} .tp-press-marks a>span:last-child{font-family:var(--sc-font-mono);font-size:.52rem;letter-spacing:.1em;color:#A2A2B0;padding:.75rem .8rem;border-top:1px solid var(--tp-brand-hair)} .tp-press-marks a:hover>span:last-child{color:var(--tp-amber)} .tp-press-assets>p{font-size:.85rem;line-height:1.58;color:#8E8EA0;max-width:62ch;margin:1.5rem 0 0} .tp-press-contact{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:end;padding-top:1.5rem;border-top:1px solid var(--tp-brand-hair)} .tp-press-contact>div{display:flex;flex-direction:column;align-items:flex-start;gap:.7rem}.tp-press-contact a{font-family:var(--sc-font-display);font-size:clamp(1.5rem,3vw,2.8rem); line-height:1;letter-spacing:-.035em;color:#EDEDF2;text-decoration:none;border-bottom:1px solid var(--tp-amber)} .tp-press-contact p{font-size:.9rem;line-height:1.55;color:#8E8EA0;max-width:40ch;margin:0} .tp-page-foot-nav{display:flex;align-items:center;gap:1rem;flex-wrap:wrap}.tp-page-foot-nav a[aria-current="page"]{color:var(--tp-paper-accent)} .tp-subpage-body--dark .tp-page-foot-nav a[aria-current="page"]{color:var(--tp-amber)} .tp-foot-brand{white-space:nowrap} @media(max-width:980px){ .tp-brand-index{overflow-x:auto;scrollbar-width:none}.tp-brand-index::-webkit-scrollbar{display:none} .tp-brand-index .sc-wrap{width:max-content;min-width:100%;grid-template-columns:repeat(9,minmax(7.7rem,1fr));padding-inline:var(--sc-gutter)} .tp-brand-hero-grid{grid-template-columns:1fr}.tp-brand-intro{max-width:37rem} .tp-brand-swatches{grid-template-columns:repeat(4,1fr)}.tp-brand-swatches figure:nth-child(5){border-left:0} .tp-brand-type-list article{grid-template-columns:10rem 1fr}.tp-brand-type-list article>p:last-child{grid-column:2} .tp-brand-motion{grid-template-columns:1fr}.tp-brand-motion-demo{min-height:20rem} .tp-brand-doc-shell{min-height:34rem} .tp-press-facts{grid-template-columns:repeat(3,1fr)}.tp-press-facts>div:nth-child(4){border-left:0;border-top:1px solid var(--tp-brand-hair)} .tp-press-facts>div:nth-child(5){border-top:1px solid var(--tp-brand-hair)} .tp-press-lower{grid-template-columns:1fr} } @media(max-width:700px){ .tp-brand-hero{min-height:43rem;padding:8rem 0 4rem}.tp-brand-hero::before{right:-45%;top:26%} .tp-brand-hero h1{font-size:clamp(3.1rem,16vw,4.8rem)}.tp-brand-intro>p:first-child{font-size:.98rem} .tp-brand-index a{min-height:4.2rem}.tp-brand-section-head{grid-template-columns:1fr;gap:1.2rem;margin-bottom:3.5rem} .tp-brand-section-head>p{padding:0}.tp-brand-section-head h2{font-size:clamp(2.65rem,13vw,4rem)} .tp-brand-logo-pair{grid-template-columns:1fr}.tp-brand-logo-field{min-height:17rem}.tp-brand-logo-notes{grid-template-columns:1fr} .tp-brand-swatches{grid-template-columns:repeat(2,1fr)}.tp-brand-swatches figure:nth-child(odd){border-left:0}.tp-brand-swatches figure:nth-child(5){border-left:0} .tp-brand-swatches i{height:8.5rem}.tp-brand-principle{font-size:1.08rem;margin-top:2.5rem}.tp-brand-color-rules{grid-template-columns:1fr;gap:1.5rem}.tp-brand-color-rules .tp-brand-principle{margin:0} .tp-brand-type-list article{grid-template-columns:1fr;gap:1.2rem}.tp-brand-type-list article>p:last-child{grid-column:auto}.tp-brand-type-meta small{margin-top:.4rem} .tp-brand-hierarchy>div{grid-template-columns:1fr;gap:.7rem}.tp-brand-hierarchy .h-3xl{font-size:clamp(2.6rem,13vw,3.7rem)} .tp-brand-control-row{grid-template-columns:1fr}.tp-brand-control-row>div{min-height:9rem}.tp-brand-component-grid{grid-template-columns:1fr} .tp-brand-component-grid article,.tp-brand-component-grid article:nth-child(odd),.tp-brand-component-grid article:nth-child(even){padding:1.5rem 0;border-right:0;min-height:12rem} .tp-brand-token-line{grid-template-columns:auto 1fr}.tp-brand-voice-grid{grid-template-columns:1fr}.tp-brand-voice-grid article,.tp-brand-voice-grid article:nth-child(even){padding:1.7rem 0;border-right:0;min-height:0} .tp-brand-voice-grid h3{margin-top:1.3rem}.tp-brand-motion-demo{min-height:17rem}.tp-brand-motion dl>div{grid-template-columns:7.5rem 1fr} .tp-brand-app-lede{margin:-1.5rem 0 3rem}.tp-brand-doc-grid{grid-template-columns:1fr}.tp-brand-doc-shell{min-height:0;padding:1rem}.tp-brand-doc-page{width:min(100%,23rem)} .tp-brand-email-meta{grid-template-columns:1fr}.tp-brand-email-meta>div+div{border-left:0;border-top:1px solid var(--tp-hair-paper)} .tp-brand-email-body{padding:3rem 1.35rem}.tp-brand-email-body h3{font-size:clamp(2.2rem,12vw,3.4rem)}.tp-brand-email>footer{grid-template-columns:1fr;gap:.7rem} .tp-press-opening{grid-template-columns:1fr}.tp-press-thesis{font-size:clamp(1.8rem,9vw,2.6rem)} .tp-press-facts{grid-template-columns:1fr 1fr}.tp-press-facts>div{min-height:8.5rem}.tp-press-facts>div:nth-child(odd){border-left:0}.tp-press-facts>div:nth-child(even){border-left:1px solid var(--tp-brand-hair)} .tp-press-facts>div:nth-child(n+3){border-top:1px solid var(--tp-brand-hair)}.tp-press-copy article{grid-template-columns:1fr;padding:2rem 1.35rem} .tp-press-marks{grid-template-columns:1fr 1fr}.tp-press-marks a:nth-child(3){grid-column:1/-1;border-left:0;border-top:1px solid var(--tp-brand-hair)} .tp-press-transparent{aspect-ratio:4/1}.tp-press-contact{grid-template-columns:1fr;gap:1.5rem} .tp-page-foot-nav{gap:.8rem} .tp-foot>.tp-foot-brand{display:inline-flex} } @media(max-width:390px){ .tp-brand-swatches figcaption{padding:.8rem .65rem 1rem}.tp-brand-wordmark{font-size:2.3rem} .tp-brand-letter-layout{grid-template-columns:.42fr 1fr;gap:5%}.tp-brand-letter-layout h3{font-size:.86rem} .tp-brand-email-chrome>span{display:none} } @media(prefers-reduced-motion:reduce){ .tp-brand-motion-demo .m-plus,.tp-brand-motion-demo .m-line,.tp-brand-motion-demo svg{animation:none} .tp-brand-motion-demo .m-plus{opacity:0}.tp-brand-motion-demo .m-line{opacity:.35;transform:scaleX(1)}.tp-brand-motion-demo svg{opacity:1;transform:none} } /* ================= MULTI-PAGE EDITION ================= */ .tp-page-kicker{font-family:var(--sc-font-mono);font-size:var(--tp-type-label);line-height:1.5;letter-spacing:.16em;text-transform:uppercase;color:var(--tp-paper-accent);margin:0 0 clamp(1.5rem,3vw,2.4rem)} .tp-platform-hero{min-height:100svh;display:flex;align-items:center;background:var(--w-canvas);color:var(--w-ink);padding-top:7rem} html[data-tptheme="light"] .tp-platform-hero{background:var(--w-canvas-2);color:var(--w-ink)} .tp-platform-hero-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(22rem,.72fr);gap:clamp(3rem,8vw,9rem);align-items:end} .tp-platform-hero h1{font-size:clamp(3.7rem,7vw,7.6rem);line-height:.91;letter-spacing:-.065em;max-width:9.8ch;margin:0;text-wrap:balance} .tp-platform-hero .tp-prose{padding-bottom:.6rem}.tp-platform-hero .tp-prose p{font-size:var(--tp-type-lede);line-height:1.55;color:var(--w-body);max-width:56ch} .tp-proof-page-hero{min-height:88svh;display:flex;align-items:center;padding-top:clamp(10rem,14vw,13rem);padding-bottom:clamp(8rem,11vw,11rem)} .tp-proof-page-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(22rem,.62fr);gap:clamp(5rem,9vw,10rem);align-items:start} .tp-proof-page-head h1{font-size:clamp(3.5rem,6.2vw,6.6rem);line-height:.91;letter-spacing:-.06em;max-width:9ch;margin:0;text-wrap:balance} .tp-proof-page-head .tp-prose{padding-top:.15rem}.tp-proof-page-head .tp-prose p{font-size:var(--tp-type-body);line-height:1.72;max-width:50ch} .tp-about-page{padding-top:clamp(9rem,14vw,13rem)} .tp-about-page .tp-about-panel h1{font-family:var(--sc-font-display);font-size:var(--sc-t-3xl);line-height:1.01;letter-spacing:var(--sc-track-snug);font-weight:600;margin:0;max-width:11ch;text-wrap:balance} .tp-about-page .tp-about-panel--team h2{font-family:var(--sc-font-display);font-size:var(--sc-t-2xl);line-height:1.04;letter-spacing:var(--sc-track-snug);font-weight:600;margin:0;max-width:14ch;text-wrap:balance} .tp-faq-page{padding-top:clamp(10rem,15vw,14rem);padding-bottom:clamp(7rem,12vw,11rem)} .tp-faq-page>div>div:first-child{margin-bottom:clamp(3rem,7vw,6rem)} .tp-faq-page .tp-faq{max-width:100%} .tp-faq-page .tp-faq .a{max-width:78ch} .tp-model-equation{position:relative;min-height:100svh;background:var(--w-canvas)} .tp-model-equation .tp-eq-stage{min-height:100svh;height:auto} .tp-model-equation .tp-eq-grid{grid-template-columns:minmax(0,48rem) minmax(20rem,1fr);gap:clamp(5rem,8vw,10rem);width:min(100%,100rem);min-height:100svh;height:auto;padding-top:clamp(9rem,13vh,12rem);padding-bottom:clamp(4rem,7vh,7rem);align-items:center} .tp-model-equation .tp-eq-copy{align-self:center} .tp-model-equation .tp-eq-copy h1{max-width:9ch;margin:0 0 clamp(2.6rem,5vh,4.5rem);text-wrap:balance} .tp-model-equation .tp-eq-copy h3{font-size:clamp(2rem,3.3vw,3.4rem);max-width:13ch;margin-bottom:clamp(1.8rem,3vh,2.6rem)} .tp-model-equation .tp-eq-copy .tp-prose{max-width:58ch} .tp-model-equation .tp-eq-copy .tp-prose p{margin-bottom:1.35rem} .tp-model-equation .tp-tower-wrap{height:min(68svh,660px);transform:translateY(clamp(2.5rem,5vh,4.5rem))} .tp-start-page{min-height:100svh;display:flex;align-items:center;background:var(--w-canvas);color:var(--w-ink);padding-top:8rem} html[data-tptheme="light"] .tp-start-page{background:var(--w-canvas-2);color:var(--w-ink)} .tp-start-page-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(22rem,.58fr);gap:clamp(3rem,9vw,10rem);align-items:end} .tp-start-page h1{font-size:clamp(4rem,7.4vw,8rem);line-height:.9;letter-spacing:-.065em;max-width:9ch;margin:0;text-wrap:balance} .tp-start-page-grid>div:last-child{padding-bottom:.7rem}.tp-start-page-grid p{font-size:var(--tp-type-lede);line-height:1.6;color:var(--w-body);max-width:46ch;margin:0 0 2.2rem;text-wrap:pretty} .tp-eq-copy h3{font-family:var(--sc-font-display);font-size:var(--sc-t-2xl);line-height:1.04;letter-spacing:var(--sc-track-snug);font-weight:600;margin:0 0 1.6rem} .tp-platform-detail{padding-top:clamp(7rem,12vw,12rem);padding-bottom:clamp(7rem,12vw,12rem)} .tp-platform-intro{display:grid;grid-template-columns:minmax(0,.8fr) minmax(22rem,.7fr);gap:clamp(2rem,8vw,8rem);align-items:end;margin-bottom:clamp(4.5rem,9vw,8rem)} .tp-platform-intro h2{margin:0}.tp-platform-intro>p{font-size:var(--tp-type-lede);line-height:1.65;color:var(--tp-paper-soft);max-width:48ch;margin:0} .tp-platform-blocks{counter-reset:platform-block;border-top:1px solid var(--tp-hair-paper)} .tp-platform-blocks article{display:grid;grid-template-columns:4rem minmax(14rem,.52fr) minmax(0,1fr);gap:clamp(1.5rem,4vw,4rem);padding:clamp(2.2rem,5vw,4.2rem) 0;border-bottom:1px solid var(--tp-hair-paper);align-items:start} .tp-platform-blocks article>span{font-family:var(--sc-font-mono);font-size:.58rem;letter-spacing:.16em;color:var(--tp-paper-accent);padding-top:.55rem} .tp-platform-blocks h2{font-family:var(--sc-font-display);font-size:clamp(1.75rem,3vw,3.4rem);line-height:.98;letter-spacing:-.045em;margin:0;text-wrap:balance} .tp-platform-blocks p{font-size:var(--tp-type-body);line-height:1.72;color:var(--tp-paper-soft);max-width:68ch;margin:0;text-wrap:pretty} .tp-page-action{display:flex;justify-content:flex-end;margin:clamp(3rem,6vw,6rem) 0 0} .tp-site-footer{background:#08080D;color:#A7A7B4;display:grid;grid-template-columns:auto 1fr auto;gap:clamp(2rem,5vw,5rem);align-items:start;padding:clamp(2rem,4vw,4rem) var(--sc-gutter);border-top:1px solid #262631;font-size:.78rem} .tp-site-footer-mark{font-family:var(--sc-font-display);font-size:1.05rem;font-weight:600;color:#F2F2F5;text-decoration:none;white-space:nowrap}.tp-site-footer-mark span{color:var(--tp-amber)} .tp-site-footer nav{display:flex;flex-wrap:wrap;gap:.7rem clamp(1rem,2.4vw,2.2rem)}.tp-site-footer nav a{color:#A7A7B4;text-decoration:none}.tp-site-footer nav a:hover{color:#F2F2F5} .tp-site-footer>span{font-family:var(--sc-font-mono);font-size:.58rem;letter-spacing:.08em;white-space:nowrap;padding-top:.2rem} .tp-site-footer-eq{grid-column:1/-1;margin:.15rem 0 0;font-family:var(--sc-font-mono);font-size:.6rem;letter-spacing:.08em;color:#8E8EA0;line-height:1.75;text-wrap:pretty} .tp-site-footer-eq b{font-weight:500;color:var(--tp-amber)} .tp-site-footer-eq i{font-style:normal;color:#7C7C8C} html[data-tptheme="light"] .tp-site-footer-eq{color:#555560} html[data-tptheme="light"] .tp-site-footer-eq i{color:#63636E} html[data-tptheme="light"] .tp-site-footer-eq b{color:#A15E08} html[data-tptheme="light"] .tp-site-footer{background:#E7E4DC;color:#555560;border-color:#CDC9C0}html[data-tptheme="light"] .tp-site-footer-mark{color:#1A1A20}html[data-tptheme="light"] .tp-site-footer nav a{color:#555560}html[data-tptheme="light"] .tp-site-footer nav a:hover{color:#1A1A20} @media(max-width:900px){ .tp-platform-hero-grid,.tp-platform-intro,.tp-proof-page-head,.tp-start-page-grid{grid-template-columns:1fr;align-items:start} .tp-platform-hero{min-height:auto;padding-top:10rem;padding-bottom:7rem}.tp-platform-hero h1{font-size:clamp(3.3rem,12vw,5.5rem)} .tp-proof-page-hero{min-height:auto;padding-top:10rem;padding-bottom:7rem}.tp-proof-page-head h1{font-size:clamp(3rem,11vw,5rem)} .tp-about-page .tp-about-panel h1{font-size:clamp(2.6rem,13vw,3.5rem)}.tp-about-page .tp-about-panel--team h2{font-size:2rem} .tp-start-page{min-height:auto;padding-top:10rem;padding-bottom:7rem}.tp-start-page h1{font-size:clamp(3.3rem,12vw,5.5rem)} .tp-eq-copy h3{font-size:var(--sc-t-xl);margin-bottom:.8rem} .tp-model-equation{min-height:auto} .tp-model-equation .tp-eq-stage{min-height:auto;overflow:visible} .tp-model-equation .tp-eq-grid{min-height:auto;height:auto;grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto;overflow:visible; width:100%;padding-top:8.5rem;padding-bottom:4rem;gap:2.5rem} .tp-model-equation .tp-eq-copy{min-width:0;width:100%} .tp-model-equation .tp-eq-copy h1{margin-bottom:2.25rem} .tp-model-equation .tp-eq-copy h3{font-size:clamp(1.9rem,7vw,2.8rem);margin-bottom:1.4rem} .tp-model-equation .tp-eq-copy .tp-prose p{display:block;font-size:var(--tp-type-body);line-height:1.62;margin-bottom:1rem} .tp-model-equation .tp-tower-wrap{height:clamp(32rem,62svh,42rem);min-height:32rem;overflow:hidden;transform:none} .tp-pricing-story>.tp-block{padding:4.5rem 0} .tp-pricing-story>.tp-block>h2{font-size:clamp(2.25rem,10.5vw,3.25rem);max-width:16ch;margin-bottom:2rem} .tp-pricing-story>.tp-block>h2:not(:first-child){margin-top:4.5rem} .tp-pricing-story>.tp-block>h3{margin-top:3.5rem} .tp-pricing-story>.tp-block>p{font-size:var(--tp-type-body);line-height:1.68;margin-bottom:1.4rem} .tp-pricing-story>.tp-block>.tp-price-graphic{margin:2.2rem 0 2.8rem;padding:1.1rem 0 1.25rem} .tp-pricing-story>.tp-block>.tp-callout{margin:2.5rem 0;padding-left:1.25rem} .tp-pricing-story>.tp-block>.tp-callout p{font-size:var(--tp-type-body);line-height:1.66} .tp-pricing-story>.tp-block>.tp-receipt{margin-top:2.8rem} .tp-platform-blocks article{grid-template-columns:3rem minmax(0,1fr)}.tp-platform-blocks p{grid-column:2} .tp-site-footer{grid-template-columns:1fr auto}.tp-site-footer nav{grid-column:1/-1;grid-row:2}.tp-site-footer>span{grid-column:2;grid-row:1} } @media(max-width:560px){ .tp-platform-blocks article{grid-template-columns:1fr;gap:.8rem}.tp-platform-blocks article>span,.tp-platform-blocks p{grid-column:auto}.tp-platform-blocks h2{font-size:clamp(2rem,10vw,2.8rem)} .tp-page-action{justify-content:stretch}.tp-page-action .tp-cta{width:100%;justify-content:center} .tp-site-footer{grid-template-columns:1fr}.tp-site-footer nav{grid-column:auto;grid-row:auto;display:grid;grid-template-columns:1fr 1fr}.tp-site-footer>span{grid-column:auto;grid-row:auto} } /* One visible page title per destination. The landing keeps the display scale; destination pages share this calmer H1 rhythm, followed by H2 sections and H3 components. */ .tp-subpage-body:not(.tp-brand-body) main h1.tp-page-title{font-family:var(--sc-font-display);font-size:clamp(3.75rem,6vw,6.6rem)!important;line-height:.94!important;letter-spacing:-.055em!important;font-weight:600} @media(max-width:700px){.tp-subpage-body:not(.tp-brand-body) main h1.tp-page-title{font-size:clamp(3rem,11vw,4.5rem)!important;line-height:.96!important}} .tp-subpage-body main .tp-model-equation h1.tp-page-title{font-size:clamp(3.75rem,6vw,6.6rem)!important;line-height:.92!important} @media(max-width:700px){.tp-subpage-body main .tp-model-equation h1.tp-page-title{font-size:clamp(3.1rem,13vw,4.5rem)!important}}