:root{color-scheme:light;--bg:#F4F4EF;--surface:#FFFFFF;--fg:#15171C;--muted:#5A6070;--line:#E1E2DA;--accent:#1F4CFF;--accent-fg:#FFFFFF;--danger:#b42318;--accent-text:#1A3FD6;--font-display:"Familjen Grotesk",system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;--font-body:"Geist",system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;--font-mono:"Geist Mono",ui-monospace, "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace;--display-weight:700;--radius-card:14px;--radius-control:999px;--radius-input:10px;}
:root{
  --accent-soft:color-mix(in oklab,var(--accent) 9%,var(--bg));
  --accent-ink:var(--accent-text,color-mix(in oklab,var(--accent) 82%,var(--fg)));
  --line-strong:color-mix(in oklab,var(--fg) 70%,var(--bg));
  --gutter:clamp(1rem,4.5vw,2.75rem);
  --max:78rem;
  --radius:6px;
  --step--1:.8125rem;--step-0:1.0625rem;--step-1:1.25rem;--step-2:1.5rem;--step-3:clamp(1.75rem,3.4vw,2.5rem);
  --step-4:clamp(2.6rem,7.2vw,5.75rem);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:5rem}
body{margin:0;min-height:100vh;display:flex;flex-direction:column;background:var(--bg);color:var(--fg);
  font:400 var(--step-0)/1.62 var(--font-body);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-wrap:break-word}
main{flex:1}
img,svg{max-width:100%;height:auto}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:var(--display-weight,700);line-height:1.12;letter-spacing:calc(-.018em * var(--display-tracking,1));margin:0;text-wrap:balance}
p{margin:0}
p,li{text-wrap:pretty}
a{color:inherit;text-decoration-line:underline;text-decoration-thickness:1px;text-underline-offset:.22em;
  text-decoration-color:color-mix(in oklab,currentColor 38%,transparent);transition:text-decoration-color .15s,color .15s}
a:hover{text-decoration-color:currentColor}
:focus-visible{outline:2px solid var(--accent-ink);outline-offset:3px;border-radius:3px}
code,kbd,pre,.mono{font-family:var(--font-mono);font-size:.875em}
:not(pre)>code{background:var(--surface);border:1px solid var(--line);border-radius:4px;padding:.08em .35em;white-space:break-spaces}
pre{margin:0;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:1rem 1.125rem;overflow-x:auto;
  line-height:1.55;font-size:.8125rem;tab-size:2}
pre code{font-size:inherit}
hr{border:0;border-top:1px solid var(--line);margin:2.5rem 0}
.wrap{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--gutter)}
.muted{color:var(--muted)}
.label{font-family:var(--font-mono);font-size:var(--step--1);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-weight:500}
.skip{position:absolute;left:-9999px;top:0}
.skip:focus{left:1rem;top:1rem;z-index:50;background:var(--fg);color:var(--bg);padding:.5rem .75rem;border-radius:var(--radius)}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Buttons and fields — also available to tool.html fragments */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:2.75rem;padding:.6rem 1.1rem;border-radius:var(--radius-control,var(--radius));
  border:1.5px solid var(--fg);background:transparent;color:var(--fg);font:600 .9375rem/1.2 var(--font-body);text-decoration:none;cursor:pointer;
  transition:background-color .15s,color .15s,border-color .15s}
.btn:hover{background:var(--fg);color:var(--bg)}
.btn-primary{background:var(--accent);border-color:var(--accent);color:var(--accent-fg)}
.btn-primary:hover{background:color-mix(in oklab,var(--accent) 85%,var(--fg));border-color:color-mix(in oklab,var(--accent) 85%,var(--fg));color:var(--accent-fg)}
.btn-small{min-height:2.25rem;padding:.35rem .8rem;font-size:.875rem}
.btn[disabled]{opacity:.55;cursor:not-allowed}
.field{display:grid;gap:.35rem}
.field>span,.field>label{font-size:.875rem;font-weight:600}
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]),select,textarea{
  width:100%;min-height:2.75rem;padding:.6rem .75rem;border:1.5px solid var(--line-strong);border-radius:var(--radius-input,var(--radius));background:var(--bg);
  color:var(--fg);font:400 1rem/1.4 var(--font-body)}
input::placeholder,textarea::placeholder{color:var(--muted);opacity:1}
input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--accent-ink);outline-offset:1px;border-color:var(--accent-ink)}

/* Header */
.site-head{border-bottom:1px solid var(--line)}
.head-row{display:grid;grid-template-columns:1fr auto;align-items:center;gap:.75rem 1.5rem;padding-block:.9rem}
.brand{display:inline-flex;align-items:center;gap:.6rem;text-decoration:none;font:700 1.1875rem/1 var(--font-display);letter-spacing:calc(-.02em * var(--display-tracking,1))}
.brand img{width:1.75rem;height:1.75rem;border-radius:5px}
.brand .brand-mark{width:auto;height:1.9rem;border-radius:0}
.lockup{display:inline-flex}
.brand .lockup img{display:block;width:auto;height:1.75rem;border-radius:0}
.brand-small .lockup img{height:1.375rem}
.brand-wm{gap:.5rem}
.wm{font:var(--display-weight,700) 1.625rem/1 var(--font-display);letter-spacing:calc(-.045em * var(--display-tracking,1));white-space:nowrap;color:var(--fg)}
.wm-a{color:var(--accent-ink)}
.brand-small .brand-mark{height:1.5rem}
.brand-small .wm{font-size:1.375rem}
.head-actions{display:flex;align-items:center;gap:.5rem}
.site-nav{grid-column:1/-1;order:3;margin:0 -.5rem}
.site-nav ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.1rem .25rem}
.site-nav a{display:inline-block;padding:.35rem .5rem;text-decoration:none;font-size:.9375rem;font-weight:500;color:var(--muted);border-radius:4px}
.site-nav a:hover,.site-nav a[aria-current=page]{color:var(--fg)}
.site-nav a[aria-current=page]{text-decoration:underline;text-decoration-color:var(--accent);text-decoration-thickness:2px;text-underline-offset:.45em}
.head-user{font-size:.875rem;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:14rem}
@media (min-width:800px){
  .head-row{grid-template-columns:auto 1fr auto}
  .site-nav{grid-column:auto;order:0;justify-self:end;margin:0}
}

/* Header bar (opt-in, product.json site.header): sticky and translucent; a hairline once the page
   has scrolled (scroll-driven, no script; browsers without it keep a faint hairline). */
.head-bar{--head-h:3.5rem;position:sticky;top:0;z-index:40;border-bottom:1px solid var(--line);
  background:color-mix(in oklab,var(--bg) 84%,transparent);-webkit-backdrop-filter:blur(18px) saturate(1.4);backdrop-filter:blur(18px) saturate(1.4)}
@supports (animation-timeline:scroll()){
  .head-bar{border-bottom-color:transparent;animation:head-line linear both;animation-timeline:scroll(root);animation-range:0 3rem}
}
@keyframes head-line{from{border-bottom-color:transparent}to{border-bottom-color:var(--line)}}
.head-bar .head-row{display:flex;align-items:center;gap:.75rem;min-height:var(--head-h);padding-block:0}
.head-bar .brand{flex:none;border-radius:6px}
.head-bar .head-links{display:none;flex:1;order:0;margin:0 .5rem}
.head-bar .head-links ul{flex-wrap:nowrap;gap:.125rem}
.head-bar .head-links a,.head-signin{padding:.45rem .75rem;border-radius:999px;font-size:.9375rem;font-weight:500;color:var(--muted);text-decoration:none;white-space:nowrap;
  transition:color .15s,background-color .15s}
.head-bar .head-links a:hover,.head-signin:hover{color:var(--fg);background:color-mix(in oklab,var(--fg) 6%,transparent)}
.head-bar .head-links a[aria-current=page],.head-signin[aria-current=page]{color:var(--fg);background:none;
  text-decoration:underline;text-decoration-thickness:2px;text-decoration-color:var(--accent);text-underline-offset:.45em}
.head-bar .head-actions{margin-left:auto;gap:.375rem}
.head-signin{display:none}
.head-bar .head-user{display:none;margin-right:.25rem}
.head-cta{min-height:2.5rem;padding:.3rem .9rem .3rem .7rem;font-size:.875rem;gap:.45rem;white-space:nowrap}
.head-bar .head-cta img{width:1.125rem;height:1.125rem;border-radius:0;filter:brightness(0) invert(1)}
.head-cta-l{display:none}
.head-bar a:focus-visible,.head-menu>summary:focus-visible{outline:2px solid var(--accent-ink);outline-offset:2px;border-radius:999px}
.head-bar .brand:focus-visible{border-radius:6px}
/* The menu button: two bars, the lower one the mark's short way; an X while the sheet is open. */
.head-menu{position:static}
.head-menu>summary{list-style:none;display:grid;place-items:center;width:2.5rem;height:2.5rem;margin-right:-.5rem;border-radius:999px;cursor:pointer;color:var(--fg)}
.head-menu>summary::-webkit-details-marker{display:none}
.head-menu>summary:hover{background:color-mix(in oklab,var(--fg) 6%,transparent)}
.head-burger{display:grid;gap:5px;justify-items:end;width:20px}
.head-burger i{display:block;height:2px;width:20px;border-radius:2px;background:currentColor;transition:transform .2s,width .2s,background-color .2s}
.head-burger i+i{width:13px;background:var(--accent)}
.head-menu[open] .head-burger i{width:20px;background:currentColor}
.head-menu[open] .head-burger i:first-child{transform:translateY(3.5px) rotate(45deg)}
.head-menu[open] .head-burger i+i{transform:translateY(-3.5px) rotate(-45deg)}
/* The sheet hangs from the bar and dims the rest of the page (a tap there closes it). */
.head-sheet{position:absolute;left:0;right:0;top:100%;height:calc(100vh - var(--head-h));background:color-mix(in oklab,var(--fg) 28%,transparent)}
@supports (height:1dvh){.head-sheet{height:calc(100dvh - var(--head-h))}}
.head-sheet-panel{max-height:100%;overflow:auto;padding:.25rem var(--gutter) 1rem;background:var(--bg);border-bottom:1px solid var(--line);
  box-shadow:0 24px 40px -28px color-mix(in oklab,var(--fg) 50%,transparent)}
.head-sheet-panel ul{list-style:none;margin:0;padding:0}
.head-sheet-panel a{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.95rem 0;border-bottom:1px solid var(--line);
  text-decoration:none;font:600 1.0625rem/1.25 var(--font-body);color:var(--fg)}
