:root{color-scheme:light;--bg:#FFFFFF;--surface:#F4F7F9;--fg:#0E1A2B;--muted:#5A6377;--line:#E5EAEE;--accent:#0E7490;--accent-fg:#FFFFFF;--danger:#b42318;--accent-text:#0B6580;--bright:#7CC8DA;--soft:#E4F2F6;--font-display:"Inter Tight",system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;--font-body:"Inter",system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;--font-mono:"JetBrains Mono",ui-monospace, "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace;--display-tracking:0.91;--display-weight:800;--radius-card:24px;--radius-control:14px;--radius-input:14px;}
: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)}

/* A guide's result: a real render (widget frame or image) */
.guide-shot{margin:0 0 1.25rem;padding:1rem;border:1px solid var(--line);border-radius:var(--radius,14px);background:var(--surface,var(--bg));max-width:40rem}
.guide-shot iframe{display:block;width:100%;border:0;pointer-events:none}
.guide-shot img{display:block;width:min(100%,15rem);height:auto;margin-inline:auto}

/* 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-guide-list{list-style:none;margin:0;padding:0;columns:2 18rem;column-gap:2.5rem;max-width:60rem}
.lp-guide-list li{break-inside:avoid;padding:.55rem 0;border-bottom:1px solid var(--line)}
.lp-guide-list a{text-decoration:none;font-weight:550}
.lp-guide-list a:hover{text-decoration:underline;text-underline-offset:.2em}
.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}}

.head-capsule{display:flex;align-items:center;height:var(--head-h);border-bottom:0;background:none;-webkit-backdrop-filter:none;backdrop-filter:none;animation:none;pointer-events:none}
.head-capsule .head-row{pointer-events:auto;min-height:0;height:var(--head-h);max-width:var(--max);border:1px solid transparent;border-radius:calc(var(--head-h) / 2);background-color:transparent;box-shadow:0 0 0 0 transparent;
  transition:max-width .3s cubic-bezier(.22,1,.36,1),height .3s cubic-bezier(.22,1,.36,1),padding .3s cubic-bezier(.22,1,.36,1),background-color .3s cubic-bezier(.22,1,.36,1),border-color .3s cubic-bezier(.22,1,.36,1),box-shadow .3s cubic-bezier(.22,1,.36,1)}
.head-capsule[data-formed] .head-row{max-width:min(64rem,calc(100% - 1.5rem));height:calc(var(--head-h) - .875rem);padding-inline:1rem .5rem;
  background-color:var(--bg);border-color:color-mix(in oklab,var(--fg) 9%,transparent);
  box-shadow:0 1px 2px color-mix(in srgb,var(--fg) 6%,transparent),0 14px 34px -16px color-mix(in srgb,var(--fg) 30%,transparent)}
.head-capsule[data-formed] .head-sheet{top:calc(100% - .4375rem)}
.head-capsule[data-formed] .head-menu>summary{margin-right:-.125rem}
@media (prefers-reduced-motion:reduce){.head-capsule .head-row{transition:none}}

/* People's pages on the landing (brand/looks.css), generated by scripts/landing.mjs from the app:
   src/looks.ts (LOOK_CSS, the fonts) and src/views/pp.ts (PP_EXTRA_CSS). Edit those, then run it.
   Inter Tight, the base face of every look, is the site's own display face (loaded with the theme). */
