/* Arcos: the chrome on every page and the sub-page shell, in liquid glass. Loaded after
   base.css. The body contract and the motion layer are in build/src/pages/README.md. */

/* ---------- header ---------- */
.topbar{position:fixed;top:0;left:0;right:0;z-index:600;height:var(--nav-h);display:flex;align-items:center;color:var(--bone);
  border-bottom:1px solid rgba(255,255,255,.1);transition:border-color .35s var(--ease)}
/* the header's glass is its own layer, so the panels inside it can blur the page; near opaque
   until its blur arrives late (motion.css), so no text ever reads through it */
.topbar::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:rgba(15,18,22,.97);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 14px 32px -22px rgba(0,0,0,.8);transition:opacity .35s var(--ease)}
.topbar .shell{display:flex;align-items:center;gap:clamp(.5rem,1.4vw,1.4rem)}
/* the homepage keeps its header open over the hero until the page moves or a menu opens */
body.home .topbar{border-bottom-color:transparent}
body.home .topbar::before{opacity:0}
body.home .topbar::after{content:"";position:absolute;inset:0 0 auto 0;height:calc(var(--nav-h) + 40px);z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,rgba(6,9,16,.72),transparent);transition:opacity .35s var(--ease)}
body.home .topbar.stuck::before,body.home .topbar.menu-open::before,body.nav-open .topbar::before{opacity:1}
body.home .topbar.stuck::after,body.home .topbar.menu-open::after,body.nav-open .topbar::after{opacity:0}
body.home .topbar.stuck,body.home .topbar.menu-open,body.nav-open .topbar{border-bottom-color:rgba(255,255,255,.1)}