.head-sheet-panel a::after{content:"\2192";color:var(--muted);font-weight:400}
.head-sheet-panel a[aria-current=page]{color:var(--accent-ink)}
.head-sheet-panel a:focus-visible{border-radius:4px;outline-offset:-2px}
.head-sheet-panel .head-sheet-signin{border-bottom:0;padding-top:1rem;font-weight:500;color:var(--muted)}
.head-sheet-panel .head-sheet-signin::after{content:none}
.head-sheet-panel .head-user{display:block;max-width:none;padding-top:1rem}
@media (prefers-reduced-motion:no-preference){
  .head-menu[open] .head-sheet-panel{animation:head-sheet .18s ease-out}
  @keyframes head-sheet{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
}
@media (min-width:860px){
  .head-bar{--head-h:4rem}
  .head-signin,.head-bar .head-user{display:inline-block}
  .head-bar .head-links{display:block}
  .head-menu{display:none}
}
@media (min-width:1040px){.head-cta-l{display:inline}.head-cta-s{display:none}}
@media (prefers-reduced-motion:reduce){.head-bar{border-bottom-color:var(--line)}}
@media print{.head-bar{position:static}}

/* Hero */
.hero{display:grid;gap:2.5rem;padding-block:clamp(2.75rem,8vw,6rem) clamp(3rem,7vw,5rem)}
.hero h1{font-size:var(--step-4);line-height:.98;letter-spacing:calc(-.035em * var(--display-tracking,1));font-weight:700;max-width:13ch}
.hero .lede{margin-top:1.5rem;font-size:clamp(1.125rem,2vw,1.3125rem);line-height:1.5;max-width:36rem;color:var(--fg)}
.hero-copy .hero-links{margin-top:1.25rem;display:flex;flex-wrap:wrap;gap:.25rem 1.25rem;font-size:.9375rem}
.hero-side{align-self:end}
@media (min-width:960px){
  .hero{grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:clamp(2.5rem,5vw,5rem)}
}

/* The plate: the MCP address, the signature element */
.plate{margin-top:2.25rem;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:stretch;max-width:36rem;
  border:1.5px solid var(--fg);border-radius:var(--radius);background:var(--bg);overflow:hidden}
.plate-tag{display:flex;align-items:center;padding:0 .8rem;background:var(--fg);color:var(--bg);font:600 .75rem/1 var(--font-mono);letter-spacing:.1em}
.plate-url{display:flex;align-items:center;padding:.85rem 1rem;font:500 clamp(.875rem,2.4vw,1.0625rem)/1.3 var(--font-mono);overflow-wrap:break-word;min-width:0;
  background:none;border:0;border-radius:0;white-space:normal}
.plate .copy{border:0;border-left:1.5px solid var(--fg);border-radius:0;min-height:100%}
.plate-box{container-type:inline-size}
@container (max-width:27rem){
  .plate{grid-template-columns:auto minmax(0,1fr)}
  .plate-tag{padding:0 .6rem}
  .plate-url{font-size:.8125rem;padding:.75rem .75rem}
  .plate .copy{grid-column:1/-1;border-left:0;border-top:1.5px solid var(--fg);min-height:2.5rem}
}
.plate-note{margin-top:.75rem;font-size:.9375rem;color:var(--muted);max-width:36rem}
.copy{position:relative}
.copy[data-copied]::after{content:attr(data-copied);position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:var(--accent);color:var(--accent-fg)}

/* Tool fragment frame */
.tool{border:1px solid var(--line);border-radius:10px;background:var(--surface);padding:clamp(1rem,3vw,1.5rem)}
.tool-head{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;margin-bottom:1rem}
.tool :where(form){display:grid;gap:.75rem}
.tool :where(.out){font-family:var(--font-mono);font-size:.9375rem;overflow-wrap:anywhere}

/* Sections: heading column on the left, content on the right */
.sec{display:grid;gap:1.5rem 3rem;padding-block:clamp(3rem,7vw,5rem);
  background:linear-gradient(var(--line),var(--line)) no-repeat center top/calc(100% - 2 * var(--gutter)) 1px}
.sec-head h2{font-size:var(--step-3);letter-spacing:calc(-.025em * var(--display-tracking,1))}
.sec-head p{margin-top:.75rem;color:var(--muted);max-width:30rem}
.sec-head .more{display:inline-block;margin-top:1rem;font-weight:600;font-size:.9375rem}
.sec-body{min-width:0}
@media (min-width:960px){
  .sec{grid-template-columns:minmax(0,4fr) minmax(0,8fr)}
  .sec-head{position:sticky;top:2rem;align-self:start}
}
.sec-wide .sec-body{grid-column:1/-1}

/* Page heads for subpages */
.page-head{padding-block:clamp(2.25rem,6vw,4.25rem) clamp(1.75rem,4vw,2.75rem)}
.page-head h1{font-size:clamp(2.25rem,5.6vw,4.25rem);line-height:1.02;letter-spacing:calc(-.032em * var(--display-tracking,1));max-width:20ch}
.page-head .lede{margin-top:1.1rem;font-size:clamp(1.0625rem,1.8vw,1.25rem);max-width:40rem}
.crumbs{margin-bottom:1.25rem}
.crumbs ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.25rem}
.crumbs li{font-size:var(--step--1);color:var(--muted);font-family:var(--font-mono)}
.crumbs li+li::before{content:"/";margin-right:.3rem;opacity:.6}
.crumbs a{text-decoration:none}
.crumbs a:hover{text-decoration:underline}
.eyebrow{margin-bottom:.9rem}

/* Example prompts: hanging quotes */
.prompts{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.prompts li{position:relative;padding:1.05rem 0 1.05rem 1.6rem;border-bottom:1px solid var(--line);
  font:500 clamp(1.0625rem,2.2vw,1.3125rem)/1.42 var(--font-display);letter-spacing:calc(-.01em * var(--display-tracking,1))}
.prompts li::before{content:"\201C";position:absolute;left:0;top:.8rem;font:700 2rem/1 var(--font-display);color:var(--accent-ink)}

/* Lists with ticks */
.ticks{list-style:none;margin:0;padding:0;display:grid;gap:.6rem}
.ticks li{position:relative;padding-left:1.25rem}
.ticks li::before{content:"";position:absolute;left:0;top:.62em;width:.5rem;height:.5rem;background:var(--accent);border-radius:1px}
@media (min-width:640px){.ticks.cols{grid-template-columns:1fr 1fr;column-gap:2rem}}
.desc p+p{margin-top:1rem}
.desc{max-width:42rem;margin-bottom:2rem}

/* Plans */
.plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr));border-top:1.5px solid var(--fg)}
.plan{display:flex;flex-direction:column;gap:1.25rem;padding:1.5rem 0 2rem;border-bottom:1px solid var(--line)}
.plan.is-featured{box-shadow:inset 0 3px 0 var(--accent)}
.plan h3{font-size:var(--step-1);letter-spacing:calc(-.01em * var(--display-tracking,1))}
.price{display:flex;flex-wrap:wrap;align-items:baseline;gap:.15rem .4rem;margin-top:.35rem}
.price .amount{font:700 clamp(2.5rem,4.2vw,3.25rem)/1 var(--font-display);letter-spacing:calc(-.04em * var(--display-tracking,1));font-variant-numeric:tabular-nums}
.price .per{color:var(--muted);font-size:.9375rem}
.plan .limits{list-style:none;margin:0;padding:0;font-family:var(--font-mono);font-size:.875rem;display:grid;gap:.3rem}
.plan .limits li{padding-block:.4rem;border-bottom:1px dashed var(--line)}
.plan .ticks{font-size:.9375rem}
.plan .actions{margin-top:auto;padding-top:.5rem}
@media (min-width:720px){
  .plans{border-bottom:1px solid var(--line)}
  .plan{padding:1.75rem 1.5rem 2rem;border-bottom:0;border-left:1px solid var(--line)}
  .plan:first-child{border-left:0;padding-left:0}
}
.fine{margin-top:1.25rem;margin-bottom:clamp(2rem,5vw,3.5rem);font-size:.875rem;color:var(--muted);max-width:44rem}

/* Tables */
.scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}
table{width:100%;border-collapse:collapse;font-size:.9375rem}
th,td{text-align:left;vertical-align:top;padding:.75rem 1rem .75rem 0;border-bottom:1px solid var(--line)}
thead th{font-family:var(--font-mono);font-size:var(--step--1);font-weight:500;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);
  border-bottom:1.5px solid var(--fg);white-space:nowrap}
tbody th{font-weight:600}
tbody th::first-letter{text-transform:uppercase}
td.us{font-weight:600}

/* Link lists (guides, posts) */
.links{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.links li{border-bottom:1px solid var(--line)}
.links a{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.25rem 1rem;padding:1rem 0;text-decoration:none}
.links .t{font:600 var(--step-1)/1.3 var(--font-display);letter-spacing:calc(-.01em * var(--display-tracking,1))}
.links .s{grid-column:1;color:var(--muted);font-size:.9375rem}
.links .arrow{grid-row:1/span 2;grid-column:2;align-self:center;color:var(--muted);transition:transform .15s,color .15s}
.links a:hover .t{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.2em}
.links a:hover .arrow{transform:translateX(3px);color:var(--accent-ink)}

/* FAQ */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:1rem;padding:1.1rem 0;
  font:600 var(--step-1)/1.35 var(--font-display);letter-spacing:calc(-.01em * var(--display-tracking,1))}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font:400 1.5rem/1 var(--font-mono);color:var(--muted);transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq .a{padding:0 0 1.25rem;max-width:44rem;color:var(--fg)}

/* Steps: ordered, the order matters */
.steps{list-style:none;margin:0;padding:0;counter-reset:step;display:grid;gap:0}
.steps>li{counter-increment:step;position:relative;padding:1rem 0 1rem 2.75rem;border-bottom:1px solid var(--line)}
.steps>li:first-child{border-top:1px solid var(--line)}
.steps>li::before{content:counter(step);position:absolute;left:0;top:1rem;width:1.75rem;height:1.75rem;display:grid;place-items:center;
  border:1.5px solid var(--fg);border-radius:50%;font:600 .8125rem/1 var(--font-mono)}
.steps pre{margin-top:.75rem}

/* MCP clients */
.clients{display:grid;grid-template-columns:minmax(0,1fr);gap:2.5rem}
.client h3{font-size:var(--step-2);margin-bottom:1rem;display:flex;flex-wrap:wrap;align-items:baseline;gap:.5rem 1rem}
.client h3 .label{font-weight:500;letter-spacing:.04em}
.client>p{margin-bottom:1rem;max-width:44rem}
.codeblock{position:relative}
.codeblock .copy{position:absolute;top:.5rem;right:.5rem;background:var(--bg)}
.codeblock pre{padding-right:5.5rem}

/* Tool list */
.tools{list-style:none;margin:0;padding:0;border-top:1.5px solid var(--fg)}
.tools li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.35rem 1rem;padding:1.1rem 0;border-bottom:1px solid var(--line)}
.tools .name{font:500 .9375rem/1.4 var(--font-mono);overflow-wrap:anywhere}
.tools .ttl{grid-column:1;font-weight:600}
.tools .d{grid-column:1/-1;color:var(--muted);font-size:.9375rem;max-width:46rem}
.badge{display:inline-block;padding:.2rem .5rem;border:1px solid currentColor;border-radius:4px;font:600 .6875rem/1.2 var(--font-mono);
  text-transform:uppercase;letter-spacing:.08em;white-space:nowrap;align-self:start}
.badge-read{color:var(--muted)}
.badge-write{color:var(--accent-ink)}
.badge-destructive{color:var(--danger)}
.badge-get{color:var(--muted)}.badge-post,.badge-put,.badge-patch{color:var(--accent-ink)}.badge-delete{color:var(--danger)}

/* Prose: blog, legal, use cases */
.prose{max-width:42rem}
.prose>*+*{margin-top:1.1rem}
.prose h2{font-size:var(--step-2);margin-top:2.5rem}
.prose h3{font-size:var(--step-1);margin-top:2rem}
.prose ul,.prose ol{padding-left:1.25rem}
.prose li+li{margin-top:.35rem}
.prose blockquote{margin-inline:0;padding-left:1.25rem;border-left:3px solid var(--accent);color:var(--muted)}
.prose img{border-radius:var(--radius)}
.post-meta{margin-top:1rem}

/* Call to action band */
.cta{display:grid;gap:1.25rem;padding:clamp(1.5rem,4vw,2.5rem);border:1.5px solid var(--fg);border-radius:10px;margin-block:clamp(2.5rem,6vw,4rem)}
.sec+aside .cta{margin-top:0}
.cta h2{font-size:var(--step-3)}
.cta h2+p{margin-top:.75rem;color:var(--muted);max-width:36rem}
.cta .plate{margin-top:0}
@media (min-width:960px){.cta{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center}}

