/* Brand register: the landing page and sign-in. One long argument, each band a different shape. */
.web{font-size:var(--fs-body)}
.web h2{font-size:var(--fs-h2);letter-spacing:var(--tracking-display);line-height:1.08}
.web h3{font-size:var(--fs-h3)}
.web .lead{font-size:var(--fs-lead);line-height:1.55;max-width:56ch}
.topnav{position:absolute;inset:0 0 auto 0;z-index:var(--z-sticky);display:flex;align-items:center;gap:var(--s-5);height:76px;padding:0 var(--gutter);color:var(--on-drench)}
.topnav .wm{font-size:1.7rem}.topnav .wm svg{width:24px;height:24px}
.topnav nav{display:flex;gap:var(--s-5);margin-left:auto;font-size:var(--t-15)}
.topnav nav a{color:var(--on-drench-muted);text-decoration:none}.topnav nav a:hover{color:#fff}
.btn-accent{background:var(--accent);color:var(--on-accent)}.btn-accent:hover{background:#fff;color:var(--on-accent)}
.btn-line{border-color:var(--drench-line);color:var(--on-drench);background:transparent}.btn-line:hover{border-color:#fff;color:#fff}
@media (max-width:860px){.topnav nav{display:none}.topnav .btn{margin-left:auto}}

.hero{min-height:100vh;display:grid;grid-template-columns:minmax(0,11fr) minmax(0,9fr);background:var(--drench);color:var(--on-drench)}
.hero .in{display:flex;flex-direction:column;justify-content:center;padding:calc(76px + var(--s-7)) var(--gutter) calc(var(--pocbar-h) + var(--s-7));padding-left:max(var(--gutter),calc((100vw - var(--container-wide))/2 + var(--gutter)))}
.hero .fold{max-width:680px}
.hero h1{font-size:var(--fs-display);line-height:1.02;letter-spacing:var(--tracking-display);color:#fff}
.hero .lead{margin-top:var(--s-5);color:var(--on-drench)}
.hero .cta{display:flex;gap:var(--s-3);flex-wrap:wrap;margin-top:var(--s-6)}
.hero .pic{position:relative;min-height:320px}
.hero .pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.roleband{margin-top:var(--s-7);padding-top:var(--s-4);border-top:1px solid var(--drench-line)}
.roleband p{font-size:var(--t-13);color:var(--on-drench-muted);margin-bottom:var(--s-3)}
.roleband ul{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--s-2)}
.roleband a{display:flex;flex-direction:column;gap:6px;padding:var(--s-3);min-height:76px;border:1px solid var(--drench-line);border-radius:var(--r-card);color:#fff;text-decoration:none;font-size:var(--t-14);font-weight:600;line-height:1.2;transition:background-color var(--dur-2) ease,border-color var(--dur-2) ease}
.roleband a:hover{background:var(--drench-2);border-color:var(--accent)}
.roleband a small{font-weight:400;font-size:var(--t-12);color:var(--on-drench-muted)}
@media (max-width:1000px){.hero{grid-template-columns:1fr}.hero .pic{order:-1;min-height:34vh}.hero .in{padding-top:var(--s-6)}.topnav{position:absolute}.roleband ul{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:520px){.roleband ul{grid-template-columns:repeat(2,minmax(0,1fr))}.roleband a{min-height:60px;padding:var(--s-2) var(--s-3)}.roleband a small{display:none}}

.band{position:static}
.arg{padding:var(--section) 0}
.arg.tight{padding:var(--section-tight) 0}
.arg .more{display:inline-flex;align-items:center;gap:6px;margin-top:var(--s-5);font-weight:600}
.said{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:var(--s-8);align-items:end}
.said h2{font-size:var(--fs-h1)}
.said .chat{padding:0;gap:var(--s-3)}.said .msg{font-size:var(--t-15);max-width:100%}
.docs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:var(--rule);margin-top:var(--s-7)}
.docs li{padding:var(--s-5) var(--s-5) 0 0}.docs li+li{padding-left:var(--s-5);border-left:var(--rule)}
.docs .n{font:500 var(--fs-h2)/1 var(--font-display);color:var(--primary)}
.docs h3{margin:var(--s-3) 0 var(--s-2);font-size:var(--t-22)}
.two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s-8);align-items:center}
.two img{border-radius:var(--r-card);width:100%;aspect-ratio:4/3;object-fit:cover}
.srcs li{display:flex;gap:var(--s-4);padding:var(--s-4) 0;border-bottom:var(--rule)}
.srcs li:first-child{border-top:var(--rule)}
.drench{background:var(--drench);color:var(--on-drench)}
.drench h2{color:#fff}.drench a{color:var(--accent)}.drench .muted{color:var(--on-drench-muted)}
.jump{display:grid;grid-template-columns:auto auto auto 1fr;gap:var(--s-5);align-items:end;margin-top:var(--s-7)}
.jump .v{font:500 clamp(3rem,2rem + 5vw,6rem)/0.95 var(--font-display);letter-spacing:-0.03em;color:#fff;font-variant-numeric:tabular-nums}
.jump .v small{display:block;font:400 var(--t-14)/1.4 var(--font-body);letter-spacing:0;color:var(--on-drench-muted);margin-top:var(--s-2)}
.jump .arrow{color:var(--accent);padding-bottom:var(--s-7)}
.jump .then{border-left:1px solid var(--drench-line);padding-left:var(--s-5);font-size:var(--fs-lead);max-width:34ch}
.ours>li{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:var(--s-7);padding:var(--s-6) 0;border-top:var(--rule)}
.ours h3{font-size:var(--fs-h3)}
.ways{margin-top:var(--s-6)}
.ways a{display:grid;grid-template-columns:minmax(140px,2fr) minmax(0,6fr) auto;gap:var(--s-5);align-items:center;padding:var(--s-4) 0;border-top:var(--rule);text-decoration:none;color:inherit;transition:background-color var(--dur-1) ease}
.ways a:last-child{border-bottom:var(--rule)}
.ways a:hover{background:var(--surface)}
.ways b{font:500 var(--t-22) var(--font-display)}
.close{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);min-height:460px}
.close .t{padding:var(--section-tight) var(--gutter);display:flex;flex-direction:column;justify-content:center;padding-left:max(var(--gutter),calc((100vw - var(--container-wide))/2 + var(--gutter)))}
.close .p{position:relative;min-height:280px}.close .p img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.foot{padding:var(--s-7) 0 var(--s-8);font-size:var(--t-14)}
.foot .cols4{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:var(--s-6)}
.foot h4{margin-bottom:var(--s-3)}.foot li{padding:3px 0}.foot a{color:var(--ink-2);text-decoration:none}.foot a:hover{text-decoration:underline}
@media (max-width:900px){.said,.two,.ours>li,.close,.foot .cols4{grid-template-columns:1fr}.docs{grid-template-columns:1fr}.docs li+li{border-left:0;padding-left:0;border-top:var(--rule)}.jump{grid-template-columns:auto auto auto}.jump .then{grid-column:1/-1;border-left:0;padding-left:0}.ways a{grid-template-columns:1fr auto}.ways a span{grid-column:1/-1;grid-row:2}}

/* sign-in */
.auth{min-height:100vh;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.auth .side{position:relative;background:var(--drench)}.auth .side img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.55}
.auth .side blockquote{position:absolute;left:var(--s-7);right:var(--s-7);bottom:calc(var(--pocbar-h) + var(--s-7));margin:0;color:#fff;font:500 var(--fs-h3)/1.3 var(--font-display)}
.auth .form{display:flex;flex-direction:column;justify-content:center;padding:var(--s-8) var(--gutter);max-width:520px;margin:0 auto;width:100%}
@media (max-width:860px){.auth{grid-template-columns:1fr}.auth .side{display:none}}
.hero .pic::after{content:"";position:absolute;inset:0 0 auto 0;height:150px;background:linear-gradient(oklch(0.2 0.03 40/.8),transparent)}
.topnav nav a{color:#fff}
/* hub, assumptions, design system: document pages */
.doc .page-head h1{max-width:none}
.doc-nav{display:flex;gap:var(--s-4);flex-wrap:wrap;font-size:var(--t-14);margin-bottom:var(--s-7)}
.mods{display:flex;gap:4px;flex-wrap:wrap}
.sw-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:var(--s-4)}
.swatch i{display:block;height:64px;border-radius:var(--r-card);border:var(--rule)}
.swatch b{display:block;font-size:var(--t-13);margin-top:6px}.swatch span{font-size:var(--t-12);color:var(--muted);font-variant-numeric:tabular-nums;display:block}
.spec-row{display:flex;gap:var(--s-5);flex-wrap:wrap;align-items:flex-end}
.spec-row>div{font-size:var(--t-12);color:var(--muted)}
.design-system .sec .wm svg{width:40px;height:40px}
@media (max-width:520px){.hero .pic{min-height:22vh}.hero .lead{font-size:var(--t-16)}.hero .cta .btn{width:100%}.roleband{margin-top:var(--s-5)}}

/* ---- The product, embedded ---- */
.showcase-band{background:var(--surface);padding:var(--section) 0}
.showcase-head{max-width:70ch;margin-bottom:var(--s-7)}
.showcase-head h2{font-size:var(--fs-h1)}
.showcase-head .lead{margin-top:var(--s-4)}
.showcase{border-radius:var(--r-lg);overflow:hidden;background:var(--bg);border:var(--rule);
  box-shadow:0 50px 90px -50px oklch(0.2 0.03 40/.5)}
.showcase .mast{border-radius:0}
.showcase .mast h1{display:none}
.showcase-body{padding:clamp(20px,3vw,34px)}
.showcase-h{font-size:var(--t-18);margin-bottom:var(--s-2)}
.showcase-note{margin-top:var(--s-5);font-size:var(--fs-lead);max-width:70ch}
.showcase-note b{font-variant-numeric:tabular-nums}
/* the drawing-paper grid, the same one the dashboard carries */
.hero .in,.close .t{position:relative}
.hero .in::before,.close .t::before{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:repeating-linear-gradient(90deg,transparent 0 47px,oklch(1 0 0/.045) 47px 48px),repeating-linear-gradient(0deg,transparent 0 47px,oklch(1 0 0/.045) 47px 48px)}
.hero .fold,.close .t > *{position:relative}