@font-face{font-family:"Haltung";src:url("fonts/haltung-regular.woff2") format("woff2");font-weight:400 500;font-display:swap}
@font-face{font-family:"Haltung";src:url("fonts/haltung-bold.woff2") format("woff2");font-weight:600 900;font-display:swap}
@font-face{font-family:"GT America Mono";src:url("fonts/gt-america-mono.woff2") format("woff2");font-weight:400 500;font-display:swap}
@font-face{font-family:"Inter";src:url("fonts/inter-latin.woff2") format("woff2-variations");font-weight:100 900;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Inter";src:url("fonts/inter-latin-ext.woff2") format("woff2-variations");font-weight:100 900;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
/* Pascal in a quiet product register: a grey page held by a hairline frame, regular-weight headlines, and the
   product as the imagery. Interface windows sit on soft atmospheres rendered in the layer pastels and bleed off
   the edges of their panels; the hero window is frosted glass over a drifting collage of atmospheres and dark line tiles. */
:root{
  --bg:#F8F8F8; --ink:#191919; --grey:rgba(25,25,25,.62); --grey2:rgba(25,25,25,.5); --line:rgba(25,25,25,.08);
  --accent:#5B3FB8;
  --peach:#FECFB5; --blue:#B4E0FF; --mint:#BEF5DD; --lav:#D9C9F5; --yellow:#FFFDA7;
  --sans:"Haltung","Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --ui:"Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"GT America Mono",ui-monospace,"SF Mono",Menlo,monospace;
  --frame:1280px; --pad:16px;
  --ok:#1B7A43; --bad:#C23A24; --wait:#A56A00;
  color-scheme:light;
}
*{box-sizing:border-box}
html{background:var(--bg);scroll-behavior:smooth;scroll-padding-top:72px;overflow-x:clip}
[hidden]{display:none!important}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:clip}
h1,h2,h3,h4,p,figure,ul,ol,dl,dd{margin:0}
ul,ol{padding:0;list-style:none}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
img{display:block}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.skip{position:absolute;left:12px;top:-48px;z-index:60;background:var(--ink);color:#fff;padding:8px 14px;border-radius:999px}
.skip:focus{top:12px}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* frame: two hairlines down the page; section rules run the full width */
.frame{max-width:var(--frame);margin:0 auto;border-left:1px solid var(--line);border-right:1px solid var(--line)}
.sec{position:relative;padding:112px var(--pad) 120px}
.sec::before,.rule::before{content:"";position:absolute;top:0;left:50%;width:100vw;margin-left:-50vw;border-top:1px solid var(--line);pointer-events:none}

/* nav */
.announcement{position:relative;background:#000;color:#fff}
.announcement>a{display:block;align-content:center;min-height:48px;padding:10px 56px;text-align:center;text-wrap:balance}
.announcement>a span{display:inline-block;margin-inline-start:4px;text-decoration:underline;text-decoration-color:rgba(255,255,255,.65);text-underline-offset:4px}
.announcement>a:hover span{ text-decoration-color:currentColor }
.announcement button{position:absolute;inset:0 4px 0 auto;margin-block:auto;width:44px;height:44px;display:grid;place-items:center;border-radius:50%}
.announcement button:hover{background:rgba(255,255,255,.12)}
.announcement :focus-visible{outline-color:currentColor;outline-offset:-4px}
.nav-open .announcement{display:none}
@media (max-width:680px){
  .announcement>a{min-height:44px;padding-inline:16px 52px;font-size:14px;text-align:left;text-wrap:pretty}
}
.nav{position:sticky;top:0;z-index:40;background:color-mix(in srgb,var(--bg) 86%,transparent);backdrop-filter:blur(16px) saturate(1.2);-webkit-backdrop-filter:blur(16px) saturate(1.2)}
.nav-row{position:relative;max-width:var(--frame);margin:0 auto;height:64px;display:flex;align-items:center;padding:0 var(--pad)}
.brand{display:flex;align-items:center;gap:8px;font-weight:700;font-size:20px;letter-spacing:-.022em;margin-right:48px}
.brand svg{width:20px;height:20px}
.links{display:flex;align-items:center;gap:6px;font-size:15px}
.links>a,.dd-btn{display:inline-flex;align-items:center;gap:4px;height:32px;padding:0 10px;border-radius:8px;color:var(--ink);transition:background-color .15s}
.links>a:hover,.dd-btn:hover,.dd-btn[aria-expanded="true"]{background:rgba(25,25,25,.05)}
.dd{position:relative}
.dd-btn svg{width:12px;height:12px;transition:transform .2s}
.dd-btn[aria-expanded="true"] svg{transform:rotate(180deg)}
.dd-panel{position:absolute;left:-8px;top:42px;width:560px;padding:8px;border-radius:14px;background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.06),0 24px 48px -16px rgba(0,0,0,.18);display:grid;grid-template-columns:1fr 1fr;gap:2px}
.dd-panel::before{content:"";position:absolute;left:0;right:0;bottom:100%;height:10px}
.dd-panel a{display:grid;grid-template-columns:28px minmax(0,1fr);align-content:start;gap:2px 12px;padding:12px;border-radius:10px;transition:background-color .15s}
.dd-panel a:hover{background:#F5F5F3}
.dd-panel i{grid-row:span 2;width:28px;height:28px;border-radius:7px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08)}
.dd-panel b{font-weight:400;font-size:15px}
.dd-panel span{font-size:13.5px;line-height:1.35;color:var(--grey)}
.dd-panel.list{width:300px;grid-template-columns:1fr}
.dd-panel.list a{grid-template-columns:minmax(0,1fr);padding:9px 12px}
.dd-platform{position:static}
.platform-menu.dd-panel{left:16px;right:16px;top:64px;width:auto;padding:0;display:block;max-height:calc(100dvh - 80px);overflow-y:auto;overscroll-behavior:contain}
.platform-columns{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.platform-group{min-width:0;padding:24px}
.platform-group+.platform-group{border-left:1px solid var(--line)}
.platform-group h2{display:flex;flex-direction:column;align-items:flex-start;gap:14px;margin-bottom:16px;font-size:18px;font-weight:400}
.platform-group img,.platform-shortcuts img{flex-shrink:0;border-radius:9px;object-fit:cover;box-shadow:inset 0 0 0 1px var(--line)}
.platform-menu .platform-group a{display:block;padding:7px 8px;margin:0 -8px;border-radius:6px;font-size:15px;line-height:1.5;color:var(--grey)}
.platform-menu a:hover,.platform-menu a:focus-visible{color:var(--ink);background:var(--bg)}
.platform-shortcuts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--line);padding:12px;gap:4px}
.platform-shortcuts a{display:flex;align-items:center;gap:12px;padding:12px;border-radius:8px}
.platform-shortcuts span{font-size:15px;color:var(--ink)}
.platform-shortcuts svg{width:14px;height:14px;margin-left:auto;color:var(--grey)}
.nav-cta{margin-left:auto;display:flex;align-items:center;gap:6px;font-size:15px}
.nav-cta .plain{padding:0 12px}
.pill{display:inline-flex;align-items:center;justify-content:center;height:42px;padding:0 20px;border-radius:999px;font-size:16px;white-space:nowrap;transition:background-color .15s,box-shadow .15s}
.pill-ink{background:#000;color:#fff}
.pill-ink:hover{background:#2c2c2c}
.pill-line{box-shadow:inset 0 0 0 1px rgba(25,25,25,.1)}
.pill-line:hover{box-shadow:inset 0 0 0 1px rgba(25,25,25,.28)}
.pill.sm{height:30px;padding:0 13px;font-size:15px}
.menu-btn{display:none;margin-left:auto;width:40px;height:40px;align-items:center;justify-content:center}
.menu-btn svg{width:22px;height:22px}
.sheet{position:fixed;inset:64px 0 0;z-index:39;background:var(--bg);padding:24px 16px;display:grid;align-content:start;gap:4px;font-size:22px;overflow:auto}
.sheet a{padding:10px 0;border-bottom:1px solid var(--line)}
.sheet .pill{margin-top:20px;font-size:16px;border:0}
.nav-open,.nav-open body{overflow:hidden}
.sheet summary{display:flex;align-items:center;gap:12px;list-style:none;cursor:pointer}
.sheet summary::-webkit-details-marker{display:none}
.sheet summary>.ic{width:16px;height:16px;margin-left:auto;transition:transform .2s}
.sheet details[open]>summary>.ic{transform:rotate(180deg)}
.sheet-platform{border-bottom:1px solid var(--line)}
.sheet-platform>summary{min-height:54px}
.sheet .platform-columns{display:block}
.sheet .platform-group{padding:0;border:0;border-top:1px solid var(--line)}
.sheet .platform-group summary{padding:12px 0;font-size:17px}
.sheet .platform-group img{width:28px;height:28px;border-radius:7px}
.sheet .platform-group ul{padding:0 0 10px 40px}
.sheet .platform-group a{display:block;min-height:44px;padding:10px 0;border:0;font-size:16px;color:var(--grey)}
.sheet .platform-shortcuts{grid-template-columns:1fr;padding:8px 0;gap:0}
.sheet .platform-shortcuts a{padding:10px 0;border:0}

/* type */
.h1,.h2{font-weight:400;font-size:40px;line-height:1.04;letter-spacing:-.03em;text-wrap:balance}
.lo{color:var(--grey2)}
.lede{margin-top:18px;max-width:470px;font-size:16px;line-height:1.4;color:var(--grey)}
.actions{display:flex;gap:10px;margin-top:28px;flex-wrap:wrap}
.card-t{font-weight:400;font-size:20px;line-height:1.2;letter-spacing:-.01em;margin-top:22px}
.card-d{margin-top:6px;font-size:16px;line-height:1.4;color:var(--grey);max-width:600px;text-wrap:pretty}
.explore{display:inline-flex;align-items:center;gap:4px;margin-top:14px;color:var(--accent);font-size:16px}
.explore svg{width:14px;height:14px;transition:transform .15s}
.explore:hover svg{transform:translateX(2px)}

/* atmospheres: rendered textures in the layer pastels */
.atm{position:relative;overflow:hidden;isolation:isolate;background:#E9ECEB}
.atm>img.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-1}

/* product interface: Pascal's own face (Inter 13px), monochrome with small colour for state */
.ui{font-family:var(--ui);font-size:13px;line-height:1.45;color:#1E1E1E;font-feature-settings:"cv11","ss01";letter-spacing:-.003em}
.win{background:#fff;border-radius:10px;box-shadow:0 0 0 1px rgba(0,0,0,.06),0 1px 2px rgba(0,0,0,.04),0 16px 40px -16px rgba(0,0,0,.16)}
.atm .win{position:absolute}
.m{color:#6A6A6A}
.m2{color:#5E5E5E}
.sm{font-size:12px}
.xs{font-size:11.5px}
.b5{font-weight:500}
.b6{font-weight:600}
.row{display:flex;align-items:center;gap:8px;min-width:0}
.row>.r{margin-left:auto}
.hr{border-top:1px solid #F0F0EE}
.chip{display:inline-flex;align-items:center;gap:5px;height:20px;padding:0 7px;border-radius:5px;background:#F2F2F1;font-size:12px;color:#4A4A4A;white-space:nowrap;flex:none}
.chip.k{background:#191919;color:#fff}
.chip.wait{background:#FBF1DC;color:#8A5A00}
.chip.ok{background:#E4F4EA;color:#1C6B3D}
.chip.bad{background:#FBE7E3;color:#A1402C}
.chip.lav{background:#EFE8FC;color:#5B3FB8}
.chip.line{background:transparent;box-shadow:inset 0 0 0 1px #E6E6E3}
.tok{color:#5B3FB8;background:#F3EEFD;border-radius:4px;padding:1px 4px}
.dot{width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}
.plus{color:var(--ok)}.minus{color:var(--bad)}
.av{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-size:10px;font-weight:600;flex:none;color:#fff;background:#6B6B6B}
.av.agent{border-radius:6px;background:#191919}
.av.agent svg{width:13px;height:13px}
.av.s{width:18px;height:18px;font-size:9px}
.av.s.agent{border-radius:5px}
.av.s.agent svg{width:11px;height:11px}
.btn-ui{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 10px;border-radius:6px;font-size:12.5px;font-weight:500;box-shadow:inset 0 0 0 1px rgba(0,0,0,.12);background:#fff;white-space:nowrap;flex:none}
.btn-ui.k{background:#191919;color:#fff;box-shadow:none}
.ic{width:14px;height:14px;flex:none;stroke:currentColor;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.ic.s{width:12px;height:12px}
.brandi{width:14px;height:14px;flex:none;fill:currentColor}
.step{display:flex;align-items:center;gap:7px;color:#6B6B6B;font-size:12.5px;min-width:0}
.step .ic{width:11px;height:11px}
.kv{display:grid}
.kv>div{display:grid;grid-template-columns:84px minmax(0,1fr);gap:10px;padding:8px 0;border-top:1px solid #F0F0EE}
.kv dt{color:#6A6A6A}
.msg{display:grid;grid-template-columns:22px minmax(0,1fr);gap:10px}
.msg .who{display:flex;gap:6px;align-items:baseline}
.msg .who b{font-weight:600}
.msg p{margin-top:3px;color:#2A2A2A}
.msg p+p{margin-top:6px}
.typing{display:inline-flex;gap:3px;margin-left:2px}
.typing i{width:4px;height:4px;border-radius:50%;background:#B0B0B0;animation:typ 1.2s infinite}
.typing i:nth-child(2){animation-delay:.15s}.typing i:nth-child(3){animation-delay:.3s}
@keyframes typ{0%,60%,100%{opacity:.25}30%{opacity:1}}

/* hero */
.hero{padding:112px var(--pad) 0;position:relative}
.stage{position:relative;margin-top:84px;height:640px}
.collage{position:absolute;left:50%;top:-34px;width:100vw;margin-left:-50vw;height:600px;overflow:hidden;pointer-events:none;z-index:0}
.track{position:absolute;inset:0 auto 0 0;width:3600px;animation:drift 150s linear infinite}
.track>*{position:absolute;overflow:hidden}
.track img{width:100%;height:100%;object-fit:cover}
.track .ink{background:#1D1E21;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
.track .ink svg{width:100%;height:100%;display:block}
@keyframes drift{to{transform:translateX(-1800px)}}
.app{position:absolute;left:0;top:30px;width:1020px;height:610px;z-index:1;display:grid;grid-template-columns:232px minmax(0,1fr);border-radius:12px;overflow:hidden;background:rgba(255,255,255,.62);-webkit-backdrop-filter:blur(30px) saturate(1.35);backdrop-filter:blur(30px) saturate(1.35);box-shadow:0 0 0 1px rgba(0,0,0,.07),0 30px 60px -30px rgba(0,0,0,.25)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.app{background:rgba(255,255,255,.94)}}
.float{position:absolute;right:0;top:84px;width:410px;z-index:2}
.xmp{position:absolute;right:0;bottom:-28px;font-family:var(--mono);font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:var(--grey)}

/* hero app */
.side{background:rgba(250,250,249,.82);border-right:1px solid rgba(0,0,0,.06);padding:10px 10px 12px;display:flex;flex-direction:column;gap:1px;min-width:0}
.chrome{display:flex;align-items:center;gap:8px;height:28px;padding:0 4px;margin-bottom:8px;color:#6A6A6A}
.tl{display:flex;gap:6px;margin-right:6px}
.tl i{width:11px;height:11px;border-radius:50%}
.tl i:nth-child(1){background:#F26B5E}.tl i:nth-child(2){background:#F6BE4F}.tl i:nth-child(3){background:#5FC454}
.chrome .r{margin-left:auto;display:flex;gap:12px}
.nv{display:flex;align-items:center;gap:9px;height:28px;padding:0 8px;border-radius:6px;color:#333;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.nv.on{background:rgba(0,0,0,.055);color:#111}
.nv .ic{color:#707070}
.nv .n{margin-left:auto;color:#6A6A6A;font-size:12px}
.side-h{display:flex;align-items:center;gap:6px;padding:14px 8px 4px;font-size:12px;color:#6A6A6A}
.side-h .r{margin-left:auto;display:flex;gap:10px}
.nv .new{margin-left:auto;width:6px;height:6px;border-radius:50%;background:#5B3FB8;flex:none}
.me{margin-top:auto;display:flex;align-items:center;gap:8px;padding:8px}
.main{display:flex;flex-direction:column;min-width:0}
.topbar{display:flex;align-items:center;gap:8px;height:46px;padding:0 16px;border-bottom:1px solid rgba(0,0,0,.05)}
.topbar .r{margin-left:auto;display:flex;align-items:center;gap:12px;color:#6A6A6A}
.faces{display:flex}
.faces .av{width:20px;height:20px;font-size:9px;box-shadow:0 0 0 2px #fff}
.faces .av+.av{margin-left:-5px}
.thread{flex:1;padding:18px 24px 0;display:flex;flex-direction:column;gap:13px;overflow:hidden;min-height:0}
.bubble{align-self:flex-end;max-width:440px;background:rgba(0,0,0,.05);border-radius:12px;padding:9px 12px;color:#1f1f1f}
.prop{margin-top:10px;max-width:520px;background:#fff;border:1px solid #ECECEA;border-radius:9px;padding:11px 12px;display:grid;gap:6px}
.composer{margin:12px 18px 14px;background:#fff;border:1px solid rgba(0,0,0,.08);border-radius:12px;padding:12px 12px 10px;display:grid;gap:12px;color:#707070;box-shadow:0 6px 16px -10px rgba(0,0,0,.12)}
.composer .send{margin-left:auto;width:26px;height:26px;border-radius:50%;background:#191919;display:grid;place-items:center;color:#fff}

/* review card */
.review{padding:16px 16px 14px}
.review h4{margin-top:8px;font-family:var(--ui);font-size:19px;line-height:1.25;font-weight:600;letter-spacing:-.015em}
.review .kv{margin-top:12px}
.media{margin-top:12px;border:1px solid #F0F0EE;border-radius:10px;overflow:hidden}
.media .row{padding:8px 10px}
.map{display:block;width:100%;height:auto;background:#EEF1EE}
.seg{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;padding:8px 10px}
.seg i{height:3px;border-radius:2px;background:#E4E4E1}
.seg i.on{background:#5B3FB8}
.seg i.half{background:linear-gradient(90deg,#5B3FB8 55%,#E4E4E1 55%)}
.review .acts{margin-top:14px;display:flex;gap:6px;justify-content:flex-end}

/* systems strip */
.systems{position:relative;padding:34px 0 36px}
.systems p{font-size:14px;color:var(--grey);text-align:center}
.marq{margin-top:22px;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.marq-t{display:flex;width:max-content;animation:marq 48s linear infinite}
.marq-t span{display:flex;align-items:center;gap:9px;padding:0 34px;font-family:var(--ui);font-size:17px;font-weight:500;letter-spacing:-.015em;color:#707070;white-space:nowrap}
.marq-t svg{width:22px;height:22px;fill:currentColor}
@keyframes marq{to{transform:translateX(-50%)}}

/* feature cards */
.cards2{margin-top:56px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.cards3{margin-top:56px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.pic{aspect-ratio:620/464}
.cards3 .pic{aspect-ratio:410/310}
/* each panel is one composed picture: drawn at desktop size and scaled to the panel */
.cv{position:absolute;left:0;top:0;width:calc(var(--w) * 1px);height:calc(var(--h) * 1px);transform-origin:0 0;transform:scale(var(--k,1))}

/* steps */
.steps{margin-top:120px;display:grid;gap:120px}
.stp{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px;align-items:end}
.stp:nth-child(even) .stp-pic{order:-1}
.stp-pic{aspect-ratio:608/455}
.stp-n{font-size:32px;line-height:1.2;letter-spacing:-.02em;color:var(--grey2)}
.stp h3{font-weight:400;font-size:32px;line-height:1.2;letter-spacing:-.02em}
.stp .card-d{margin-top:8px;max-width:540px}
.stp-txt{padding-bottom:4px}

/* layers */
.layers{margin-top:56px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.lyr{padding:28px 20px 32px;border-left:1px solid var(--line)}
.lyr:first-child{border-left:0;padding-left:0}
.lyr .sw{display:flex;align-items:center;gap:10px;font-family:var(--mono);font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:var(--grey)}
.lyr .sw i{width:28px;height:20px;border-radius:4px;overflow:hidden;box-shadow:inset 0 0 0 1px rgba(0,0,0,.06)}
.lyr .sw i img{width:100%;height:100%;object-fit:cover}
.lyr h3{margin-top:18px;font-weight:400;font-size:24px;letter-spacing:-.02em}
.lyr p{margin-top:8px;font-size:15px;line-height:1.4;color:var(--grey);min-height:63px}
.lyr ul{margin-top:18px;display:grid;gap:7px;font-size:15px}
.gov{display:grid;grid-template-columns:200px repeat(4,minmax(0,1fr));align-items:center;border-bottom:1px solid var(--line)}
.gov>*{padding:18px 20px;border-left:1px solid var(--line);font-size:15px}
.gov>:first-child{border-left:0;padding-left:0}
.gov b{font-weight:400;display:block}
.gov span{color:var(--grey);font-size:14px}
.gov .lbl{display:flex;align-items:center;gap:10px;font-family:var(--mono);font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:var(--grey)}
.gov .lbl i{width:28px;height:20px;border-radius:4px;overflow:hidden;box-shadow:inset 0 0 0 1px rgba(0,0,0,.06)}
.gov .lbl i img{width:100%;height:100%;object-fit:cover}

/* solutions */
.sol{display:grid;grid-template-columns:300px minmax(0,1fr);gap:24px}
.sol-l{display:flex;flex-direction:column;justify-content:space-between;gap:32px}
.sol-l .tag{font-family:var(--mono);font-size:12px;color:var(--grey);letter-spacing:.04em}
.sol-l .tile{width:180px;height:96px;margin-top:10px;display:grid;place-items:center}
.sol-l .tile svg{width:30px;height:30px}
.rows a{display:grid;grid-template-columns:184px minmax(0,1fr) 90px 20px;align-items:center;gap:16px;min-height:56px;padding:10px 0;border-bottom:1px solid var(--line);font-size:17px}
.rows a .s{color:var(--grey);font-size:16px}
.rows a .k{color:var(--grey);font-size:14px}
.rows a svg{width:14px;height:14px;color:var(--grey2);transition:transform .15s}
.rows a:hover svg{transform:translateX(2px);color:var(--ink)}
.rows a .t{line-height:1.3;text-wrap:pretty}
@media (max-width:1279px){.rows a{grid-template-columns:184px minmax(0,1fr) 20px}.rows a .k{display:none}}

/* governance */
.trust{display:grid;grid-template-columns:360px minmax(0,1fr);gap:24px}
.ctrls{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.ctrl{height:150px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;border-left:1px solid var(--line);color:#6B6B6B;text-align:center;font-size:14px}
.ctrl span.c{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;box-shadow:inset 0 0 0 1.2px #B9B9B6}
.ctrl svg{width:28px;height:28px;stroke:#8A8A8A;fill:none;stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round}
.tlist{margin-top:28px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:12px}
.tlist li{padding:12px 0;border-bottom:1px solid var(--line);font-size:15px;color:var(--grey)}

/* close */
.close{padding:150px var(--pad) 160px;text-align:center}
.close .h2{font-size:64px;line-height:1}
.close .actions{justify-content:center;margin-top:32px}

/* footer */
.foot{padding:48px var(--pad) 40px}
.foot-top{display:grid;grid-template-columns:minmax(0,1.6fr) repeat(4,minmax(0,1fr));gap:24px}
.foot .brand{font-size:30px;color:#888888;margin:0}
.foot .brand svg{width:28px;height:28px}
.foot h2{font-size:14px;font-weight:400}
.foot nav{margin-top:10px;display:grid;gap:4px;font-size:14px;color:var(--grey)}
.foot nav a:hover{color:var(--ink)}
.foot-base{margin-top:80px;display:flex;align-items:center;gap:10px;font-family:var(--mono);font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:var(--grey)}
.foot-base svg{width:18px;height:18px;color:#6A6A6A}
.foot-base a{color:var(--ink)}
.foot-base .c{margin-left:auto}
.systems p a{color:var(--accent);text-decoration:underline;text-underline-offset:3px}
.lyr li a:hover,.gov b a:hover{color:var(--accent)}

/* reveal: content stays visible unless the observer reports back */
.anim .rv:not(.in){opacity:0;transform:translateY(14px)}
.anim .rv{transition:opacity .8s cubic-bezier(.16,1,.3,1),transform .8s cubic-bezier(.16,1,.3,1)}

@media (max-width:1240px){
  .app{width:calc(100% - 120px)}
  .float{right:-4px}
}
@media (max-width:1100px){
  .stage{height:780px}
  .app{width:100%;height:560px}
  .float{top:340px;width:380px}
  .layers{grid-template-columns:repeat(2,minmax(0,1fr))}
  .lyr:nth-child(3){border-left:0;padding-left:0}
  .lyr:nth-child(n+3){border-top:1px solid var(--line)}
  .gov{grid-template-columns:repeat(2,minmax(0,1fr))}
  .gov>.lbl{grid-column:1/-1;border-bottom:1px solid var(--line)}
  .gov>:nth-child(2),.gov>:nth-child(4){border-left:0;padding-left:0}
  .trust{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:900px){
  .links,.nav-cta{display:none}
  .menu-btn{display:inline-flex}
  .frame{border:0}
  .sec{padding:76px 16px 80px}
  .h1,.h2{font-size:32px}
  .close .h2{font-size:40px}
  .hero{padding-top:56px}
  .stage{height:auto;margin-top:40px;display:grid;gap:12px}
  .collage{display:none}
  .app,.float{position:relative;left:auto;right:auto;top:auto;width:100%}
  .app{height:500px;grid-template-columns:minmax(0,1fr);background:#fff}
  .side{display:none}
  .xmp{position:static;margin-top:6px}
  .cards2,.cards3{grid-template-columns:minmax(0,1fr)}
  .stp{grid-template-columns:minmax(0,1fr);gap:24px}
  .stp:nth-child(even) .stp-pic{order:0}
  .steps{gap:72px;margin-top:56px}
  .stp-n,.stp h3{font-size:26px}
  .layers{grid-template-columns:minmax(0,1fr)}
  .lyr,.lyr:nth-child(3){border-left:0;padding-left:0;padding-right:0}
  .lyr+.lyr{border-top:1px solid var(--line)}
  .lyr p{min-height:0}
  .gov{grid-template-columns:minmax(0,1fr)}
  .gov>*{border-left:0!important;padding-left:0!important;border-top:1px solid var(--line)}
  .gov>.lbl{border-top:0}
  .sol{grid-template-columns:minmax(0,1fr)}
  .sol-l .tile{display:none}
  .rows a{grid-template-columns:minmax(0,1fr) 16px;height:auto;padding:14px 0;gap:4px 12px}
  .rows a .s{grid-column:1;font-size:13px}
  .rows a .t{grid-column:1;white-space:normal}
  .rows a .k{display:none}
  .rows a svg{grid-column:2;grid-row:1/3}
  .ctrls{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ctrl:nth-child(odd){border-left:0}
  .ctrl:nth-child(n+3){border-top:1px solid var(--line)}
  .tlist{grid-template-columns:minmax(0,1fr)}
  .foot-top{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 16px}
  .foot-top>:first-child{grid-column:1/-1}
  .foot-base{flex-wrap:wrap}
  .foot-base .c{margin-left:0;width:100%}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .track,.marq-t{animation:none}
  .anim .rv:not(.in){opacity:1;transform:none}
  .typing i{animation:none;opacity:.6}
}

/* Inner pages: the home page's frame, type and windows, laid out for reading a product, a solution or an article. */

/* page hero */
.ph {
  padding: 96px var(--pad) 0;
}
.crumb {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--grey);
}
.crumb a:hover {
  color: var(--ink);
}
.crumb span[aria-hidden] {
  color: var(--grey2);
}
.ph .h1 {
  margin-top: 22px;
  font-size: 56px;
  line-height: 1.02;
  max-width: 980px;
}
.ph .lede {
  max-width: 640px;
  font-size: 19px;
  line-height: 1.45;
  margin-top: 20px;
}
.ph .note {
  margin-top: 14px;
  font-size: 13px;
  color: var(--grey);
}
.ph-pic {
  margin-top: 64px;
  min-height: 520px;
  display: grid;
  place-items: center;
  padding: 64px 24px;
}
.ph-pic .win {
  position: relative;
  width: min(720px, 100%);
}
.ph-pic.short {
  min-height: 440px;
}

/* hero windows: a run of steps, drawn from the page's own content */
.run-h {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  border-bottom: 1px solid #f0f0ee;
}
.run-h .av.agent {
  width: 20px;
  height: 20px;
  border-radius: 6px;
}
.run-h .av.agent svg {
  width: 12px;
  height: 12px;
}
.run-h .r {
  margin-left: auto;
  display: flex;
  gap: 6px;
}
.run {
  padding: 6px 14px 10px;
}
.run li {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: start;
  padding: 10px 0;
  border-top: 1px solid #f4f4f2;
}
.run li:first-child {
  border-top: 0;
}
.run .st {
  width: 16px;
  height: 16px;
  margin-top: 1px;
  border-radius: 50%;
  display: grid;
  place-items: center;
}
.run .st.done {
  background: #191919;
  color: #fff;
}
.run .st.done svg {
  width: 10px;
  height: 10px;
  stroke-width: 2;
}
.run .st.now {
  box-shadow: inset 0 0 0 1.5px #5b3fb8;
}
.run .st.now::after {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #5b3fb8;
}
.run .st.next {
  box-shadow: inset 0 0 0 1.5px #d4d4d0;
}
.run .st.sw {
  border-radius: 4px;
  background-size: cover;
  background-position: center;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
}
.run b {
  display: block;
  font-weight: 500;
}
.run p {
  color: #5e5e5e;
  margin-top: 1px;
  text-wrap: pretty;
}
.run .chip {
  margin-top: 1px;
}

/* sections */
.split {
  display: grid;
  grid-template-columns: 360px minmax(0, 1fr);
  gap: 24px;
}
.split .h2 {
  max-width: 520px;
}
.split > .body {
  max-width: 680px;
}
.body p + p {
  margin-top: 14px;
}
.body > p {
  font-size: 18px;
  line-height: 1.5;
  color: var(--grey);
  text-wrap: pretty;
}
.body > p.ink {
  color: var(--ink);
}
.body > .explore {
  display: flex;
  width: fit-content;
}
.kicker {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--grey);
}
.sec-h {
  max-width: 760px;
}
.sec-h .lede {
  max-width: 600px;
}

/* cells: hairline grids for capabilities, outcomes and principles */
.cells {
  margin-top: 56px;
  display: grid;
  grid-template-columns: repeat(var(--n, 2), minmax(0, 1fr));
  border-top: 1px solid var(--line);
}
.cell {
  padding: 28px 24px 32px 0;
  border-bottom: 1px solid var(--line);
}
.cell + .cell {
  padding-left: 24px;
  border-left: 1px solid var(--line);
}
.cells[style*="--n:2"] .cell:nth-child(2n + 1),
.cells[style*="--n:3"] .cell:nth-child(3n + 1),
.cells[style*="--n:4"] .cell:nth-child(4n + 1) {
  padding-left: 0;
  border-left: 0;
}
.cell h3 {
  font-weight: 400;
  font-size: 22px;
  line-height: 1.25;
  letter-spacing: -0.015em;
  text-wrap: balance;
}
.cell p {
  margin-top: 8px;
  font-size: 16px;
  line-height: 1.45;
  color: var(--grey);
  text-wrap: pretty;
}
.cell .n {
  display: block;
  margin-bottom: 18px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--grey);
}
.cell .measure {
  margin-top: 18px;
  padding-top: 12px;
  border-top: 1px dashed var(--line);
  font-size: 14px;
  color: var(--ink);
}
.cell .measure span {
  display: block;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--grey);
  margin-bottom: 4px;
}
.cell ul {
  margin-top: 14px;
  display: grid;
  gap: 6px;
  font-size: 15px;
}
.cell ul li {
  display: flex;
  gap: 8px;
}
.cell ul li::before {
  content: "";
  width: 6px;
  height: 1px;
  margin-top: 11px;
  background: var(--grey2);
  flex: none;
}
a.cell {
  display: block;
  transition: background-color 0.15s;
}
a.cell:hover {
  background: rgba(25, 25, 25, 0.025);
}
a.cell .go {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 14px;
  color: var(--accent);
  font-size: 15px;
}
a.cell .go svg {
  width: 14px;
  height: 14px;
  transition: transform 0.15s;
}
a.cell:hover .go svg {
  transform: translateX(2px);
}

/* numbered steps */
.steps-l {
  margin-top: 56px;
  border-top: 1px solid var(--line);
}
.steps-l li {
  display: grid;
  grid-template-columns: 72px minmax(0, 320px) minmax(0, 1fr);
  gap: 24px;
  padding: 22px 0;
  border-bottom: 1px solid var(--line);
}
.steps-l .n {
  font-size: 20px;
  color: var(--grey);
  letter-spacing: -0.01em;
}
.steps-l b {
  font-weight: 400;
  font-size: 20px;
  line-height: 1.3;
  letter-spacing: -0.01em;
}
.steps-l p {
  font-size: 16px;
  line-height: 1.45;
  color: var(--grey);
}
.steps-l p + p {
  margin-top: 6px;
}

/* an example told in a window on an atmosphere */
.story .atm {
  min-height: 440px;
  display: grid;
  place-items: center;
  padding: 56px 24px;
}
.story .atm .win {
  position: relative;
  max-width: 560px;
  padding: 20px 20px 18px;
}
.story .atm .win p {
  font-size: 14px;
  line-height: 1.5;
  color: #2a2a2a;
}

/* figures */
.facts {
  margin-top: 40px;
  display: grid;
  grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr));
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.facts > div {
  padding: 24px 24px 26px 0;
}
.facts > div + div {
  padding-left: 24px;
  border-left: 1px solid var(--line);
}
.facts b {
  display: block;
  font-weight: 400;
  font-size: 56px;
  line-height: 1;
  letter-spacing: -0.03em;
}
.facts span {
  display: block;
  margin-top: 10px;
  font-size: 15px;
  color: var(--grey);
}

/* a result or boundary, set apart */
.callout {
  margin-top: 40px;
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  gap: 24px;
  padding: 28px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.callout .kicker {
  padding-top: 4px;
}
.callout h3 {
  font-weight: 400;
  font-size: 24px;
  line-height: 1.2;
  letter-spacing: -0.015em;
  max-width: 640px;
}
.callout p {
  margin-top: 10px;
  font-size: 16px;
  line-height: 1.5;
  color: var(--grey);
  max-width: 680px;
}

/* stages of a process, as a strip */
.stages {
  margin-top: 48px;
  display: grid;
  grid-template-columns: repeat(var(--n, 7), minmax(0, 1fr));
  gap: 8px;
}
.stage-c {
  padding: 16px 14px 18px;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05);
}
.stage-c .chip {
  margin-bottom: 12px;
}
.stage-c b {
  display: block;
  font-weight: 400;
  font-size: 18px;
  letter-spacing: -0.01em;
}
.stage-c p {
  margin-top: 6px;
  font-size: 14px;
  line-height: 1.4;
  color: var(--grey);
}

/* definition rows */
.dl {
  margin-top: 32px;
  border-top: 1px solid var(--line);
}
.dl > div {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 24px;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
}
.dl dt {
  font-size: 16px;
}
.dl dd {
  font-size: 16px;
  line-height: 1.45;
  color: var(--grey);
}

/* product links */
.links-l {
  margin-top: 40px;
  display: grid;
  grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr));
  border-top: 1px solid var(--line);
}
.links-l a {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 16px;
  gap: 2px 12px;
  align-items: center;
  align-content: start;
  padding: 18px 20px 20px 0;
  border-bottom: 1px solid var(--line);
}
.links-l a + a {
  padding-left: 20px;
  border-left: 1px solid var(--line);
}
.links-l[style*="--n:4"] a:nth-child(4n + 1),
.links-l[style*="--n:3"] a:nth-child(3n + 1),
.links-l[style*="--n:2"] a:nth-child(2n + 1) {
  padding-left: 0;
  border-left: 0;
}
.links-l b {
  font-weight: 400;
  font-size: 17px;
}
.links-l span {
  grid-column: 1;
  font-size: 14px;
  line-height: 1.4;
  color: var(--grey);
}
.links-l svg {
  grid-column: 2;
  grid-row: 1/3;
  width: 14px;
  height: 14px;
  color: var(--grey2);
  transition: transform 0.15s;
}
.links-l a:hover svg {
  transform: translateX(2px);
  color: var(--ink);
}
.links-l a[aria-current="page"] {
  pointer-events: none;
}
.links-l a[aria-current="page"] b::after {
  content: " · this page";
  color: var(--grey2);
}

/* layer bands on the platform overview */
.band {
  display: grid;
  grid-template-columns: 360px minmax(0, 1fr);
  gap: 24px;
  padding: 40px 0;
  border-top: 1px solid var(--line);
}
.band:last-child {
  border-bottom: 1px solid var(--line);
}
.band .sw {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--grey);
}
.band .sw i {
  width: 28px;
  height: 20px;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06);
}
.band .sw i img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.band h3 {
  margin-top: 16px;
  font-weight: 400;
  font-size: 28px;
  line-height: 1.15;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.band .verb {
  margin-top: 6px;
  color: var(--grey);
  font-size: 16px;
}
.band .desc {
  margin-top: 12px;
  font-size: 16px;
  line-height: 1.45;
  color: var(--grey);
  max-width: 340px;
}
.band .links-l {
  margin-top: 0;
  border-top: 0;
}
.band .links-l a:nth-child(-n + 2) {
  border-top: 0;
}

/* code */
.code {
  border-radius: 12px;
  background: #151517;
  color: #e7e7ea;
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.35);
  overflow: hidden;
}
.code .bar {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  padding: 0 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  font-family: var(--ui);
  font-size: 12px;
  color: #9c9ca3;
}
.code pre {
  margin: 0;
  padding: 18px 20px 22px;
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.65;
  overflow: auto;
  white-space: pre;
}
.code .k {
  color: #c6b6f2;
}
.code .s {
  color: #bef5dd;
}
.code .c {
  color: #7c7c84;
}

/* tags */
.tags {
  margin-top: 28px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.tags span {
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding: 0 14px;
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px rgba(25, 25, 25, 0.1);
  font-size: 15px;
}

/* article */
.post {
  padding: 96px var(--pad) 112px;
}
.post-h {
  max-width: 680px;
  margin: 0 auto;
}
.post-h .h1 {
  margin-top: 22px;
  font-size: 48px;
  line-height: 1.05;
}
.post-h .lede {
  max-width: 640px;
  font-size: 19px;
}
.byline {
  margin-top: 28px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  font-size: 14px;
  color: var(--grey);
}
.prose {
  max-width: 680px;
  margin: 64px auto 0;
  font-size: 18px;
  line-height: 1.62;
  color: #2a2a2a;
}
.prose > * + * {
  margin-top: 20px;
}
.prose h2 {
  margin-top: 64px;
  font-weight: 400;
  font-size: 30px;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.prose h3 {
  margin-top: 40px;
  font-weight: 400;
  font-size: 21px;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.prose a {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-color: rgba(91, 63, 184, 0.35);
  text-underline-offset: 3px;
}
.prose a:hover {
  text-decoration-color: var(--accent);
}
.prose strong {
  font-weight: 600;
  color: var(--ink);
}
.prose ul {
  display: grid;
  gap: 10px;
}
.prose ul li {
  display: grid;
  grid-template-columns: 14px minmax(0, 1fr);
  gap: 8px;
}
.prose ul li::before {
  content: "";
  width: 8px;
  height: 1px;
  margin-top: 15px;
  background: var(--grey2);
}
.prose .pull {
  font-size: 26px;
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: var(--ink);
  padding: 8px 0;
}
.prose .q {
  padding-left: 20px;
  border-left: 2px solid var(--lav);
  color: var(--ink);
}
.fig {
  margin: 48px auto 0;
  max-width: 960px;
}
.fig .atm {
  padding: 40px;
  display: grid;
  place-items: center;
}
.fig .win {
  position: relative;
  width: 100%;
  max-width: 820px;
  padding: 18px;
}
.fig figcaption {
  max-width: 680px;
  margin: 14px auto 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--grey);
}
.fig figcaption b {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink);
  margin-right: 8px;
}
.chain {
  display: grid;
  grid-template-columns: repeat(var(--n, 5), minmax(0, 1fr));
  gap: 6px;
}
.chain > div {
  padding: 12px 12px 14px;
  border-radius: 8px;
  background: #f7f7f5;
  box-shadow: inset 0 0 0 1px #efefec;
}
.chain > div.on {
  background: #f3eefd;
  box-shadow: inset 0 0 0 1px #e2d8fa;
}
.chain .n {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.04em;
  color: #6a6a6a;
}
.chain b {
  display: block;
  margin-top: 6px;
  font-weight: 600;
  font-size: 13px;
}
.chain p {
  margin-top: 4px;
  font-size: 12px;
  line-height: 1.4;
  color: #5e5e5e;
}
.tiles {
  display: grid;
  grid-template-columns: repeat(20, minmax(0, 1fr));
  gap: 3px;
}
.tiles i {
  aspect-ratio: 1;
  border-radius: 2px;
  background: #d9c9f5;
}
.tiles i.held {
  background: #191919;
}
.legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  margin-top: 12px;
  font-size: 12px;
  color: #5e5e5e;
}
.legend span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.legend i {
  width: 10px;
  height: 10px;
  border-radius: 2px;
  background: #d9c9f5;
}
.legend i.held {
  background: #191919;
}
.related {
  max-width: 680px;
  margin: 72px auto 0;
  padding-top: 28px;
  border-top: 1px solid var(--line);
}

/* blog list */
.posts {
  margin-top: 56px;
  border-top: 1px solid var(--line);
}
.posts a {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr) 16px;
  gap: 24px;
  align-items: start;
  padding: 28px 0;
  border-bottom: 1px solid var(--line);
}
.posts time {
  font-size: 15px;
  color: var(--grey);
}
.posts h2 {
  font-weight: 400;
  font-size: 28px;
  line-height: 1.15;
  letter-spacing: -0.02em;
}
.posts p {
  margin-top: 8px;
  font-size: 16px;
  line-height: 1.45;
  color: var(--grey);
  max-width: 640px;
}
.posts svg {
  width: 14px;
  height: 14px;
  margin-top: 10px;
  color: var(--grey2);
}

/* role page */
.facts-dl {
  margin-top: 32px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
  font-size: 15px;
}
.facts-dl dt {
  color: var(--grey);
}
.facts-dl div {
  display: flex;
  gap: 8px;
}

/* contact form */
.contact {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 560px);
  gap: 64px;
  padding: 96px var(--pad) 120px;
}
.contact .h1 {
  margin-top: 22px;
  font-size: 56px;
  line-height: 1.02;
}
.contact .lede {
  font-size: 19px;
  max-width: 440px;
}
.contact aside {
  margin-top: 40px;
  display: grid;
  gap: 18px;
  max-width: 420px;
}
.contact aside div {
  padding-top: 16px;
  border-top: 1px solid var(--line);
}
.contact aside b {
  display: block;
  font-weight: 400;
  font-size: 16px;
}
.contact aside p,
.contact aside a {
  font-size: 15px;
  color: var(--grey);
}
.contact aside a {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-color: rgba(91, 63, 184, 0.35);
  text-underline-offset: 3px;
}
.form {
  padding: 28px;
  border-radius: 14px;
  background: #fff;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.06),
    0 24px 48px -28px rgba(0, 0, 0, 0.2);
  display: grid;
  gap: 18px;
  align-content: start;
}
.form .two {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.form label {
  display: grid;
  gap: 7px;
  font-family: var(--ui);
  font-size: 13px;
  font-weight: 500;
  color: #2a2a2a;
}
.form label .opt {
  font-weight: 400;
  color: #6a6a6a;
}
.form input,
.form select,
.form textarea {
  width: 100%;
  font: inherit;
  font-weight: 400;
  font-size: 15px;
  color: var(--ink);
  background: #fafaf9;
  border: 0;
  border-radius: 10px;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
  padding: 11px 13px;
  transition:
    box-shadow 0.15s,
    background-color 0.15s;
}
.form select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m4 6 4 4 4-4' fill='none' stroke='%23191919' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 14px;
  padding-right: 36px;
}
.form textarea {
  min-height: 140px;
  resize: vertical;
  line-height: 1.45;
}
.form input:hover,
.form select:hover,
.form textarea:hover {
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2);
}
.form input:focus,
.form select:focus,
.form textarea:focus {
  outline: 0;
  background: #fff;
  box-shadow: inset 0 0 0 1.5px var(--accent);
}
.form [aria-invalid="true"] {
  box-shadow: inset 0 0 0 1.5px var(--bad);
}
.form .err {
  font-weight: 400;
  font-size: 12.5px;
  color: var(--bad);
}
.form .pill {
  justify-self: start;
  border: 0;
}
.form .fine {
  font-family: var(--ui);
  font-size: 12.5px;
  line-height: 1.45;
  color: #6a6a6a;
}
.form .hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.sent {
  display: grid;
  gap: 10px;
}
.sent h2 {
  font-weight: 400;
  font-size: 28px;
  letter-spacing: -0.02em;
}
.sent p {
  font-size: 16px;
  line-height: 1.45;
  color: var(--grey);
}
.sent a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (max-width: 1100px) {
  .split,
  .band {
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
  }
  .split .h2 {
    max-width: none;
  }
  .cells {
    --n: 2 !important;
  }
  .cells .cell:nth-child(2n + 1) {
    padding-left: 0;
    border-left: 0;
  }
  .cells .cell:nth-child(2n) {
    padding-left: 24px;
    border-left: 1px solid var(--line);
  }
  .stages {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .links-l {
    --n: 3 !important;
  }
  .links-l a {
    padding-left: 20px;
    border-left: 1px solid var(--line);
  }
  .links-l a:nth-child(3n + 1) {
    padding-left: 0;
    border-left: 0;
  }
  .contact {
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
  }
}
@media (max-width: 900px) {
  .ph {
    padding-top: 56px;
  }
  .ph .h1,
  .contact .h1,
  .post-h .h1 {
    font-size: 36px;
    line-height: 1.06;
  }
  .ph .lede,
  .contact .lede,
  .post-h .lede {
    font-size: 17px;
  }
  .ph-pic,
  .ph-pic.short {
    margin-top: 40px;
    min-height: 0;
    padding: 28px 12px;
  }
  .cells {
    --n: 1 !important;
  }
  .cells .cell,
  .cells .cell:nth-child(2n) {
    padding: 24px 0 26px;
    border-left: 0;
  }
  .steps-l li {
    grid-template-columns: 40px minmax(0, 1fr);
    gap: 4px 12px;
  }
  .steps-l li > div {
    grid-column: 2;
  }
  .story .atm {
    min-height: 0;
    padding: 28px 12px;
  }
  .facts {
    --n: 1 !important;
  }
  .facts > div,
  .facts > div + div {
    padding: 20px 0;
    border-left: 0;
  }
  .facts > div + div {
    border-top: 1px solid var(--line);
  }
  .facts b {
    font-size: 44px;
  }
  .callout,
  .dl > div {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
  }
  .stages {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .links-l {
    --n: 1 !important;
  }
  .links-l a,
  .links-l a + a {
    padding: 16px 0;
    border-left: 0;
  }
  .band .links-l a:nth-child(2) {
    border-top: 1px solid var(--line);
  }
  .post {
    padding: 56px 16px 80px;
  }
  .prose {
    margin-top: 40px;
    font-size: 17px;
  }
  .prose h2 {
    font-size: 25px;
    margin-top: 48px;
  }
  .fig .atm {
    padding: 16px 10px;
  }
  .chain {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  .tiles {
    grid-template-columns: repeat(10, minmax(0, 1fr));
  }
  .posts a {
    grid-template-columns: minmax(0, 1fr) 16px;
    gap: 6px 12px;
  }
  .posts time {
    grid-column: 1;
  }
  .posts svg {
    grid-column: 2;
    grid-row: 1/3;
  }
  .contact {
    padding: 56px 16px 80px;
  }
  .form {
    padding: 20px;
  }
  .form .two {
    grid-template-columns: minmax(0, 1fr);
  }
}