.mark{display:inline-flex;align-items:center;gap:.6rem;flex:none;min-height:44px}
.marklogo{width:46px;height:auto;flex:none}
.mark b{font-family:"Archivo","Inter",sans-serif;font-weight:800;font-size:1.14rem;letter-spacing:-.04em;line-height:1;color:#fff}
@media (max-width:640px){.marklogo{width:38px}}

.mainnav{margin-left:auto}
.mainnav > ul{display:flex;align-items:center;gap:.1rem}
.navitem{position:relative}
.navlink{position:relative;display:inline-flex;align-items:center;gap:.35rem;min-height:44px;padding:.5rem .8rem;border-radius:10px;font-weight:500;font-size:.96rem;
  white-space:nowrap;color:rgba(255,255,255,.84);transition:color .2s var(--ease),background-color .2s var(--ease)}
.navlink:hover,.navitem.open > .navlink{color:#fff;background:rgba(255,255,255,.07)}
/* the section you are in: a short line under the word, not a box */
.navlink::after{content:"";position:absolute;left:.8rem;right:.8rem;bottom:.3rem;height:2px;border-radius:2px;background:var(--blue-lit);transform:scaleX(0);transform-origin:left;transition:transform .25s var(--out)}
.navlink[aria-current="page"],.navlink.on{color:#fff}
.navlink[aria-current="page"]::after,.navlink.on::after{transform:scaleX(1)}
.navbtn::after{right:calc(.8rem + 16px)}
.caret{flex:none;transition:transform .2s var(--ease)}
.navitem.open > .navbtn .caret{transform:rotate(180deg)}

/* a dropdown hangs from the header's lower edge; the ::before bridges the gap for the pointer */
.navpanel{--drop:calc((var(--nav-h) - 44px) / 2);position:absolute;top:calc(100% + var(--drop));left:-.4rem;z-index:5;display:none;min-width:250px;
  padding:.5rem;background:var(--ink);border:1px solid rgba(255,255,255,.1);border-top:0;border-radius:0 0 18px 18px;transform-origin:50% 0}
.navpanel:not(.navpanel--2){min-width:290px}
.navpanel::before{content:"";position:absolute;left:0;right:0;bottom:100%;height:var(--drop)}
.navitem.open > .navpanel,html:not(.js) .navitem:hover > .navpanel,html:not(.js) .navitem:focus-within > .navpanel{display:block}
.navpanel--2{min-width:560px}
.navitem.open > .navpanel--2,html:not(.js) .navitem:hover > .navpanel--2,html:not(.js) .navitem:focus-within > .navpanel--2{display:grid;grid-template-columns:1fr 1fr;column-gap:.5rem}
.navhead{padding:.55rem .6rem .3rem;font-size:.84rem;font-weight:600;color:var(--grey-2)}
.navpanel a{display:flex;align-items:center;min-height:40px;padding:.4rem .6rem;border-radius:8px;color:var(--bone);font-size:.95rem;line-height:1.3;
  transition:background-color .15s var(--ease),color .15s var(--ease)}
.navpanel a:hover{background:rgba(255,255,255,.08);color:#fff}
.navpanel a[aria-current="page"]{color:var(--blue-lit)}
.navfoot{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:0 .6rem;margin-top:.35rem;padding-top:.35rem;border-top:1px solid var(--line-d)}
.navfoot a,.navpanel a.navall{color:var(--blue-lit)}
.navrest{margin-top:.35rem;padding-top:.35rem;border-top:1px solid var(--line-d)}

.topact{display:flex;align-items:center;gap:.45rem;flex:none;margin-left:.5rem}
.navtel{display:inline-flex;align-items:center;justify-content:center;gap:.45rem;min-height:44px;min-width:44px;padding:0 .55rem;border-radius:10px;
  color:#fff;font-weight:600;font-size:.95rem;white-space:nowrap;transition:background-color .2s var(--ease)}
.navtel svg{flex:none}
.navtel:hover{background:rgba(255,255,255,.07)}
.topcta.btn{min-height:46px;padding:.6rem 1.2rem;font-size:.94rem}
.burger{display:none;width:46px;height:46px;border-radius:12px;align-items:center;justify-content:center;border:1px solid rgba(255,255,255,.22);
  background:rgba(255,255,255,.07);transition:background-color .2s var(--ease)}
.burger:hover{background:rgba(19,88,224,.25);border-color:var(--blue-lit)}
.burger .bars{width:20px;height:14px;position:relative}
.burger .bars i{position:absolute;left:0;height:2px;width:100%;background:#fff;border-radius:2px;transition:transform .35s var(--out),opacity .2s var(--ease)}
.burger .bars i:nth-child(1){top:0}.burger .bars i:nth-child(2){top:6px;width:70%}.burger .bars i:nth-child(3){top:12px}
body.nav-open .burger .bars i:nth-child(1){transform:translateY(6px) rotate(45deg)}
body.nav-open .burger .bars i:nth-child(2){opacity:0}
body.nav-open .burger .bars i:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.progress{position:absolute;left:0;right:0;bottom:-1px;height:2px;overflow:hidden;pointer-events:none}
.progress i{display:block;height:100%;width:100%;background:var(--blue-lit);transform:scaleX(0);transform-origin:left}

/* a laptop keeps every item, a step tighter */
@media (max-width:1240px) and (min-width:1080px){
  .navlink{padding-inline:.6rem;font-size:.93rem}
  .navtel .num{display:none}
}
/* tablet: mark | Pricing | tel | CTA | burger */
@media (max-width:1079px){
  .mainnav li:not(.nav-tablet){display:none}
  .navtel .num{display:none}
  .navtel{width:46px;height:46px;padding:0;border-radius:12px;border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.07)}
  .burger{display:inline-flex}
}
/* phone: mark | tel | burger */
@media (max-width:759px){
  .mainnav{display:none}
  .topact{margin-left:auto}
  .topcta.btn{display:none}
}

/* ---------- drawer ---------- */
.drawer{position:fixed;inset:0;z-index:590;background:var(--ink);color:var(--bone);padding:calc(var(--nav-h) + .4rem) 0 2rem;overflow-y:auto;
  overscroll-behavior:contain;opacity:0;visibility:hidden;transition:opacity .3s var(--out),visibility 0s linear .3s}
body.nav-open .drawer{opacity:1;visibility:visible;transition:opacity .3s var(--out),visibility 0s}
html.locked{overflow:hidden}
@media (min-width:1080px){.drawer{display:none}}
.drawer nav{display:grid}
.dlink{display:flex;align-items:center;justify-content:space-between;gap:1rem;width:100%;min-height:58px;padding:.6rem 0;cursor:pointer;
  font-family:"Archivo","Inter",sans-serif;font-weight:800;font-size:1.4rem;letter-spacing:-.035em;color:var(--bone);list-style:none;border-bottom:1px solid var(--line-d)}
.dlink::-webkit-details-marker{display:none}
.dlink::marker{content:""}
.dgroup[open] > .dlink{border-bottom-color:transparent}
.dgroup[open] > .dlink .caret{transform:rotate(180deg)}
.dsub{padding:0 0 .9rem;border-bottom:1px solid var(--line-d)}
.dlabel{margin:.6rem 0 .1rem;font-size:.9rem;font-weight:600;color:var(--grey-2)}
.dsub a{display:flex;align-items:center;min-height:44px;font-size:1.06rem;color:var(--bone)}
.dsub a[aria-current="page"],.dsub a.dall{color:var(--blue-lit)}
.dfoot{padding-top:1.4rem;display:grid;gap:.6rem}
.drawer .btn-ghost{border-color:rgba(255,255,255,.34);color:#fff;background-color:rgba(255,255,255,.07);background-image:none}

/* ---------- footer ---------- */
.foot{background:var(--ink);box-shadow:inset 0 1px 0 rgba(255,255,255,.07);color:var(--grey-2);padding-block:clamp(3rem,5vw,4.5rem) 1.6rem;font-size:.96rem;position:relative}
.footgrid{display:grid;grid-template-columns:minmax(0,1.35fr) repeat(3,minmax(0,1fr));gap:2rem clamp(1.6rem,3vw,3rem);padding-bottom:2.2rem;border-bottom:1px solid var(--line-d)}
.footgrid.cols-2{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr)}
.footgrid.cols-3{grid-template-columns:minmax(0,1.35fr) repeat(2,minmax(0,1fr))}
@media (max-width:960px){.footgrid,.footgrid.cols-2,.footgrid.cols-3{grid-template-columns:1fr 1fr}.footbrand{grid-column:1/-1}}
/* a phone keeps two link columns side by side, so the map is half as long */
@media (max-width:340px){.footgrid,.footgrid.cols-2,.footgrid.cols-3{grid-template-columns:1fr}}
@media (max-width:560px){.footcol li a{font-size:.94rem;line-height:1.35;padding-block:.25rem}.footgrid.cols-4 > .footcol:nth-child(2){grid-row:span 2}}
.foothead{margin:0 0 .8rem;font-family:"Inter",sans-serif;font-size:.95rem;font-weight:600;letter-spacing:0;line-height:1.4;color:#fff}
.footbrand p{max-width:40ch;line-height:1.6;margin-bottom:.9rem}
.footbrand .btn{margin-top:.4rem}
.footcontact{display:block;width:fit-content;min-height:36px;font-family:"Archivo","Inter",sans-serif;font-weight:800;font-size:1.22rem;letter-spacing:-.035em;color:#fff}
.footcontact + .footcontact{margin-bottom:.6rem}
.footplace a{color:var(--bone);text-decoration:underline;text-underline-offset:3px}
.footcol li a{display:inline-flex;align-items:center;min-height:36px;color:var(--bone)}
.foot a:hover{color:var(--blue-lit)}
.foot a[aria-current="page"]{color:var(--blue-lit)}
.colophon{padding-top:1.4rem;display:grid;gap:.8rem;font-size:.8rem;color:var(--grey-2);line-height:1.7}
.colophon .row{display:flex;flex-wrap:wrap;gap:.4rem 1.6rem;justify-content:space-between;align-items:center}
.colophon .legal,.colophon .profiles{display:flex;flex-wrap:wrap;gap:0 1.1rem;align-items:center}
.colophon .profiles{justify-content:flex-start}
.colophon a{display:inline-flex;align-items:center;min-height:36px;font-size:.86rem;color:var(--grey-2)}
.colophon .tm{max-width:62ch;line-height:1.6}

/* ---------- the sub-page shell ---------- */
.pg{padding-top:var(--nav-h);background:var(--bone)}
.pg :focus-visible{outline-color:var(--ink)}
.pg-wrap{width:100%;max-width:var(--shell);margin-inline:auto;padding-inline:var(--pad)}
.crumbs{position:relative;z-index:1;padding-top:clamp(1.3rem,3vw,2.1rem);font-size:.9rem}
.crumbs ol{display:flex;flex-wrap:wrap;align-items:center;gap:.2rem .5rem}
.crumbs li{display:flex;align-items:center;gap:.5rem;color:rgba(255,255,255,.64)}
.crumbs li + li::before{content:"/";color:rgba(255,255,255,.3)}
.crumbs a{display:inline-flex;align-items:center;min-height:32px;color:var(--blue-lit)}
.crumbs a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}

/* the band of night, from the top of the page to the hero's lower edge; its light is late */
.pg-hero{position:relative;isolation:isolate;color:#fff;display:grid;gap:clamp(1.6rem,4vw,3.2rem);align-items:center;padding-block:clamp(1rem,2.6vw,1.8rem) clamp(2.2rem,5vw,3.4rem)}
.pg-hero::before{content:"";position:absolute;z-index:-2;top:-13rem;bottom:0;left:50%;width:100vw;margin-left:-50vw;pointer-events:none;
  background:linear-gradient(180deg,var(--ink) 40%,#0B1426)}
@media (min-width:960px){.pg-hero.has-visual{grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr)}}
.pg-hero-copy{width:fit-content;max-width:100%;padding:clamp(1.35rem,3vw,2.3rem);
  background:linear-gradient(180deg,rgba(255,255,255,.09),rgba(255,255,255,.03) 45%,rgba(255,255,255,.05)),rgba(15,18,22,.4)}
.pg-hero h1{font-size:clamp(2.05rem,4.3vw,3.4rem);letter-spacing:-.045em;line-height:1.05;max-width:21ch;color:#fff}
.pg-lede{margin-top:1rem;font-size:clamp(1.08rem,1rem + .4vw,1.28rem);line-height:1.5;color:#D3D9E3;max-width:54ch;letter-spacing:-.011em}
.pg-lede a,.pg-meta a,.pg-hero-visual a:not(.btn):not(.src){color:var(--blue-lit);text-decoration:underline;text-underline-offset:3px}
.pg-cta{display:flex;flex-wrap:wrap;align-items:center;gap:.7rem 1.4rem;margin-top:1.6rem}
.pg-tel{display:inline-flex;align-items:center;min-height:44px;font-weight:600;color:var(--ink);text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.pg-meta{margin-top:1.1rem;font-size:.86rem;color:rgba(255,255,255,.64)}
.pg-hero :focus-visible,.crumbs :focus-visible{outline-color:#fff}
.pg-hero-visual{min-width:0}
.pg-hero-visual img{width:100%;height:auto}
.pg-hero-visual a:not(.btn){text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
/* on the band: a clear glass bezel drawn outside the screen (the pan's box is untouched) */
.pg-hero .th-scr,.pg-hero .pan-win{border-color:rgba(255,255,255,.34);
  box-shadow:0 0 0 6px rgba(255,255,255,.08),0 0 0 7px rgba(255,255,255,.2),0 36px 70px -28px rgba(0,0,0,.9),0 0 70px -16px rgba(61,123,255,.45)}
.pg-hero .viz .viz-cap,.pg-hero .viz-cap a,.pg-hero .pg-figure figcaption{color:rgba(255,255,255,.72)}
.pg-hero .viz-btn{color:#fff}
.pg-hero .pg-figure{margin:0;padding:.35rem clamp(1.1rem,2.6vw,1.7rem) 1.1rem}
.pg-hero .pg-figure figcaption:first-child{margin:.8rem 0 0;font-weight:600;color:#fff}
.pg-hero .facts{border-top:0;margin:0}
.pg-hero .facts > li{border-bottom-color:rgba(255,255,255,.1)}
.pg-hero .facts > li > b:first-child{color:#fff}
.pg-hero .facts span{color:#C7CFDB}
.nowrap{white-space:nowrap}

/* sections: a hairline over each, and room */
.pg-body > section,.pg-sec,.pg-faq,.pg-related{padding-block:clamp(2.1rem,5vw,3.4rem);border-top:1px solid var(--line)}
.pg-body h2,.pg-faq h2,.pg-related h2{font-size:clamp(1.45rem,2.4vw,2rem);letter-spacing:-.035em;line-height:1.12;margin-bottom:1rem;max-width:30ch}
.pg-body h3{font-size:1.16rem;letter-spacing:-.025em;margin:1.6rem 0 .5rem}
.pg-body h2 + h3{margin-top:.4rem}
.pg-body p,.pg-body li,.pg-faq-a p,.pg-faq-a li{color:#2A2F38;line-height:1.65;max-width:68ch}
.pg-body p{margin-bottom:.9rem}
.pg-body p:last-child{margin-bottom:0}
.pg-body strong,.pg-body b{color:var(--ink);font-weight:600}
.pg-body a:not(.btn),.pg-faq-a a{color:var(--blue-deep);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.pg-body ul:not([class]),.pg-body ol:not([class]),.pg-faq-a ul{list-style:disc;padding-left:1.25rem;margin:.3rem 0 1.1rem;display:grid;gap:.4rem}
.pg-body ol:not([class]){list-style:decimal}
.pg-lead{font-size:clamp(1.12rem,1rem + .45vw,1.32rem);line-height:1.5;color:var(--ink);max-width:58ch}
.pg-note{font-size:.9rem;color:var(--grey)}
.pg-body .pg-note{color:var(--grey)}
.src{font-size:.86rem;color:var(--grey)}
.pg-body a.src{color:var(--grey)}

/* two columns on a laptop, one on a phone: words and the visual that shows them.
   The grid gap is the only space between the two, so their own outer margins go. */
.pg-split{display:grid;gap:clamp(1.4rem,4vw,3rem);align-items:start}
@media (min-width:900px){.pg-split{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
.pg-split > *{margin-block:0}
.pg-split > * > :last-child{margin-bottom:0}

/* milk glass panes on the still pool (no backdrop blur: nothing moves under them) */
.pg-body .facts,.pg-table,.pg-body > section > ul:not([class]),.pg--legal .box,.pg-rows > li,.pg-faq details{
  background:linear-gradient(180deg,rgba(255,255,255,.82),rgba(255,255,255,.56));border-radius:22px;
  box-shadow:inset 0 1.5px 0 #fff,inset 0 0 0 1px rgba(255,255,255,.75),0 1px 2px rgba(15,18,22,.06),0 26px 54px -36px rgba(15,18,22,.42)}
.pg-body .facts,.pg-body > section > ul:not([class]){padding:.2rem clamp(1rem,2.4vw,1.5rem)}
.pg-body .facts > li:last-child,.pg-body > section > ul:not([class]) > li:last-child{border-bottom:0}
.pg-body > section > ul:not([class]){list-style:none;display:block;margin:.4rem 0 1.2rem}
.pg-body > section > ul:not([class]) > li{padding:.8rem 0;border-bottom:1px solid var(--line);max-width:none}
/* facts that belong to this page only: one row each, a hairline between */
.facts{border-top:1px solid var(--line);margin:1rem 0 1.4rem}
.pg-body .facts{border-top:0}
.facts > li,.facts > div{display:grid;grid-template-columns:minmax(0,13rem) minmax(0,1fr);gap:.3rem 1.6rem;padding:.9rem 0;border-bottom:1px solid var(--line);max-width:none}
.facts > li > b:first-child,.facts > li > .pic + b,.facts > div > dt{color:var(--ink);font-weight:600}
.facts dd{margin:0}
@media (max-width:640px){.facts > li,.facts > div{grid-template-columns:1fr}}
/* next to a visual the column is too narrow for a label beside the text: label over text */
.pg-split .facts > li,.pg-split .facts > div{grid-template-columns:1fr;gap:.2rem}
/* a list that ends its section, or a visual in the hero, draws no closing hairline: the
   next section's own hairline follows, and two rules with an empty band between read as one too many */
.pg-body > section > :is(.facts,.pg-rows,.pg-table):last-child,
.pg-body > section > .pg-split:last-child > * > :is(.facts,.pg-rows):last-child{margin-bottom:0}
.pg-body > section > :is(.facts,.pg-rows):last-child > li:last-child,
.pg-body > section > .pg-split:last-child > * > :is(.facts,.pg-rows):last-child > li:last-child,
.pg-hero-visual .facts:last-child > li:last-child{border-bottom:0}

/* tables scroll inside themselves on a phone, never the page */
.pg-table{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:1rem 0 1.4rem;padding:.3rem clamp(.85rem,2.4vw,1.5rem) .9rem}
.pg-table table{width:100%;border-collapse:collapse;font-size:.96rem}
.pg-table th,.pg-table td{text-align:left;vertical-align:top;padding:.75rem 1rem .75rem 0;border-bottom:1px solid var(--line);line-height:1.5;color:#2A2F38}
.pg-table thead th{font-size:.86rem;font-weight:600;color:var(--grey);border-bottom-color:rgba(15,18,22,.28)}
.pg-table tbody th{color:var(--ink);font-weight:600}
.pg-table caption{caption-side:bottom;text-align:left;padding-top:.6rem;font-size:.86rem;color:var(--grey)}
/* a link in a table cell gets a 24px target without making the row taller */
.pg-table th a,.pg-table td a{display:inline-block;min-width:32px;padding:3px 0;margin:-3px 0}
.pg-table tbody th .src{display:block;font-weight:400}

/* rows of links: hubs, "where it matters", related pages */
.pg-rows{display:grid;gap:.55rem;margin:1rem 0 .4rem}
.pg-rows > li{position:relative;display:grid;grid-template-columns:minmax(0,17rem) minmax(0,1fr) auto;gap:.2rem 1.6rem;align-items:baseline;padding:.9rem 3rem .9rem clamp(1rem,2.4vw,1.4rem);border-radius:18px;max-width:none}
.pg-rows a,.pg-body .pg-rows a{display:inline-flex;align-items:center;min-height:32px;font-family:"Archivo","Inter",sans-serif;font-weight:800;font-size:1.1rem;letter-spacing:-.03em;color:var(--ink);text-decoration:underline;text-decoration-color:rgba(15,18,22,.28);text-underline-offset:4px}
.pg-rows a::after{content:"";position:absolute;inset:0}
.pg-rows a:hover,.pg-body .pg-rows a:hover{color:var(--blue-deep)}
.pg-rows span{color:var(--grey);line-height:1.5}
.pg-rows small{color:var(--grey);font-size:.84rem;white-space:nowrap}
@media (max-width:760px){.pg-rows > li{grid-template-columns:1fr}}

/* a figure: a real image or an HTML figure, with a literal caption */
.pg-figure{margin:1.2rem 0}
.pg-figure img{width:100%;height:auto;border-radius:14px;border:1px solid var(--line)}
.pg-figure figcaption{margin-top:.6rem;font-size:.88rem;line-height:1.5;color:var(--grey);max-width:60ch}
/* a phone screenshot crop (540px wide): the same scale as the sample pan beside it */
.pg-figure.pg-shot{max-width:290px}

/* FAQ: native details, a hairline between */
.pg-faq-list{display:grid;gap:.55rem;max-width:860px}
.pg-faq details{padding-inline:clamp(1rem,2.4vw,1.4rem);border-radius:18px}
.pg-faq summary{display:flex;align-items:center;justify-content:space-between;gap:1.2rem;min-height:56px;padding:.85rem 0;cursor:pointer;list-style:none;
  font-family:"Archivo","Inter",sans-serif;font-weight:700;font-size:clamp(1.02rem,1.2vw,1.14rem);letter-spacing:-.025em;line-height:1.3;color:var(--ink)}
.pg-faq summary::-webkit-details-marker{display:none}
.pg-faq summary::marker{content:""}
.pg-faq summary::after{content:"+";flex:none;font-family:"Inter",sans-serif;font-weight:400;font-size:1.6rem;line-height:1;color:var(--blue-deep);transition:transform .2s var(--ease)}
.pg-faq details[open] summary::after{transform:rotate(135deg)}
.pg-faq summary:hover{color:var(--blue-deep)}
.pg-faq-a{padding:0 0 1.1rem}
.pg-faq-a p + p{margin-top:.7rem}

.pg-related .pg-rows{margin-bottom:0}

/* the end band: sapphire (its glass and the caustic are late) */
.pg-end{padding-block:clamp(2.8rem,6vw,4.4rem)}
.pg-end h2{font-size:clamp(1.55rem,3vw,2.3rem);letter-spacing:-.04em;max-width:24ch}
.pg-end p{margin-top:.7rem;color:rgba(255,255,255,.92);max-width:56ch;line-height:1.6}
.pg-end .pg-cta{margin-top:1.3rem}
.pg-end .pg-tel{color:#fff}
.pg-end :focus-visible{outline-color:#fff}
.pg > .pg-wrap:last-child{padding-bottom:clamp(3rem,7vw,5rem)}

@media (max-width:560px){.pg-cta .btn{width:100%}}

/* ---------- legal pages ---------- */
.pg--legal .pg-wrap{max-width:860px}
.pg--legal .pg-hero{padding-bottom:1.4rem}
.pg--legal .pg-hero h1{font-size:clamp(2rem,4.4vw,3.1rem)}
.pg--legal .pg-hero h1 span{color:rgba(255,255,255,.6);font-weight:600;font-stretch:100%}
.pg--legal .pg-lede{font-size:.96rem;line-height:1.6;max-width:68ch}
.pg--legal .pg-body h2{font-size:clamp(1.3rem,2.2vw,1.7rem);letter-spacing:-.03em;margin:2.4rem 0 .8rem}
.pg--legal .pg-body h2 span{color:var(--blue-deep);margin-right:.3rem}
.pg--legal .pg-body h3{font-size:1.1rem;margin:1.6rem 0 .5rem}
.pg--legal .pg-body p,.pg--legal .pg-body li{font-size:1.02rem;max-width:64ch}
.pg--legal .pg-body ul{list-style:disc;padding-left:1.3rem;margin:.4rem 0 1rem;display:grid;gap:.35rem}
.pg--legal .tos-clause b{color:var(--blue-deep);font-weight:600;margin-right:.25rem}
.pg--legal .box{padding:1.1rem 1.3rem;margin:1.2rem 0}
.pg--legal .box p:last-child{margin-bottom:0}
.pg--legal table{width:100%;border-collapse:collapse;font-size:.95rem;margin:.6rem 0 1.4rem}
.pg--legal th,.pg--legal td{text-align:left;padding:.65rem .7rem .65rem 0;border-bottom:1px solid var(--line);vertical-align:top;line-height:1.5}
.pg--legal th{font-weight:600;font-size:.86rem;color:var(--grey)}
/* the section index: plain links on one hairline band, not a row of pills */
.toc{display:flex;flex-wrap:wrap;gap:0 1.2rem;margin:0 0 1.2rem;padding:.6rem 0;border-block:1px solid var(--line)}
.pg-body .toc a{display:inline-flex;align-items:center;min-height:36px;font-size:.92rem;color:var(--blue-deep);text-decoration:none}
.pg-body .toc a:hover{text-decoration:underline}
.pg--legal .actions,.pg--error .actions{margin-top:0}

/* ---------- booking page and 404 ---------- */
.pg--book .pg-hero,.pg--error .pg-hero{padding-bottom:1.6rem}
.pg--error .pg-hero{padding-top:clamp(2.4rem,6vw,4.4rem)}
.book-inline{max-width:640px;margin-bottom:clamp(3rem,7vw,5rem)}
.book-fallback{margin-top:0}
/* without JavaScript the <noscript> calendar, phone and email take its place; the list is for a failed book.js */
html:not(.js) .book-fallback{display:none}
html:not(.js) .book-inline{margin:0}
.book-noscript{margin:1rem 0 clamp(3rem,7vw,5rem);color:var(--grey)}
.book-noscript a{color:var(--blue-deep);text-decoration:underline;text-underline-offset:3px}
.pg--error .pg-body{padding-block:clamp(1.8rem,4vw,2.6rem) clamp(3rem,7vw,5rem)}
.pg--book .pg-body,.pg--legal .pg-body{padding-top:clamp(1.6rem,4vw,2.4rem)}

/* ---------- the sticky bar on phones (book.js shows it after the hero) ---------- */
.sticky{display:none}
@media (max-width:759px){
  html.js .sticky{position:fixed;left:0;right:0;bottom:0;z-index:580;display:flex;align-items:center;gap:.6rem;
    padding:.65rem var(--pad) calc(.65rem + env(safe-area-inset-bottom));background:linear-gradient(180deg,rgba(24,28,36,.9),rgba(15,18,22,.92));border-top:1px solid rgba(255,255,255,.1);box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
    -webkit-backdrop-filter:blur(20px) saturate(180%);backdrop-filter:blur(20px) saturate(180%);transform:translateY(110%);visibility:hidden;
    transition:transform .35s var(--out),visibility 0s linear .35s}
  html.js .sticky.on{transform:none;visibility:visible;transition:transform .35s var(--out),visibility 0s}
  .sticky .btn{flex:1 1 auto;min-height:48px;padding:.6rem 1rem;font-size:.98rem}
  .sticky .btn:hover{transform:none}
  @media (max-width:360px){.sticky .btn{padding-inline:.7rem;font-size:.9rem}}
  .sticky-tel{flex:none;display:grid;place-items:center;width:48px;height:48px;border-radius:14px;color:#fff;
    border:1px solid rgba(255,255,255,.26);background:rgba(255,255,255,.08)}
  /* no bottom padding needed: the bar hides while #contact, .pg-end or the footer is in view,
     so it never covers the end of the page */
}

/* ---------- product visuals: the message thread and the sample pan (build/src/pages/README.md) ----------
   Static and complete by default. Motion only under .is-live, which assets/viz.js adds to one
   visual at a time; the items never leave the layout, so animating shifts nothing. */
.viz{margin:0;max-width:380px}
.viz .viz-cap{display:flex;align-items:flex-start;justify-content:space-between;gap:.8rem;margin-top:.5rem;font-size:.88rem;line-height:1.5;color:var(--grey)}
.viz-cap > span{padding-top:.7rem}
.viz-cap a{display:inline-block;padding:.5rem 0;margin:-.5rem 0;color:var(--grey);text-decoration:underline;text-underline-offset:3px}
/* the control exists (and holds its space) always; it shows on the one visual that moves */
.viz-btn{flex:none;min-width:48px;min-height:44px;padding:0 .15rem;font-size:.86rem;font-weight:600;color:var(--ink);
  text-decoration:underline;text-underline-offset:3px;visibility:hidden}
.viz-on .viz.is-live .viz-btn{visibility:visible}

.th-scr{overflow:hidden;border:1px solid var(--line);border-radius:22px;background:#fff}
.th-top{padding:.7rem 1rem .6rem;border-bottom:1px solid rgba(15,18,22,.08);text-align:center;line-height:1.3}
.th-top b{display:block;font-size:.95rem;font-weight:600;color:var(--ink)}
.th-top span{font-size:.8rem;color:var(--grey)}
.th-log{display:flex;flex-direction:column;gap:.5rem;margin:0;padding:.9rem .85rem 1rem;list-style:none}
/* li selectors carry .th-log so the prose rules of .pg-body (color, line-height, max-width) never reach a bubble */
.th-log > .th-sys{align-self:center;max-width:92%;text-align:center;font-size:.8rem;line-height:1.4;color:var(--grey)}
.th-log .th-sys b{display:block;font-weight:600;color:var(--ink)}
.th-log > .th-m{max-width:86%;margin:0;padding:.55rem .8rem .6rem;border-radius:17px;font-size:.92rem;line-height:1.42}
.th-log > .th-in{align-self:flex-start;border-bottom-left-radius:5px;background:var(--bone-2);color:var(--ink)}
.th-log > .th-out{align-self:flex-end;border-bottom-right-radius:5px;background:var(--blue);color:#fff}
.th-log .th-who{display:block;margin-bottom:.1rem;font-size:.76rem;line-height:1.35;color:var(--grey)}
.th-log .th-out .th-who{color:#DCE6FB}
/* a thread going live starts where the last item has landed (63% of the loop), holds the
   whole thread about five seconds, then builds up again under its first line, which stays */
.viz.is-live .th-a{opacity:0;animation:16s linear -10.1s infinite both}
.viz.is-live .a1{animation-name:th1}.viz.is-live .a2{animation-name:th2}.viz.is-live .a3{animation-name:th3}
.viz.is-live .a4{animation-name:th4}.viz.is-live .a5{animation-name:th5}.viz.is-live .a6{animation-name:th6}
.viz.is-live .th-sys.a1{animation:none;opacity:1}
.viz.is-live.is-paused .th-a,.viz.is-live.is-paused .pan-win img{animation-play-state:paused}
@keyframes th1{0%,2%{opacity:0;transform:translateY(6px)}5%,94%{opacity:1;transform:none}100%{opacity:0}}
@keyframes th2{0%,12%{opacity:0;transform:translateY(6px)}15%,94%{opacity:1;transform:none}100%{opacity:0}}
@keyframes th3{0%,24%{opacity:0;transform:translateY(6px)}27%,94%{opacity:1;transform:none}100%{opacity:0}}
@keyframes th4{0%,36%{opacity:0;transform:translateY(6px)}39%,94%{opacity:1;transform:none}100%{opacity:0}}
@keyframes th5{0%,48%{opacity:0;transform:translateY(6px)}51%,94%{opacity:1;transform:none}100%{opacity:0}}
@keyframes th6{0%,60%{opacity:0;transform:translateY(6px)}63%,94%{opacity:1;transform:none}100%{opacity:0}}

/* a tall real screenshot in a phone-shaped window, no bezel; live, it scrolls down and back */
.viz.pan{max-width:290px}
.pan-win{position:relative;container-type:inline-size;aspect-ratio:9/19.5;overflow:hidden;border:1px solid var(--line);border-radius:28px;background:#fff}
.pan-win img{display:block;width:100%;height:auto;max-width:none}
.viz.is-live .pan-win img{animation:pan var(--pan,24s) cubic-bezier(.45,0,.55,1) infinite alternate both}
@keyframes pan{0%,6%{transform:none}94%,100%{transform:translateY(calc(-100% + 216.667cqw))}}
@media (prefers-reduced-motion:reduce){.viz .th-a,.viz .pan-win img{animation:none!important;opacity:1!important;transform:none!important}}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .topbar,.topbar::before,.navlink,.navpanel a,.caret,.drawer,body.nav-open .drawer,.burger .bars i,.pg-faq summary::after{transition:none}
}

/* the About hero's photo */
.pg-hero .pg-figure.portrait{max-width:360px;margin:0 auto;padding:0}
.pg-hero .pg-figure.portrait figcaption{margin-top:.8rem;text-align:center;font-weight:600;color:rgba(255,255,255,.78)}
@media (max-width:759px){.pg-hero .pg-figure.portrait{max-width:250px}}

/* /pricing: each plan row leads with its app icon (as on the homepage cards) */
.plan-list a:has(.pic){display:flex;align-items:center;gap:.85rem;text-decoration:none}

/* fact rows with an app icon (2026-09-29): the icon, the label, the line; on a phone the
   line wraps under the label beside the icon */
.facts > li:has(> .pic){grid-template-columns:34px minmax(0,12rem) minmax(0,1fr);align-items:start;column-gap:1rem}
.facts > li > .pic{margin-top:-.2rem}
@media (max-width:759px){
  .facts > li:has(> .pic){grid-template-columns:34px minmax(0,1fr);row-gap:.15rem}
  .facts > li:has(> .pic) > :not(.pic){grid-column:2}
}
.pg-split .facts > li:has(> .pic){grid-template-columns:34px minmax(0,1fr)}
.pg-split .facts > li:has(> .pic) > :not(.pic){grid-column:2}
/* a table row's app icon (pricing, "What each piece is") */
.pg-table th[scope="row"]:has(.pic){display:flex;align-items:center;gap:.75rem}
.pg-table th .pic{width:30px;height:30px;border-radius:9px}
.pg-table th .pic svg{width:17px;height:17px}

/* glass chips (a short list of things, e.g. /pricing "Not included") and glass tiles (three
   facts with an icon each, e.g. /pricing "Texts, calls and your price"); motion.js lets
   them rise and the chips follow one another */
.gl-chips{display:flex;flex-wrap:wrap;gap:.55rem;margin:1rem 0 1.1rem;padding:0;list-style:none}
.gl-chips > li{display:inline-flex;align-items:center;gap:.5rem;min-height:40px;padding:.45rem .95rem .45rem .7rem;border-radius:999px;
  font-size:.95rem;font-weight:500;color:var(--ink);
  background:linear-gradient(180deg,rgba(255,255,255,.92),rgba(255,255,255,.66));
  box-shadow:inset 0 1px 0 #fff,inset 0 0 0 1px rgba(15,18,22,.08),0 1px 2px rgba(15,18,22,.06),0 8px 20px -14px rgba(3,18,70,.4)}
.gl-chips > li svg{width:14px;height:14px;flex:none;color:#8A8F98}
.gl-tiles{display:grid;gap:.8rem;margin:1rem 0 .4rem;padding:0;list-style:none}
@media (min-width:760px){.gl-tiles{grid-template-columns:repeat(3,minmax(0,1fr))}}
.gl-tiles > li{display:grid;align-content:start;gap:.35rem;padding:1.1rem 1.15rem 1.2rem;border-radius:20px;
  background:linear-gradient(180deg,rgba(255,255,255,.9),rgba(255,255,255,.62));
  box-shadow:inset 0 1.5px 0 #fff,inset 0 0 0 1px rgba(15,18,22,.07),0 1px 2px rgba(15,18,22,.06),0 18px 40px -26px rgba(3,18,70,.45)}
.gl-tiles > li .pic{margin-bottom:.45rem}
.gl-tiles > li b{font-size:1.05rem;color:var(--ink)}
.gl-tiles > li span:not(.pic){color:var(--grey);line-height:1.55}