/* Docs */
.docs{display:grid;grid-template-columns:minmax(0,1fr);gap:2rem;padding-bottom:4rem}
.docs-nav{font-size:.9375rem}
.docs-nav ul{list-style:none;margin:0;padding:0}
.docs-nav .group+.group{margin-top:1.25rem}
.docs-nav .group>.label{display:block;margin-bottom:.4rem}
.docs-nav a{display:flex;gap:.6rem;align-items:baseline;padding:.3rem 0;text-decoration:none;color:var(--muted)}
.docs-nav a:hover{color:var(--fg)}
.docs-nav .m{font:600 .6875rem/1 var(--font-mono);text-transform:uppercase;min-width:3.2rem}
.docs-main{min-width:0}
.docs-main>section+section{margin-top:3.5rem}
.docs-main h2{font-size:var(--step-2);margin-bottom:1rem}
.op{padding-top:2.5rem;margin-top:2.5rem;border-top:1px solid var(--line);scroll-margin-top:1rem}
.op-sig{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem;margin:.75rem 0 1rem;font:500 1rem/1.4 var(--font-mono);overflow-wrap:anywhere}
.op h3{font-size:var(--step-2)}
.op h4{font:500 var(--step--1)/1.2 var(--font-mono);text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin:1.75rem 0 .6rem}
.op .md{max-width:44rem}
.op .md>*+*{margin-top:.75rem}
.docs-main .md+pre{margin-top:1rem}
.fields{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.fields li{padding:.7rem 0;border-bottom:1px solid var(--line)}
.fields .fname{font:600 .875rem/1.4 var(--font-mono)}
.fields .ftype{font:400 .8125rem/1.4 var(--font-mono);color:var(--muted);margin-left:.5rem}
.fields .req{font:600 .6875rem/1 var(--font-mono);text-transform:uppercase;letter-spacing:.06em;color:var(--danger);margin-left:.5rem}
.fields .fdesc{margin-top:.25rem;font-size:.9375rem;color:var(--muted)}
.fields .fields{margin:.6rem 0 0 1rem;border-top:0;border-left:1px solid var(--line);padding-left:1rem}
.fields .fields li:last-child{border-bottom:0}
.resp+.resp{margin-top:1rem}
.resp-code{font:600 .875rem/1.4 var(--font-mono)}
.resp pre{margin-top:.5rem}
@media (min-width:1000px){
  .docs{grid-template-columns:15rem minmax(0,1fr);gap:4rem}
  .docs-nav{position:sticky;top:1.5rem;align-self:start;max-height:calc(100vh - 3rem);overflow:auto}
}

/* App pages (runtime) */
.app-main{padding-block:clamp(2rem,5vw,3.5rem) 4rem}
.app-title{font-size:clamp(1.75rem,4vw,2.5rem);margin-bottom:1.5rem}
.panel{border:1px solid var(--line);border-radius:var(--radius-card,10px);background:var(--surface);padding:clamp(1.25rem,3vw,2rem)}
.panel+.panel,.panel+section,section+.panel{margin-top:1.5rem}
.panel h2{font-size:var(--step-2);letter-spacing:calc(-.015em * var(--display-tracking,1))}
.panel h3{font-size:var(--step-0);margin-top:1.75rem;margin-bottom:.75rem}
.narrow{max-width:32rem}
.wide{max-width:52rem}
.lead{font-size:var(--step-1);line-height:1.45}
.small{font-size:.875rem}
.nowrap{white-space:nowrap}
.stack>*+*{margin-top:1rem}
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem;margin-top:1.5rem}
.actions>form{display:contents}
.stack>.actions{margin-top:1rem}
.flush{margin-top:0!important}
.after{margin-top:1.25rem}
.app-sub{margin:-.75rem 0 1.5rem;color:var(--muted)}
.panel-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:.35rem 1rem}
.inline{display:flex;flex-wrap:wrap;align-items:end;gap:.75rem}
.inline>.field{flex:1 1 12rem}
.notice{padding:.8rem 1rem;border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:var(--radius);
  background:var(--accent-soft);font-size:.9375rem}
.notice-warn{border-left-color:var(--danger);background:color-mix(in oklab,var(--danger) 7%,var(--bg))}
.label+.ticks,.label+ul,.label+p{margin-top:.6rem}
:where(.facts){margin:0}
.facts{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.6rem 1.25rem;font-size:.9375rem}
@media (max-width:30rem){.facts{grid-template-columns:minmax(0,1fr);gap:0}.facts dd+dt{margin-top:.6rem}}
.facts dt{color:var(--muted)}
.facts dd{margin:0;font-weight:600;overflow-wrap:anywhere}
.ident{display:flex;align-items:center;gap:.9rem}
.ident-mark{flex:none;display:grid;place-items:center;width:3rem;height:3rem;border-radius:10px;background:var(--fg);color:var(--bg);
  font:700 1.375rem/1 var(--font-display);text-transform:uppercase}
.ident-name{font:700 var(--step-1)/1.25 var(--font-display);letter-spacing:calc(-.01em * var(--display-tracking,1));overflow-wrap:anywhere}
.readout{font:500 clamp(2.75rem,10vw,4.5rem)/1 var(--font-mono);letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.meter{height:.375rem;margin-top:.4rem;border-radius:99px;background:var(--line);overflow:hidden}
.meter>span{display:block;height:100%;background:var(--accent)}
.secret{display:block;padding:.85rem 1rem;border:1.5px dashed var(--line-strong);border-radius:var(--radius);background:var(--bg);
  font:500 .9375rem/1.4 var(--font-mono);overflow-wrap:anywhere;word-break:break-all}

/* Footer */
.site-foot{border-top:1px solid var(--line);margin-top:auto;font-size:.9375rem}
.foot-grid{display:grid;gap:2rem;padding-block:3rem}
.foot-grid ul{list-style:none;margin:.75rem 0 0;padding:0;display:grid;gap:.4rem}
.foot-grid a{text-decoration:none;color:var(--muted)}
.foot-grid a:hover{color:var(--fg);text-decoration:underline}
.foot-brand p{margin-top:.75rem;color:var(--muted);max-width:22rem}
.foot-legal{padding-block:1.25rem 2rem;border-top:1px solid var(--line);color:var(--muted);font-size:.8125rem;display:flex;flex-wrap:wrap;gap:.5rem 1.5rem}
@media (min-width:720px){.foot-grid{grid-template-columns:2fr 1fr 1fr 1fr}}

/* Agent layout (products with site options): cards, chips, steps, landing, connect, account, sign-in */
.btn-ink{background:var(--fg);border-color:var(--fg);color:var(--bg)}
.btn-ink:hover{background:color-mix(in oklab,var(--fg) 84%,var(--bg));border-color:color-mix(in oklab,var(--fg) 84%,var(--bg));color:var(--bg)}
.btn-danger{border-color:var(--danger);color:var(--danger)}
.btn-danger:hover{background:var(--danger);border-color:var(--danger);color:var(--bg)}
.btn img{width:1.375rem;height:1.375rem;border-radius:5px;flex:none}
.lift .btn{transition:background-color .15s,color .15s,border-color .15s,transform .15s}
.lift .btn:hover{transform:translateY(-1px)}
.card{display:flex;flex-direction:column;gap:.75rem;min-width:0;padding:1.375rem;border:1px solid var(--line);border-radius:var(--radius-card,10px);background:var(--surface)}
.card h2{font-size:1.1875rem;letter-spacing:calc(-.01em * var(--display-tracking,1))}
.card-head{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem .75rem}
.card-head .chip{margin-left:auto}
.card-danger{border-color:color-mix(in oklab,var(--danger) 30%,var(--line))}
.chip{display:inline-flex;align-items:center;gap:.35rem;min-height:1.5rem;padding:.1rem .625rem;border-radius:999px;background:color-mix(in oklab,var(--fg) 7%,var(--bg));
  color:var(--fg);font:600 .75rem/1.3 var(--font-body);white-space:nowrap}
.chip img{width:1rem;height:1rem;border-radius:3px}
.chip-accent{background:color-mix(in oklab,var(--accent) 26%,var(--bg));color:var(--accent-ink)}
.chips{display:flex;flex-wrap:wrap;gap:.375rem}
.ok-dot{flex:none;width:.625rem;height:.625rem;border-radius:50%;background:#2F8F5B;box-shadow:0 0 0 3px color-mix(in oklab,#2F8F5B 24%,transparent)}
.client-logo{flex:none;width:2.25rem;height:2.25rem;border-radius:9px}
.client-mono,.client-term{display:grid;place-items:center;background:var(--fg);color:var(--bg);font:700 .8125rem/1 var(--font-mono)}
.nsteps{list-style:none;margin:0;padding:0;display:grid;gap:.7rem;font-size:.9375rem}
.nsteps li{display:grid;grid-template-columns:1.75rem minmax(0,1fr);gap:.6rem;align-items:start}
.nsteps b{display:grid;place-items:center;width:1.625rem;height:1.625rem;border:1.5px solid var(--fg);border-radius:50%;font:600 .75rem/1 var(--font-mono)}
.nsteps code{overflow-wrap:anywhere;word-break:break-word}

/* Connect page (/connect/ and /app) */
.cx{display:grid;gap:1.75rem;padding-block:clamp(2rem,5vw,3rem) 4rem}
.cx-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:1.25rem}
.cx-intro{flex:1 1 26rem;max-width:42rem}
.cx-intro h1{font-size:clamp(2.25rem,5vw,2.75rem);letter-spacing:calc(-.03em * var(--display-tracking,1))}
.cx-intro .lede{margin-top:.6rem;color:var(--muted);font-size:1.0625rem}
.cx-now{flex:0 1 22rem;gap:.5rem;padding:1rem 1.125rem}
.cx-list{list-style:none;margin:0;padding:0;display:grid;gap:.45rem}
.cx-list li{display:flex;align-items:center;gap:.5rem;font-size:.9375rem}
.cx-list .client-logo{width:1.25rem;height:1.25rem;border-radius:5px}
.cx-list .client-mono{font-size:.625rem}
.cx-plate .plate{margin-top:0;max-width:40rem}
.cx-plate .plate-note{max-width:44rem}
.cx-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(18.5rem,100%),1fr));gap:1rem}
.cx-cards .btn{align-self:flex-start;margin-top:auto}
.cx-try{flex-direction:row;flex-wrap:wrap;align-items:center;gap:1rem 1.5rem}
.cx-try>div{flex:1 1 20rem}
.cx-try>p{flex:1 1 14rem}
.cx-try-title{font-weight:700;font-size:1.0625rem}
.app-main .cx{padding-block:0}