@font-face{font-family:'Instrument Serif';font-style:italic;font-weight:400;font-display:swap;src:url(/assets/fonts/instrument-serif-italic-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Instrument Serif';font-style:italic;font-weight:400;font-display:swap;src:url(/assets/fonts/instrument-serif-italic-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Instrument Serif';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/instrument-serif-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Instrument Serif';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/instrument-serif-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Manrope';font-style:normal;font-weight:500 800;font-display:swap;src:url(/assets/fonts/manrope-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Manrope';font-style:normal;font-weight:500 800;font-display:swap;src:url(/assets/fonts/manrope-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:500 700;font-display:swap;src:url(/assets/fonts/space-grotesk-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:500 700;font-display:swap;src:url(/assets/fonts/space-grotesk-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Fraunces';font-style:italic;font-weight:400 600;font-display:swap;src:url(/assets/fonts/fraunces-italic-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Fraunces';font-style:italic;font-weight:400 600;font-display:swap;src:url(/assets/fonts/fraunces-italic-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Fraunces';font-style:normal;font-weight:400 600;font-display:swap;src:url(/assets/fonts/fraunces-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Fraunces';font-style:normal;font-weight:400 600;font-display:swap;src:url(/assets/fonts/fraunces-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'DM Mono';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/dm-mono-400-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'DM Mono';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/dm-mono-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'DM Mono';font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/dm-mono-500-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'DM Mono';font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/dm-mono-500-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:600 800;font-display:swap;src:url(/assets/fonts/bricolage-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:600 800;font-display:swap;src:url(/assets/fonts/bricolage-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Syne';font-style:normal;font-weight:700 800;font-display:swap;src:url(/assets/fonts/syne-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Syne';font-style:normal;font-weight:700 800;font-display:swap;src:url(/assets/fonts/syne-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
.pp { --pp-bg: #141618; --pp-bg2: #1E2225; --pp-fg: #F3EFE7; --pp-muted: #9AA3A6; --pp-tile: #FFFFFF; --pp-tile-r: 1.4em; --pp-tile-pad: 1em;
  --pp-font: "Inter Tight", system-ui, sans-serif; --pp-font2: var(--pp-font); --pp-mono: "DM Mono", ui-monospace, monospace;
  position: relative; width: 100%; height: 100%; overflow: hidden; display: flex; flex-direction: column; background: var(--pp-bg); color: var(--pp-fg); font-family: var(--pp-font); line-height: 1.2; transition: background .35s ease, color .35s ease; }
.pp-bg { position: absolute; inset: 0; pointer-events: none; }
.pp-head { position: relative; z-index: 2; display: flex; align-items: flex-start; justify-content: space-between; gap: .75em; padding: 1.3em 1.25em .5em; }
.pp-who { min-width: 0; display: grid; gap: .1em; }
.pp-name { font-weight: 800; font-size: 1.2em; letter-spacing: -.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pp-sub { font-size: .76em; color: var(--pp-muted); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pp-pills { display: flex; gap: .4em; flex-shrink: 0; }
.pp-pill { display: inline-flex; align-items: center; gap: .35em; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.06); color: var(--pp-fg); border-radius: 999px; padding: .45em .8em; font-size: .72em; font-weight: 700; }
.pp-pill svg { width: 1em; height: 1em; }
.pp-tabs { position: relative; z-index: 2; display: flex; gap: .3em; margin: .4em 1.1em 0; padding: .3em; border-radius: 1em; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08); }
.pp-tab { flex: 1; display: flex; align-items: center; justify-content: center; gap: .4em; padding: .55em .3em; border-radius: .75em; color: var(--pp-muted); font-weight: 600; font-size: .78em; white-space: nowrap; transition: background .25s ease, color .25s ease; }
.pp-tab svg { width: 1.15em; height: 1.15em; filter: grayscale(.7) opacity(.7); transition: filter .25s ease; }
.pp-tab.on { background: rgba(255,255,255,.12); color: var(--pp-fg); font-weight: 700; }
.pp-tab.on svg { filter: none; }
.pp-tabs.many .pp-tab span { display: none; }
.pp[data-theme="tinta"] .pp-tabs.many .pp-tab span, .pp[data-theme="galeria"] .pp-tabs.many .pp-tab span, .pp[data-theme="terracota"] .pp-tabs.many .pp-tab span, .pp[data-theme="pista"] .pp-tabs.many .pp-tab span, .pp[data-theme="medianoche"] .pp-tabs.many .pp-tab span, .pp[data-theme="lino"] .pp-tabs.many .pp-tab span, .pp[data-theme="salvia"] .pp-tabs.many .pp-tab span, .pp[data-theme="cielo"] .pp-tabs.many .pp-tab span { display: inline; }
.pp[data-theme="tinta"] .pp-tabs.many, .pp[data-theme="galeria"] .pp-tabs.many, .pp[data-theme="terracota"] .pp-tabs.many, .pp[data-theme="pista"] .pp-tabs.many, .pp[data-theme="medianoche"] .pp-tabs.many, .pp[data-theme="lino"] .pp-tabs.many, .pp[data-theme="salvia"] .pp-tabs.many, .pp[data-theme="cielo"] .pp-tabs.many { overflow-x: auto; scrollbar-width: none; justify-content: flex-start; }
.pp[data-theme="tinta"] .pp-tabs.many .pp-tab, .pp[data-theme="galeria"] .pp-tabs.many .pp-tab, .pp[data-theme="terracota"] .pp-tabs.many .pp-tab, .pp[data-theme="pista"] .pp-tabs.many .pp-tab, .pp[data-theme="medianoche"] .pp-tabs.many .pp-tab, .pp[data-theme="lino"] .pp-tabs.many .pp-tab, .pp[data-theme="salvia"] .pp-tabs.many .pp-tab, .pp[data-theme="cielo"] .pp-tabs.many .pp-tab { flex: 0 0 auto; padding-inline: .85em; }
.pp-slide { position: relative; z-index: 1; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: .6em 1.5em .8em; text-align: center; }
.pp-badge { display: inline-flex; align-items: center; gap: .4em; font-size: .62em; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: .3em .9em; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--k) 25%, transparent); background: color-mix(in srgb, var(--k) 10%, transparent); color: var(--k); }
.pp-badge i { width: .55em; height: .55em; border-radius: 50%; background: var(--k); }
.pp-title { margin: .35em 0 0; font-size: 1.6em; font-weight: 800; letter-spacing: -.03em; font-family: var(--pp-font2); }
.pp-handle { margin: .15em 0 0; font-size: .82em; color: var(--pp-muted); font-weight: 500; overflow-wrap: anywhere; }
.pp-tile { position: relative; margin-top: 1em; width: min(78%, 19em); aspect-ratio: 1; background: var(--pp-tile); border-radius: var(--pp-tile-r); padding: var(--pp-tile-pad); border: 0; box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 1.6em 3em rgba(0,0,0,.6); animation: pp-pop .3s cubic-bezier(.16,1,.3,1); }
@keyframes pp-pop { from { transform: scale(.96); opacity: 0; } }
.pp-tile > svg { width: 100%; height: 100%; }
.pp-logo { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
.pp-logo span { width: 22%; height: 22%; background: var(--pp-tile); border-radius: 25%; padding: 4%; display: grid; place-items: center; }
.pp-logo svg { width: 100%; height: 100%; border-radius: 18%; }
.pp-open { margin-top: 1.1em; display: inline-flex; align-items: center; gap: .4em; font-size: .78em; font-weight: 600; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.06); color: var(--pp-fg); border-radius: 999px; padding: .6em 1.1em; text-decoration: none; }
.pp-dots { position: relative; z-index: 2; display: flex; justify-content: center; gap: .45em; padding: .2em 0 .4em; }
.pp-dots i { width: .45em; height: .45em; border-radius: 999px; background: rgba(255,255,255,.2); transition: width .25s ease, background .25s ease; }
.pp-dots i.on { width: 1.4em; background: var(--pp-fg); }
.pp-made { position: relative; z-index: 2; display: flex; justify-content: center; align-items: center; gap: .4em; padding: .2em 0 .9em; font-size: .72em; font-weight: 700; color: var(--pp-muted); text-decoration: none; }
.pp-made svg { width: 1.15em; height: 1.15em; }
.pp-made b { color: var(--pp-fg); opacity: .85; }
@media (prefers-reduced-motion: reduce) { .pp, .pp-tab, .pp-dots i, .pp-tile { transition: none; animation: none; } }

/* 1 · Grafito — matte graphite, warm white type (Inter Tight), a thin rule in the network's colour. The default. */
.pp[data-theme="grafito"] .pp-bg { background: radial-gradient(60% 30% at 50% 0%, rgba(255,255,255,.07), transparent 70%), linear-gradient(180deg, #1A1D20 0%, #0F1113 100%); }
.pp[data-theme="grafito"] .pp-badge { border: 0; background: none; color: var(--pp-muted); padding: 0; letter-spacing: .14em; }
.pp[data-theme="grafito"] .pp-title::after { content: ""; display: block; width: 1.6em; height: .12em; margin: .4em auto 0; border-radius: 1em; background: var(--k); }
.pp[data-theme="grafito"] .pp-tile { box-shadow: 0 0 0 1px rgba(255,255,255,.1), inset 0 0 0 .1em rgba(0,0,0,.04), 0 1.8em 3.4em rgba(0,0,0,.65); }

/* 2 · Papel — the brand's quiet light (#F4F7F9) and navy ink, Inter Tight 800, hairline tile, underline tabs. */
.pp[data-theme="papel"] { --pp-bg: #F4F7F9; --pp-fg: #0E1A2B; --pp-muted: #5A6377; --pp-tile-r: 1.1em; --pp-tile-pad: .9em; --pp-font: "Inter Tight", system-ui, sans-serif; }
.pp[data-theme="papel"] .pp-bg { background: radial-gradient(80% 40% at 50% 0%, #FFFFFF, transparent 70%); }
.pp[data-theme="papel"] .pp-pill { border-color: #E5EAEE; background: #FFFFFF; color: #0E1A2B; }
.pp[data-theme="papel"] .pp-tabs { background: none; border: 0; border-bottom: 1.5px solid #E5EAEE; border-radius: 0; padding: 0; margin: .5em 1.25em 0; gap: 0; }
.pp[data-theme="papel"] .pp-tab { border-radius: 0; padding: .7em .4em; color: #5A6377; position: relative; }
.pp[data-theme="papel"] .pp-tab.on { background: none; color: #0E1A2B; }
.pp[data-theme="papel"] .pp-tab.on::after { content: ""; position: absolute; left: .4em; right: .4em; bottom: -1.5px; height: 2.5px; background: #0E1A2B; border-radius: 2px; }
.pp[data-theme="papel"] .pp-badge { border-color: #E5EAEE; background: #FFFFFF; color: #0E1A2B; }
.pp[data-theme="papel"] .pp-tile { border: 1.5px solid #0E1A2B; box-shadow: 0 1.2em 2.4em -1.2em rgba(14,26,43,.3); }
.pp[data-theme="papel"] .pp-open { border-color: #0E1A2B; background: transparent; color: #0E1A2B; }
.pp[data-theme="papel"] .pp-dots i { background: #D5DCE2; } .pp[data-theme="papel"] .pp-dots i.on { background: #0E1A2B; }

/* 3 · Lino — woven linen, serif name and title, ink pills. */
.pp[data-theme="lino"] { --pp-bg: #EFE9DE; --pp-fg: #2B2520; --pp-muted: #7A6F64; --pp-tile: #FFFDF8; --pp-tile-r: .5em; --pp-tile-pad: 1em;
  --pp-font: "Manrope", system-ui, sans-serif; --pp-font2: "Instrument Serif", Georgia, serif; }
.pp[data-theme="lino"] .pp-bg { background: repeating-linear-gradient(0deg, rgba(43,37,32,.035) 0 1px, transparent 1px 3px), repeating-linear-gradient(90deg, rgba(43,37,32,.035) 0 1px, transparent 1px 3px); }
.pp[data-theme="lino"] .pp-name { font-family: var(--pp-font2); font-weight: 400; font-size: 1.45em; letter-spacing: -.01em; }
.pp[data-theme="lino"] .pp-sub { font-weight: 600; letter-spacing: .02em; }
.pp[data-theme="lino"] .pp-pill { border-color: #CDBFAE; background: rgba(255,253,248,.7); color: #2B2520; }
.pp[data-theme="lino"] .pp-tabs { background: none; border: 0; padding: 0; gap: .35em; margin: .6em 1.25em 0; }
.pp[data-theme="lino"] .pp-tab { border: 1px solid #CDBFAE; border-radius: 999px; color: #7A6F64; padding: .5em .4em; }
.pp[data-theme="lino"] .pp-tab svg { display: none; }
.pp[data-theme="lino"] .pp-tab.on { background: #2B2520; border-color: #2B2520; color: #FFFDF8; }
.pp[data-theme="lino"] .pp-badge { border: 0; background: none; padding: 0; text-transform: none; letter-spacing: 0; font-family: var(--pp-font2); font-style: italic; font-weight: 400; font-size: .95em; color: #7A6F64; }
.pp[data-theme="lino"] .pp-badge i { display: none; }
.pp[data-theme="lino"] .pp-title { font-weight: 400; font-size: 2em; letter-spacing: -.015em; }
.pp[data-theme="lino"] .pp-tile { border: 1px solid #CDBFAE; outline: 1px solid #CDBFAE; outline-offset: .3em; box-shadow: 0 1.4em 2.6em -1.4em rgba(43,37,32,.45); }
.pp[data-theme="lino"] .pp-open { border-color: #CDBFAE; background: transparent; color: #2B2520; }
.pp[data-theme="lino"] .pp-dots i { background: #CDBFAE; } .pp[data-theme="lino"] .pp-dots i.on { background: #2B2520; }

/* 4 · Salvia — sage gradient, deep green, soft pills. */
.pp[data-theme="salvia"] { --pp-bg: #DCE5D9; --pp-fg: #1F2B23; --pp-muted: #5C6F62; --pp-tile: #FFFFFF; --pp-tile-r: 1.3em; --pp-tile-pad: 1em; --pp-accent: #2F5D46;
  --pp-font: "Manrope", system-ui, sans-serif; }
.pp[data-theme="salvia"] .pp-bg { background: linear-gradient(180deg, #E6ECE2 0%, #CDD9C9 100%); }
.pp[data-theme="salvia"] .pp-name { font-weight: 800; letter-spacing: -.02em; }
.pp[data-theme="salvia"] .pp-pill { border-color: rgba(47,93,70,.25); background: rgba(255,255,255,.55); color: #1F2B23; }
.pp[data-theme="salvia"] .pp-tabs { background: none; border: 0; padding: 0; gap: .35em; margin: .6em 1.25em 0; }
.pp[data-theme="salvia"] .pp-tab { border: 1px solid rgba(47,93,70,.25); background: rgba(255,255,255,.55); border-radius: 999px; color: #5C6F62; padding: .5em .4em; }
.pp[data-theme="salvia"] .pp-tab svg { display: none; }
.pp[data-theme="salvia"] .pp-tab.on { background: var(--pp-accent); border-color: var(--pp-accent); color: #fff; }
.pp[data-theme="salvia"] .pp-badge { border: 0; background: none; padding: 0; color: var(--pp-accent); }
.pp[data-theme="salvia"] .pp-badge i { background: var(--pp-accent); }
.pp[data-theme="salvia"] .pp-title { font-weight: 800; letter-spacing: -.035em; font-size: 1.7em; }
.pp[data-theme="salvia"] .pp-tile { box-shadow: 0 0 0 1px #B7C7B9, 0 1.2em 2.4em -1em rgba(31,43,35,.35); }
.pp[data-theme="salvia"] .pp-open { border-color: rgba(47,93,70,.35); background: rgba(255,255,255,.55); color: #1F2B23; }
.pp[data-theme="salvia"] .pp-dots i { background: rgba(47,93,70,.25); } .pp[data-theme="salvia"] .pp-dots i.on { background: var(--pp-accent); }

/* 5 · Cielo — airy blue, Space Grotesk, blue-tinted depth. */
.pp[data-theme="cielo"] { --pp-bg: #EAF2FF; --pp-fg: #0F2A5C; --pp-muted: #5C7190; --pp-tile: #FFFFFF; --pp-tile-r: 1.2em; --pp-tile-pad: 1em; --pp-accent: #2563EB;
  --pp-font: "Space Grotesk", system-ui, sans-serif; }
.pp[data-theme="cielo"] .pp-bg { background: radial-gradient(70% 40% at 50% 0%, #D6E6FF, transparent 70%), linear-gradient(180deg, #EAF2FF 0%, #F7FAFF 100%); }
.pp[data-theme="cielo"] .pp-pill { border-color: #BFD3F5; background: #fff; color: #0F2A5C; }
.pp[data-theme="cielo"] .pp-tabs { background: none; border: 0; padding: 0; gap: .35em; margin: .6em 1.25em 0; }
.pp[data-theme="cielo"] .pp-tab { background: #DCE8FF; border-radius: .7em; color: #3B5484; padding: .55em .4em; font-weight: 700; }
.pp[data-theme="cielo"] .pp-tab svg { display: none; }
.pp[data-theme="cielo"] .pp-tab.on { background: var(--pp-accent); color: #fff; }
.pp[data-theme="cielo"] .pp-badge { border-color: #BFD3F5; background: #fff; color: var(--pp-accent); }
.pp[data-theme="cielo"] .pp-badge i { background: var(--pp-accent); }
.pp[data-theme="cielo"] .pp-title { font-weight: 700; letter-spacing: -.03em; font-size: 1.7em; }
.pp[data-theme="cielo"] .pp-tile { border: 1.5px solid #BFD3F5; box-shadow: 0 1.4em 3em -1.2em rgba(37,99,235,.35); }
.pp[data-theme="cielo"] .pp-open { border-color: #BFD3F5; background: #fff; color: #0F2A5C; }
.pp[data-theme="cielo"] .pp-dots i { background: #BFD3F5; } .pp[data-theme="cielo"] .pp-dots i.on { background: var(--pp-accent); }

/* 6 · Tinta — editorial: cream, Fraunces, mono numbering, stamp frame, oxblood rule. */
.pp[data-theme="tinta"] { --pp-bg: #F4EFE6; --pp-fg: #1A1714; --pp-muted: #6B6259; --pp-tile: #FFFFFF; --pp-tile-r: .35em; --pp-tile-pad: 1em;
  --pp-font2: "Fraunces", Georgia, serif; --pp-rule: #7A1F2B; }
.pp[data-theme="tinta"] .pp-name { font-family: var(--pp-font2); font-weight: 600; font-size: 1.35em; letter-spacing: -.01em; }
.pp[data-theme="tinta"] .pp-sub { font-family: var(--pp-font2); font-style: italic; font-weight: 400; font-size: .85em; }
.pp[data-theme="tinta"] .pp-pill { border-color: #1A1714; background: transparent; color: #1A1714; border-radius: .25em; font-family: var(--pp-mono); font-weight: 500; text-transform: uppercase; letter-spacing: .06em; font-size: .62em; padding: .55em .8em; }
.pp[data-theme="tinta"] .pp-tabs { background: none; border: 0; border-top: 1px solid #1A1714; border-bottom: 1px solid #1A1714; border-radius: 0; padding: 0; margin: .7em 1.25em 0; gap: 0; counter-reset: tab; }
.pp[data-theme="tinta"] .pp-tab { border-radius: 0; padding: .7em .2em; font-family: var(--pp-mono); font-weight: 500; font-size: .62em; letter-spacing: .08em; text-transform: uppercase; color: #6B6259; }
.pp[data-theme="tinta"] .pp-tab svg { display: none; }
.pp[data-theme="tinta"] .pp-tab::before { content: counter(tab, decimal-leading-zero) " "; counter-increment: tab; opacity: .6; }
.pp[data-theme="tinta"] .pp-tab.on { background: none; color: #1A1714; text-decoration: underline; text-decoration-color: var(--pp-rule); text-underline-offset: .45em; text-decoration-thickness: .15em; }
.pp[data-theme="tinta"] .pp-badge { border: 0; background: none; color: var(--pp-rule); font-family: var(--pp-mono); font-weight: 500; padding: 0; }
.pp[data-theme="tinta"] .pp-badge i { display: none; }
.pp[data-theme="tinta"] .pp-title { font-weight: 500; font-size: 1.9em; letter-spacing: -.02em; }
.pp[data-theme="tinta"] .pp-handle { font-family: var(--pp-mono); font-size: .74em; }
.pp[data-theme="tinta"] .pp-tile { border: 1px solid #1A1714; outline: 1px solid #1A1714; outline-offset: .35em; box-shadow: none; }
.pp[data-theme="tinta"] .pp-logo span { border-radius: 10%; }
.pp[data-theme="tinta"] .pp-logo svg { border-radius: 0; filter: grayscale(1) contrast(1.2); }
.pp[data-theme="tinta"] .pp-open { border: 0; background: none; color: #1A1714; font-family: var(--pp-mono); text-decoration: underline; text-underline-offset: .3em; border-radius: 0; padding: .4em 0; }
.pp[data-theme="tinta"] .pp-dots i { background: #D8CFC0; border-radius: 0; width: .5em; height: .5em; }
.pp[data-theme="tinta"] .pp-dots i.on { background: var(--pp-rule); width: .5em; }
.pp[data-theme="tinta"] .pp-made { font-family: var(--pp-mono); font-weight: 500; font-size: .62em; letter-spacing: .06em; }

/* 7 · Galería — white, square, monochrome marks, nothing decorative. */
.pp[data-theme="galeria"] { --pp-bg: #FFFFFF; --pp-fg: #111111; --pp-muted: #767676; --pp-tile: #FFFFFF; --pp-tile-r: 0; --pp-tile-pad: .7em;
  --pp-font: "Inter Tight", "Inter", system-ui, sans-serif; }
.pp[data-theme="galeria"] .pp-name { font-weight: 700; letter-spacing: -.03em; }
.pp[data-theme="galeria"] .pp-pill { border-color: #E5E5E5; background: #fff; color: #111; border-radius: .4em; }
.pp[data-theme="galeria"] .pp-tabs { background: none; border: 0; padding: 0; margin: .8em 1.25em 0; gap: .25em; justify-content: center; }
.pp[data-theme="galeria"] .pp-tab { flex: 0 0 auto; padding: .45em .8em; border-radius: .4em; color: #767676; font-weight: 600; font-size: .74em; letter-spacing: -.01em; }
.pp[data-theme="galeria"] .pp-tab svg { display: none; }
.pp[data-theme="galeria"] .pp-tab.on { background: #111; color: #fff; }
.pp[data-theme="galeria"] .pp-badge { border: 0; background: none; color: #767676; padding: 0; letter-spacing: .12em; }
.pp[data-theme="galeria"] .pp-badge i { background: #111; }
.pp[data-theme="galeria"] .pp-title { font-weight: 700; letter-spacing: -.04em; }
.pp[data-theme="galeria"] .pp-tile { border: 1px solid #E5E5E5; box-shadow: none; }
.pp[data-theme="galeria"] .pp-logo span { border-radius: 0; }
.pp[data-theme="galeria"] .pp-logo svg { filter: grayscale(1) contrast(1.4); border-radius: 0; }
.pp[data-theme="galeria"] .pp-open { border: 0; background: none; color: #111; text-decoration: underline; text-underline-offset: .3em; padding: .4em 0; border-radius: 0; }
.pp[data-theme="galeria"] .pp-dots i { background: #E5E5E5; } .pp[data-theme="galeria"] .pp-dots i.on { background: #111; }

/* 8 · Terracota — fired clay, a ceramic cream tile, Bricolage Grotesque. */
.pp[data-theme="terracota"] { --pp-bg: #9E3F2B; --pp-fg: #FFF3E8; --pp-muted: #F7DCCC; --pp-tile: #FFF6EC; --pp-tile-r: 1.4em; --pp-tile-pad: 1em;
  --pp-font: "Bricolage Grotesque", system-ui, sans-serif; }
.pp[data-theme="terracota"] .pp-bg { background: radial-gradient(90% 60% at 50% 110%, #B8513A, transparent 70%), radial-gradient(120% 60% at 50% -10%, rgba(255,220,200,.18), transparent 60%), #9A3B27; }
.pp[data-theme="terracota"] .pp-name { font-weight: 800; letter-spacing: -.02em; }
.pp[data-theme="terracota"] .pp-pill { border-color: rgba(255,243,232,.35); background: transparent; color: #FFF3E8; }
.pp[data-theme="terracota"] .pp-tabs { background: none; border: 0; padding: 0; gap: .35em; margin: .6em 1.25em 0; }
.pp[data-theme="terracota"] .pp-tab { border: 1.5px solid rgba(255,243,232,.35); border-radius: 999px; color: #FFF3E8; padding: .5em .4em; }
.pp[data-theme="terracota"] .pp-tab svg { display: none; }
.pp[data-theme="terracota"] .pp-tab.on { background: #FFF3E8; border-color: #FFF3E8; color: #9E3F2B; }
.pp[data-theme="terracota"] .pp-badge { border-color: rgba(255,243,232,.35); background: transparent; color: #FFF3E8; }
.pp[data-theme="terracota"] .pp-badge i { background: #FFF3E8; }
.pp[data-theme="terracota"] .pp-title { font-weight: 800; letter-spacing: -.03em; font-size: 1.75em; }
.pp[data-theme="terracota"] .pp-tile { box-shadow: inset 0 2px 0 #fff, inset 0 -1px 0 rgba(120,50,30,.12), 0 1.6em 3em -1em rgba(60,20,10,.6); }
.pp[data-theme="terracota"] .pp-open { border-color: rgba(255,243,232,.45); background: transparent; color: #FFF3E8; }
.pp[data-theme="terracota"] .pp-dots i { background: rgba(255,243,232,.3); } .pp[data-theme="terracota"] .pp-dots i.on { background: #FFF3E8; }
.pp[data-theme="terracota"] .pp-made b { color: #FFF3E8; }

/* 9 · Pista — black, one acid accent, a thick frame. For the stage. */
.pp[data-theme="pista"] { --pp-bg: #0A0A0C; --pp-fg: #F2F2F2; --pp-muted: #9A9AA3; --pp-tile: #FFFFFF; --pp-tile-r: .6em; --pp-tile-pad: .9em; --pp-accent: #D4FF3F;
  --pp-font: "Syne", system-ui, sans-serif; }
.pp[data-theme="pista"] .pp-bg { background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px); background-size: 2.2em 2.2em; }
.pp[data-theme="pista"] .pp-name { text-transform: uppercase; letter-spacing: .02em; font-weight: 800; }
.pp[data-theme="pista"] .pp-sub { color: var(--pp-accent); text-transform: uppercase; letter-spacing: .12em; font-size: .62em; font-weight: 700; }
.pp[data-theme="pista"] .pp-pill { border-color: rgba(212,255,63,.4); background: transparent; color: var(--pp-accent); border-radius: .3em; text-transform: uppercase; letter-spacing: .08em; font-size: .62em; }
.pp[data-theme="pista"] .pp-tabs { background: none; border: 0; padding: 0; gap: .35em; margin: .6em 1.25em 0; }
.pp[data-theme="pista"] .pp-tab { border: 1.5px solid #2A2A33; border-radius: .35em; color: #9A9AA3; text-transform: uppercase; letter-spacing: .06em; font-size: .64em; font-weight: 700; padding: .65em .3em; }
.pp[data-theme="pista"] .pp-tab svg { display: none; }
.pp[data-theme="pista"] .pp-tab.on { background: var(--pp-accent); border-color: var(--pp-accent); color: #0A0A0C; }
.pp[data-theme="pista"] .pp-badge { border: 0; background: none; color: var(--pp-accent); padding: 0; letter-spacing: .16em; }
.pp[data-theme="pista"] .pp-badge i { background: var(--pp-accent); }
.pp[data-theme="pista"] .pp-title { text-transform: uppercase; letter-spacing: .01em; font-weight: 800; font-size: 1.55em; }
.pp[data-theme="pista"] .pp-tile { border: .22em solid var(--pp-accent); box-shadow: 0 0 2.4em rgba(212,255,63,.28), 0 1.2em 3em rgba(0,0,0,.7); }
.pp[data-theme="pista"] .pp-open { border-color: #2A2A33; background: transparent; color: #F2F2F2; border-radius: .35em; text-transform: uppercase; letter-spacing: .08em; font-size: .66em; font-weight: 700; }
.pp[data-theme="pista"] .pp-dots i { background: #2A2A33; border-radius: 0; } .pp[data-theme="pista"] .pp-dots i.on { background: var(--pp-accent); }
.pp[data-theme="pista"] .pp-made b { color: var(--pp-accent); }

/* 10 · Medianoche — deep navy, gold, Fraunces. Gala. */
.pp[data-theme="medianoche"] { --pp-bg: #0B1530; --pp-fg: #EEF2FF; --pp-muted: #94A0C8; --pp-tile: #FFF9EC; --pp-tile-r: 1em; --pp-tile-pad: 1em; --pp-accent: #E3C27A;
  --pp-font: "Inter Tight", system-ui, sans-serif; --pp-font2: "Fraunces", Georgia, serif; }
.pp[data-theme="medianoche"] .pp-bg { background: radial-gradient(60% 35% at 50% 0%, rgba(227,194,122,.22), transparent 70%), linear-gradient(180deg, #0B1530 0%, #142454 100%); }
.pp[data-theme="medianoche"] .pp-name { font-family: var(--pp-font2); font-weight: 500; font-size: 1.4em; letter-spacing: -.01em; }
.pp[data-theme="medianoche"] .pp-sub { letter-spacing: .08em; text-transform: uppercase; font-size: .62em; font-weight: 600; color: var(--pp-accent); }
.pp[data-theme="medianoche"] .pp-pill { border-color: rgba(227,194,122,.45); background: transparent; color: var(--pp-accent); }
.pp[data-theme="medianoche"] .pp-tabs { background: none; border: 0; border-bottom: 1px solid rgba(227,194,122,.3); border-radius: 0; padding: 0; gap: 0; margin: .6em 1.25em 0; }
.pp[data-theme="medianoche"] .pp-tab { border-radius: 0; color: #94A0C8; text-transform: uppercase; letter-spacing: .1em; font-size: .62em; font-weight: 600; padding: .75em .3em; position: relative; }
.pp[data-theme="medianoche"] .pp-tab svg { display: none; }
.pp[data-theme="medianoche"] .pp-tab.on { background: none; color: var(--pp-accent); }
.pp[data-theme="medianoche"] .pp-tab.on::after { content: ""; position: absolute; left: .4em; right: .4em; bottom: -1px; height: 2px; background: var(--pp-accent); }
.pp[data-theme="medianoche"] .pp-badge { border: 0; background: none; color: var(--pp-accent); padding: 0; letter-spacing: .14em; }
.pp[data-theme="medianoche"] .pp-badge i { background: var(--pp-accent); }
.pp[data-theme="medianoche"] .pp-title { font-weight: 500; font-size: 1.9em; letter-spacing: -.02em; }
.pp[data-theme="medianoche"] .pp-tile { box-shadow: 0 0 0 1px rgba(227,194,122,.6), 0 0 0 .35em rgba(227,194,122,.08), 0 1.6em 3.2em rgba(0,0,0,.6); }
.pp[data-theme="medianoche"] .pp-open { border-color: rgba(227,194,122,.45); background: transparent; color: #EEF2FF; }
.pp[data-theme="medianoche"] .pp-dots i { background: rgba(227,194,122,.3); } .pp[data-theme="medianoche"] .pp-dots i.on { background: var(--pp-accent); }
.pp[data-theme="medianoche"] .pp-made b { color: var(--pp-accent); }

/* ---- phone frame (shared by site, canvas and editor preview): no notch, sizes from its own width ---- */
.phone { position: relative; width: var(--w, 300px); aspect-ratio: 390 / 844; container-type: inline-size; border-radius: calc(var(--w, 300px) * .145); background: #111; padding: calc(var(--w, 300px) * .028); box-shadow: var(--sh-phone, 0 40px 80px -30px rgba(13,27,30,.55), 0 0 0 1px rgba(0,0,0,.08)); }
.phone > .pp, .phone > .screen { border-radius: calc(var(--w, 300px) * .118); overflow: hidden; height: 100%; font-size: calc(100cqw / 24.4); }
.phone.flat { padding: 0; background: none; box-shadow: none; border-radius: 0; }
.phone.flat > .pp, .phone.flat > .screen { border-radius: 0; }
.screen { height: 100%; }

/* ---- app icon (home screen) ---- */
.icon { width: var(--s, 60px); height: var(--s, 60px); border-radius: 22.5%; display: grid; place-items: center; font-weight: 800; letter-spacing: -.04em; font-size: calc(var(--s, 60px) * .42); line-height: 1; overflow: hidden; }
.icon.emoji { font-size: calc(var(--s, 60px) * .55); }
.icon.glyph svg { width: 62%; height: 62%; }
.icon[data-theme="grafito"], .icon[data-theme="noche"] { background: linear-gradient(180deg, #1A1D20, #0F1113); color: #7CC8DA; font-family: "Inter Tight", sans-serif; }
.icon[data-theme="papel"] { background: #F4F7F9; color: #0E1A2B; box-shadow: inset 0 0 0 1px #E5EAEE; font-family: "Inter Tight", sans-serif; }
.icon[data-theme="lino"] { background: #EFE9DE; color: #2B2520; font-family: "Instrument Serif", serif; font-weight: 400; box-shadow: inset 0 0 0 1px #CDBFAE; }
.icon[data-theme="salvia"] { background: linear-gradient(180deg, #E6ECE2, #CDD9C9); color: #2F5D46; font-family: "Manrope", sans-serif; }
.icon[data-theme="cielo"] { background: linear-gradient(180deg, #D6E6FF, #F7FAFF); color: #2563EB; font-family: "Space Grotesk", sans-serif; font-weight: 700; }
.icon[data-theme="tinta"] { background: #F4EFE6; color: #1A1714; font-family: "Fraunces", serif; font-style: italic; font-weight: 500; box-shadow: inset 0 0 0 1px #1A1714; }
.icon[data-theme="galeria"] { background: #FFFFFF; color: #111; font-family: "Inter Tight", sans-serif; font-weight: 700; box-shadow: inset 0 0 0 1px #E5E5E5; }
.icon[data-theme="terracota"] { background: #9E3F2B; color: #FFF3E8; font-family: "Bricolage Grotesque", sans-serif; }
.icon[data-theme="pista"], .icon[data-theme="neon"] { background: #0A0A0C; color: #D4FF3F; font-family: "Syne", sans-serif; text-transform: uppercase; letter-spacing: 0; }
.icon[data-theme="medianoche"] { background: linear-gradient(180deg, #0B1530, #142454); color: #E3C27A; font-family: "Fraunces", serif; font-weight: 500; }


.pp,.pp *,.pp *::before,.pp *::after{box-sizing:border-box}
.pp-tab{border:0;background:transparent;font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
.pp-tab:focus-visible,.pp-pill:focus-visible,.pp-open:focus-visible,.pp-made:focus-visible,.pp-vbtn:focus-visible{outline:2px solid currentColor;outline-offset:3px}
.pp-pill{font:inherit;font-size:.72em;cursor:pointer}
.pp-share span:empty{display:none}
button.pp-open{font:inherit;font-size:.78em;cursor:pointer}
.pp-pill[aria-pressed=true]{background:var(--pp-fg);color:var(--pp-bg);border-color:var(--pp-fg)}
.pp-track{position:relative;z-index:1;flex:1;min-height:0;display:flex;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain;outline:0}
.pp-track::-webkit-scrollbar{display:none}
.pp-track>.pp-slide{flex:0 0 100%;min-width:0;scroll-snap-align:center;scroll-snap-stop:always}
.pp-made img{width:1.15em;height:1.15em;display:block}
.pp-tab img{width:1.15em;height:1.15em;display:block;flex:none;border-radius:22%}
.pp-title-link{color:inherit;text-decoration:none}
.pp-title-link:focus-visible{outline:2px solid currentColor;outline-offset:3px;border-radius:.2em}
.pp-logo img{width:100%;height:100%;display:block;border-radius:18%}
.pp-tile-missing{background:color-mix(in srgb,var(--pp-tile) 30%,transparent)}
.pp-tabs.many{justify-content:flex-start}
.pp-tabs.many .pp-tab{flex:1 0 2.75em}
/*
 * Long tab names on a narrow phone, in every look: each tab keeps its width up to a cap (the name ends
 * in an ellipsis), the row scrolls sideways with snap instead of the tabs running into each other, and
 * the page's script brings the active tab into view. The underline looks draw their rule inside the
 * row (a scroller clips what hangs out of it); Galería centres its tabs with auto margins, which give
 * way when the row scrolls.
 */
.pp-tabs{overflow-x:auto;overflow-y:hidden;scrollbar-width:none;scroll-snap-type:x proximity;overscroll-behavior-x:contain}
.pp-tabs::-webkit-scrollbar{display:none}
.pp-tab{flex:1 0 auto;min-width:0;max-width:10em;scroll-snap-align:start}
.pp-tab span{min-width:0;overflow:hidden;text-overflow:ellipsis}
.pp-tab:focus-visible{outline-offset:-3px}
.pp[data-theme="papel"] .pp-tabs{border-bottom:0;box-shadow:inset 0 -1.5px 0 #E5EAEE}
.pp[data-theme="medianoche"] .pp-tabs{border-bottom:0;box-shadow:inset 0 -1px 0 rgba(227,194,122,.3)}
.pp[data-theme="papel"] .pp-tab.on::after,.pp[data-theme="medianoche"] .pp-tab.on::after{bottom:0}
.pp[data-theme="galeria"] .pp-tabs{justify-content:flex-start}
.pp[data-theme="galeria"] .pp-tab:first-child{margin-left:auto}
.pp[data-theme="galeria"] .pp-tab:last-child{margin-right:auto}
.pp-dots:has(i:nth-child(13)){display:none}
.pp-tile>svg{display:block}
.pp-visitor{position:absolute;left:0;right:0;bottom:0;z-index:5;display:grid;grid-template-columns:1fr 1fr;gap:.6em;padding:.8em 1.2em max(1em,env(safe-area-inset-bottom));background:linear-gradient(transparent,rgba(0,0,0,.55) 40%)}
.pp[data-theme="papel"] .pp-visitor,.pp[data-theme="tinta"] .pp-visitor,.pp[data-theme="galeria"] .pp-visitor,.pp[data-theme="lino"] .pp-visitor,.pp[data-theme="salvia"] .pp-visitor,.pp[data-theme="cielo"] .pp-visitor{background:linear-gradient(transparent,rgba(255,255,255,.9) 40%)}
.pp-visitor.one .pp-vbtn{grid-column:1/-1}
.pp-vbtn{display:inline-flex;align-items:center;justify-content:center;min-height:3.2em;border-radius:1em;border:1.5px solid currentColor;font-weight:800;font-size:.92em;text-decoration:none;color:var(--pp-fg);text-align:center;padding:0 .6em}
.pp-vbtn.pri{background:var(--pp-fg);color:var(--pp-bg);border-color:var(--pp-fg)}
.pp-vyours{grid-column:1/-1;justify-self:center;font-size:.8em;font-weight:700;color:var(--pp-muted);text-decoration:underline;text-underline-offset:.25em;display:none}
.pp[data-last="1"] .pp-vyours{display:inline}
.pp:has(.pp-visitor) .pp-made{display:none}
.pp:has(.pp-visitor) .pp-dots{padding-bottom:5.2em}
@media (display-mode: standalone){.pp-visitor{display:none}.pp:has(.pp-visitor) .pp-made{display:flex}.pp:has(.pp-visitor) .pp-dots{padding-bottom:.4em}}


/* The landing's sections (brand/site.css): content/landing/<lang>.html, generated by scripts/landing.mjs.
   Prefixed q- (the kit's classes stay untouched). Light only. People's pages (the phones) are the app's
   own component and looks: brand/looks.css, generated from src/.

   Brand: every colour and font is a custom property fed by brand/theme.json through the kit (--bg,
   --surface, --fg, --muted, --line, --accent, --accent-fg, --accent-ink, --bright, --soft,
   --font-display, --font-body, --radius-card, --radius-control); the q- tokens below derive from them,
   plus the Glaciar panel tints. Fixed colours elsewhere are content: networks' marks, drawn screens.

   Composition (Ivan, 28 Oct 2026): only the hero is centred; every section after it hangs its heading
   on the content's left edge. Each section has its own layout (a selector beside a live preview, a row
   of phones bleeding off the right edge, text beside an animated phone, a statement beside the price,
   the questions as plain rows, a closing band). Separation is space and tone (pale panels), not lines
   or card shadows; only the product objects (phones, QR cards) cast shadows. */
:root {
  --max: 80rem;
  --gutter: clamp(1rem, 5.6vw, 5rem);
  --q-bright: var(--bright, var(--accent));
  --q-soft: var(--soft, color-mix(in oklab, var(--accent) 10%, var(--bg)));
  --panel-hielo: #EEF5F8;
  --panel-niebla: #F4F6F8;
  --panel-lavanda: #F2F3FA;
  --night: var(--fg);
  --night-2: #18263A;
  --night-text: #FFFFFF;
  --night-muted: #9AA6B8;
  --q-r-panel: 28px;
  --q-r-btn: var(--radius-control, 14px);
  --q-r-tile: 18px;
  --q-shadow-float: 0 22px 26px color-mix(in srgb, var(--fg) 16%, transparent), 0 2px 4px color-mix(in srgb, var(--fg) 6%, transparent);
  --q-glow: 0 10px 24px -10px color-mix(in srgb, var(--accent) 70%, transparent);
  --sh-phone: inset 0 0 0 1px rgba(255,255,255,.1), 0 28px 40px -18px color-mix(in srgb, var(--fg) 30%, transparent), 0 2px 4px color-mix(in srgb, var(--fg) 6%, transparent);
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-expo: cubic-bezier(.16, 1, .3, 1);
  --ease-in-out: cubic-bezier(.76, 0, .24, 1);
  /* type: small 14 · body 17 · lead 20–24 · section 36–60 · display (the hero) */
  --t-small: .875rem;
  --t-body: 1.0625rem;
  --t-lead: clamp(1.25rem, 1.7vw, 1.5rem);
  --t-head: clamp(2.25rem, 4.6vw, 3.75rem);
}
@media (max-width: 600px) { :root { --q-r-panel: 24px; } }
::selection { background: color-mix(in oklab, var(--accent) 22%, var(--bg)); color: var(--fg); }
/* In-page links glide (the page's script also does it for the header's links), landing each section's
   heading just under the formed header; instant under reduced motion. */
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
.q-sec h2, .q-final h2 { scroll-margin-top: 1rem; } /* + the kit's 5rem scroll-padding: just under the formed header */
.q-sec h2:focus, .q-final h2:focus { outline: 0; }

/* ---- type ---- */
.q-kick { margin: 0; font: 700 .75rem/1.5 var(--font-body); letter-spacing: .12em; text-transform: uppercase; color: var(--accent-ink); text-wrap: balance; }
.q-kick::before { content: ""; display: inline-block; width: .5rem; height: .5rem; margin-right: .6rem; vertical-align: .05em; border-radius: 50%; background: var(--q-bright); box-shadow: 0 0 0 .25rem color-mix(in srgb, var(--q-bright) 28%, transparent); }
.q-h1 { margin: 0; font: var(--display-weight, 800) clamp(2.4rem, 5.6vw, 4rem)/1.02 var(--font-display); letter-spacing: calc(-.035em * var(--display-tracking, 1)); text-wrap: balance; }
.q-h1 > span { display: block; }
.q-em { color: var(--accent); }
.q-h2 { margin: 0; max-width: 16ch; font: var(--display-weight, 800) var(--t-head)/1.02 var(--font-display); letter-spacing: -.028em; text-wrap: balance; }
.q-h2-sm { font-size: clamp(1.75rem, 3vw, 2.5rem); }
.q-lead { margin: 0; max-width: 34rem; font-size: var(--t-lead); line-height: 1.4; color: var(--muted); text-wrap: pretty; }
.q-note { margin: 0; color: var(--muted); font-size: var(--t-small); }
.q-sec a:not(.q-btn), .q-final a:not(.q-btn) { color: var(--accent-ink); text-underline-offset: .18em; text-decoration-thickness: .07em; }

/* ---- phone frames (the app's .phone): one bezel for every phone on the page; the screen is clipped to
   the inner radius (outer − bezel) even when its content runs on its own layer; on the dark looks only,
   a hairline where the screen meets the bezel (a coloured screen gets none: it would read as a sliver). ---- */
@property --w { syntax: "<length>"; inherits: true; initial-value: 300px; } /* resolved where it is set: a cqw
   width must not be re-read against the phone itself (the screen's radius would shrink) */
.phone { background: #17191d; }
.phone > .pp, .phone > .screen { isolation: isolate; border-radius: calc(var(--w, 300px) * (.145 - .028)); } /* inner = outer − bezel */
.phone > .pp, .phone > .screen { clip-path: inset(0 round calc(var(--w, 300px) * (.145 - .028))); }
.phone:has(> .pp:is([data-theme="grafito"], [data-theme="pista"], [data-theme="medianoche"]))::after { content: ""; position: absolute; inset: calc(var(--w, 300px) * .028); border-radius: calc(var(--w, 300px) * (.145 - .028)); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); pointer-events: none; }

/* ---- buttons: solid accent (the hero's claim adds its glow), or a 2 px ink outline ---- */
.q-btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 3.25rem; padding: 0 1.5rem; border: 2px solid var(--accent); border-radius: var(--q-r-btn); background: var(--accent); color: var(--accent-fg); font: 600 1rem/1.1 var(--font-body); text-decoration: none; white-space: nowrap; cursor: pointer; transition: background-color .18s var(--ease-out), border-color .18s var(--ease-out), transform .14s var(--ease-out); }
.q-btn:hover { background: color-mix(in oklab, var(--accent) 86%, var(--fg)); border-color: color-mix(in oklab, var(--accent) 86%, var(--fg)); }
.q-btn:active { transform: translateY(1px); }
.q-btn:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 3px; }
.q-hero-claim .q-btn { box-shadow: var(--q-glow); }

/* The header bar's own button (kit `head-cta-own`): ink, as the brand sets it. */
.head-bar .head-cta-own { padding-inline: 1rem; border-radius: var(--q-r-btn); font-weight: 600; }
@media (max-width: 400px) { .head-bar .head-cta-own { padding-inline: .75rem; font-size: .8125rem; } }
@media (max-width: 349px) { .head-bar .head-cta-own { display: none; } }

/* ---- the claim box (hero, final band, sticky bar) ----
   Nothing moves when its state changes: the status line under it has its height from the start and
   scrolls sideways when suggestions do not fit; the button keeps its width (both labels share one cell);
   no glyph inside the field (password managers put their badges at its right edge). */
.q-claim { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .5rem; width: 100%; max-width: 35rem; margin: 0; text-align: left; }
.q-claim-field { position: relative; display: flex; align-items: center; min-width: 0; min-height: 3.5rem; padding: 0 1rem 0 1.1rem; background: var(--surface); border: 1.5px solid color-mix(in oklab, var(--fg) 12%, transparent); border-radius: var(--q-r-btn); transition: border-color .18s var(--ease-out), box-shadow .18s var(--ease-out); cursor: text; }
.q-claim-field:focus-within { border-color: var(--accent-ink); box-shadow: 0 0 0 4px color-mix(in oklab, var(--accent) 16%, transparent); }
.q-claim-prefix { flex: none; max-width: 55%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-weight: 600; font-size: 1.0625rem; }
/* The kit styles every input (a strong selector); the field's own frame is the label around it. */
.q-claim-field input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]) { flex: 1; width: 100%; min-width: 0; min-height: 0; padding: .9rem .1rem; border: 0; border-radius: 0; outline: 0; background: transparent; box-shadow: none; color: var(--fg); font: 700 1.0625rem/1.2 var(--font-body); }
.q-claim-field input::placeholder { color: color-mix(in oklab, var(--muted) 70%, var(--bg)); font-weight: 600; }
.q-claim-field input:not([type=checkbox]):focus-visible { outline: 0; border: 0; }
.q-claim .q-btn { display: inline-grid; min-height: 3.5rem; }
.q-btn-l { grid-area: 1 / 1; text-align: center; }
.q-claim .q-btn-l[data-when="available"], .q-claim[data-state="available"] .q-btn-l[data-when="idle"] { visibility: hidden; }
.q-claim[data-state="available"] .q-btn-l[data-when="available"] { visibility: visible; }
.q-claim:is([data-state="taken"], [data-state="held"], [data-state="invalid"], [data-state="reserved"]) .q-claim-field { border-color: var(--danger); }
.q-claim[data-state="available"] .q-claim-field { border-color: var(--accent-ink); }
.q-claim-msg { grid-column: 1 / -1; display: flex; align-items: center; gap: .35rem .5rem; height: 1.5rem; margin: 0; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; white-space: nowrap; color: var(--muted); font-size: var(--t-small); font-weight: 600; }
.q-claim-msg::-webkit-scrollbar { display: none; }
.q-claim[data-state="available"] .q-claim-msg { color: var(--accent-ink); }
.q-claim:is([data-state="taken"], [data-state="held"], [data-state="invalid"], [data-state="reserved"]) .q-claim-msg { color: var(--danger); }
.q-ok { display: inline-grid; flex: none; width: 1.125rem; height: 1.125rem; color: var(--accent-ink); }
.q-ok svg { width: 100%; height: 100%; }
.q-spin { flex: none; width: 1rem; height: 1rem; border-radius: 50%; border: 2px solid var(--line); border-top-color: var(--accent-ink); animation: q-spin .8s linear infinite; }
@keyframes q-spin { to { transform: rotate(360deg); } }
.q-sug { flex: none; height: 1.5rem; padding: 0 .65rem; border: 0; border-radius: 999px; background: var(--q-soft); color: var(--fg); font: 600 .8125rem/1 var(--font-body); cursor: pointer; transition: background-color .18s var(--ease-out); }
.q-sug:hover { background: color-mix(in oklab, var(--accent) 18%, var(--bg)); }
@media (max-width: 520px) { .q-claim { grid-template-columns: minmax(0, 1fr); } .q-claim .q-btn { width: 100%; } }

/* ---- sections: one anchor line (the content's left edge), space and tone between them ---- */
.q-sec { padding-block: clamp(2.75rem, 6.5vw, 6.5rem); }
.q-head { display: grid; gap: clamp(.9rem, 1.5vw, 1.25rem); max-width: 44rem; margin: 0 0 clamp(2rem, 4vw, 3.5rem); }
.q-cap { color: var(--muted); font-size: var(--t-small); font-weight: 500; }

/* Section entrances (the page's script): blocks below the fold rise into place once, in reading order. */
.q-pre { opacity: 0; transform: translateY(24px); transition: opacity .8s var(--ease-expo), transform .8s var(--ease-expo); }
.q-pre.q-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .q-pre { opacity: 1; transform: none; transition: none; } }

/* ---- #share: the scenarios beside the live preview (our page → what opens on their phone) ---- */
.q-share-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); grid-template-areas: "head head" "list prev"; column-gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.q-share .q-h2 { max-width: 20ch; }
.q-share .q-head { grid-area: head; }
.q-scns { grid-area: list; display: grid; gap: .25rem; margin: 0; padding: 0; list-style: none; }
.q-scn { display: flex; align-items: center; gap: .9rem; width: 100%; min-height: 3.5rem; padding: .6rem .9rem; border: 0; border-radius: 1rem; background: transparent; color: var(--fg); text-align: left; cursor: pointer; transition: background-color .18s var(--ease-out); }
.q-scn:hover { background: var(--panel-niebla); }
.q-scn.on { background: var(--panel-lavanda); }
.q-scn:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; }
.q-scn-mark { display: grid; flex: none; width: 1.75rem; height: 1.75rem; }
.q-scn-mark svg { width: 100%; height: 100%; border-radius: 22%; }
.q-scn-t { display: grid; gap: .1rem; min-width: 0; }
.q-scn-t > span { color: var(--muted); font-size: var(--t-small); line-height: 1.3; }
.q-scn-t b { font-size: var(--t-body); font-weight: 700; letter-spacing: -.01em; line-height: 1.25; }
.q-preview { grid-area: prev; margin: 0; padding: clamp(1.25rem, 3vw, 2.5rem); border-radius: var(--q-r-panel); background: var(--panel-lavanda); }
/* captions on one row, the two phones (same frame, same size) on the next, the arrow centred between them */
.q-preview-stage { container-type: inline-size; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); grid-template-rows: auto auto; justify-items: center; gap: .75rem clamp(.5rem, 2cqw, 1.5rem); padding-bottom: 1rem; }
.q-cap-own { grid-area: 1 / 1; } .q-cap-their { grid-area: 1 / 3; }
.q-preview-stage > .q-own { grid-area: 2 / 1; } .q-preview-stage > .q-their { grid-area: 2 / 3; }
.q-preview-stage .phone { --w: min(15rem, 40cqw); }
.q-preview-arrow { grid-area: 2 / 2; align-self: center; display: grid; width: clamp(1.25rem, 4cqw, 2rem); color: var(--muted); }
.q-preview-arrow svg { width: 100%; height: auto; }
.q-their > .screen { position: relative; font-size: calc(100cqw / 18); }
.q-scr { position: absolute; inset: 0; opacity: 0; transition: opacity .3s var(--ease-out); }
.q-scr.on { opacity: 1; }
.q-preview-d { position: relative; display: grid; margin-top: clamp(1.25rem, 2.5vw, 1.75rem); color: var(--fg); font-size: var(--t-body); line-height: 1.45; }
.q-scn-d { grid-area: 1 / 1; opacity: 0; transition: opacity .3s var(--ease-out); }
.q-scn-d.on { opacity: 1; }
.q-own .pp-track { scroll-behavior: auto; }
@media (max-width: 999px) {
  .q-share-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "list" "prev"; }
  /* phones: the scenarios become one swipeable strip of chips over the preview */
  .q-scns { display: flex; gap: .5rem; overflow-x: auto; scrollbar-width: none; margin: 0 calc(var(--gutter) * -1) 1rem; padding: 0 var(--gutter) .25rem; scroll-padding-inline: var(--gutter); }
  .q-scns::-webkit-scrollbar { display: none; }
  .q-scns > li { flex: none; }
  .q-scn { width: auto; min-height: 2.75rem; padding: .45rem .9rem .45rem .5rem; gap: .5rem; border-radius: 999px; background: var(--panel-niebla); }
  .q-scn-t > span { display: none; }
  .q-scn-t b { font-size: .9375rem; }
  .q-scn-mark { width: 1.5rem; height: 1.5rem; }
}
@media (prefers-reduced-motion: reduce) { .q-scr, .q-scn-d { transition: none; } }

/* ---- #looks: a row of phones from the left margin, bleeding off the right edge ---- */
/* the controls under the row: prev · a track whose thumb shows what is in view · next */
.q-row-ctl { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-top: .25rem; }
.q-row-track { position: relative; width: clamp(6rem, 18vw, 10rem); height: 4px; overflow: hidden; border-radius: 999px; background: var(--line); }
.q-row-thumb { position: absolute; left: 0; top: 0; bottom: 0; width: 30%; border-radius: inherit; background: var(--fg); transition: transform .12s linear; }
.q-arrow { display: grid; place-items: center; flex: none; width: 2.75rem; height: 2.75rem; border: 0; border-radius: 50%; background: var(--surface); color: var(--fg); cursor: pointer; transition: background-color .18s var(--ease-out), opacity .18s var(--ease-out); }
.q-arrow:hover:not([disabled]) { background: var(--line); }
.q-arrow[disabled] { opacity: .35; cursor: default; }
.q-looks-row.q-nudge { animation: q-nudge .9s var(--ease-in-out); }
@keyframes q-nudge { 40% { transform: translateX(-24px); } }
@media (prefers-reduced-motion: reduce) { .q-looks-row.q-nudge { animation: none; } .q-row-thumb { transition: none; } }
.q-arrow svg { width: 1.25rem; height: 1.25rem; }
.q-arrow:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; }
.q-looks-row { --card: clamp(11.5rem, 17.5vw, 15rem); --pad: calc(max(0px, (100% - var(--max)) / 2) + var(--gutter)); display: flex; gap: clamp(1rem, 2vw, 1.75rem); margin: 0; padding: .5rem var(--pad) 2.5rem; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--pad); list-style: none; scrollbar-width: none; cursor: grab; }
.q-looks-row::-webkit-scrollbar { display: none; }
.q-looks-row.dragging { cursor: grabbing; scroll-snap-type: none; }
.q-looks-row:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: -2px; }
.q-look { flex: 0 0 var(--card); display: grid; gap: 1rem; scroll-snap-align: start; }
.q-look-ph .phone { --w: var(--card); }
.q-looks-row.dragging .q-look-ph { pointer-events: none; }
.q-look-cap { display: flex; align-items: center; gap: .5rem; margin: 0; font-size: var(--t-body); }
.q-look-cap b { font-weight: 700; letter-spacing: -.01em; }
.q-tag { padding: .15rem .55rem; border-radius: 999px; background: var(--q-soft); color: var(--accent-ink); font: 700 .75rem/1.4 var(--font-body); }
@media (max-width: 600px) { .q-looks-row { --card: 68vw; } }

/* ---- #install: the words beside the animated phone ---- */
.q-split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: center; gap: clamp(2rem, 6vw, 6rem); }
.q-split-copy { display: grid; justify-items: start; gap: 1.25rem; }
.q-split-copy .q-lead { margin-top: -.25rem; }
.q-split-art { display: grid; place-items: center; min-width: 0; padding: clamp(1.5rem, 4vw, 3rem) 1rem clamp(2.25rem, 4.5vw, 3.5rem); border-radius: var(--q-r-panel); }
.q-tint { background: var(--panel-hielo); }
@media (max-width: 899px) { .q-split { grid-template-columns: minmax(0, 1fr); } }
.q-seg { display: inline-flex; gap: .25rem; padding: .25rem; border-radius: 999px; background: var(--panel-niebla); }
.q-seg button { display: inline-flex; align-items: center; gap: .45rem; min-height: 2.75rem; padding: 0 1.1rem; border: 0; border-radius: 999px; background: none; color: var(--muted); font: 600 .9375rem/1 var(--font-body); cursor: pointer; transition: background-color .18s var(--ease-out), color .18s var(--ease-out); }
.q-seg svg { width: 1rem; height: 1rem; }
.q-seg button[aria-pressed="true"] { background: var(--fg); color: var(--bg); }
.q-seg button:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; }
.q-how { margin: 0; color: var(--fg); font-size: var(--t-body); font-weight: 600; }
.q-facts { margin: .5rem 0 0; color: var(--muted); font-size: var(--t-small); }

/* the install story: a generic home screen (sizes in cqw of the phone; no third-party apps) */
.q-inst-stage { display: grid; justify-items: center; gap: 1rem; min-width: 0; margin: 0; }
.q-inst-phone { --w: 18.5rem; }
@media (max-width: 600px) { .q-inst-phone { --w: 15rem; } }
.ih-screen { position: relative; overflow: hidden; }
.ih-home { position: absolute; inset: 0; display: flex; flex-direction: column; padding: 0 5.5cqw; color: #fff; font-family: -apple-system, system-ui, sans-serif; transition: transform .5s var(--ease-in-out), filter .5s var(--ease-in-out); }
[data-os="ios"] .ih-home { background: radial-gradient(110% 70% at 15% 0%, #A9C6F0 0%, transparent 60%), radial-gradient(110% 80% at 100% 100%, #D2B3E6 0%, transparent 55%), linear-gradient(180deg, #6F8FCB, #9B88CA); }
[data-os="android"] .ih-home { background: radial-gradient(120% 70% at 0% 0%, #7FB3A8 0%, transparent 60%), linear-gradient(170deg, #3F6E69, #B9A27A); }
.ih-status { display: flex; justify-content: space-between; align-items: center; padding: 3.4cqw 2.5cqw 0; font-size: 3.6cqw; font-weight: 600; }
.ih-sig { display: inline-flex; align-items: flex-end; gap: .7cqw; }
.ih-sig i { width: 1.1cqw; border-radius: .3cqw; background: #fff; }
.ih-sig i:nth-child(1) { height: 1.4cqw; } .ih-sig i:nth-child(2) { height: 2.2cqw; } .ih-sig i:nth-child(3) { height: 3cqw; }
.ih-widget { display: none; }
[data-os="android"] .ih-widget { display: grid; gap: .5cqw; margin-top: 9cqw; padding-left: 1cqw; }
.ih-widget b { font-size: 4cqw; font-weight: 600; }
.ih-widget span { font-size: 13cqw; font-weight: 300; line-height: 1; letter-spacing: -.02em; }
.ih-grid { display: grid; grid-template-columns: repeat(4, 1fr); justify-items: center; gap: 5cqw 0; margin-top: 9cqw; }
[data-os="android"] .ih-grid { margin-top: auto; }
[data-os="android"] .ih-grid > :nth-child(n+17) { display: none; }
.ih-app { display: grid; justify-items: center; gap: 1.5cqw; }
.ih-ic { display: grid; place-items: center; width: 15cqw; aspect-ratio: 1; border-radius: 23%; background: var(--t); box-shadow: 0 .6cqw 1.6cqw rgba(0,0,0,.12); font-style: normal; }
.ih-ic b { display: block; background: rgba(255,255,255,.88); }
.ih-ic .g0 { width: 6.4cqw; height: 6.4cqw; border-radius: 50%; }
.ih-ic .g1 { width: 7.6cqw; height: 5.2cqw; border-radius: 1.2cqw; }
.ih-ic .g2 { width: 6.4cqw; height: 6.4cqw; border-radius: 50%; background: none; border: 1.4cqw solid rgba(255,255,255,.88); }
.ih-ic .g3 { width: 5cqw; height: 5cqw; border-radius: 1cqw; transform: rotate(45deg); }
.ih-lbl { display: block; width: 9cqw; height: 1.6cqw; border-radius: 1cqw; background: rgba(255,255,255,.55); }
[data-os="android"] .ih-ic, [data-os="android"] .ih-ours .icon { border-radius: 50%; }
.ih-dots { display: flex; justify-content: center; gap: 1.6cqw; margin-top: auto; padding: 3cqw 0; }
.ih-dots i { width: 1.8cqw; height: 1.8cqw; border-radius: 50%; background: rgba(255,255,255,.45); }
.ih-dots i.on { background: #fff; }
[data-os="android"] .ih-dots { display: none; }
.ih-dock { display: grid; grid-template-columns: repeat(4, 1fr); justify-items: center; margin: 0 -2cqw 3cqw; padding: 3.4cqw 0; border-radius: 8cqw; background: rgba(255,255,255,.26); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
[data-os="android"] .ih-dock { margin: 0; padding: 5cqw 0 3cqw; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.ih-search { display: none; }
[data-os="android"] .ih-search { display: flex; align-items: center; height: 11cqw; margin: 0 0 4cqw; padding: 0 3.5cqw; border-radius: 999px; background: rgba(255,255,255,.9); }
.ih-search i { width: 4.4cqw; height: 4.4cqw; border-radius: 50%; border: .9cqw solid #9AA3A6; }
.ih-bar { width: 34cqw; height: 1.3cqw; margin: 0 auto 2.4cqw; border-radius: 1cqw; background: rgba(255,255,255,.85); }
[data-os="android"] .ih-bar { width: 26cqw; }
.ih-toast { position: absolute; left: 50%; bottom: 32cqw; z-index: 2; margin: 0; padding: 2cqw 4cqw; border-radius: 999px; background: rgba(20,22,26,.84); color: #fff; font-size: 3.3cqw; font-weight: 600; white-space: nowrap; opacity: 0; transform: translate(-50%, 2cqw); transition: opacity .3s, transform .3s; }
[data-os="android"] .ih-toast { bottom: auto; top: 40cqw; }
:is([data-step="added"], [data-step="tap"]) .ih-toast { opacity: 1; transform: translate(-50%, 0); }
/* your app: hidden on the bare home screen, pops in, a fingertip taps it, it opens */
.ih-icwrap { position: relative; width: 15cqw; aspect-ratio: 1; }
.ih-ours .icon { width: 100%; height: 100%; font-size: 6.3cqw; box-shadow: 0 .6cqw 1.8cqw rgba(0,0,0,.28); transition: transform .15s, filter .15s; }
.ih-ours .icon.emoji { font-size: 8.4cqw; }
.ih-ours .icon.glyph .km { width: 62%; height: 62%; }
.ih-name { font-size: 2.9cqw; font-weight: 600; line-height: 1; white-space: nowrap; text-shadow: 0 1px 2px rgba(0,0,0,.35); }
[data-step="home"] :is(.ih-icwrap .icon, .ih-name) { opacity: 0; transform: scale(.2); }
.q-inst-stage:not([data-step="home"]) .ih-icwrap .icon { animation: ih-pop .6s var(--ease-expo); }
.q-inst-stage:not([data-step="home"]) .ih-name { animation: ih-fade .4s ease .2s both; }
@keyframes ih-pop { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: none; } }
@keyframes ih-fade { from { opacity: 0; } }
[data-step="added"] .ih-icwrap::after { content: ""; position: absolute; inset: -1.6cqw; border: .6cqw solid rgba(255,255,255,.85); border-radius: 30%; animation: ih-ring 1.2s ease-out .3s both; }
@keyframes ih-ring { from { opacity: 1; transform: scale(.9); } to { opacity: 0; transform: scale(1.35); } }
.ih-finger { position: absolute; left: 50%; top: 50%; z-index: 2; width: 11cqw; height: 11cqw; margin: -5.5cqw 0 0 -5.5cqw; border: .5cqw solid rgba(255,255,255,.95); border-radius: 50%; background: rgba(255,255,255,.5); box-shadow: 0 1cqw 3cqw rgba(0,0,0,.3); opacity: 0; transform: translate(16cqw, 26cqw) scale(1.1); transition: transform .55s cubic-bezier(.3,.7,.2,1), opacity .3s, background-color .15s; pointer-events: none; }
[data-step="tap"] .ih-finger { opacity: 1; transform: none; }
[data-step="press"] .ih-finger { opacity: 1; transform: scale(.8); background: rgba(255,255,255,.78); }
[data-step="press"] .ih-ours .icon { transform: scale(.9); filter: brightness(.82); animation: none; }
.ih-open { position: absolute; inset: 0; z-index: 3; overflow: hidden; border-radius: 30cqw; opacity: 0; transform: scale(.14); pointer-events: none; transition: transform .5s var(--ease-in-out), opacity .22s var(--ease-out), border-radius .5s var(--ease-in-out); }
.ih-open .pp { height: 100%; font-size: calc(100cqw / 24.4); }
[data-step="open"] .ih-open { border-radius: 0; opacity: 1; transform: none; }
[data-step="open"] .ih-home { transform: scale(.94); filter: brightness(.7); }
/* the loop's way back: the page shrinks into its icon and the home screen comes forward */
[data-step="closing"] .ih-open { opacity: 0; transform: scale(.14); border-radius: 30cqw; transition: transform .45s var(--ease-in-out), opacity .3s var(--ease-out) .15s, border-radius .45s var(--ease-in-out); }
[data-frozen] *, [data-frozen] *::after { animation: none !important; transition: none !important; } /* ?install=<step> (QA) */
@media (prefers-reduced-motion: reduce) {
  .ih-home, .ih-open, .ih-finger, .ih-toast, .ih-ours .icon, .q-seg button { transition: none !important; }
  .ih-icwrap .icon, .ih-name, .ih-icwrap::after { animation: none !important; }
}

/* ---- the scanner's side: drawn screens of what opens (generic, no vendor UI) ---- */
/* ---- the scanner's side: drawn screens of what opens (generic, no vendor UI) ---- */
.sc { height: 100%; display: flex; flex-direction: column; background: #F2F2F7; color: #111; font-family: -apple-system, system-ui, sans-serif; font-size: 1em; }
.sc-status { display: flex; justify-content: space-between; padding: .9em 1.6em .2em; font-size: .78em; font-weight: 700; }
/* the status bar wears the app's top colour, so the screen's rounded top is one colour up to the bezel */
.sc-chat .sc-status { background: #128C7E; color: #fff; }
.sc-li .sc-status { background: #0A66C2; color: #fff; }
:is(.sc-mail, .sc-contact, .sc-ig) .sc-status { background: #fff; }
.sc-bar { display: flex; align-items: center; gap: .7em; padding: .7em 1em; color: #fff; }
.sc-bar b { font-size: 1em; }
.sc-bar small { display: block; font-size: .7em; opacity: .8; }
.sc-wa { background: #128C7E; }
.sc-lib { background: #0A66C2; }
.sc-igb { background: #fff; color: #111; border-bottom: 1px solid #eee; }
.sc-back { font-size: 1.6em; line-height: 1; opacity: .9; }
.sc-av { display: grid; place-items: center; flex: none; width: 2.4em; height: 2.4em; border-radius: 50%; background: #3A4A55; color: #fff; font-weight: 800; font-size: .8em; }
.sc-body { flex: 1; display: flex; flex-direction: column; gap: .8em; padding: 1em; }
.sc-wall { align-items: center; background: #E5DDD5; }
.sc-day { padding: .3em .8em; border-radius: .5em; background: rgba(255,255,255,.85); color: #555; font-size: .7em; }
.sc-compose { display: flex; align-items: center; gap: .6em; padding: .8em; background: #F0F0F0; }
.sc-input { flex: 1; padding: .7em 1em; border-radius: 1.4em; background: #fff; color: #111; font-size: .9em; line-height: 1.3; }
.sc-send { display: grid; place-items: center; flex: none; width: 2.6em; height: 2.6em; border-radius: 50%; background: #25D366; color: #fff; }
.sc-url { display: flex; align-items: center; gap: .5em; margin: .6em 1em 0; padding: .6em .9em; border-radius: .8em; background: #fff; font-size: .8em; }
.sc-lock { display: inline-grid; color: #6B7280; }
.sc-lock svg { width: 1em; height: 1em; }
.sc-site { background: #F4F1EC; padding: 1.1em; }
.sc-site-nav { display: flex; justify-content: space-between; font-size: .8em; }
.sc-site-hero b { display: block; margin: .6em 0 .3em; font-size: 1.5em; line-height: 1.1; letter-spacing: -.03em; }
.sc-site-hero p { margin: 0 0 .9em; color: #666; font-size: .85em; }
.sc-btn { display: inline-block; padding: .6em 1em; border-radius: .7em; background: #2B3A55; color: #fff; font-weight: 700; font-size: .8em; text-align: center; }
.sc-booking .sc-btn { align-self: stretch; }
.sc-pill { align-self: stretch; padding: .7em 1em; border-radius: 999px; }
.sc-btn-li { background: #0A66C2; }
.sc-btn-ig { background: #111; }
.sc-site-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .6em; margin-top: 1em; }
.sc-site-grid i { aspect-ratio: 4 / 3; border-radius: .6em; background: #E4DED5; }
.sc-mailhead { display: flex; justify-content: space-between; align-items: center; padding: .8em 1em; background: #fff; color: #2B3A55; font-size: .85em; }
.sc-mailhead b { color: #111; }
.sc-pri { font-weight: 700; }
.sc-sendm { display: inline-flex; align-items: center; gap: .3em; padding: .35em .9em; border-radius: 999px; background: #2B3A55; color: #fff; font-weight: 700; }
.sc-fields { gap: 0; padding: 0; background: #fff; }
.sc-row { display: flex; gap: .6em; padding: .8em 1em; border-bottom: 1px solid #eee; font-size: .85em; }
.sc-row label { color: #777; }
.sc-chip { padding: .1em .5em; border-radius: .5em; background: #E8ECF3; color: #2B3A55; }
.sc-text { padding: 1em; font-size: .95em; line-height: 1.4; }
.sc-fill { color: #111; font-weight: 600; background: linear-gradient(transparent 58%, #FFF0A8 58%); }
.sc-caret { display: inline-block; width: 2px; height: 1.1em; margin-left: 1px; vertical-align: text-bottom; background: #2B3A55; animation: sc-blink 1s steps(1) infinite; }
@keyframes sc-blink { 50% { opacity: 0; } }
.sc-prefill { margin: .2em 1em .8em; padding: .6em .8em; border-radius: .7em; background: #E8F6EF; color: #065F46; font-size: .72em; font-weight: 700; text-align: center; }
.sc-kb { display: grid; gap: .35em; margin-top: auto; padding: .5em .25em .7em; background: #D1D4DA; }
.sc-kb div { display: flex; justify-content: center; gap: .25em; }
.sc-kb i { width: 8.4%; padding: .45em 0; border-radius: .35em; background: #fff; box-shadow: 0 1px 0 rgba(0,0,0,.25); color: #111; font-size: .72em; font-style: normal; text-align: center; }
.sc-booking { background: #fff; }
.sc-bk-head { display: flex; align-items: center; gap: .7em; }
.sc-bk-head small { display: block; color: #777; font-size: .75em; }
.sc-bk-title { margin: .3em 0 0; font-weight: 700; font-size: .9em; }
.sc-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: .3em; }
.sc-cal-grid i { display: grid; place-items: center; aspect-ratio: 1; border-radius: .5em; background: #F4F4F5; font-size: .72em; font-style: normal; }
.sc-cal-grid i.on { background: #222; color: #fff; font-weight: 700; }
.sc-cal-grid i.off { opacity: .35; }
.sc-slots { display: grid; grid-template-columns: 1fr 1fr; gap: .4em; }
.sc-slots span { padding: .5em; border: 1.5px solid #E5E5E5; border-radius: .6em; font-size: .78em; font-weight: 600; text-align: center; }
.sc-slots span.on { border-color: #222; background: #222; color: #fff; }
.sc-big { display: grid; place-items: center; width: 4.5em; height: 4.5em; margin: 1.2em auto .4em; border-radius: 50%; background: #3A4A55; color: #fff; font-weight: 800; font-size: 1.1em; }
.sc-ring { box-shadow: 0 0 0 .25em #fff, 0 0 0 .45em #E4405F; }
.sc-who { padding-bottom: 1em; text-align: center; }
.sc-who small { display: block; margin-top: .2em; color: #777; font-size: .78em; }
.sc-list div { padding: .7em 1em; border-top: 1px solid #eee; font-size: .85em; }
.sc-list small { display: block; color: #777; font-size: .78em; }
.sc-prof { align-items: center; background: #fff; }
.sc-cover { align-self: stretch; height: 4em; margin: -1em -1em 0; background: #0A66C2; opacity: .85; }
.sc-stats { display: flex; gap: 1.4em; color: #555; font-size: .8em; }
.sc-stats b { color: #111; }
.sc-grid9 { display: grid; grid-template-columns: repeat(3, 1fr); gap: .3em; align-self: stretch; margin-top: .6em; }
.sc-grid9 i { aspect-ratio: 1; border-radius: .3em; background: #EFEFEF; }
@media (prefers-reduced-motion: reduce) { .sc-caret { animation: none; } }

/* ---- #price: a statement beside the price set large; the questions as plain rows ---- */
.q-price-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(2rem, 6vw, 6rem); align-items: start; }
.q-price-grid .q-head { margin: 0; }
.q-price-set { display: grid; justify-items: start; gap: 1rem; }
.q-price-big { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem .9rem; margin: 0; color: var(--muted); font-variant-numeric: tabular-nums; }
.q-price-big s { font: var(--display-weight, 800) clamp(2.75rem, 6vw, 4.5rem)/1 var(--font-display); letter-spacing: -.035em; text-decoration-thickness: .06em; text-decoration-color: color-mix(in oklab, var(--muted) 75%, transparent); }
.q-price-big span { font-size: var(--t-body); font-weight: 500; }
.q-price-now { margin: 0; padding: .4rem .9rem; border-radius: 999px; background: var(--q-soft); color: var(--accent-ink); font-size: var(--t-body); font-weight: 700; }
.q-plans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; width: 100%; margin-top: 1rem; }
.q-plan { display: grid; align-content: start; gap: .75rem; padding: clamp(1.25rem, 2.5vw, 1.75rem); border-radius: var(--q-r-panel); background: var(--panel-niebla); }
.q-plan-pro { background: var(--night); color: var(--night-text); }
.q-plan-name { margin: 0; font: var(--display-weight, 800) 1.5rem/1 var(--font-display); letter-spacing: -.028em; }
.q-plan ul { display: grid; gap: .55rem; margin: 0; padding: 0; list-style: none; }
.q-plan li { display: flex; align-items: flex-start; gap: .55rem; font-size: var(--t-body); line-height: 1.35; }
.q-plan li svg { flex: none; width: 1.125rem; height: 1.125rem; margin-top: .1rem; color: var(--q-bright); }
.q-plan:not(.q-plan-pro) li { color: var(--muted); }
.q-plan:not(.q-plan-pro) li::before { content: ""; flex: none; width: .375rem; height: .375rem; margin: .55rem .375rem 0 .375rem; border-radius: 50%; background: currentColor; }
.q-plan-note { margin: 0; color: var(--muted); font-size: var(--t-small); }
@media (max-width: 899px) { .q-price-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 520px) { .q-plans { grid-template-columns: minmax(0, 1fr); } }
.q-faq { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(1.25rem, 6vw, 6rem); margin-top: clamp(5rem, 11vw, 9rem); }
.q-faq .faq { border: 0; }
.q-faq .faq details { border: 0; }
.q-faq .faq details + details { margin-top: .25rem; }
.q-faq .faq summary { padding: .9rem 0; font: 600 clamp(1.0625rem, 1.5vw, 1.1875rem)/1.35 var(--font-body); letter-spacing: -.01em; }
.q-faq .faq summary::after { color: var(--muted); }
.q-faq .faq .a { padding: 0 0 1.1rem; max-width: 40rem; color: var(--muted); font-size: var(--t-body); line-height: 1.55; }
@media (max-width: 899px) { .q-faq { grid-template-columns: minmax(0, 1fr); } }

/* ---- #final: the closing scene in the accent, and the sticky bar on phones ---- */
.q-final { padding-block: clamp(3.5rem, 8vw, 7rem); background: var(--accent); color: var(--accent-fg); }
.q-final .wrap { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); align-items: center; gap: clamp(1.5rem, 5vw, 5rem); }
.q-final .q-h2 { max-width: 14ch; }
.q-final .q-claim { max-width: 32rem; }
.q-final .q-claim-field { border-color: transparent; background: var(--bg); }
.q-final .q-claim .q-btn { background: var(--night); border-color: var(--night); color: var(--night-text); }
.q-final .q-claim .q-btn:hover { background: var(--night-2); border-color: var(--night-2); }
.q-final .q-claim-msg, .q-final .q-claim:is([data-state]) .q-claim-msg { color: inherit; }
.q-final .q-ok { color: inherit; }
.q-final-claim { display: grid; gap: .5rem; min-width: 0; }
.q-final .q-note { color: inherit; opacity: .85; }
@media (max-width: 899px) { .q-final .wrap { grid-template-columns: minmax(0, 1fr); } }
.q-sticky { position: fixed; left: 0; right: 0; bottom: 0; z-index: 35; display: none; padding: .6rem var(--gutter) calc(.6rem + env(safe-area-inset-bottom)); background: var(--bg); border-top: 1px solid color-mix(in oklab, var(--fg) 8%, transparent); transform: translateY(110%); transition: transform .3s var(--ease-out); }
.q-sticky.show { transform: none; }
.q-sticky .q-claim { grid-template-columns: minmax(0, 1fr) auto; max-width: none; }
.q-sticky .q-claim-field { min-height: 3rem; }
.q-sticky .q-claim .q-btn { width: auto; min-height: 3rem; padding-inline: 1.1rem; }
@media (max-width: 720px) { .q-sticky { display: block; } }
@media (prefers-reduced-motion: reduce) { .q-sticky { transition: none; } }

/* ---- the closing signature: the QRzoo lockup, huge and pale, rising from the page's bottom edge behind
   the footer (its lower half cut by the end of the page). A CSS mask over the published lockup, one ink;
   decoration only (no box, no text), the footer row stays above it and keeps its contrast. ---- */
.site-foot { --wm-w: calc(100% - 2 * clamp(.75rem, 2vw, 2rem)); position: relative; overflow: clip; padding-bottom: calc(var(--wm-w) / 3.05 * .4); }
.site-foot > .wrap { position: relative; z-index: 1; }
.site-foot::before { content: ""; position: absolute; left: 50%; bottom: 0; width: var(--wm-w); aspect-ratio: 122 / 40; translate: -50% 50%; background: var(--fg); opacity: .06; pointer-events: none;
  -webkit-mask: url(/brand/lockup.svg) center / contain no-repeat; mask: url(/brand/lockup.svg) center / contain no-repeat; }
@media print { .site-foot::before { display: none; } }

/* The landing's hero (brand/hero.css; kit-site appends it last): content/hero/<lang>.html, generated by
   scripts/landing.mjs. The page's one centred moment: the mark, kicker, headline, lead and the claim
   box, with QR cards floating around it — a WhatsApp tile, a LinkedIn card, a phone showing a real page
   in the Medianoche look (the app's own component) and a calendar tile. Colours and fonts come from
   the theme's tokens. */

.q-hero { position: relative; overflow-x: clip; }
.q-hero-top { position: relative; display: grid; justify-items: center; gap: 1.15rem; padding-block: clamp(2.25rem, 6.5vw, 5.5rem) clamp(2.75rem, 7vw, 6.5rem); text-align: center; }
.q-hero-top > :not(.q-float) { position: relative; z-index: 1; }
.q-hero-top > .q-kick { margin-top: .15rem; }
.q-hero .q-h1 { margin-top: -.15rem; }
.q-hero .q-lead { max-width: 38rem; font-size: clamp(1rem, 1.4vw, 1.125rem); line-height: 1.55; }
.q-hero-claim { display: grid; justify-items: center; gap: .55rem; width: 100%; max-width: 35rem; margin-top: .6rem; }
.q-hero-claim .q-claim-msg { justify-content: center; }
.q-hero-claim .q-note { margin-top: -.35rem; }

.q-hero-mark { width: clamp(2.75rem, 4vw, 3.25rem); height: auto; margin-bottom: .1rem; }

/* Floating QR cards (brand NOTES): tilted, long soft shadows, bleeding off the edges on wide screens;
   two smaller ones above the copy on phones; none in between (they would crowd the headline). */
.q-card { position: absolute; display: grid; gap: .5rem; width: var(--w); padding: .7rem .7rem .75rem; border-radius: var(--q-r-tile, 18px); background: #fff; box-shadow: var(--q-shadow-float); transform: rotate(var(--r)); text-align: left; }
.q-card-code { position: relative; display: block; aspect-ratio: 1; padding: 5%; border-radius: calc(var(--q-r-tile, 18px) - 6px); background: #fff; }
.q-card-qr .q-card-code { box-shadow: inset 0 0 0 1px var(--line); }
.q-card-code > svg { display: block; width: 100%; height: 100%; }
.q-card-code i { position: absolute; left: 50%; top: 50%; display: grid; width: 24%; height: 24%; padding: 3.5%; transform: translate(-50%, -50%); border-radius: 24%; background: #fff; }
.q-card-code i svg { width: 100%; height: 100%; border-radius: 18%; }
.q-card-cap { display: flex; align-items: center; gap: .4rem; padding-inline: .15rem; color: var(--fg); font: 700 .85rem/1.1 var(--font-display); letter-spacing: -.01em; }
.q-card-cap svg { flex: none; width: 1rem; height: 1rem; border-radius: 22%; }
.q-card > small { padding-inline: .15rem; color: var(--muted); font-size: .7rem; font-weight: 500; line-height: 1.2; overflow-wrap: anywhere; }
/* phones with real pages (the app's component): Medianoche on the left, Papel on the right */
.c-phone { padding: 0; background: none; box-shadow: none; }

@media (min-width: 1200px) {
  .q-float { position: absolute; z-index: 0; inset: 0 calc(50% - 50vw); pointer-events: none; }
  .c-wa { --w: clamp(8.5rem, 11vw, 11rem); --r: -12deg; top: 9%; left: -1.25rem; }
  .c-phone-l { --w: clamp(7rem, 9vw, 8.75rem); --r: 8deg; top: 47%; left: 6.5vw; }
  .c-phone-r { --w: clamp(7.5rem, 9.5vw, 9.25rem); --r: -8deg; top: 4%; right: -1.75rem; }
  .c-cal { --w: clamp(7.75rem, 10vw, 9.75rem); --r: 7deg; top: 60%; right: 6vw; }
}
@media (max-width: 1199px) {
  /* phones and tablets: two QR tiles above the copy, nothing beside the headline */
  .q-float { position: relative; width: 13.5rem; height: 7.5rem; margin: 0 auto .25rem; pointer-events: none; }
  .q-float .c-phone { display: none; }
  .c-wa, .c-cal { --w: 5.5rem; padding: .4rem; gap: 0; }
  .c-wa { --r: -10deg; left: 1.25rem; top: .5rem; }
  .c-cal { --r: 9deg; right: 1.25rem; top: 1.25rem; }
  .q-float .q-card-cap, .q-float .q-card > small { display: none; }
  .q-hero-mark { display: none; }
}