/* The public site's tokens: the same cool off-white, hairlines and single
   azure accent as the workspace (portal.css), under the names this sheet and
   the reading pages have always used. developers.css, docs.css and the legal
   and support pages read these; none of them writes a colour of its own. */
:root{--paper:#fff;--canvas:#f7f9fd;--ink:#0d1926;--ink-2:#4a5a6d;--ink-3:#687789;--muted:#4a5a6d;--azure:#18b0fb;--azure-hover:#3dbdfc;--on-brand:#04121d;--blue-ink:#0b78b5;--brand-soft:#e8f6fe;--brand-line:#bfe6fc;--line:#e6ebf0;--line-2:#d8dfe7;--line-strong:#c3cdd8;--soft-line:#edf1f4;--surface-2:#f3f6f9;--surface-3:#ebeff4;--focus:#0b78b5;--ok:#237548;--ok-ink:#1d6340;--bad:#b33737;--bad-ink:#9a2f2f;--focus-ring:color-mix(in srgb,var(--azure) 28%,transparent);--shadow-card:0 1px 0 rgb(13 25 38 / .03);--shadow-pop:0 8px 24px -6px rgb(13 25 38 / .16),0 0 0 1px rgb(13 25 38 / .06);--ease:cubic-bezier(.2,0,0,1);--mono:ui-monospace,SFMono-Regular,Menlo,Consolas,'Liberation Mono',monospace;--radius:12px;--radius-control:8px;--page:1120px;--hero-line-azure:#18b0fb;--hero-line-slate:#5b7488;--hero-ease:cubic-bezier(.16,1,.3,1);--m-turf:#18b0fb;--m-walk:#0f9db1;--m-roof:#c2607f;--header-h:65px;font-family:Geist,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;color:var(--ink);background:var(--paper);font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
/* Dark, chosen with the switch in the footer and kept under the cm-theme key
   (templates/theme-head.html sets html[data-theme] before the first paint).
   The workspace's own dark values (portal.css) under this sheet's names: a
   cool deep blue-grey ground, panels one step up, low hairlines, azure lifted
   where it is text. Pages without the theme script never get the attribute,
   so they stay light. */
:root[data-theme=dark]{color-scheme:dark;--paper:#141b23;--canvas:#0d1319;--ink:#e6ecf3;--ink-2:#aebaca;--ink-3:#8a98aa;--muted:#aebaca;--azure-hover:#3dbdfc;--on-brand:#04121d;--blue-ink:#6fcdfc;--brand-soft:#0f2a3f;--brand-line:#1b4866;--line:#222c38;--line-2:#2c3846;--line-strong:#566a80;--soft-line:#1a222c;--surface-2:#11171e;--surface-3:#1c2530;--focus:#4cc3fd;--ok:#5bd197;--ok-ink:#86e0b2;--bad:#f28b7e;--bad-ink:#f5a79d;--focus-ring:rgb(76 195 253 / .34);--shadow-card:0 1px 0 rgb(0 0 0 / .2);--shadow-pop:0 12px 32px -8px rgb(0 0 0 / .6),0 0 0 1px rgb(255 255 255 / .06);background:var(--canvas)}
:root[data-theme=dark] img[src*="/assets/brand/mark.svg"]{content:url("/assets/brand/mark-dark.svg")}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:88px}
body{margin:0;min-width:320px;font-size:15px;line-height:1.6}
main{position:relative;z-index:1}
button,input{font:inherit}
button,a,input,summary{-webkit-tap-highlight-color:transparent}
button,a{touch-action:manipulation}
a{color:inherit;text-decoration:none}
button{color:inherit;cursor:pointer}
svg{flex:none}
img{display:block;max-width:100%}
button:focus-visible,a:focus-visible,input:focus-visible,summary:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
[hidden]{display:none!important}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.page-width{width:min(var(--page),calc(100% - 96px));margin-inline:auto}
.skip-link{position:fixed;top:12px;left:12px;background:var(--ink);color:var(--paper);padding:8px 14px;border-radius:8px;font-size:13px;font-weight:500;z-index:99;transform:translateY(-150%)}
.skip-link:focus{transform:translateY(0)}
.scroll-sentinel{position:absolute;top:0;left:0;width:1px;height:10px;pointer-events:none}

/* ------------------------------------------------------------------ header
   64px and transparent over the hero. Past the first 10px it becomes a
   floating bar on a desktop, a blurred sheet on a phone. The bar and the
   header keep the same total height in both states, so nothing below them
   moves when it changes. */
.site-header{position:sticky;top:0;z-index:20;border-bottom:1px solid transparent}
.site-header.is-scrolled{background:color-mix(in srgb,var(--canvas) 95%,transparent);border-bottom-color:var(--line)}
.header-inner{height:64px;width:min(var(--page),calc(100% - 96px));display:flex;align-items:center;gap:28px;border:1px solid transparent;border-radius:12px;transition:background-color .18s var(--ease),border-color .18s var(--ease),box-shadow .18s var(--ease)}
@media (min-width:768px){.site-header.is-scrolled{background:transparent;border-bottom-color:transparent;padding-top:8px}.site-header.is-scrolled .header-inner{width:min(920px,calc(100% - 96px));height:56px;padding-inline:14px 10px;border-color:var(--line);background:color-mix(in srgb,var(--canvas) 94%,transparent);box-shadow:0 8px 24px -12px rgb(13 25 38 / .14)}}
.brand{display:inline-flex;align-items:center;gap:10px;white-space:nowrap;font-size:20.5px;letter-spacing:-.02em;font-weight:600;color:var(--ink)}
.brand img{width:34px;height:34px}
.brand-secondary{font-weight:500;color:var(--azure)}
.desktop-nav{display:flex;align-items:center;gap:2px;margin-right:auto;font-size:14px;font-weight:500;color:var(--ink-2)}
.desktop-nav a{display:inline-flex;align-items:center;height:32px;padding:0 10px;border-radius:6px;transition:color .12s var(--ease),background-color .12s var(--ease)}
.desktop-nav a:hover{color:var(--ink);background:var(--surface-3)}
.desktop-nav a[aria-current=page]{color:var(--ink)}
.header-actions{display:flex;align-items:center;gap:8px;flex:none;margin-left:auto}
/* The phone menu: a toggle, then a full sheet under the bar with rows like a
   settings list. */
.menu-toggle{display:none;background:var(--paper);border:1px solid var(--line);border-radius:8px;width:40px;height:40px;align-items:center;justify-content:center;flex-direction:column;gap:4px;flex:none}
.menu-toggle span{width:16px;height:1.5px;background:var(--ink);border-radius:1px;transition:transform .18s var(--ease),opacity .18s var(--ease)}
.menu-toggle[aria-expanded=true] span:first-child{transform:translateY(5.5px) rotate(45deg)}
.menu-toggle[aria-expanded=true] span:nth-child(2){opacity:0}
.menu-toggle[aria-expanded=true] span:last-child{transform:translateY(-5.5px) rotate(-45deg)}
.mobile-nav{position:fixed;top:var(--header-h);left:0;right:0;bottom:0;z-index:19;display:flex;flex-direction:column;padding:8px 16px calc(16px + env(safe-area-inset-bottom,0px));background:var(--paper);overflow-y:auto;overscroll-behavior:contain;opacity:0;transform:translateY(-6px);transition:opacity .18s var(--ease),transform .18s var(--ease)}
.mobile-nav.is-open{opacity:1;transform:none}
.mobile-nav-links{display:grid}
.mobile-nav-links a{display:flex;align-items:center;justify-content:space-between;min-height:52px;padding:0 4px;border-bottom:1px solid var(--line);font-size:17px;font-weight:500;letter-spacing:-.01em;color:var(--ink)}
.mobile-nav-links a::after{content:"";width:7px;height:7px;margin-right:4px;border:solid var(--ink-3);border-width:1.5px 1.5px 0 0;transform:rotate(45deg)}
.mobile-nav-actions{margin-top:auto;padding-top:20px;display:grid;gap:8px}
html.nav-open{overflow:hidden}
html.nav-open body{position:fixed;left:0;right:0;width:100%}
html.nav-open .site-header{background:var(--paper);border-bottom-color:var(--line)}

/* -------------------------------------------------------------------- hero */
.hero{position:relative;overflow:hidden;min-height:62vh;display:flex;align-items:center;padding-block:56px 24px;transition:min-height .6s ease-out,margin-top .6s ease-out}
/* It carries page-width, but its own width:100% used to win on source order,
   so the hero was the only section not held to the page column. */
.hero-inner{position:relative;z-index:2;width:min(var(--page),calc(100% - 96px));margin-inline:auto}
.flicker-grid,.falling-pattern,.page-paths{transition:opacity .6s ease-out}

.hero-copy{text-align:center;max-width:820px;margin-inline:auto}
h1,h2,h3,p{margin-top:0}
h1{font-size:clamp(36px,4.6vw,60px);font-weight:600;line-height:1.04;letter-spacing:-.04em;margin-bottom:0;text-wrap:balance}
.hero-actions{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;margin-top:32px}

/* --------------------------------------------------------------- sections */
.section-spacing{padding-block:72px}
h2{font-size:clamp(28px,3vw,40px);line-height:1.1;letter-spacing:-.035em;font-weight:600;margin-bottom:0;text-wrap:balance}
.section-description{font-size:15px;line-height:1.6;color:var(--ink-2);max-width:480px;margin-bottom:0}
.section-heading{text-align:center;max-width:700px;margin:0 auto 32px}
.section-heading .section-description{margin:12px auto 0}
.faq-section.section-spacing{padding-top:8px}
.integrations-section.section-spacing{padding-top:24px}

/* The tools strip. Every logo sits in the same 30px tile at 18px, in its
   own brand colour; a tool with no free mark is its name alone, set as a
   wordmark in the same pill. None of them is a built-in integration: the
   line under the heading says how they connect. */
.integrations-layout{display:flex;flex-direction:column;align-items:center;gap:28px;text-align:center}
.integrations-head{display:grid;gap:8px;justify-items:center}
.integrations-layout h2{margin:0;max-width:720px;font-size:clamp(22px,2.2vw,28px);letter-spacing:-.03em;line-height:1.2}
.integrations-note{margin:0;font-size:14px;line-height:1.5;color:var(--ink-3)}
.integrations-owners{margin:-12px 0 0;font-size:12px;line-height:1.5;color:var(--ink-3)}
.marquee{--duration:60s;--gap:1rem;width:100%;display:flex;flex-direction:column;gap:12px;overflow:hidden;-webkit-mask-image:linear-gradient(to right,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(to right,transparent,#000 12%,#000 88%,transparent)}
.marquee-row{display:flex;gap:var(--gap);width:max-content;padding-block:1px}
.marquee-group{display:flex;gap:var(--gap);flex:none}
/* The AI row is short, so its group carries the list twice to stay wider than the
   column (no seam in the loop), and runs longer so both rows drift at one speed. */
.marquee-row.is-short{--duration:87s}
.marquee-item{display:inline-flex;align-items:center;gap:10px;flex:none;min-height:44px;padding:0 16px 0 7px;border:1px solid var(--line);border-radius:12px;font-size:14px;font-weight:500;letter-spacing:-.01em;color:var(--ink);white-space:nowrap;background:var(--paper);box-shadow:var(--shadow-card)}
.marquee-item.is-wordmark{padding-inline:16px;font-weight:620;letter-spacing:-.02em}
.marquee-icon{display:grid;place-items:center;width:30px;height:30px;flex:none;border-radius:8px;background:var(--surface-2);box-shadow:inset 0 0 0 1px var(--line)}
.marquee-mark{width:18px;height:18px;flex:none}
:root[data-theme=dark] .marquee-mark.is-mono{filter:invert(1)}
:root[data-theme=dark] .marquee-mark[src*="/assets/logos/claritystride.svg"]{content:url("/assets/logos/claritystride-dark.svg")}
:root[data-theme=dark] .marquee-mark[src*="/assets/logos/grok.svg"]{content:url("/assets/logos/grok-dark.svg")}
:root[data-theme=dark] .marquee-mark[src*="/assets/logos/homeworks.svg"]{content:url("/assets/logos/homeworks-dark.svg")}
:root[data-theme=dark] .marquee-mark[src*="/assets/logos/jobber.svg"]{content:url("/assets/logos/jobber-dark.svg")}
:root[data-theme=dark] .marquee-mark[src*="/assets/logos/servicetitan.svg"]{content:url("/assets/logos/servicetitan-dark.svg")}

/* ---------------------------------------------------------------- pricing */
.pricing-section{display:block}
.pricing-head{text-align:center;max-width:620px;margin:0 auto 32px}
.plan-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px;align-items:stretch}
.plan-fallback{grid-column:1/-1;text-align:center;font-size:14px;color:var(--ink-2);margin:0}
.plan-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;align-items:stretch;max-width:920px;margin-inline:auto}
.plan-card{position:relative;display:flex;flex-direction:column;padding:20px;border:1px solid var(--line);border-radius:12px;background:var(--paper);box-shadow:var(--shadow-card)}
.plan-card h3{font-size:14px;font-weight:600;letter-spacing:-.01em;line-height:20px;margin:0}
.plan-price{display:flex;align-items:baseline;gap:4px;margin:12px 0 16px;color:var(--ink)}
.plan-price strong{font-size:36px;font-weight:600;letter-spacing:-.04em;line-height:1;font-variant-numeric:tabular-nums}
.plan-price strong.is-words{font-size:22px;letter-spacing:-.02em}
.plan-price span{font-size:14px;color:var(--ink-3)}
.plan-features{list-style:none;margin:0 0 20px;padding:16px 0 0;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:9px}
.plan-features{flex:1 0 auto}
.plan-features li{display:flex;align-items:flex-start;gap:9px;font-size:13.5px;line-height:1.45;color:var(--ink-2)}
.plan-tick{width:16px;height:16px;flex:none;margin-top:1px;fill:none;stroke:var(--azure);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.plan-card>.button{margin-top:auto}
.plan-card.is-recommended{border-color:var(--azure);box-shadow:0 0 0 1px var(--azure)}
.plan-flag{position:absolute;top:20px;right:20px;font-size:12px;font-weight:500;line-height:20px;color:var(--blue-ink)}

/* -------------------------------------------------------------------- FAQ
   One glass card per question on an eight pixel gap: a readable ground, a lit
   rim that sweeps on hover, and a sheen. The pre-redesign look, restored at
   Chris's request on 2026-09-26. */
.faq-section{display:block;max-width:720px;margin-inline:auto}
@property --angle-1{syntax:"<angle>";inherits:false;initial-value:-75deg}
@property --angle-2{syntax:"<angle>";inherits:false;initial-value:-45deg}
.faq-list{display:grid;gap:8px}
.faq-list details{position:relative;border-radius:14px;overflow:hidden;background:color-mix(in srgb,var(--canvas) 92%,transparent);box-shadow:inset 0 1px 0 color-mix(in srgb,var(--paper) 70%,transparent),inset 0 -1px 0 color-mix(in srgb,var(--ink) 6%,transparent);transition:background-color .2s ease-out,--angle-1 .3s ease-out,--angle-2 .3s ease-out}
.faq-list details:hover{--angle-1:-125deg;--angle-2:-15deg}
.faq-list details::before{content:"";position:absolute;inset:0;z-index:2;border-radius:inherit;padding:1px;pointer-events:none;background:conic-gradient(from var(--angle-1) at 50% 50%,color-mix(in srgb,var(--ink) 14%,transparent) 0deg,color-mix(in srgb,var(--paper) 90%,transparent) 90deg,color-mix(in srgb,var(--ink) 14%,transparent) 180deg,color-mix(in srgb,var(--paper) 90%,transparent) 270deg,color-mix(in srgb,var(--ink) 14%,transparent) 360deg);-webkit-mask:linear-gradient(var(--ink) 0 0) content-box,linear-gradient(var(--ink) 0 0);mask:linear-gradient(var(--ink) 0 0) content-box,linear-gradient(var(--ink) 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.faq-list summary::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;mix-blend-mode:screen;opacity:0;transition:opacity .2s ease-out;background:radial-gradient(70% 140% at 50% var(--angle-2,-45deg),color-mix(in srgb,var(--paper) 70%,transparent),color-mix(in srgb,var(--paper) 0%,transparent) 70%)}
.faq-list details:hover summary::after,.faq-list details[open] summary::after{opacity:.7}
.faq-list summary{position:relative;list-style:none;display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:52px;padding:14px 16px;font-size:13px;font-weight:540;line-height:1.6;cursor:pointer;color:var(--ink)}
.faq-list summary::-webkit-details-marker{display:none}
.faq-plus{width:13px;height:13px;position:relative;z-index:1;flex:none;color:var(--ink-3)}
.faq-plus::before,.faq-plus::after{content:"";position:absolute;top:6px;left:1px;width:11px;height:1px;background:currentColor}
.faq-plus::after{transform:rotate(90deg);transition:transform .2s}
details[open] .faq-plus::after{transform:rotate(0)}
.faq-list details>p{position:relative;z-index:1;font-size:12px;line-height:1.9;color:var(--muted);margin:0;padding:0 16px 16px}
.faq-list details>p>a{color:var(--blue-ink);text-decoration:underline;text-underline-offset:3px}

/* ----------------------------------------------------------------- footer
   The call to action, then the link pills over a faint outlined wordmark in
   the same grid cell (sized to the column so it never spills), then the
   copyright line under one hairline. The pre-redesign look, restored at
   Chris's request on 2026-09-26. */
.site-footer{position:relative;z-index:1}
.footer-links{align-self:stretch;display:grid;container-type:inline-size;padding-block:8px}
.footer-links>*{grid-area:1/1;align-self:center;justify-self:center}
.footer-wordmark{z-index:0;display:block;width:100%;font-size:min(13.7cqw,176px);font-weight:650;letter-spacing:-.04em;line-height:.85;white-space:nowrap;text-align:center;color:color-mix(in srgb,var(--ink) 7%,transparent);user-select:none}
@supports (-webkit-text-stroke:1.5px red){.footer-wordmark{color:transparent;-webkit-text-stroke:1.5px color-mix(in srgb,var(--azure) 45%,transparent);-webkit-mask-image:linear-gradient(to bottom,var(--ink) 0,color-mix(in srgb,var(--ink) 15%,transparent) 100%);mask-image:linear-gradient(to bottom,var(--ink) 0,color-mix(in srgb,var(--ink) 15%,transparent) 100%)}}
.footer-inner{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;padding-block:32px 40px;text-align:center}
.footer-pills{position:relative;z-index:1;display:flex;flex-wrap:wrap;justify-content:center;gap:9px}
.footer-bottom{position:relative;z-index:1;margin-top:0;display:flex;align-items:center;justify-content:space-between;gap:16px;border-top:1px solid var(--line);padding:18px 0 22px;font-size:11px;color:var(--ink)}
.footer-mark{display:inline-flex;line-height:0}
.footer-end{display:flex;align-items:center;gap:10px}
/* Light or dark: a 52 by 28 pill, the sun on the left, the moon on the
   right, and a thumb that sits under whichever one is on. Light is the
   default; the choice is kept under cm-theme on this site. The sign-up page is on the
   app origin, which has its own storage, so it follows its own stored choice. */
.theme-switch{position:relative;display:inline-flex;align-items:center;justify-content:space-between;width:52px;height:28px;flex:none;padding:0 7px;border:1px solid var(--line-2);border-radius:999px;background:var(--surface-2);color:var(--ink-3);cursor:pointer;transition:background-color .2s var(--ease),border-color .2s var(--ease)}
.theme-switch:hover{border-color:var(--line-strong)}
.theme-switch svg{position:relative;z-index:1;width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;transition:color .2s var(--ease)}
.theme-switch-thumb{position:absolute;top:2px;left:2px;width:22px;height:22px;border-radius:50%;background:var(--paper);box-shadow:0 1px 2px rgb(13 25 38 / .18),0 0 0 1px var(--line);transition:transform .2s var(--ease)}
.theme-switch[aria-checked=false] .theme-switch-sun,.theme-switch[aria-checked=true] .theme-switch-moon{color:var(--ink)}
.theme-switch[aria-checked=true] .theme-switch-thumb{transform:translateX(24px)}
.theme-switch[aria-checked=true] .theme-switch-moon{fill:currentColor}
.footer-mark img{width:24px;height:26px}
/* The reading pages, support and legal close on one line: copyright, the
   same quiet links, the mark. */
.footer-bottom-wide{max-width:1440px;margin-inline:auto;padding:14px 24px calc(18px + env(safe-area-inset-bottom,0px));flex-wrap:wrap;justify-content:flex-start;gap:8px 10px;font-size:13px;color:var(--ink-2)}
.footer-bottom-wide .footer-pills{gap:4px}
.footer-bottom-wide .footer-pills .button-outline{background:transparent;border-color:transparent;box-shadow:none;color:var(--ink-2);font-weight:500}
.footer-bottom-wide .footer-pills .button-outline:hover{background:var(--surface-3);color:var(--ink)}
.footer-bottom-wide .footer-mark img{width:22px;height:22px}
.footer-bottom-wide .footer-pills{margin-inline:auto 0}
.footer-bottom-wide .footer-mark{order:-2}
.footer-bottom-wide>span{order:-1;margin-right:auto}
.footer-bottom-wide .theme-switch{order:1;margin-left:6px}

/* ---------------------------------------------------- support and legal
   Both sit in the reading chrome: a solid bar, a plain column. */
.form-field{margin-bottom:16px}
.form-field label{font-size:13px;font-weight:500;display:block;margin-bottom:6px;color:var(--ink)}
.form-field label span{color:var(--ink-3);font-weight:400}
.form-field input{display:block;width:100%;height:36px;padding:0 11px;border:1px solid var(--line-2);border-radius:8px;background:var(--paper);color:var(--ink);font-size:14px;box-shadow:0 1px 0 rgb(13 25 38 / .03);transition:border-color .12s var(--ease),box-shadow .12s var(--ease)}
.form-field input::placeholder{color:var(--ink-3)}
.form-field input:hover{border-color:var(--line-strong)}
.form-field input:focus,.support-form textarea:focus{outline:none;border-color:var(--azure);box-shadow:0 0 0 3px var(--focus-ring)}
.privacy-note{font-size:13px;line-height:1.6;color:var(--ink-2);margin:0}
.privacy-note a{color:var(--blue-ink);text-decoration:underline;text-decoration-color:var(--brand-line);text-underline-offset:3px}
.form-status{font-size:13px;line-height:1.6;padding:10px 12px;border-radius:8px;margin:12px 0 0;background:color-mix(in srgb,var(--ok) 8%,var(--paper));color:var(--ok-ink);border:1px solid color-mix(in srgb,var(--ok) 24%,var(--paper))}
.form-status.is-error{background:color-mix(in srgb,var(--bad) 7%,var(--paper));color:var(--bad-ink);border-color:color-mix(in srgb,var(--bad) 24%,var(--paper))}
body[data-chrome="reading"]{min-height:100dvh;display:flex;flex-direction:column}
body[data-chrome="reading"]>main{flex:1 0 auto;width:100%}
.support-section{display:grid;gap:40px;padding-block:64px 88px}
.support-intro h1{font-size:clamp(32px,4vw,44px);letter-spacing:-.04em;line-height:1.05;margin:0 0 14px}
.support-intro .section-description{font-size:16px;max-width:420px}
.support-intro .privacy-note{margin-top:24px}
.support-card{padding:24px;border:1px solid var(--line);border-radius:12px;background:var(--paper);box-shadow:var(--shadow-card)}
.support-form{display:block}
.support-form textarea{display:block;width:100%;padding:9px 11px;border:1px solid var(--line-2);border-radius:8px;background:var(--paper);color:var(--ink);font:inherit;font-size:14px;line-height:1.6;resize:vertical;min-height:132px;box-shadow:0 1px 0 rgb(13 25 38 / .03);transition:border-color .12s var(--ease),box-shadow .12s var(--ease)}
.support-form textarea::placeholder{color:var(--ink-3)}
.support-form textarea:hover{border-color:var(--line-strong)}
.support-submit{width:100%;margin-top:4px}
@media (min-width:900px){.support-section{grid-template-columns:minmax(0,1fr) minmax(0,480px);gap:64px;align-items:start;padding-block:96px 120px}}
.legal{max-width:720px;padding-block:56px 88px}
.legal h1{font-size:clamp(30px,3.6vw,40px);letter-spacing:-.035em;line-height:1.1;margin:0 0 10px}
.legal-updated{font-size:13px;color:var(--ink-3);margin:0 0 32px;font-variant-numeric:tabular-nums}
.legal h2{font-size:18px;letter-spacing:-.02em;line-height:1.3;margin:36px 0 10px}
.legal p{font-size:15px;line-height:1.75;color:var(--ink-2);margin:0 0 16px;max-width:68ch}
.legal a{color:var(--blue-ink);text-decoration:underline;text-decoration-color:var(--brand-line);text-underline-offset:3px}
.legal a:hover{text-decoration-color:currentColor}
.legal-links{padding-top:24px;margin-top:32px!important;border-top:1px solid var(--line)}

/* ----------------------------------------------------------- email capture
   templates/capture-block.html, at the foot of every landing and guide page. One column:
   the email, the consent box, the button, held to the reading width. The button is the white
   key, so Start free stays the one filled action on the page. */
.capture{max-width:760px;margin-block:32px 72px;padding:24px;border:1px solid var(--line);border-radius:12px;background:var(--paper);box-shadow:var(--shadow-card)}
.capture-title{font-size:20px;letter-spacing:-.02em;line-height:1.3;margin:0 0 16px}
.capture-form{display:grid;gap:14px;margin:0}
.capture-field label{display:block;font-size:13px;font-weight:500;margin-bottom:6px;color:var(--ink)}
.capture-field input{display:block;width:100%;max-width:440px;height:40px;padding:0 12px;border:1px solid var(--line-2);border-radius:8px;background:var(--paper);color:var(--ink);font:inherit;font-size:16px;box-shadow:0 1px 0 rgb(13 25 38 / .03);transition:border-color .12s var(--ease),box-shadow .12s var(--ease)}
.capture-field input::placeholder{color:var(--ink-3)}
.capture-field input:hover{border-color:var(--line-strong)}
.capture-field input:focus{outline:none;border-color:var(--azure);box-shadow:0 0 0 3px var(--focus-ring)}
.capture-field input[aria-invalid=true]{border-color:var(--bad)}
.capture-consent{display:flex;align-items:flex-start;gap:10px}
.capture-consent input{flex:none;width:18px;height:18px;margin:2px 0 0;accent-color:var(--azure);cursor:pointer}
.capture-consent input:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.capture-consent label{font-size:14px;line-height:1.55;color:var(--ink-2);cursor:pointer}
.capture-error{margin:0;font-size:13px;line-height:1.5;color:var(--bad-ink)}
.capture-submit{justify-self:start;min-width:120px}
.capture-done{margin:0;font-size:16px;font-weight:500;line-height:1.5;color:var(--ink)}
.capture-done:focus{outline:none}
.guide~.capture,.guide-index~.capture{margin-top:0}
@media (max-width:767px){.capture{padding:20px;margin-block:24px 48px}.capture-field input{max-width:none;height:44px}.capture-submit{width:100%;min-height:48px;font-size:16px}}

@supports ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){.faq-list details{background:color-mix(in srgb,var(--canvas) 55%,transparent);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}.site-header.is-scrolled{background:color-mix(in srgb,var(--canvas) 72%,transparent);-webkit-backdrop-filter:saturate(1.4) blur(12px);backdrop-filter:saturate(1.4) blur(12px)}@media (min-width:768px){.site-header.is-scrolled{background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none}.site-header.is-scrolled .header-inner{background:color-mix(in srgb,var(--canvas) 76%,transparent);-webkit-backdrop-filter:saturate(1.4) blur(12px);backdrop-filter:saturate(1.4) blur(12px)}}}

/* ---------------------------------------------------------------- buttons
   One button, the product's grammar: azure fill with dark ink for the thing
   we want pressed, a white key with a hairline for the rest. 36px, 32px and
   40px; 44px under a thumb. */
.button{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:36px;padding:0 14px;border:1px solid transparent;border-radius:8px;font:inherit;font-size:14px;font-weight:500;letter-spacing:-.005em;line-height:1.2;white-space:nowrap;cursor:pointer;color:var(--ink);transition:background-color .12s var(--ease),border-color .12s var(--ease),color .12s var(--ease),box-shadow .12s var(--ease)}
.button svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.button-sm{min-height:32px;padding-inline:12px;font-size:13px;border-radius:7px}
.button-sm svg{width:14px;height:14px}
.button-lg{min-height:40px;padding-inline:16px;font-size:14px}
.button-wide{width:100%}
.button-cool{background-color:var(--azure);color:var(--on-brand);border-color:color-mix(in srgb,var(--ink) 8%,var(--azure));box-shadow:inset 0 1px 0 color-mix(in srgb,var(--paper) 22%,transparent),0 1px 2px color-mix(in srgb,var(--ink) 12%,transparent)}
.button-cool:hover{background-color:var(--azure-hover)}
.button-cool:active{background-color:color-mix(in srgb,var(--ink) 8%,var(--azure))}
.button-outline{background:var(--paper);border-color:var(--line-2);color:var(--ink);box-shadow:0 1px 0 color-mix(in srgb,var(--ink) 4%,transparent)}
.button-outline:hover{background:var(--surface-2);border-color:var(--line-strong)}
.button-outline:active{background:var(--surface-3)}
.login-link.button-outline{background:transparent;border-color:transparent;box-shadow:none;color:var(--ink-2)}
.login-link.button-outline:hover{background:var(--surface-3);color:var(--ink)}
.button:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.button:disabled,.button[aria-disabled=true]{opacity:.5;cursor:not-allowed;filter:none}
@media (hover:none) and (pointer:coarse){.button{min-height:44px}.menu-toggle{width:44px;height:44px}.button-sm{min-height:44px}.button-cool:hover,.button-outline:hover{filter:none}.button-cool:hover{background-color:var(--azure)}.button-outline:hover{background:var(--paper);border-color:var(--line-2)}.desktop-nav a:hover{background:transparent}}
.trial-composer{position:relative;width:100%;max-width:620px;margin:24px auto 0;text-align:left}
.trial-suggestions{position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:6;margin:0;padding:6px;list-style:none;background:var(--paper);border:1px solid var(--line);border-radius:14px;box-shadow:0 12px 32px rgba(15,23,42,.10)}
.trial-suggestions li{padding:10px 12px;border-radius:9px;cursor:pointer;color:var(--ink);font-size:15px;line-height:1.35}
.trial-suggestions li:hover,.trial-suggestions li[aria-selected="true"]{background:var(--canvas)}
.trial-composer .composer{display:flex;align-items:center;gap:8px;min-height:56px;padding:0 8px 0 14px;border:1px solid var(--line);border-radius:28px;background:var(--paper);box-shadow:0 1px 2px color-mix(in srgb,var(--ink) 6%,transparent),0 8px 24px -16px color-mix(in srgb,var(--ink) 30%,transparent);transition:border-color .15s ease,box-shadow .15s ease}
.trial-composer .composer:focus-within{border-color:var(--azure)}
.trial-composer .address-field{flex:1 1 auto;min-width:0;display:flex;align-items:center}
.trial-composer .composer-pin{flex:none;width:20px;height:20px;margin-right:8px;fill:none;stroke:var(--muted);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.trial-composer input{flex:1 1 auto;min-width:0;width:auto;height:40px;padding:0;border:0;background:transparent;color:var(--ink);font:inherit;font-size:16px}
.trial-composer input:focus{outline:none}
.trial-composer input::placeholder{color:var(--muted)}
.composer-send{flex:none;display:grid;place-items:center;width:36px;height:36px;padding:0;border:0;border-radius:50%;background:var(--azure);color:var(--on-brand);cursor:pointer;transition:filter .2s ease-out}
.composer-send:hover{filter:brightness(1.1)}
.composer-send .icon{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.composer-note{margin:12px 0 0;font-size:13px;line-height:1.6;color:var(--ink);text-align:center}
.trial-progress{display:flex;flex-direction:column;align-items:center;gap:20px;width:100%;max-width:520px;margin-inline:auto;color:var(--ink)}
.trial-progress-address{margin:0;font-size:15px;font-weight:500;letter-spacing:-.2px;text-align:center}
.trial-stages{list-style:none;margin:0;padding:0;display:grid;gap:8px;width:100%;max-width:320px}
.trial-stage{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--muted)}
.trial-stage-mark{flex:none;display:grid;place-items:center;width:14px;height:14px}
.trial-stage-mark::before{content:"";width:8px;height:8px;border-radius:50%;background:color-mix(in srgb,var(--ink) 18%,transparent)}
.trial-stage.is-active{color:var(--ink)}
.trial-stage.is-active .trial-stage-mark::before{background:color-mix(in srgb,var(--ink) 55%,transparent)}
.trial-stage.is-done{color:var(--ink)}
/* Done is a check rather than a brighter dot, so a glance down the list reads
   as finished, working, waiting without anything having to move. */
.trial-stage.is-done .trial-stage-mark::before{display:none}
.trial-stage-mark svg{width:14px;height:14px;fill:none;stroke:var(--azure);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.trial-progress-note{margin:0;font-size:13px;line-height:1.6;text-align:center}
.trial-teaser{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.4;background-position:center;background-size:cover;filter:blur(6px)}
.trial-gate{width:100%;display:flex;justify-content:center}
.trial-gate-card{width:100%;max-width:420px;padding:24px;border-radius:16px;text-align:left;background:color-mix(in srgb,var(--paper) 92%,transparent);box-shadow:inset 0 1px 0 color-mix(in srgb,var(--paper) 70%,transparent),inset 0 -1px 0 color-mix(in srgb,var(--ink) 6%,transparent),0 20px 50px -28px color-mix(in srgb,var(--ink) 45%,transparent)}
.trial-gate-title{margin:0 0 16px;font-size:20px;font-weight:570;letter-spacing:-.5px}
.trial-gate-fields{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.trial-gate-card .form-field input{height:44px;font-size:16px}
.trial-gate-card .button{margin-top:4px}
.trial-gate-note{margin:12px 0 0;font-size:12px;line-height:1.6;color:var(--muted);text-align:center}
.trial-gate-note a{text-decoration:underline;text-underline-offset:2px}
.trial-result-host{width:100%}
.trial-result{display:grid;grid-template-columns:minmax(0,1fr);gap:24px;align-items:center;text-align:left;width:100%}
@media (min-width:1100px){.trial-result{grid-template-columns:62fr 38fr;gap:40px}}
.trial-result-image{position:relative;border-radius:14px;overflow:hidden;background:var(--canvas)}
.trial-result-image img{display:block;width:100%;height:auto}
.trial-result-overlay{position:absolute;inset:0;width:100%;height:100%}
.trial-result-overlay path{fill:color-mix(in srgb,var(--azure) 16%,transparent);stroke:var(--azure);stroke-width:3;stroke-linejoin:round}
.trial-result-overlay path.is-excluded{fill:none;stroke:var(--muted);stroke-dasharray:10 8}
.trial-result-address{margin:0;font-size:20px;font-weight:560;letter-spacing:-.6px}
.trial-result-state{margin:6px 0 0;font-size:13px;color:var(--azure)}
.trial-result-total{display:flex;align-items:baseline;gap:8px;margin:14px 0 0;color:var(--ink)}
.trial-result-total strong{font-size:42px;font-weight:580;line-height:1;letter-spacing:-2px;font-variant-numeric:tabular-nums}
.trial-result-total span{font-size:13px;color:var(--muted)}
.trial-result-layers{display:grid;gap:8px;margin-top:18px}
.trial-result-layer{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:13px;color:var(--ink)}
.trial-result-layer strong{font-weight:540;font-variant-numeric:tabular-nums}
.trial-result-layer.is-excluded{color:var(--muted)}
.trial-result-cta{margin-top:22px}
.hero[data-state=measuring] .hero-inner,.hero[data-state=gate] .hero-inner,.hero[data-state=result] .hero-inner{display:flex;flex-direction:column;align-items:center;gap:24px}
.hero[data-state=result]{min-height:auto;padding-block:64px}
.trial-gate-card{width:100%;max-width:560px;padding:32px;border-radius:18px;text-align:left;background:color-mix(in srgb,var(--paper) 92%,transparent);box-shadow:inset 0 1px 0 color-mix(in srgb,var(--paper) 70%,transparent),inset 0 -1px 0 color-mix(in srgb,var(--ink) 6%,transparent),0 24px 60px -30px color-mix(in srgb,var(--ink) 50%,transparent)}
.trial-gate-brand{display:flex;align-items:center;justify-content:center;gap:9px;margin-bottom:18px;font-size:19px;font-weight:650;letter-spacing:-.7px;color:var(--ink)}
.trial-gate-brand img{width:34px;height:34px}
.trial-gate-title{margin:0 0 22px;font-size:24px;font-weight:570;letter-spacing:-.7px;text-align:center}
.trial-gate-fields{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.trial-gate-card .form-field{margin-bottom:14px}
.trial-gate-card .form-field label{font-size:13px;font-weight:530;color:var(--ink);margin-bottom:6px}
.trial-gate-card .form-field input{height:44px;font-size:16px;border-radius:8px;border-color:var(--line)}
.trial-gate-card .form-field input:focus{outline:none;border-color:var(--azure);box-shadow:0 0 0 3px color-mix(in srgb,var(--azure) 22%,transparent)}
.trial-gate-submit{margin-top:6px;transition:transform .2s ease-out,filter .2s ease-out,box-shadow .2s ease-out}
.trial-gate-submit:hover{transform:scale(1.02);box-shadow:0 0 0 2px var(--canvas),0 0 0 4px color-mix(in srgb,var(--azure) 50%,transparent)}
.trial-gate-submit:active{transform:scale(.98)}
.trial-gate-terms{margin:16px 0 0;font-size:12px;line-height:1.7;color:var(--muted);text-align:center}
.trial-gate-terms a{color:var(--ink);text-decoration:underline;text-underline-offset:2px}
.trial-gate-size{margin:-14px 0 22px;font-size:14px;color:var(--muted);text-align:center;font-variant-numeric:tabular-nums}
.trial-result-image{position:relative;border-radius:16px;overflow:hidden;background:var(--canvas);aspect-ratio:2040 / 1500;min-height:560px}
.trial-result-image img{display:block;width:100%;height:100%;object-fit:cover;object-position:center}
.trial-result-state{display:flex;align-items:center;gap:8px;margin:8px 0 0;font-size:13px;color:var(--azure)}
.trial-result-dot{width:8px;height:8px;border-radius:50%;background:currentColor;flex:none}
.trial-result-total strong{font-size:56px}
.trial-result-total-label{margin:14px 0 0;font-size:13px;color:var(--muted)}
.trial-result-total-label+.trial-result-total{margin-top:4px}
.trial-result-layer{display:grid;grid-template-columns:auto 1fr auto auto;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--line);font-size:13px;color:var(--ink)}
.trial-result-layer:last-child{border-bottom:0}
.trial-result-check{width:15px;height:15px;border-radius:4px;border:1px solid var(--line);background:var(--paper);flex:none;position:relative}
.trial-result-check.is-on{background:var(--azure);border-color:var(--azure)}
.trial-result-check.is-on::after{content:"";position:absolute;left:4px;top:1px;width:4px;height:8px;border:solid var(--on-brand);border-width:0 1.6px 1.6px 0;transform:rotate(45deg)}
.trial-result-layer-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.trial-result-layer strong{font-weight:560;font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;text-align:right}
.trial-result-layer em{font-style:normal;font-size:11px;color:var(--muted)}
.trial-result-layer.is-excluded .trial-result-layer-name,.trial-result-layer.is-excluded strong{color:var(--muted)}
.honeypot{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
.honeypot{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
.page-paths{position:fixed;inset:0;z-index:0;pointer-events:none;width:100%;height:100%;--wash:.5}
.page-paths path{fill:none;stroke:var(--ink);stroke-dasharray:.3 1;stroke-opacity:calc(var(--ink-alpha) * var(--wash) * .3)}
.page-paths path.path-accent{stroke:var(--azure)}
.hero h1 .word{display:inline-block}
.hero h1 .letter{display:inline-block;opacity:1}
.hero h1.is-shown .letter{opacity:1}
@media (prefers-reduced-motion:no-preference){.page-paths path{animation:path-flow var(--flow) linear var(--lag) infinite}@keyframes path-flow{0%{stroke-dasharray:.3 1;stroke-dashoffset:0;stroke-opacity:calc(var(--ink-alpha) * var(--wash) * .3)}50%{stroke-dasharray:1 1;stroke-dashoffset:-1;stroke-opacity:calc(var(--ink-alpha) * var(--wash) * .6)}100%{stroke-dasharray:.3 1;stroke-dashoffset:0;stroke-opacity:calc(var(--ink-alpha) * var(--wash) * .3)}}.hero h1.is-shown .letter{animation:letter-blur .6s cubic-bezier(.22,1,.36,1) var(--rise) both;will-change:filter,opacity}@keyframes letter-blur{from{opacity:0;filter:blur(12px)}to{opacity:1;filter:blur(0)}}.trial-gate-card{animation:gate-rise .6s cubic-bezier(.22,1,.36,1) both}@keyframes gate-rise{from{opacity:0;transform:translateY(25px)}to{opacity:1;transform:none}}.marquee-row{animation:marquee var(--duration) linear infinite}.marquee-row.is-reversed{animation-direction:reverse}.marquee:hover .marquee-row{animation-play-state:paused}@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(calc(-50% - var(--gap) / 2))}}}
@media (min-width:1550px){.hero{padding-block:72px 56px}}
@media (max-width:1200px){.page-width{width:calc(100% - 64px)}.header-inner{width:calc(100% - 64px)}.site-header.is-scrolled .header-inner{width:min(920px,calc(100% - 64px))}}
@media (max-width:1000px){.header-inner{gap:16px}.plan-card{padding:18px}.plan-price strong{font-size:32px}}
/* A phone: 16px gutters, a 56px bar, rows and cards at full width, every
   target a thumb can hit. It should feel like an app, not a shrunk page. */
@media (max-width:767px){:root{--header-h:57px}.site-header.is-scrolled{background:color-mix(in srgb,var(--canvas) 97%,transparent);-webkit-backdrop-filter:saturate(1.4) blur(16px);backdrop-filter:saturate(1.4) blur(16px)}.site-header.is-scrolled .header-inner{width:calc(100% - 32px)}.mobile-nav{bottom:auto;max-height:calc(100dvh - var(--header-h));border-bottom:1px solid var(--line);box-shadow:0 18px 32px -16px rgb(13 25 38 / .22)}.mobile-nav-links a{min-height:56px}.mobile-nav-actions{margin-top:0;padding-top:16px}.footer-links{display:flex;flex-direction:column-reverse;align-items:center;gap:20px;padding-block:0}.footer-links>*{grid-area:auto}.footer-wordmark{font-size:13.7cqw;line-height:1}html{scroll-padding-top:72px}.page-width{width:calc(100% - 32px)}.header-inner{width:calc(100% - 32px);height:56px;gap:10px;justify-content:space-between;padding-inline:0}.desktop-nav{display:none}.header-actions{gap:8px}.header-actions>.button{display:none}.header-actions .login-link{display:none}.menu-toggle{display:flex}.brand{font-size:19px;gap:9px}.brand img{width:31px;height:31px}.hero{padding-block:40px 24px;min-height:auto}h1{font-size:clamp(32px,9vw,38px);letter-spacing:-.035em;line-height:1.06}.hero-actions{margin-top:24px}.hero-actions .button{min-height:48px;padding-inline:20px;font-size:16px}.section-spacing{padding-block:48px}h2{font-size:clamp(26px,7.4vw,30px)}.integrations-layout{gap:22px}.integrations-layout h2{font-size:22px;max-width:320px}.integrations-note{font-size:13px}.marquee{--gap:.5rem;gap:8px}.marquee-item{font-size:13px;min-height:40px;padding:0 12px 0 5px;gap:8px}.marquee-item.is-wordmark{padding-inline:12px}.marquee-icon{width:28px;height:28px;border-radius:7px}.marquee-mark{width:16px;height:16px}.pricing-head{margin-bottom:24px}.plan-grid{grid-template-columns:1fr;gap:12px;max-width:520px}.plan-card{padding:20px}.plan-card>.button{min-height:48px;font-size:15px}.faq-list summary{font-size:14px;min-height:52px}.faq-list details>p{font-size:13px}.footer-inner{padding-block:24px 32px}.footer-links{margin-top:20px}.footer-pills{gap:8px}.footer-bottom-wide{padding-inline:16px}.footer-bottom-wide .footer-pills{margin:4px 0 0;order:2;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;width:100%}.footer-bottom-wide .footer-pills .button{width:100%}.footer-bottom{font-size:12px;padding-bottom:calc(20px + env(safe-area-inset-bottom,0px))}.trial-gate-fields{grid-template-columns:1fr}.trial-gate-card{padding:22px}.trial-gate-title{font-size:21px}.trial-result-image{min-height:0}.trial-composer .composer{min-height:52px;padding:0 6px 0 12px;gap:6px}.trial-result-total strong{font-size:34px}.support-section{padding-block:40px 64px;gap:28px}.support-card{padding:20px}.legal{padding-block:40px 64px}.legal p{font-size:16px}}
@media (max-width:450px){.footer-inner{padding-block:24px 24px}.footer-links{margin-top:16px}.footer-bottom:not(.footer-bottom-wide){gap:10px}}
@media (max-width:350px){.hero-actions{flex-direction:column}.footer-bottom-wide .footer-pills{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.page-paths path{stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:calc(var(--ink-alpha) * var(--wash) * .3)}.hero h1 .letter{transform:none;opacity:1}*,*::before,*::after{animation:none!important;transition:none!important}}