/* Agent landing */
.lp-hero{display:grid;gap:2.75rem;align-items:center;padding-block:clamp(2rem,5vw,3.25rem) clamp(3rem,7vw,4.5rem)}
@media (min-width:960px){.lp-hero{grid-template-columns:minmax(0,1fr) minmax(0,1.25fr)}}
.lp-kicker{font-size:.8125rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.lp-hero h1{margin-top:1.1rem;font-size:clamp(2.75rem,6vw,4rem);line-height:1.02;letter-spacing:calc(-.035em * var(--display-tracking,1));max-width:11ch}
.lp-lead{margin-top:1.25rem;font-size:clamp(1.0625rem,1.6vw,1.1875rem);color:var(--muted);max-width:48ch}
.lp-ctas{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem;margin-top:1.5rem}
.lp-ctas .btn{min-height:3rem;padding-inline:1.25rem}
.lp-free{margin-top:1rem;font-size:.875rem;color:var(--muted)}
.lp-stage{min-width:0;display:flex;justify-content:center}
.lp-sec{display:grid;gap:1.6rem;padding-block:clamp(2.5rem,6vw,4.5rem)}
.lp-sec+.lp-sec{padding-top:0}
.lp-sec-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:1rem}
.lp-sec-head h2{font-size:clamp(1.875rem,3.6vw,2.25rem);line-height:1.1;letter-spacing:calc(-.03em * var(--display-tracking,1));max-width:24ch}
.lp-sec-head p{color:var(--muted);max-width:52ch}
.lp-two{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(26rem,100%),1fr));gap:1.75rem;align-items:start}
.lp-side{display:grid;gap:.9rem}
.asks{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.asks li{position:relative;padding:.95rem 0 .95rem 1.6rem;border-bottom:1px solid var(--line);font:600 1.0625rem/1.4 var(--font-body)}
.asks li::before{content:"\201C";position:absolute;left:0;top:.7rem;font:700 1.75rem/1 var(--font-display);color:var(--accent-ink)}
.asks small{display:block;margin-top:.2rem;font:400 .8125rem/1.45 var(--font-body);color:var(--muted)}
.lp-feats{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(13rem,100%),1fr));gap:1.1rem 1.5rem;border-top:1.5px solid var(--fg);padding-top:1.1rem}
.lp-feats li{display:grid;gap:.25rem;align-content:start}
.lp-feats b{font:var(--display-weight,700) 1.0625rem/1.25 var(--font-display);letter-spacing:calc(-.01em * var(--display-tracking,1))}
.lp-feats span{color:var(--muted);font-size:.9375rem;line-height:1.45}
.lp-works{padding-block:0 .5rem}
.lp-works p{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .75rem;margin:0;color:var(--muted);font-size:.9375rem}
.lp-works-l{font-weight:600;color:var(--fg)}
.lp-client{display:inline-flex;align-items:center;gap:.45rem;padding:.3rem .75rem .3rem .35rem;border:1px solid var(--line);border-radius:999px;background:var(--surface);color:var(--fg);font-weight:600}
.lp-client img{width:1.4rem;height:1.4rem;padding:2px;border-radius:6px;background:#fff;box-sizing:border-box}
#connect>.lp-ctas{margin-top:0}
.lp-plate .plate{margin-top:0;max-width:36rem}
.lp-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(15.5rem,100%),1fr));gap:1rem}
.lp-cards .card p{font-size:.875rem;color:var(--muted)}
.lp-cards .btn{align-self:flex-start;margin-top:auto;min-height:2.5rem;padding:.35rem 1rem}
.lp-cards .card-strong{border-color:var(--fg)}
.lp-cards pre{background:var(--fg);color:var(--bg);border:0;border-radius:10px;font-size:.78rem;padding:.75rem .875rem}
.lp-band{background:var(--fg);color:var(--bg);padding-block:clamp(3rem,7vw,4.5rem)}
.lp-band .lp-sec{padding-block:0}
.lp-band .lp-sec-head p{color:color-mix(in oklab,currentColor 78%,transparent)}
.lp-band .card{background:color-mix(in oklab,currentColor 7%,transparent);border-color:color-mix(in oklab,currentColor 16%,transparent);color:inherit;flex-direction:row;align-items:center;flex-wrap:wrap}
.lp-band .card .chip{background:color-mix(in oklab,currentColor 14%,transparent);color:inherit}
.lp-band .card .chip-accent{background:var(--accent);color:var(--accent-fg)}
.lp-band .card p{flex:1 1 12rem;font-size:.875rem;color:color-mix(in oklab,currentColor 80%,transparent)}
.lp-band .card img{width:4.5rem;height:4.5rem;border-radius:8px;flex:none;background:#fff}
.lp-band .card-dim img{opacity:.28}
.lp-band .card>.chip{flex:1 0 100%;max-width:max-content}
.lp-freeband{display:flex;align-items:center;flex-wrap:wrap;gap:.5rem .9rem;padding:1rem 1.25rem;border-radius:14px;background:var(--accent);color:var(--accent-fg)}
.lp-freeband b{font:var(--display-weight,700) 1.375rem/1.15 var(--font-display);letter-spacing:calc(-.02em * var(--display-tracking,1))}
.lp-faq{max-width:52rem}
.lp-final h2{font-size:clamp(2.25rem,5vw,3rem);line-height:1.05;letter-spacing:calc(-.03em * var(--display-tracking,1));max-width:16ch}
.lp-final .lp-ctas{margin-top:0}
.lp-sticky{display:none}
@supports (animation-timeline:view()){.rv{animation:rv .3s ease-out both;animation-timeline:view();animation-range:entry 0% entry 25%}}
@keyframes rv{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (max-width:480px){
  .lp-ctas{flex-direction:column;align-items:stretch}
  .lp-ctas .btn{width:100%}
  .lp-freeband{flex-direction:column;align-items:flex-start}
  .lp-sticky{position:fixed;left:0;right:0;bottom:0;z-index:30;display:flex;gap:.5rem;padding:.625rem .75rem calc(.625rem + env(safe-area-inset-bottom));
    background:color-mix(in oklab,var(--bg) 92%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-top:1px solid var(--line)}
  .lp-sticky .btn{flex:1;min-height:2.75rem;padding:0 .6rem;font-size:.875rem}
  main:has(.lp-sticky){padding-bottom:4.5rem}
}

/* Account, sign-in and consent pages (agent layout) */
.acct{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(26rem,100%),1fr));gap:1rem;align-items:start}
.acct-head{grid-column:1/-1;display:grid;gap:.4rem;margin-bottom:.5rem}
.acct-head h1{font-size:clamp(2rem,4.5vw,2.5rem)}
.acct-row{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem;padding-top:.75rem;border-top:1px solid var(--line)}
.acct-row>span{flex:1 1 12rem;min-width:0}
.acct-row .client-logo{flex:none;width:2rem;height:2rem;border-radius:8px}
.acct-free{font:var(--display-weight,700) 1.5rem/1.15 var(--font-display);letter-spacing:calc(-.02em * var(--display-tracking,1))}
.undo{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem 1rem;padding:.65rem .9rem;border-radius:var(--radius-input,var(--radius));background:var(--accent-soft);font-size:.9375rem}
.undo button{background:none;border:0;padding:0;font:inherit;font-weight:700;color:var(--accent-ink);text-decoration:underline;cursor:pointer}
details.fold>summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:1rem;font:var(--display-weight,700) 1.1875rem/1.3 var(--font-display)}
details.fold>summary::-webkit-details-marker{display:none}
details.fold>summary::after{content:"+";font:400 1.375rem/1 var(--font-mono);color:var(--muted)}
details.fold[open]>summary::after{content:"\2013"}
details.fold>div{display:grid;gap:.75rem;padding-top:.9rem}
.signin{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:2rem 3rem;padding-block:1rem 2rem}
.signin>.card{flex:1 1 22rem;max-width:30rem;gap:1rem}
.signin h1{font-size:clamp(1.75rem,4vw,2rem)}
.signin-steps{flex:1 1 16rem;max-width:22rem;list-style:none;margin:0;padding:0;display:grid;gap:.9rem;color:var(--muted);font-size:.875rem}
.signin-steps li{display:grid;grid-template-columns:2rem minmax(0,1fr);gap:.75rem;align-items:center}
.signin-steps b{display:grid;place-items:center;width:1.875rem;height:1.875rem;border:1.5px solid var(--fg);border-radius:50%;color:var(--fg);font:600 .8125rem/1 var(--font-mono)}
.code-input{font:500 1.625rem/1 var(--font-mono)!important;letter-spacing:.35em;text-align:center}
.consent-head{display:flex;align-items:center;gap:.9rem}
.consent-head h1{font-size:clamp(1.5rem,3.6vw,1.75rem);line-height:1.15}
.consent-host{font-size:.9375rem}
.consent-host code{font-size:.9375rem}
.perm-box{display:grid;gap:.75rem;padding:1rem;border-radius:12px;background:var(--bg)}
.perm{display:grid;grid-template-columns:1.5rem minmax(0,1fr);gap:.6rem;font-size:.9375rem}
.perm::before{content:"";width:1.25rem;height:1.25rem;margin-top:.15rem;border-radius:50%;background:var(--accent-soft);box-shadow:inset 0 0 0 5px var(--accent)}
.agent-main .narrow{margin-inline:auto}
.card-head h2,.card-head h3{flex:1 1 8rem;min-width:0}
.foot-compact .foot-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem 2rem;padding-block:1.5rem 2rem;font-size:.875rem}
.foot-id{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem 1rem;color:var(--muted)}
.foot-links{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem 1.1rem}
.foot-links a,.foot-id a{color:var(--muted);text-decoration:none}
.foot-links a:hover,.foot-id a:hover{color:var(--fg);text-decoration:underline}
.foot-lang{display:inline-flex;gap:.3rem;color:var(--muted)}
.foot-lang b{color:var(--fg)}
.linklike{background:none;border:0;padding:0;font:inherit;color:var(--accent-ink);text-decoration:underline;text-underline-offset:.22em;cursor:pointer}
.split{display:flex;flex-wrap:wrap;gap:.75rem}
.split>.btn{flex:1 1 10rem}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}
}
@media print{.site-head nav,.copy,.site-foot{display:none}}

/* Urlsome landing sections (brand/site.css): everything the content/landing/<lang>.html partial uses.
   Prefixed us-. Tokens come from the kit (--bg, --surface, --fg, --muted, --line, --accent,
   --accent-ink); the mockup page defines the same names. */
.us-sec{max-width:1280px;margin:auto;padding:clamp(3.2rem,6.5vw,6rem) 1.25rem}
.us-sec h2{font-family:"Familjen Grotesk",system-ui,sans-serif;font-weight:700;font-size:clamp(2rem,3.6vw,3.2rem);letter-spacing:-.035em;line-height:1.04;margin:0}
.us-sec h3{font-family:"Familjen Grotesk",system-ui,sans-serif;font-weight:700;font-size:1.3rem;letter-spacing:-.02em;line-height:1.15;margin:0 0 .5rem}
.us-sec p{color:var(--muted,#5A6070);line-height:1.6}
.us-sec-head{max-width:680px;margin-bottom:2.2rem}
.us-sec-head>p:last-child{font-size:1.08rem;margin:.9rem 0 0}
.us-kick{margin:0 0 1rem;font-size:.74rem;line-height:1.5;letter-spacing:.1em;text-transform:uppercase;font-weight:600;color:var(--muted,#5A6070)}

/* How it works: three steps (create, change, measure), each a drawn stage over its text, then a row
   of other requests. Prefixed us-how- (test/site.test.ts keeps hero.css and site.css classes apart).
   Every stage is drawn on a 360 × 220 grid: --u is one grid unit (the stage is a size container), so
   the drawing scales as a whole and the arrow's angles stay right at any width.
   The base styles are the FINAL state of every drawing: that is what reduced motion, browsers without
   scroll-driven animations and the kit's `animation:none` rule show. The motion (at the end of this
   block) plays the steps backwards from there as each stage scrolls up the screen: only transform,
   opacity and clip-path, eased, over most of the stage's way from the bottom of the screen to the
   upper third. The visuals are aria-hidden; the text below each one says the same. */
.us-how{--us-how-soft:#E3E9FF}
.us-how-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.25rem}
.us-how-step{display:grid;grid-template-rows:auto 1fr;min-width:0;border:1px solid var(--line,#E1E2DA);border-radius:16px;background:var(--surface,#fff);overflow:clip}
.us-how-text{display:grid;gap:.55rem;align-content:start;padding:1.35rem 1.4rem 1.5rem}
.us-how-text h3,.us-how-text p{margin:0}
.us-how-text p{font-size:.95rem;line-height:1.55}
.us-how-text .us-how-n{font-size:.74rem;line-height:1.5;letter-spacing:.1em;text-transform:uppercase;font-weight:600;color:var(--accent-ink,#1A3FD6)}
.us-how-text .us-how-ask{justify-self:start;margin-top:.45rem;padding:.6rem .9rem;border-radius:16px 16px 16px 5px;background:var(--bg,#F4F4EF);color:var(--fg,#15171C);font-weight:600;font-size:.95rem;line-height:1.4}
.us-how-ask q,.us-how-more q{quotes:"“" "”"}

/* The stage: bone panel, 360 × 220 units. */
.us-how-stage{--u:calc(100cqw / 360);position:relative;container-type:inline-size;aspect-ratio:360/220;overflow:clip;background:var(--bg,#F4F4EF);border-bottom:1px solid var(--line,#E1E2DA);font-family:var(--font-body,Geist),system-ui,sans-serif;color:var(--fg,#15171C)}
.us-how-stage>*{position:absolute;margin:0}
.us-how-d{color:var(--muted,#5A6070);font-weight:500}
.us-how-sl{color:var(--accent-ink,#1A3FD6);font-weight:700}

/* 1 · Create: the long address (a thin box, the long way) folds down into the short way (dots and a
   blue bar, as in the mark) under urlso.me/k3Xa9P; the long one stays above it, struck through. */
.us-how-long{left:calc(18*var(--u));top:calc(14*var(--u));width:calc(324*var(--u));height:calc(96*var(--u));box-sizing:border-box;display:grid;align-content:start;gap:calc(4*var(--u));padding:calc(10*var(--u)) calc(14*var(--u));border:1.5px solid color-mix(in oklab,var(--fg,#15171C) 45%,transparent);border-radius:calc(10*var(--u));background:var(--surface,#fff);transform-origin:0 0;transform:translateY(calc(111*var(--u))) scale(.67,.068);opacity:0}
.us-how-long::after{content:"";position:absolute;inset:-1.5px;border-radius:inherit;background:var(--accent,#1F4CFF)}
.us-how-tag{font-size:calc(8.5*var(--u));line-height:1.4;letter-spacing:.1em;text-transform:uppercase;font-weight:600;color:var(--muted,#5A6070)}
.us-how-lurl{font-family:var(--font-mono,"Geist Mono"),ui-monospace,monospace;font-size:calc(11.5*var(--u));line-height:1.55;word-break:break-all;color:color-mix(in oklab,var(--fg,#15171C) 80%,var(--bg,#F4F4EF))}
.us-how-was{left:calc(18*var(--u));top:calc(56*var(--u));width:calc(324*var(--u));overflow:clip;white-space:nowrap;text-overflow:ellipsis;font-family:var(--font-mono,"Geist Mono"),ui-monospace,monospace;font-size:calc(10*var(--u));line-height:1.3;color:var(--muted,#5A6070)}
.us-how-was::after{content:"";position:absolute;left:0;right:0;top:52%;height:1px;background:currentColor;transform-origin:0 50%}
.us-how-short{left:calc(18*var(--u));top:calc(84*var(--u));display:grid;gap:calc(9*var(--u))}
.us-how-url{font-size:calc(27*var(--u));line-height:1.1;font-weight:600;letter-spacing:-.015em;white-space:nowrap}
.us-how-way{position:relative;height:calc(11*var(--u))}
.us-how-way i{position:absolute;top:0;width:calc(11*var(--u));height:calc(11*var(--u));border-radius:50%;background:var(--fg,#15171C)}
.us-how-way i:first-child{left:0}.us-how-way i:last-child{right:0}
.us-how-way b{position:absolute;left:calc(5*var(--u));right:calc(5*var(--u));top:calc(2.25*var(--u));height:calc(6.5*var(--u));border-radius:calc(3.25*var(--u));background:var(--accent,#1F4CFF);transform-origin:0 50%}
.us-how-chars{left:calc(18*var(--u));top:calc(150*var(--u));font-family:var(--font-mono,"Geist Mono"),ui-monospace,monospace;font-size:calc(10*var(--u));color:var(--muted,#5A6070)}

/* 2 · Change: the flyer stays put; the arrow from its link turns from the old page to the new one. */
.us-how-flyer{left:calc(18*var(--u));top:calc(24*var(--u));width:calc(140*var(--u));height:calc(172*var(--u));box-sizing:border-box;display:flex;flex-direction:column;gap:calc(7*var(--u));padding:calc(14*var(--u)) calc(12*var(--u));border:1px solid var(--line,#E1E2DA);border-radius:calc(4*var(--u));background:var(--surface,#fff);box-shadow:0 calc(6*var(--u)) calc(16*var(--u)) rgba(21,23,28,.08);transform:rotate(-3deg)}
.us-how-brand{font-size:calc(8*var(--u));line-height:1;letter-spacing:.16em;font-weight:600;color:var(--muted,#5A6070)}
.us-how-flyer b{font-family:var(--font-display,"Familjen Grotesk"),system-ui,sans-serif;font-weight:700;font-size:calc(17*var(--u));line-height:1.02;letter-spacing:-.02em;min-height:calc(35*var(--u))}
.us-how-plink{align-self:stretch;padding:calc(5*var(--u)) calc(6*var(--u));border-radius:calc(4*var(--u));background:var(--us-how-soft);font-family:var(--font-mono,"Geist Mono"),ui-monospace,monospace;font-size:calc(10.5*var(--u));line-height:1.2;white-space:nowrap}
.us-how-weave{flex:1;border-radius:calc(3*var(--u));background:repeating-linear-gradient(90deg,color-mix(in oklab,var(--fg,#15171C) 9%,transparent) 0 calc(2*var(--u)),transparent 0 calc(5*var(--u))),repeating-linear-gradient(0deg,color-mix(in oklab,var(--fg,#15171C) 6%,transparent) 0 calc(2*var(--u)),transparent 0 calc(5*var(--u))),color-mix(in oklab,var(--fg,#15171C) 4%,var(--surface,#fff))}
.us-how-arrow{left:calc(150*var(--u));top:calc(104*var(--u));width:calc(82*var(--u));height:calc(2*var(--u));background:var(--fg,#15171C);border-radius:calc(1*var(--u));transform-origin:0 50%;transform:rotate(31.5deg)}
.us-how-arrow::before{content:"";position:absolute;left:calc(-4*var(--u));top:calc(-3*var(--u));width:calc(8*var(--u));height:calc(8*var(--u));border-radius:50%;background:var(--accent,#1F4CFF)}
.us-how-arrow::after{content:"";position:absolute;right:calc(-2*var(--u));top:calc(-4.5*var(--u));width:calc(10*var(--u));height:calc(11*var(--u));background:var(--fg,#15171C);clip-path:polygon(0 0,100% 50%,0 100%)}
.us-how-page{left:calc(226*var(--u));width:calc(118*var(--u));height:calc(70*var(--u));box-sizing:border-box;display:grid;align-content:start;gap:calc(3*var(--u));padding:calc(14*var(--u)) calc(10*var(--u)) calc(8*var(--u));border:1px solid var(--line,#E1E2DA);border-radius:calc(8*var(--u));background:var(--surface,#fff)}
.us-how-page::before{content:"";position:absolute;left:calc(10*var(--u));top:calc(6*var(--u));width:calc(18*var(--u));height:calc(3*var(--u));border-radius:2px;background:var(--line,#E1E2DA)}
.us-how-page::after{content:"";position:absolute;inset:-1px;border:calc(2*var(--u)) solid var(--accent,#1F4CFF);border-radius:inherit}
.us-how-page b{font-family:var(--font-display,"Familjen Grotesk"),system-ui,sans-serif;font-weight:700;font-size:calc(13.5*var(--u));line-height:1.08;letter-spacing:-.01em}
.us-how-path{font-family:var(--font-mono,"Geist Mono"),ui-monospace,monospace;font-size:calc(9.5*var(--u));color:var(--muted,#5A6070);white-space:nowrap}
.us-how-old{top:calc(26*var(--u));opacity:.42}
.us-how-old::after{opacity:0}
.us-how-new{top:calc(114*var(--u))}

/* 3 · Measure: the week's total ticks up as the daily bars land; where the clicks came from. */
.us-how-mlink{left:calc(18*var(--u));top:calc(16*var(--u));font-family:var(--font-mono,"Geist Mono"),ui-monospace,monospace;font-size:calc(10.5*var(--u));line-height:1.2}
.us-how-mlink .us-how-d{font-weight:400}
.us-how-week{right:calc(18*var(--u));top:calc(16*var(--u));font-size:calc(8.5*var(--u));line-height:1.45;letter-spacing:.1em;text-transform:uppercase;font-weight:600;color:var(--muted,#5A6070)}
.us-how-total{left:calc(18*var(--u));top:calc(34*var(--u));display:flex;align-items:flex-end;gap:calc(6*var(--u))}
.us-how-odo{display:block;height:calc(44*var(--u));overflow:clip;font-family:var(--font-display,"Familjen Grotesk"),system-ui,sans-serif;font-weight:700;font-size:calc(44*var(--u));letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.us-how-roll{display:grid;justify-items:end;transform:translateY(calc(-308*var(--u)))}
.us-how-roll span{height:calc(44*var(--u));line-height:calc(44*var(--u))}
.us-how-total small{padding-bottom:calc(6*var(--u));font-size:calc(13*var(--u));color:var(--muted,#5A6070)}
.us-how-bars{left:calc(18*var(--u));top:calc(96*var(--u));width:calc(180*var(--u));height:calc(106*var(--u));display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:calc(6*var(--u));list-style:none;padding:0}
.us-how-bars li{position:relative;display:grid;grid-template-rows:1fr auto;gap:calc(5*var(--u));justify-items:center}
.us-how-bars i{align-self:end;width:100%;height:calc(var(--h)*78*var(--u));border-radius:calc(3*var(--u)) calc(3*var(--u)) calc(1*var(--u)) calc(1*var(--u));background:color-mix(in oklab,var(--fg,#15171C) 72%,var(--bg,#F4F4EF));transform-origin:50% 100%}
.us-how-bars span{font-size:calc(9*var(--u));line-height:1.2;color:var(--muted,#5A6070)}
.us-how-bars .us-how-peak i{background:var(--accent,#1F4CFF)}
.us-how-bars b{position:absolute;left:0;right:0;bottom:calc(100*var(--u));text-align:center;font-size:calc(9.5*var(--u));line-height:1.2;font-weight:700;color:var(--accent-ink,#1A3FD6);font-variant-numeric:tabular-nums}
.us-how-src{left:calc(220*var(--u));top:calc(96*var(--u));width:calc(122*var(--u));display:grid;gap:calc(9*var(--u));list-style:none;padding:0}
.us-how-src li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:calc(3*var(--u)) calc(6*var(--u));font-size:calc(10.5*var(--u));line-height:1.2}
.us-how-src li b{font-weight:600;font-variant-numeric:tabular-nums}
.us-how-src li i{grid-column:1/-1;height:calc(4.5*var(--u));width:calc(var(--w)*100%);border-radius:calc(2.25*var(--u));background:color-mix(in oklab,var(--fg,#15171C) 72%,var(--bg,#F4F4EF));transform-origin:0 50%}
.us-how-src li:nth-child(2) i{background:var(--accent,#1F4CFF)}
.us-how-src .us-how-srch{display:flex;flex-wrap:wrap;align-items:center;gap:calc(5*var(--u));font-size:calc(8.5*var(--u));letter-spacing:.1em;text-transform:uppercase;font-weight:600;color:var(--muted,#5A6070)}
.us-how-srch em{font-style:normal;letter-spacing:.02em;text-transform:none;padding:calc(1.5*var(--u)) calc(5*var(--u));border-radius:999px;background:var(--us-how-soft);color:var(--accent-ink,#1A3FD6);font-weight:700}

/* Also ask for: a compact row, not cards. */
.us-how-more{display:grid;grid-template-columns:minmax(0,11rem) minmax(0,1fr);gap:.8rem 2rem;align-items:baseline;margin-top:1.75rem;padding-top:1.4rem;border-top:1px solid var(--line,#E1E2DA)}
.us-how-more .us-kick{margin:0}
.us-how-more ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.9rem 1.6rem}
.us-how-more li{position:relative;display:grid;gap:.2rem;align-content:start;padding-left:1rem;font-size:.86rem;line-height:1.45;color:var(--muted,#5A6070);min-width:0}
.us-how-more li::before{content:"";position:absolute;left:0;top:.42em;width:.45rem;height:.45rem;border-radius:1px;background:var(--accent,#1F4CFF)}
.us-how-more b{font-size:.9rem;font-weight:600;color:var(--fg,#15171C)}

@media (max-width:1050px){
  .us-how-steps{grid-template-columns:minmax(0,1fr)}
  .us-how-step{grid-template-rows:none;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr)}
  .us-how-stage{border-bottom:0;border-right:1px solid var(--line,#E1E2DA)}
  .us-how-text{align-content:center}
  .us-how-more{grid-template-columns:minmax(0,1fr)}
  .us-how-more ul{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:700px){
  .us-how-step{grid-template-columns:minmax(0,1fr)}
  .us-how-stage{border-right:0;border-bottom:1px solid var(--line,#E1E2DA)}
  .us-how-text{padding:1.15rem 1.2rem 1.3rem}
  .us-how-more ul{grid-template-columns:minmax(0,1fr)}
}

/* The motion. Each stage is its own view timeline: it plays from the moment the stage is fully on screen
   (entry 100%) until it has climbed to the upper third (contain 70%), so it runs at reading pace with
   the scroll and holds its end once there. Each drawing's keyframes go from its first state to the base
   (final) one. */
@media (prefers-reduced-motion:no-preference){@supports (animation-timeline:view()){
  .us-how-stage{view-timeline:--us-how-t block}
  .us-how-stage *,.us-how-stage *::before,.us-how-stage *::after{animation-timeline:--us-how-t;animation-fill-mode:both;animation-range:entry 100% contain 70%}
  .us-how-long{animation-name:us-how-fold;animation-timing-function:ease-in-out}
  .us-how-long::after{animation-name:us-how-blue}
  .us-how-tag,.us-how-lurl{animation-name:us-how-out}
  .us-how-way i{animation-name:us-how-dot}
  .us-how-way b{animation-name:us-how-bar;animation-timing-function:ease-out}
  .us-how-url{animation-name:us-how-rise;animation-timing-function:ease-out}
  .us-how-chars,.us-how-was{animation-name:us-how-late}
  .us-how-was::after{animation-name:us-how-strike;animation-timing-function:ease-out}
  .us-how-arrow{animation-name:us-how-point;animation-timing-function:ease-in-out}
  .us-how-old{animation-name:us-how-dim}
  .us-how-old::after{animation-name:us-how-ring-off}
  .us-how-new{animation-name:us-how-lit}
  .us-how-new::after{animation-name:us-how-ring-on}
  .us-how-roll{animation-name:us-how-tick;animation-timing-function:steps(7,jump-end);animation-range:contain 4% contain 53%}
  .us-how-bars i{animation-name:us-how-grow;animation-timing-function:ease-out;animation-range:contain calc(4% + var(--i) * 7%) contain calc(11% + var(--i) * 7%)}
  .us-how-bars b{animation-name:us-how-in;animation-range:contain 17% contain 24%}
  .us-how-src li i{animation-name:us-how-wide;animation-timing-function:ease-out;animation-range:contain calc(48% + var(--i) * 6%) contain calc(58% + var(--i) * 6%)}
  .us-how-src li b{animation-name:us-how-in;animation-range:contain calc(52% + var(--i) * 6%) contain calc(60% + var(--i) * 6%)}
}}
@keyframes us-how-fold{0%,24%{transform:none;opacity:1}58%{transform:translateY(calc(111*var(--u))) scale(.67,.068);opacity:1}64%,100%{transform:translateY(calc(111*var(--u))) scale(.67,.068);opacity:0}}
@keyframes us-how-blue{0%,38%{opacity:0}56%,100%{opacity:1}}
@keyframes us-how-out{0%,26%{opacity:1}42%,100%{opacity:0}}
@keyframes us-how-dot{0%,56%{opacity:0;transform:scale(.4)}64%,100%{opacity:1;transform:none}}
@keyframes us-how-bar{0%,58%{opacity:0}59%{opacity:1;transform:scaleX(.9)}68%,100%{opacity:1;transform:none}}
@keyframes us-how-rise{0%,62%{opacity:0;transform:translateY(calc(8*var(--u)))}80%,100%{opacity:1;transform:none}}
@keyframes us-how-late{0%,78%{opacity:0}92%,100%{opacity:1}}
@keyframes us-how-strike{0%,86%{transform:scaleX(0)}98%,100%{transform:none}}
@keyframes us-how-point{0%,30%{transform:rotate(-39deg)}68%,100%{transform:rotate(31.5deg)}}
@keyframes us-how-dim{0%,36%{opacity:1}62%,100%{opacity:.42}}
@keyframes us-how-lit{0%,36%{opacity:.42}62%,100%{opacity:1}}
@keyframes us-how-ring-off{0%,34%{opacity:1}48%,100%{opacity:0}}
@keyframes us-how-ring-on{0%,56%{opacity:0}70%,100%{opacity:1}}
@keyframes us-how-tick{from{transform:none}to{transform:translateY(calc(-308*var(--u)))}}
@keyframes us-how-grow{from{transform:scaleY(0)}to{transform:none}}
@keyframes us-how-wide{from{transform:scaleX(0)}to{transform:none}}
@keyframes us-how-in{from{opacity:0}to{opacity:1}}

/* Why a short link: one compact block (Ivan, 22 Oct 2026: a brief explanation, not a big section). The
   title and one sentence, one drawing (the same Maison Verde address in a message, full vs short, side
   by side; aria-hidden, the sentence says the same) and three one-line reasons. Prefixed us-why-
   (test/site.test.ts keeps hero.css and site.css classes apart). Static: no motion. */
.us-why{--us-why-bub:#ECECE6}
.us-why-top{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:1.5rem clamp(2rem,4vw,3.5rem);align-items:center}
.us-why-head p{margin:.8rem 0 0;font-size:1.02rem}
.us-why-cmp{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:.75rem;align-items:start}
.us-why-b{display:grid;gap:.5rem;min-width:0;padding:.8rem .9rem .9rem;border:1px solid var(--line,#E1E2DA);border-radius:12px;background:var(--surface,#fff)}
.us-why-short{box-shadow:inset 0 0 0 1.5px var(--accent,#1F4CFF);border-color:var(--accent,#1F4CFF)}
.us-why-tag{font-size:.68rem;line-height:1.4;letter-spacing:.1em;text-transform:uppercase;font-weight:600;color:var(--muted,#5A6070)}
.us-why-short .us-why-tag{color:var(--accent-ink,#1A3FD6)}
.us-why-bubble{justify-self:start;max-width:100%;padding:.5rem .7rem;border-radius:13px 13px 13px 4px;background:var(--us-why-bub);font-size:.84rem;line-height:1.42;color:var(--fg,#15171C)}
.us-why-u{color:var(--accent-ink,#1A3FD6);text-decoration:underline;text-underline-offset:.15em}
.us-why-long .us-why-u{word-break:break-all}
.us-why-short .us-why-u{white-space:nowrap}
.us-why-list{list-style:none;margin:1.8rem 0 0;padding:1.1rem 0 0;border-top:1px solid var(--line,#E1E2DA);display:grid;grid-template-columns:repeat(3,minmax(0,auto));justify-content:space-between;gap:.7rem 2rem}
.us-why-list li{position:relative;min-width:0;padding-left:1rem;font-size:.92rem;line-height:1.5;color:var(--muted,#5A6070)}
.us-why-list li::before{content:"";position:absolute;left:0;top:.45em;width:.45rem;height:.45rem;border-radius:1px;background:var(--accent,#1F4CFF)}
.us-why-list b{font-weight:600;color:var(--fg,#15171C)}
.us-why-list a{color:var(--accent-ink,#1A3FD6);text-underline-offset:.15em}
@media (max-width:1050px){.us-why-top{grid-template-columns:minmax(0,1fr)}}
@media (max-width:700px){.us-why-cmp,.us-why-list{grid-template-columns:minmax(0,1fr)}.us-why-list{margin-top:1.4rem}}

/* Connect: the MCP plate and four cards. */
.us-plate{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;margin:0 0 1.4rem;padding:.9rem 1rem;border:1px solid var(--line,#E1E2DA);border-radius:12px;background:var(--surface,#fff);font-family:"Geist Mono",ui-monospace,monospace;font-size:1rem}
.us-plate span{color:var(--muted,#5A6070);font-family:Geist,system-ui,sans-serif;font-size:.8rem}
.us-plate b{font-weight:500}
.us-plate .us-copybtn{margin-left:auto;font-family:Geist,system-ui,sans-serif;font-size:.82rem;font-weight:600;padding:.45rem .9rem;border:1px solid var(--fg,#15171C);border-radius:999px;background:transparent;color:var(--fg,#15171C)}
.us-cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem}
.us-card{display:flex;flex-direction:column;gap:.6rem;padding:1.4rem;border:1px solid var(--line,#E1E2DA);border-radius:14px;background:var(--surface,#fff);min-width:0}
.us-card .us-ch{display:flex;align-items:center;gap:.6rem}
.us-card .us-ch img,.us-card .us-ch svg{width:24px;height:24px;flex:none}
.us-card .us-ch .us-term{display:grid;place-items:center;width:24px;height:24px;border-radius:6px;background:var(--bg,#F4F4EF);font:600 11px "Geist Mono",monospace;color:var(--fg,#15171C)}
.us-card p{margin:0;font-size:.93rem;flex:1}
.us-card pre{margin:0;padding:.7rem .8rem;border-radius:8px;background:var(--bg,#F4F4EF);font:12px/1.5 "Geist Mono",ui-monospace,monospace;overflow:auto;color:var(--fg,#15171C)}
.us-card .us-btn{align-self:flex-start;min-height:2.6rem;padding:.5rem .95rem;font-size:.86rem}
.us-card-strong{background:var(--bg,#F4F4EF)}

/* Free: the word, the facts. */
.us-free-band{background:var(--bg,#F4F4EF);border-block:1px solid var(--line,#E1E2DA)}
.us-free{display:grid;grid-template-columns:1fr 1.2fr;gap:3rem;align-items:start}
.us-free h2{font-size:clamp(3rem,6vw,5rem)}
.us-free h2 span{display:block;font:500 1rem Geist,system-ui,sans-serif;letter-spacing:0;margin-top:.8rem;color:var(--muted,#5A6070)}
.us-free ul{list-style:none;margin:0;padding:0;display:grid;gap:.85rem}
.us-free li{display:flex;gap:.7rem;font-size:1rem;line-height:1.45}
.us-free li::before{content:"";flex:none;width:18px;height:18px;margin-top:2px;border-radius:50%;background:var(--accent,#1F4CFF);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5 6.5 12 13 4.5' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5 6.5 12 13 4.5' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat}
.us-free .us-fine{font-size:.82rem;margin:1.4rem 0 0;max-width:46rem}

/* Pro, coming soon: previews drawn in CSS on a light band (ink text, white cards). */
.us-pro-band{background:#EBEBE4;border-bottom:1px solid #DCDCD4;color:#15171C}
.us-pro-band .us-sec p,.us-pro-band .us-kick{color:#5A6070}
.us-pill{display:inline-block;background:#15171C;color:#fff;padding:.28rem .55rem;border-radius:5px;font-size:.72rem;letter-spacing:.04em;text-transform:none;font-weight:700;margin-right:.5rem;vertical-align:middle}
.us-pro-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.25rem}
.us-pro-card{display:grid;grid-template-rows:auto 1fr auto;gap:1rem;padding:1.6rem;border:1px solid #D9D9D0;border-radius:16px;background:#fff;min-width:0;overflow:hidden}
.us-pro-card h3{margin:0}
.us-pro-card>p{margin:0;font-size:.95rem}
.us-pro-wide{grid-column:1/-1}
@media (min-width:701px){.us-pro-wide{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:1fr 1fr;column-gap:1.6rem}.us-pro-wide>.us-prev{grid-row:1/3}.us-pro-wide>div:not(.us-prev){align-self:end}.us-pro-wide>.us-pro-status{align-self:start}}
.us-pro-status{justify-self:start;font-size:.68rem;line-height:1.5;color:#5A6070;border:1px solid #BDBDB4;padding:.2rem .55rem;border-radius:20px;white-space:nowrap}
.us-prev{display:grid;align-content:center;gap:.7rem;padding:1.2rem;border-radius:12px;background:#F4F4EF;min-height:190px;font-family:system-ui,-apple-system,sans-serif;font-size:13px;color:#15171C}
.us-prev .pc{display:grid;gap:8px;padding:12px 14px;border:1px solid #E1E2DA;border-radius:12px;background:#fff}
.us-prev .row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.us-prev .st{display:inline-flex;align-items:center;gap:6px;border:1px solid #E1E2DA;border-radius:999px;background:#F4F4EF;padding:2px 9px 2px 8px;font-size:11px;font-weight:600}
.us-prev .st i{width:7px;height:7px;border-radius:50%;background:#1E7F4F}
.us-prev .st.blue i{background:#1F4CFF}
.us-prev .url{font-size:18px;font-weight:600;letter-spacing:-.01em}
.us-prev .url .d{color:#5A6070;font-weight:500}.us-prev .url .s{color:#1A3FD6;font-weight:700}
.us-prev .mono{font:12px "Geist Mono",ui-monospace,monospace;color:#5A6070}
.us-prev .bl{display:flex;align-items:center;gap:10px;font-size:12px}
.us-prev .bl span:first-child{width:92px;color:#5A6070;flex:none;text-align:right}
.us-prev .bl i{height:8px;border-radius:4px;background:#15171C;opacity:.8}
.us-prev .bl i.a{background:#1F4CFF;opacity:1}
.us-prev .bl b{font-weight:600;font-variant-numeric:tabular-nums}
.us-prev .ask{align-self:flex-end;padding:8px 14px;border-radius:16px;background:#E9E9E3;max-width:92%;font-size:13px}
.us-prev .b{display:inline-flex;align-items:center;min-height:28px;padding:3px 11px;border-radius:999px;border:1px solid #E1E2DA;font-size:12px;font-weight:600;background:#fff}
.us-prev .b.p{background:#1F4CFF;border-color:#1F4CFF;color:#fff}
.us-prev .chip{display:inline-flex;align-items:center;gap:5px;padding:2px 9px;border-radius:999px;background:#E3E9FF;color:#1A3FD6;font-size:11px;font-weight:700}
.us-prev .csv{margin-left:auto;font:600 11px "Geist Mono",monospace;padding:3px 8px;border:1px solid #E1E2DA;border-radius:6px;background:#fff}
.us-pro-note{text-align:center;max-width:700px;margin:1.4rem auto 0;font-size:.8rem}

/* Final. */
.us-final{text-align:center}
.us-final p{margin:.9rem auto;max-width:520px}
.us-final .us-actions{justify-content:center}

@media (max-width:1050px){.us-cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:700px){.us-cards,.us-pro-grid,.us-free{grid-template-columns:1fr}.us-free{gap:1.5rem}.us-pro-card{padding:1.25rem}.us-sec-head{margin-bottom:1.6rem}.us-plate{font-size:.85rem}.us-plate .us-copybtn{margin-left:0}}

/* The MCP plate's Copy uses the kit's data-copy script; "Copied" shows over the button. */
.us-plate .us-copybtn{position:relative;overflow:hidden;cursor:pointer}
/* Password-protected links and files, and the code after urlso.me/: two cards side by side. The password
   page drawing is us-pw-* (not us-field: that is the hero composer's; test/site.test.ts keeps the two
   stylesheets' classes apart). */
.us-two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.25rem}
.us-feat,.us-code{display:grid;gap:.9rem;align-content:start;padding:1.5rem;border:1px solid var(--line,#E1E2DA);border-radius:16px;background:var(--surface,#fff);min-width:0}
.us-feat h3,.us-feat p{margin:0}
.us-feat .us-prev{min-height:0}
.us-feat .us-fact{font-size:.82rem;line-height:1.5;color:var(--muted,#5A6070);padding-top:.7rem;border-top:1px solid var(--line,#E1E2DA)}
.us-pw-page{align-items:center;justify-items:center;text-align:center;gap:10px;padding:16px}
.us-pw-mark{width:28px;height:28px;border-radius:8px;background:#1F4CFF url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M11 47C10 26 20 10 33 12C47 14 48 32 36 33C27 34 27 22 36 19C48 15 53 30 53 47' fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M11 47H53' fill='none' stroke='%23fff' stroke-width='9' stroke-linecap='round'/%3E%3Ccircle cx='11' cy='47' r='7.5' fill='%23fff'/%3E%3Ccircle cx='53' cy='47' r='7.5' fill='%23fff'/%3E%3C/svg%3E") center/72% no-repeat}
.us-pw-page b{font-size:14px}
.us-pw-field{display:block;width:100%;max-width:220px;padding:7px 10px;border:1px solid #E1E2DA;border-radius:8px;background:#F4F4EF;font-size:13px;letter-spacing:.2em;color:#5A6070;text-align:left}
.us-code-pro{background:#EBEBE4;border-color:#D9D9D0}
.us-code .us-kick{margin:0}
.us-codeurl{margin:0;font-family:"Geist Mono",ui-monospace,monospace;font-size:clamp(1.3rem,2.6vw,1.9rem);font-weight:600;letter-spacing:-.01em;overflow-wrap:anywhere;color:var(--fg,#15171C)}
.us-codeurl .d{color:var(--muted,#5A6070);font-weight:500}.us-codeurl .s{color:#1A3FD6;font-weight:700}
.us-code ul{list-style:none;margin:0;padding:0;display:grid;gap:.5rem;font-size:.95rem;line-height:1.5;color:var(--muted,#5A6070)}
.us-code li{position:relative;padding-left:1.1rem}
.us-code li::before{content:"";position:absolute;left:0;top:.6em;width:.45rem;height:.45rem;border-radius:1px;background:#1F4CFF}
.us-code-pro li::before{background:#15171C}
@media (max-width:700px){.us-two{grid-template-columns:1fr}.us-feat,.us-code{padding:1.25rem}}

/* Header bar (kit site.header): the lockup much larger than the kit's 28 px box (Ivan, 22 Oct 2026).
   lockup.svg keeps about a quarter of its height empty above and below the ink, so the image is drawn
   taller and its empty bands are taken back with negative margins; the bar keeps its 64 px (56 on
   phones). The links are set in Geist 500; the primary button is ink, like the hero's. */
.site-head .brand .lockup img{height:3.25rem;margin-block:-.8rem}
@media (max-width:859px){.site-head .brand .lockup img{height:2.75rem;margin-block:-.68rem}}

/* Urlsome hero (brand/hero.css): three stories, one per host, rotating every 12 s (36 s loop), CSS only.
   Every rule is prefixed us-. Only transform and opacity animate, plus the composer's keys: each typed
   character (an <i> written by scripts/hero-typing.mjs) steps from font-size 0 to 1em at its own time,
   so the text wraps and the composer grows the way a real one does. The stage uses system
   fonts on purpose (the hosts do). Light only, like the whole site (Ivan, 22 Oct 2026): ChatGPT and
   Claude are their light UIs; Grok Bot's panel is black because Grok's own UI is.
   The per-panel animation-delay rules are the LAST rules of this file: no `animation` shorthand may
   follow them on the same elements. */
.us-hero{font-family:Geist,system-ui,sans-serif;color:#15171C;background:#F4F4EF;padding:clamp(2.5rem,5vw,5rem) max(1.25rem,calc((100vw - 1280px)/2)) clamp(2rem,4vw,3.5rem)}
.us-hero-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);align-items:center;gap:clamp(2rem,4vw,4.5rem);max-width:1280px;margin:auto}
.us-copy{min-width:0}
.us-kicker{margin:0 0 1.1rem;font-size:.74rem;line-height:1.5;letter-spacing:.1em;text-transform:uppercase;font-weight:600;color:#5A6070}
.us-copy h1{font-family:"Familjen Grotesk",system-ui,sans-serif;font-weight:700;font-size:clamp(3rem,5.2vw,4.9rem);line-height:.98;letter-spacing:-.035em;margin:0;max-width:11ch}
.us-copy h1 em{font-style:normal;color:#1A3FD6}
.us-lead{max-width:33rem;margin:1.4rem 0 0;font-size:1.12rem;line-height:1.6;color:#3F4554}
.us-actions{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.7rem}
.us-btn{display:inline-flex;align-items:center;justify-content:center;gap:.55rem;min-height:3rem;padding:.65rem 1.1rem;border:1px solid #15171C;border-radius:999px;text-decoration:none;font-size:.92rem;font-weight:600;color:#15171C;background:#fff;transition:transform .15s}
.us-btn:hover{transform:translateY(-1px)}
.us-btn:focus-visible,.us-agent-link:focus-visible{outline:3px solid #1A3FD6;outline-offset:4px}
.us-btn img{display:block;width:1.2rem;height:1.2rem}
.us-primary{background:#15171C;color:#fff}
.us-primary img{filter:brightness(0) invert(1)}
.us-agent-link{display:inline-block;margin-top:1rem;font-size:.92rem;font-weight:600;color:#1A3FD6;text-underline-offset:4px}
.us-note{font-size:.8rem;margin:1.3rem 0 0;color:#5A6070}

/* The stage: three panels on top of each other. */
.us-stage{position:relative;min-width:0;height:600px;max-width:640px;width:100%;justify-self:end;border-radius:18px;overflow:hidden;box-shadow:0 24px 60px rgba(21,23,28,.12),0 0 0 1px rgba(21,23,28,.08);background:#fff}
.us-panel{position:absolute;inset:0;display:flex;flex-direction:column;opacity:0;visibility:hidden;font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;font-size:15px;line-height:1.5;animation:us-panel 36s linear infinite}
.us-bar{display:flex;align-items:center;justify-content:space-between;height:48px;padding:0 16px;flex:none}
.us-host{display:inline-flex;align-items:center;gap:7px;font-weight:600;font-size:15px}
.us-host svg,.us-host img{width:20px;height:20px;display:block}
.us-host .us-chev{width:12px;height:12px;opacity:.6}
.us-avatar{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:#6B5BD2;color:#fff;font-size:12px;font-weight:600}
.us-thread{flex:1;display:flex;flex-direction:column;gap:14px;padding:12px 20px 0;min-height:0}
.us-user{display:flex;justify-content:flex-end}
.us-bubble{display:inline-block;max-width:84%;padding:9px 16px;border-radius:18px;background:#F4F4F4;color:#0D0D0D;overflow-wrap:anywhere}
.us-m1{opacity:0;animation:us-sent 36s linear infinite}
.us-tool{display:flex;align-items:center;gap:8px;font-size:13.5px;color:#5D5D5D;opacity:0;transform:translateY(4px);animation:us-in-tool 36s ease-out infinite}
.us-tile{display:grid;place-items:center;width:20px;height:20px;border-radius:5px;background:#1F4CFF;flex:none}
.us-tile svg{width:16px;height:16px;display:block}
.us-tool b{color:#0D0D0D;font-weight:600}
.us-working{display:inline-flex;align-items:center;gap:3px;margin-left:2px;animation:us-working 36s linear infinite}
.us-working i{width:5px;height:5px;border-radius:50%;background:#1F4CFF;animation:us-pulse 1s ease-in-out infinite}
.us-working i:nth-child(2){animation-delay:.15s}.us-working i:nth-child(3){animation-delay:.3s}
.us-done{display:inline-flex;align-items:center;gap:4px;color:#1E7F4F;font-weight:600;opacity:0;animation:us-done 36s linear infinite}
.us-done svg{width:14px;height:14px}
.us-w{opacity:0;transform:scale(.97);transform-origin:top left;animation:us-in-w 36s ease-out infinite;max-width:620px}
.us-w iframe{display:block;width:100%;border:0;pointer-events:none;height:232px}
.us-w.us-w-upd iframe{height:262px}
.us-w.us-w-stats iframe{height:256px}
.us-a1{margin:0;opacity:0;transform:translateY(4px);animation:us-in-a 36s ease-out infinite;color:#0D0D0D;max-width:60ch}
.us-composer{flex:none;display:flex;align-items:flex-end;gap:10px;margin:14px 20px 18px;padding:10px 10px 10px 14px;border:1px solid #E3E3E3;border-radius:26px;background:#fff;color:#8E8E8E;font-size:14.5px}
.us-plus{display:grid;place-items:center;width:28px;height:28px;margin-bottom:2px;border-radius:50%;border:1px solid #D9D9D9;color:#333;font-size:18px;line-height:1;flex:none}
.us-send{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:#0D0D0D;color:#fff;font-size:16px;animation:us-go 36s linear infinite}

/* The composer: the placeholder (twice: before the first key, and again once the message is sent), the
   typed keys with a caret (blinking while idle, solid while typing) and the send button (dim while
   empty, pressed on send). The keys are aria-hidden: the bubble above holds the message as one string. */
.us-field{flex:1;min-width:0;position:relative;padding:5px 0;min-height:1.5em;overflow-wrap:anywhere}
.us-ph{position:absolute;top:5px;left:.15em;right:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;animation:us-ph 36s steps(1,end) infinite}
.us-ph2{opacity:0;animation-name:us-ph2}
.us-typed{color:#0D0D0D;animation:us-clear 36s steps(1,end) infinite}
.us-typed i{font-style:normal;font-size:0;animation:us-key 36s steps(1,end) infinite}
.us-caret{display:inline-block;position:relative;width:1.5px;height:1.2em;margin-left:1px;vertical-align:-.22em}
.us-caret::before,.us-caret::after{content:"";position:absolute;inset:0;border-radius:1px;background:currentColor}
.us-caret::before{animation:us-blink 1.06s steps(1,end) infinite}
.us-caret::after{opacity:0;animation:us-solid 36s steps(1,end) infinite}
.us-sendw{flex:none;display:grid;opacity:.3;animation:us-enable 36s steps(1,end) infinite}
.us-dots{position:absolute;left:0;right:0;bottom:6px;display:flex;justify-content:center;gap:6px;list-style:none;margin:0;padding:0;pointer-events:none}
.us-dots li{width:6px;height:6px;border-radius:50%;background:#D7D7D2;animation:us-dot 36s linear infinite}
.us-illus{position:absolute;right:14px;bottom:4px;margin:0;font:10.5px system-ui,sans-serif;color:#8E8E8E;pointer-events:none}

/* ChatGPT: white thread, grey user bubble, OpenAI knot + "ChatGPT" header, pill composer. */
.us-chatgpt{background:#fff;color:#0D0D0D}
.us-chatgpt .us-host svg{color:#0D0D0D}

/* Claude: ivory, user initial + tan bubble, collapsible tool row, serif assistant text, clay send. */
.us-claude{background:#FAF9F5;color:#29261B}
.us-claude .us-host{font-family:Georgia,"Times New Roman",serif;font-weight:500;font-size:16px;letter-spacing:-.01em}
.us-claude .us-user{align-items:flex-start;gap:10px}
.us-claude .us-user .us-avatar{order:-1;background:#D97757;color:#fff;width:26px;height:26px;font-size:11px;margin-top:2px}
.us-claude .us-bubble{background:#F0EEE6;color:#29261B;border-radius:14px}
.us-claude .us-typed{color:#29261B}
.us-claude .us-tool{padding:8px 12px;border:1px solid #E6E3D9;border-radius:10px;background:#fff;color:#5E5A4E}
.us-claude .us-tool .us-chev{margin-left:auto;width:12px;height:12px;opacity:.6}
.us-claude .us-a1{font-family:Georgia,"Times New Roman",serif;font-size:15.5px;color:#29261B}
.us-claude .us-composer{border-radius:14px;border-color:#E0DDD1;box-shadow:0 1px 2px rgba(0,0,0,.04)}
.us-claude .us-send{border-radius:9px;background:#C96442}
.us-claude .us-plus{border-color:#DDD9CC}
.us-claude .us-dots li{background:#DAD6C8}

/* Grok Bot: black like Grok's own UI (the host's look, not a dark mode), mono header with the xAI mark, step list,
   the widget's light card, black composer. */
.us-grok{background:#000;color:#E7E7E7}
.us-grok .us-bar{border-bottom:1px solid #1F1F1F}
.us-grok .us-host{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;font-weight:500;color:#F2F2F2}
.us-grok .us-host svg{width:18px;height:18px;color:#fff}
.us-grok .us-avatar{background:#2A2A2A;color:#E7E7E7}
.us-grok .us-bubble{background:#1C1C1C;color:#F2F2F2;border-radius:16px}
.us-grok .us-tool{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12.5px;color:#A3A3A3;padding-left:2px}
.us-grok .us-tool b{color:#F2F2F2}
.us-grok .us-tool::before{content:"";width:6px;height:6px;border-radius:50%;background:#A3A3A3;flex:none}
.us-grok .us-tile{background:#1F4CFF}
.us-grok .us-a1{color:#E7E7E7}
.us-grok .us-composer{background:#121212;border-color:#2A2A2A;color:#7A7A7A}
.us-grok .us-typed{color:#F2F2F2}
.us-grok .us-plus{border-color:#333;color:#CCC}
.us-grok .us-send{background:#F2F2F2;color:#000}
.us-grok .us-dots li{background:#2E2E2E}
.us-grok .us-illus{color:#6B6B6B}

/* Keyframes: percent of the 36 s loop (one story = 12 s = 33.33 %; 1 s = 2.78 %). Three clocks (delays
   in the last rules): the slot (panel, dots, first placeholder, solid caret, send enabled: first key at
   2 % = 0.72 s); each key's own --d (us-key: shown for 18 s, hidden by then by us-clear); and the send
   moment --us-s (bubble, tool row, widget, reply, cleared composer, second placeholder), 4.2–4.6 s
   into the slot, per story and language (scripts/hero-typing.mjs). One story, in seconds of its slot:
     0–0.36 panel in · 0.72 first key, typing ≤ 3 s, URL pasted at once · a 0.5 s beat · s send
     s+0–0.45 the message rises into the bubble, send pressed · s+0.4–0.7 tool row in
     s+0.7–1.9 "Working" · s+1.9 "Done" · s+2–2.45 widget in · s+2.6–2.95 reply in
     finished by ~7.5 s, held to 11.8 s (≈ 4.5–5 s) · 11.8–12 panel out, the next story fades in.
   Every clock's state flips back by 60 % (21.6 s), while its panel is hidden, before its next turn. */
@keyframes us-panel{0%{opacity:0;visibility:visible}1%{opacity:1;visibility:visible}32.8%{opacity:1;visibility:visible}33.33%{opacity:0;visibility:hidden}100%{opacity:0;visibility:hidden}}
@keyframes us-ph{0%{opacity:1}2%{opacity:0}60%,100%{opacity:1}}
@keyframes us-solid{0%{opacity:0}2%{opacity:1}60%,100%{opacity:0}}
@keyframes us-enable{0%{opacity:.3}2%{opacity:1}60%,100%{opacity:.3}}
@keyframes us-blink{0%{opacity:1}50%,100%{opacity:0}}
@keyframes us-key{0%{font-size:1em}50%,100%{font-size:0}}
@keyframes us-clear{0%{font-size:0}60%,100%{font-size:1em}}
@keyframes us-ph2{0%{opacity:0}1%{opacity:1}60%,100%{opacity:0}}
@keyframes us-go{0%{transform:scale(.84);opacity:1;animation-timing-function:ease-out}.83%{transform:none;opacity:1}1.25%,60%{opacity:.3}60.01%,100%{opacity:1}}
@keyframes us-sent{0%{opacity:0;transform:translateY(44px);animation-timing-function:cubic-bezier(.2,.75,.25,1)}1.25%,60%{opacity:1;transform:none}60.01%,100%{opacity:0;transform:none}}
@keyframes us-in-tool{0%,1.11%{opacity:0;transform:translateY(4px)}1.94%,60%{opacity:1;transform:none}60.01%,100%{opacity:0;transform:translateY(4px)}}
@keyframes us-working{0%,1.94%{opacity:0}2.03%,5.19%{opacity:1}5.28%,100%{opacity:0}}
@keyframes us-pulse{0%,100%{opacity:.25}50%{opacity:1}}
@keyframes us-done{0%,5.28%{opacity:0}5.56%,60%{opacity:1}60.01%,100%{opacity:0}}
@keyframes us-in-w{0%,5.56%{opacity:0;transform:scale(.97)}6.81%,60%{opacity:1;transform:none}60.01%,100%{opacity:0;transform:scale(.97)}}
@keyframes us-in-a{0%,7.22%{opacity:0;transform:translateY(4px)}8.19%,60%{opacity:1;transform:none}60.01%,100%{opacity:0;transform:translateY(4px)}}
@keyframes us-dot{0%,33.33%{background:#15171C}33.34%,100%{background:#D7D7D2}}
.us-grok .us-dots li{animation-name:us-dot-grok}
@keyframes us-dot-grok{0%,33.33%{background:#F2F2F2}33.34%,100%{background:#2E2E2E}}

@media (max-width:1050px){.us-hero-grid{grid-template-columns:1fr}.us-copy{max-width:700px}.us-copy h1{max-width:14ch}.us-stage{justify-self:center;max-width:700px}}
@media (max-width:700px){.us-hero{padding-top:2.2rem}.us-copy h1{font-size:clamp(2.7rem,11vw,3.8rem)}.us-actions{gap:.5rem}.us-btn{padding:.6rem .85rem;font-size:.85rem}.us-stage{height:690px;border-radius:14px}.us-thread{padding:10px 14px 0;gap:12px}.us-bubble{max-width:92%;font-size:14px}.us-composer{margin:12px 14px 16px}.us-w iframe{height:300px}.us-w.us-w-upd iframe{height:330px}.us-w.us-w-stats iframe{height:300px}.us-a1{font-size:14px}}

/* Reduced motion: nothing moves; story 1 is shown finished (message sent, composer empty). */
@media (prefers-reduced-motion:reduce){
  .us-panel,.us-m1,.us-tool,.us-working,.us-working i,.us-done,.us-w,.us-a1,.us-dots li,.us-ph,.us-typed,.us-typed i,.us-caret::before,.us-caret::after,.us-sendw,.us-send{animation:none!important}
  .us-p1{opacity:1;visibility:visible}
  .us-p1 .us-m1{opacity:1;transform:none}
  .us-caret{display:none}
  .us-p1 .us-tool,.us-p1 .us-w,.us-p1 .us-a1,.us-p1 .us-done{opacity:1;transform:none}
  .us-working{display:none}
  .us-dots li:first-child{background:#15171C}
  .us-btn{transition:none}
}

/* Panels 2 and 3 run the same keyframes 12 s and 24 s later. --d (per key) and --us-s (per panel, the
   send moment) come from the partial. --us-t (default 0s) shifts the whole loop: a harness (?t=9) sets
   it to e.g. -9s and adds .us-freeze to show the frame at 9 s of the 36 s loop (story 1 finished; 14 s
   = story 2 typing, 33 s = story 3 at its end). LAST rules on purpose. */
.us-panel,.us-ph,.us-caret::after,.us-sendw,.us-dots li{animation-delay:var(--us-t,0s)}
.us-typed i{animation-delay:calc(var(--d,0s) + var(--us-t,0s))}
.us-m1,.us-tool,.us-working,.us-done,.us-w,.us-a1,.us-ph2,.us-typed,.us-send{animation-delay:calc(var(--us-s,4.5s) + var(--us-t,0s))}
.us-p2,.us-p2 .us-ph,.us-p2 .us-caret::after,.us-p2 .us-sendw,.us-dots li:nth-child(2){animation-delay:calc(12s + var(--us-t,0s))}
.us-p2 .us-typed i{animation-delay:calc(12s + var(--d,0s) + var(--us-t,0s))}
.us-p2 .us-m1,.us-p2 .us-tool,.us-p2 .us-working,.us-p2 .us-done,.us-p2 .us-w,.us-p2 .us-a1,.us-p2 .us-ph2,.us-p2 .us-typed,.us-p2 .us-send{animation-delay:calc(12s + var(--us-s,4.5s) + var(--us-t,0s))}
.us-p3,.us-p3 .us-ph,.us-p3 .us-caret::after,.us-p3 .us-sendw,.us-dots li:nth-child(3){animation-delay:calc(24s + var(--us-t,0s))}
.us-p3 .us-typed i{animation-delay:calc(24s + var(--d,0s) + var(--us-t,0s))}
.us-p3 .us-m1,.us-p3 .us-tool,.us-p3 .us-working,.us-p3 .us-done,.us-p3 .us-w,.us-p3 .us-a1,.us-p3 .us-ph2,.us-p3 .us-typed,.us-p3 .us-send{animation-delay:calc(24s + var(--us-s,4.5s) + var(--us-t,0s))}
.us-freeze .us-stage,.us-freeze .us-stage *,.us-freeze .us-stage *::before,.us-freeze .us-stage *::after{animation-play-state:paused!important}