/* Bloomrel public site, "Daylight": one light theme, one accent (green #22c55e and its steps). Radius: controls and tags are pills, outer surfaces 28px, inner surfaces 20px, a bubble's tail 6px. Hover lives only in pointer-gated media blocks. The Figtree face lives in figtree.css, linked only when the font file is present (it ships in public/fonts); that file also sets --w-heavy to 800. Without it the heavy weight is 700, because 800 in a system font (Segoe UI, Roboto) snaps to Black and reads far heavier than Figtree 800. One rule per line: tests read this file as text. */
:root{--bg:#f3f6f7;--surface:#fcfdfd;--sunk:#e8eef0;--line:#d5dee1;--line-strong:#778a90;--ink:#07181d;--ink-2:#33464c;--muted:#52656b;--placeholder:#5d7076;--unspoken:#5d7076;--bar-rest:#93a6ab;--green:#22c55e;--green-hover:#4ade80;--green-50:#f0fdf4;--green-100:#dcfce7;--green-200:#bbf7d0;--green-300:#86efac;--green-700:#15803d;--green-800:#166534;--danger:#8f2418;--danger-50:#fde8e6;--danger-200:#f4c7c1;--coral:var(--danger);--navy-hover:#12313a;--r-pill:999px;--r-card:28px;--r-inner:20px;--r-tail:6px;--shadow-card:0 1px 2px rgb(7 24 29 / .05),0 28px 56px -28px rgb(7 24 29 / .22);--shadow-green:inset 0 1px 0 rgb(255 255 255 / .3),0 10px 24px -12px rgb(21 128 61 / .7);--ease-out:cubic-bezier(.23,1,.32,1);--font:"Figtree",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;--gutter:clamp(16px,4vw,40px);--maxw:1200px;--bleed:max(var(--gutter),calc((100% - var(--maxw)) / 2));--section-y:clamp(72px,9vw,128px);--open-top:clamp(24px,4vw,56px);--h1:clamp(2.5rem,1.3rem + 3.2vw,4rem);--h2:clamp(2.125rem,1.25rem + 2.7vw,3.375rem);--lead:clamp(1.1875rem,1.05rem + .45vw,1.3125rem);--sec-lead:clamp(1.125rem,1.02rem + .3vw,1.25rem);--glow:radial-gradient(640px 460px at 84% 240px,rgb(34 197 94 / .11),transparent 70%),radial-gradient(520px 380px at 6% 0,rgb(232 238 240 / .9),transparent 70%);color-scheme:light}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none !important}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:88px}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:clip}
img,svg{display:block}
a{color:inherit;text-decoration-thickness:2px;text-underline-offset:4px;text-decoration-color:var(--green)}
h1,h2,h3,h4{margin:0;font-weight:var(--w-heavy,700);color:var(--ink);text-wrap:balance}
/* Chromium balances only up to a <br>. A second sentence in an em is its own block and balances; a heading with a break and no em wraps "pretty" instead, so the words after the break avoid a one-word last line. */
h1:has(br):not(:has(em)),h2:has(br):not(:has(em)){text-wrap:pretty}
p,ul,ol{margin:0}
p,li{text-wrap:pretty}
h1 em,h2 em{display:block;font-style:normal;font-weight:500;letter-spacing:-.03em;text-wrap:balance}
/* Balanced and "pretty" wrapping take a hyphen as the best split, so a short bold line on a phone would read "hang-" / "ups". A compound in a short line (a question, a label, a list item, a table cell, fine print) keeps its halves together. It is an inline block as well, because Chromium balances badly around a plain no-wrap span: the calculator label at 390 read "Unanswered" alone on its first line. In a flex summary or label the whole line sits in one span, or each piece would become its own flex item. */
.nowrap{display:inline-block;white-space:nowrap}
button,input,select{font:inherit}
:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
::selection{background:var(--green-200);color:var(--ink)}
.skip{position:absolute;left:16px;top:-80px;z-index:50;padding:12px 20px;border-radius:var(--r-pill);background:var(--ink);color:var(--bg);font-weight:700;text-decoration:none}
.skip:focus{top:12px}
.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}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.hp{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}
a[href^="tel:"]{white-space:nowrap}
.site-shell{display:flex;flex-direction:column;min-height:100vh}
main{flex:1 0 auto;position:relative;isolation:isolate}
.site-header,.site-footer,main>section:not(.next-step){padding-inline:var(--bleed)}
main>section{padding-block:var(--section-y)}
main>section+section{padding-top:0}
main>section:first-child{padding-top:var(--open-top)}
/* The opening glow is painted on main, 820px tall, so it fades out fully even above a short opening section. Home keeps the hero's own glow. */
main::before{content:"";position:absolute;inset:0 0 auto;height:820px;background:var(--glow);z-index:-1;pointer-events:none}
.page-home main::before{display:none}
.eyebrow{display:inline-flex;align-items:center;padding:7px 14px;border-radius:var(--r-pill);background:var(--green-100);color:var(--green-800);font-size:15px;font-weight:700;line-height:1.2}
.eyebrow+h1,.eyebrow+h2{margin-top:22px}
.hero h1,.page-intro h1,.section-heading h1,.contact-copy h1,.notice-page.not-found h1{font-size:var(--h1);line-height:1.03;letter-spacing:-.036em}
.section-heading h2,.site-explore>h2,.value-copy h2,.proof-copy h2,.faq-title h2,.notice-page h1{font-size:var(--h2);line-height:1.04;letter-spacing:-.034em}
.section-heading>p,.value-copy>p,.proof-copy>p,.contact-copy>p{margin-top:22px;max-width:58ch;font-size:var(--sec-lead);line-height:1.55;color:var(--ink-2)}
.pill-button,.outline-button{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 26px;border:0;border-radius:var(--r-pill);font-size:17px;font-weight:700;line-height:1;white-space:nowrap;text-decoration:none;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:transform 160ms var(--ease-out),background-color 180ms ease,box-shadow 180ms ease}
.pill-button{background:var(--green);color:var(--ink);box-shadow:var(--shadow-green)}
.pill-button.dark-button{background:var(--ink);color:var(--bg);box-shadow:none}
.pill-button.small{min-height:44px;padding:0 20px;font-size:15.5px}
.outline-button{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--line-strong)}
.pill-button svg,.outline-button svg{width:20px;height:20px;flex:none}
.pill-button:active:not(:disabled),.outline-button:active:not(:disabled){transform:scale(.97)}
.pill-button:disabled,.outline-button:disabled{opacity:.6;cursor:default}
.text-link{display:inline-flex;align-items:center;min-height:44px;font-weight:700;color:var(--ink);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:6px;text-decoration-color:var(--green)}
p .text-link{display:inline;min-height:0}
@media (hover:hover) and (pointer:fine){.pill-button:not(:disabled):hover{background:var(--green-hover)}.pill-button.dark-button:not(:disabled):hover{background:var(--navy-hover)}.outline-button:not(:disabled):hover{background:var(--sunk)}.text-link:hover,main p a:hover{text-decoration-color:var(--ink)}}
.site-header{position:sticky;top:0;z-index:20;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:16px;min-height:73px;background:var(--bg);border-bottom:1px solid var(--line)}
.brand{display:inline-flex;align-items:center;min-height:44px;color:var(--ink);text-decoration:none;justify-self:start}
.brand-lockup{display:inline-flex;align-items:center;gap:10px}
.brand-glyph{width:34px;height:34px;flex:none}
.brand-word{font-size:21px;font-weight:var(--w-heavy,700);letter-spacing:-.02em;line-height:1}
.nav{display:flex;gap:2px;padding:4px;border-radius:var(--r-pill);background:var(--sunk)}
.nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 18px;border-radius:var(--r-pill);font-size:15.5px;font-weight:600;color:var(--ink-2);text-decoration:none;white-space:nowrap;transition:background-color 180ms ease,color 180ms ease}
.nav a[aria-current="page"]{background:var(--surface);color:var(--ink);box-shadow:0 1px 2px rgb(7 24 29 / .08),0 0 0 1px var(--line)}
.header-actions{display:flex;align-items:center;gap:8px;justify-self:end}
.header-login{display:inline-flex;align-items:center;min-height:44px;padding:0 14px;font-size:15.5px;font-weight:700;color:var(--ink);text-decoration:none}
.mobile-menu{display:none;position:relative}
.mobile-menu summary{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border-radius:var(--r-pill);background:var(--sunk);font-size:15.5px;font-weight:700;list-style:none;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:transform 160ms var(--ease-out)}
.mobile-menu summary::-webkit-details-marker{display:none}
.mobile-menu summary:active{transform:scale(.97)}
.menu-icon{display:block;position:relative;width:14px;height:10px}
.menu-icon::before,.menu-icon::after{content:"";position:absolute;left:0;right:0;height:2px;border-radius:2px;background:currentColor;transition:transform 200ms var(--ease-out)}
.menu-icon::before{top:1px}
.menu-icon::after{bottom:1px}
.mobile-menu[open] .menu-icon::before{transform:translateY(3px) rotate(45deg)}
.mobile-menu[open] .menu-icon::after{transform:translateY(-3px) rotate(-45deg)}
.mobile-nav{position:absolute;right:0;top:calc(100% + 10px);display:grid;gap:2px;width:min(320px,calc(100vw - 32px));max-height:calc(100dvh - 84px);overflow-y:auto;overscroll-behavior:contain;padding:10px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);box-shadow:var(--shadow-card)}
.mobile-nav a{display:flex;align-items:center;min-height:48px;padding:0 16px;border-radius:var(--r-pill);font-weight:600;color:var(--ink);text-decoration:none}
.mobile-nav a[aria-current="page"]{background:var(--green-100);color:var(--green-800);font-weight:700}
.mobile-menu[open] .mobile-nav{animation:pop 200ms var(--ease-out) both;transform-origin:top right}
@media (hover:hover) and (pointer:fine){.nav a:not([aria-current]):hover{color:var(--ink);background:rgb(252 253 253 / .6)}.header-login:hover{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:6px;text-decoration-color:var(--green)}}
.hero{display:grid;grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr);gap:clamp(40px,5vw,72px);align-items:start;padding-bottom:clamp(56px,6.5vw,88px)}
main>.hero:first-child{background:radial-gradient(640px 460px at 84% 34%,rgb(34 197 94 / .11),transparent 70%),radial-gradient(520px 380px at 6% 0%,rgb(232 238 240 / .9),transparent 70%)}
.hero-copy{padding-top:clamp(0px,1.8vw,26px)}
.hero-accent{color:var(--green-700)}
.hero-intro{margin-top:22px;max-width:35ch;font-size:var(--lead);line-height:1.5;color:var(--ink-2)}
.hero-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px 26px;margin-top:32px}
.hero-cta .i-close{display:none}
.hero-cta[aria-expanded="true"] .i-phone{display:none}
.hero-cta[aria-expanded="true"] .i-close{display:block}
.hero-cta[aria-expanded="true"]{background:var(--sunk);color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--line)}
@media (hover:hover) and (pointer:fine){.hero-cta[aria-expanded="true"]:hover{background:var(--line)}}
.callback-form{display:grid;gap:18px}
.hero-callback{margin-top:28px;max-width:560px;padding:24px;scroll-margin-bottom:24px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);box-shadow:var(--shadow-card);transition:opacity 240ms var(--ease-out),transform 240ms var(--ease-out)}
@starting-style{.hero-callback{opacity:0;transform:translateY(-6px)}}
.callback-head strong,.callback-head h3{display:block;font-size:18px;font-weight:var(--w-heavy,700);line-height:1.3;letter-spacing:-.01em;color:var(--ink)}
.callback-head span,.callback-head p{display:block;margin-top:4px;font-size:15px;color:var(--muted)}
.field-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px}
.callback-form label,.contact-form label{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px;font-size:15px;font-weight:700;color:var(--ink)}
.contact-form label>span{font-weight:400;color:var(--muted)}
.callback-form label>input,.contact-form label>input,.contact-form label>select{flex:1 1 100%}
.callback-form input,.contact-form input,.contact-form select{width:100%;min-height:52px;padding:0 20px;font-weight:500;color:var(--ink);background-color:var(--surface);border:1.5px solid var(--line-strong);border-radius:var(--r-pill);transition:border-color 160ms ease}
.hero-callback input{font-size:17px}
.contact-form input,.contact-form select{font-size:17px}
.callback-form input::placeholder,.contact-form input::placeholder{color:var(--placeholder);opacity:1}
.callback-form input:focus-visible,.contact-form input:focus-visible,.contact-form select:focus-visible{outline:3px solid var(--ink);outline-offset:2px;border-color:var(--ink)}
/* A number the form turned back is marked on the field itself, not only in the note under "Call me". */
.callback-form input[aria-invalid="true"]{border-color:var(--danger)}
.callback-foot{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px}
.callback-foot>span,.form-fine{flex:1 1 220px;font-size:14px;line-height:1.45;color:var(--muted)}
.contact-form output{display:block;white-space:pre-line;overflow-wrap:anywhere;padding:16px 18px;border-radius:var(--r-inner);background:var(--bg);border:1px solid var(--line);color:var(--ink);font-size:15.5px;line-height:1.55}
.contact-form output:empty{display:none}
.callback-form output{display:block;scroll-margin-bottom:24px;text-wrap:pretty;padding:12px 18px;border-radius:var(--r-inner);border:1px solid var(--green-200);background:var(--green-50);color:var(--green-800);font-size:15.5px;font-weight:700;line-height:1.5;white-space:normal}
.callback-form output:empty{display:none}
.callback-form output[data-state]{animation:note-in 200ms var(--ease-out)}
.callback-form output[data-state="error"]{color:var(--coral)}
.callback-form output[data-state="error"]{background:var(--danger-50);border-color:var(--danger-200)}
/* A sent note takes focus from the script (it is never a Tab stop) and keeps the approved look: no ring. */
.callback-form output:focus{outline:none}
.callback-form.sent .field-row,.callback-form.sent>label,.callback-form.sent .callback-foot,.callback-form.sent .callback-head span,.callback-form.sent .callback-head p{display:none}
.call-player{position:relative;display:grid;gap:16px;min-width:0;padding:20px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);box-shadow:var(--shadow-card)}
.player-head{display:flex;align-items:center;gap:12px;padding:2px 4px 0}
.player-head>div{min-width:0}
.player-avatar{display:grid;place-items:center;flex:none;width:44px;height:44px;border-radius:50%;background:var(--ink)}
.player-avatar svg{width:32px;height:32px}
.player-title{font-size:18px;line-height:1.2;letter-spacing:-.01em}
.player-sub{margin-top:2px;font-size:14.5px;line-height:1.3;color:var(--muted)}
.player-status{margin-left:auto;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-width:8.4em;padding:6px 12px;border-radius:var(--r-pill);background:var(--sunk);color:var(--ink-2);font-size:13.5px;font-weight:700;line-height:1.2;white-space:nowrap}
.player-pulse{display:none;width:8px;height:8px;border-radius:50%;background:var(--green-700)}
.call-player[data-state="playing"] .player-status{background:var(--green-100);color:var(--green-800)}
.call-player[data-state="playing"] .player-pulse{display:block;animation:pulse 1.4s ease-in-out infinite}
.call-player[data-state="error"] .player-status{background:var(--danger-50);color:var(--danger)}
.player-scroll{position:relative;display:flex;flex-direction:column;height:272px;padding:16px;overflow-y:auto;overscroll-behavior:contain;background:var(--bg);border-radius:var(--r-inner);scrollbar-width:thin;scrollbar-color:var(--line) transparent;-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 22px);mask-image:linear-gradient(to bottom,transparent 0,#000 22px)}
/* The mask would hide a ring drawn outside the box, so a focused chat view drops the top fade and draws its ring inside. */
.player-scroll:focus-visible{outline-offset:-3px;-webkit-mask-image:none;mask-image:none}
.player-hint{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;width:100%;margin:0;padding:24px;border:0;border-radius:var(--r-inner);background:none;color:inherit;text-align:center;cursor:pointer;-webkit-tap-highlight-color:transparent}
.player-ring{display:grid;place-items:center;width:64px;height:64px;border-radius:50%;background:var(--green-100);color:var(--green-800);box-shadow:0 0 0 12px rgb(34 197 94 / .10),0 0 0 26px rgb(34 197 94 / .05);transition:transform 160ms var(--ease-out),background-color 180ms ease,color 180ms ease}
.player-ring svg{width:26px;height:26px;transform:translateX(2px)}
.player-hint:active .player-ring{transform:scale(.96)}
.player-empty{display:block;max-width:28ch;text-wrap:balance;font-size:16.5px;line-height:1.5;color:var(--ink-2)}
.player-empty strong{display:block;margin-bottom:4px;font-size:18px;color:var(--ink)}
.player-turns{list-style:none;margin:auto 0 0;padding:0;display:flex;flex-direction:column;gap:14px}
.player-turn{display:flex;flex-direction:column;gap:6px;max-width:88%;animation:turn-in 300ms var(--ease-out) backwards}
.player-turn.rono{align-self:flex-start;align-items:flex-start;transform-origin:left bottom}
.player-turn.caller{align-self:flex-end;align-items:flex-end;transform-origin:right bottom}
.player-who{display:inline-flex;align-items:center;gap:7px;font-size:13.5px;font-weight:700;line-height:1;color:var(--muted)}
.player-who-av{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--ink)}
.player-who-av svg{width:16px;height:16px}
.player-bubble{padding:11px 16px;border-radius:var(--r-inner);font-size:16.5px;line-height:1.5;color:var(--ink)}
.rono .player-bubble{background:var(--green-100);border-top-left-radius:var(--r-tail)}
.caller .player-bubble{background:var(--surface);border:1px solid var(--line);border-top-right-radius:var(--r-tail)}
.player-bubble .w{color:var(--unspoken);transition:color 160ms ease-out}
.player-bubble .w.on{color:var(--ink)}
.player-transport{display:grid;grid-template-columns:56px minmax(0,1fr) auto;align-items:center;gap:14px;padding:0 4px}
.player-play{position:relative;display:grid;place-items:center;width:56px;height:56px;border:0;border-radius:50%;background:var(--green);color:var(--ink);cursor:pointer;-webkit-tap-highlight-color:transparent;box-shadow:inset 0 1px 0 rgb(255 255 255 / .3),0 10px 22px -12px rgb(21 128 61 / .75);transition:transform 160ms var(--ease-out),background-color 180ms ease}
.player-play:active{transform:scale(.97)}
.player-play svg{grid-area:1/1;width:24px;height:24px;transition:opacity 160ms ease,transform 220ms var(--ease-out)}
.player-play .play-icon{transform:translateX(1.5px)}
.player-play .pause-icon{opacity:0;transform:scale(.6)}
.call-player.playing .play-icon{opacity:0;transform:translateX(1.5px) scale(.6)}
.call-player.playing .pause-icon{opacity:1;transform:none}
.player-play::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:3px solid transparent;border-top-color:var(--green-700);opacity:0;transition:opacity 160ms ease}
.call-player.loading .player-play::after{opacity:1;animation:spin 800ms linear infinite}
.player-track{position:relative;display:flex;align-items:center;height:44px;border-radius:var(--r-pill);cursor:pointer;touch-action:pan-y;-webkit-user-select:none;user-select:none}
.player-track:focus-visible{outline-offset:4px}
.player-bars{display:flex;align-items:center;justify-content:space-between;gap:2px;width:100%;height:36px;pointer-events:none}
.player-bars i{flex:1 1 0;min-width:2px;max-width:5px;border-radius:var(--r-pill);background:var(--bar-rest)}
.player-bars i.on{background:var(--green-700)}
.player-fill{position:absolute;left:0;top:3px;bottom:3px;min-width:3px;max-width:100%;pointer-events:none}
.player-fill::after{content:"";position:absolute;right:0;top:0;bottom:0;width:3px;border-radius:var(--r-pill);background:var(--ink)}
.player-clock{min-width:84px;text-align:right;font-size:14.5px;font-weight:600;color:var(--muted);font-variant-numeric:tabular-nums}
.demo-disclaimer{padding:0 4px 2px;font-size:13.5px;line-height:1.5;color:var(--muted)}
@media (hover:hover) and (pointer:fine){.player-play:hover{background:var(--green-hover)}.player-hint:hover .player-ring{background:var(--green);color:var(--ink)}}
.difference{padding-top:var(--section-y);border-top:1px solid var(--line)}
.flow{--flow-gap:clamp(28px,3.4vw,52px);position:relative;display:grid;grid-template-columns:128px minmax(0,1fr);margin-top:clamp(48px,6vw,76px)}
.flow-origin{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.flow-origin::before{content:"";position:absolute;left:22px;right:0;top:21px;height:2px;background:var(--green)}
.origin-dot{position:relative;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--ink);color:var(--bg);box-shadow:0 0 0 6px var(--bg)}
.origin-dot svg{width:20px;height:20px}
.origin-label{font-size:15px;font-weight:700;line-height:1.3}
.flow-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.14fr) minmax(0,1fr);gap:0 var(--flow-gap)}
.stop{position:relative;min-width:0}
.stop:not(:last-child)::after{content:"";position:absolute;left:0;right:calc(-1 * var(--flow-gap));top:21px;height:2px;background:var(--green)}
.stop-tag,.workflow-phase{position:relative;z-index:1;display:inline-flex;align-items:center;height:32px;padding:0 14px;border-radius:var(--r-pill);background:var(--green-100);color:var(--green-800);font-size:15px;font-weight:var(--w-heavy,700);line-height:1}
.stop-tag{margin-top:6px;box-shadow:0 0 0 6px var(--bg)}
.stop h3{margin:34px 0 10px;font-size:clamp(1.3125rem,1.15rem + .45vw,1.5rem);line-height:1.2;letter-spacing:-.018em}
.stop p{color:var(--ink-2)}
.stop p+p{margin-top:10px}
.mail-tag{display:inline-block;padding:1px 9px;border-radius:var(--r-pill);background:var(--ink);color:var(--bg);font-size:.78em;font-weight:var(--w-heavy,700);letter-spacing:.05em;line-height:1.6;vertical-align:.08em}
.explore-grid{display:grid;grid-template-columns:minmax(0,1.22fr) minmax(0,1fr);gap:20px;margin-top:clamp(40px,5vw,60px)}
.explore-card{display:flex;flex-direction:column;gap:10px;padding:clamp(24px,2.6vw,36px);border-radius:var(--r-card);color:var(--ink);text-decoration:none;-webkit-tap-highlight-color:transparent;transition:transform 160ms var(--ease-out),box-shadow 200ms ease,border-color 200ms ease,background-color 200ms ease}
.explore-card:active{transform:scale(.99)}
.explore-label{font-size:15px;font-weight:700;color:var(--green-800)}
.explore-card h3{font-size:clamp(1.375rem,1.1rem + .6vw,1.625rem);line-height:1.15;letter-spacing:-.022em}
.explore-card p{color:var(--ink-2)}
.explore-link{display:inline-flex;align-items:center;gap:8px;align-self:flex-start;margin-top:auto;padding-top:14px;font-weight:700}
.explore-link-label{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:6px;text-decoration-color:var(--green);transition:text-decoration-color 180ms ease}
.explore-arrow{transition:transform 200ms var(--ease-out)}
.explore-numbers{grid-row:span 2;gap:12px;padding:clamp(24px,3vw,40px);background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow-card)}
.explore-service{background:var(--green-50);border:1px solid var(--green-200)}
.explore-tools{background:var(--sunk);border:1px solid var(--sunk)}
.explore-prices{display:grid;gap:8px}
.explore-price{display:flex;flex-wrap:wrap;align-items:baseline;gap:14px}
.explore-amount{font-size:clamp(3.25rem,1.9rem + 4.2vw,6rem);font-weight:var(--w-heavy,700);line-height:1;letter-spacing:-.045em;font-variant-numeric:tabular-nums}
.explore-per{font-size:clamp(1.1875rem,1.05rem + .45vw,1.375rem);font-weight:700;letter-spacing:-.01em;color:var(--ink-2)}
.explore-minutes{display:grid;gap:20px;margin-top:18px;padding-top:28px;border-top:1px solid var(--line)}
.explore-bar{height:10px;border-radius:var(--r-pill);background:var(--green)}
.explore-bar.start{width:55%;background:var(--green-300)}
.explore-bar.full{width:100%}
.explore-minutes p{margin-top:8px;font-size:16px;color:var(--ink-2)}
.explore-minutes strong{color:var(--ink)}
.explore-numbers .explore-link{padding-top:22px}
@media (hover:hover) and (pointer:fine){.explore-card:hover .explore-link-label{text-decoration-color:var(--ink)}.explore-card:hover .explore-arrow{transform:translateX(3px)}.explore-service:hover{border-color:var(--green-300)}.explore-tools:hover,.explore-numbers:hover{border-color:var(--line-strong)}}
.next-step{display:grid;grid-template-columns:minmax(0,1.75fr) minmax(0,1fr);gap:32px 48px;align-items:end;margin:0 var(--bleed) clamp(72px,9vw,120px);padding:clamp(32px,5vw,64px);border-radius:var(--r-card);background:var(--green);color:var(--ink)}
.next-eyebrow{margin-bottom:14px;font-size:16px;font-weight:700}
.next-step h2{font-size:clamp(2.125rem,1.25rem + 2.5vw,3.125rem);line-height:1.04;letter-spacing:-.034em}
.next-step-actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px 24px;justify-self:start}
.next-step-actions .text-link{text-decoration-color:var(--ink)}
.next-step-actions p{flex-basis:100%;margin-top:2px;font-size:15.5px;font-weight:600}
/* Positioned and filled, the footer paints over the opening glow where a short page (the 404 on a phone) ends before the glow does; the hairline is where it stops. */
.site-footer{position:relative;display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) minmax(0,1fr);gap:32px;padding-top:56px;padding-bottom:24px;background:var(--bg);border-top:1px solid var(--line)}
.footer-intro p{margin-top:12px;font-size:16.5px;color:var(--ink-2)}
.footer-links{display:flex;flex-direction:column;align-items:flex-start}
.footer-links>span{margin-bottom:4px;font-size:14px;font-weight:700;color:var(--muted)}
.footer-links a{display:flex;align-items:center;min-height:44px;font-weight:600;color:var(--ink);text-decoration:none;overflow-wrap:anywhere}
.footer-bottom{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 24px;margin-top:8px;padding-top:12px;border-top:1px solid var(--line);font-size:14.5px;color:var(--muted)}
.footer-bottom nav{display:flex;flex-wrap:wrap;gap:0 20px}
.footer-bottom a{display:inline-flex;align-items:center;min-height:44px;font-weight:600;color:var(--ink-2);text-decoration:none}
.footer-bottom a[aria-current="page"]{color:var(--ink);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:6px;text-decoration-color:var(--green)}
@media (hover:hover) and (pointer:fine){.footer-links a:hover,.footer-bottom a:hover{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:6px;text-decoration-color:var(--green)}}
.page-intro{padding-bottom:clamp(56px,6.5vw,88px);border-bottom:1px solid var(--line)}
.page-intro+section{padding-top:var(--section-y)}
.page-intro h1{max-width:16ch}
.page-intro>p:not(.eyebrow){margin-top:22px;max-width:46ch;font-size:var(--lead);line-height:1.5;color:var(--ink-2)}
.page-intro .text-link{margin-top:20px}
.workflow{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(40px,6vw,96px);align-items:start}
.workflow .section-heading{position:sticky;top:104px}
.workflow .section-heading h2{font-size:min(var(--h2),2.875rem)}
/* Beside the steps, the heading scales with its half of the page, so it stays two lines and below the page title from 901px up. */
@media (min-width:901px){.workflow .section-heading h2{font-size:clamp(2.125rem,3.6vw,2.875rem)}}
.workflow-grid{list-style:none;margin:0;padding:0 0 0 60px;display:grid;gap:48px}
.workflow-card{position:relative}
.workflow-card-top{display:flex}
.workflow-card::before{content:"";position:absolute;left:-45px;top:9px;width:14px;height:14px;border-radius:50%;background:var(--green);box-shadow:0 0 0 5px var(--bg)}
.workflow-card:not(:last-child)::after{content:"";position:absolute;left:-39px;top:16px;bottom:-64px;width:2px;background:var(--green)}
.workflow-card-copy h3{margin:18px 0 10px;font-size:clamp(1.3125rem,1.15rem + .45vw,1.5rem);line-height:1.2;letter-spacing:-.018em}
.workflow-card-copy p{color:var(--ink-2)}
.workflow-output{display:inline-grid;gap:2px;margin-top:16px;padding:12px 18px;border-radius:var(--r-inner);background:var(--sunk)}
.workflow-output small{font-size:14px;font-weight:700;color:var(--muted)}
.workflow-output strong{font-size:16.5px;color:var(--ink);overflow-wrap:anywhere;text-wrap:balance}
.proof-panel{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(40px,5vw,72px);align-items:center}
.proof-copy ul{list-style:none;padding:0;margin-top:28px;display:grid;grid-template-columns:1fr 1fr;gap:12px 24px}
/* Short list items balance, so none ends on one lone word. */
.proof-copy li,.price-card li{position:relative;padding-left:32px;text-wrap:balance}
.proof-copy li{font-weight:600;color:var(--ink)}
.proof-copy li::before,.price-card li::before{content:"";position:absolute;left:0;top:4px;width:20px;height:20px;border-radius:50%;background:var(--green-100)}
.proof-copy li::after,.price-card li::after{content:"";position:absolute;left:7px;top:8px;width:5px;height:9px;border:solid var(--green-800);border-width:0 2px 2px 0;transform:rotate(45deg)}
.dashboard-card{display:grid;gap:16px;padding:clamp(20px,2.4vw,28px);background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);box-shadow:var(--shadow-card)}
.dashboard-top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 12px}
.dashboard-top>span:first-child{line-height:1.25;text-wrap:balance;font-size:18px;font-weight:var(--w-heavy,700);letter-spacing:-.01em}
.verified{padding:6px 12px;border-radius:var(--r-pill);background:var(--sunk);color:var(--ink-2);font-size:13.5px;font-weight:700;line-height:1.2;white-space:nowrap}
.dashboard-metric{display:grid;grid-template-columns:1fr auto;align-items:end;gap:4px 12px;padding:18px 20px;border-radius:var(--r-inner);background:var(--bg)}
.dashboard-metric small{font-size:15px;font-weight:700;color:var(--muted)}
.dashboard-metric strong{font-size:clamp(2.75rem,2rem + 2vw,3.5rem);font-weight:var(--w-heavy,700);line-height:1;letter-spacing:-.045em;font-variant-numeric:tabular-nums}
.dashboard-metric span{grid-column:1/-1;font-size:14px;color:var(--muted)}
.funnel{display:grid;gap:14px}
.funnel div{display:grid;grid-template-columns:1fr auto;gap:6px 12px;align-items:center;font-size:16px;color:var(--ink-2)}
.funnel b{font-weight:var(--w-heavy,700);color:var(--ink);font-variant-numeric:tabular-nums}
.funnel i{grid-column:1/-1;width:var(--w);height:10px;border-radius:var(--r-pill);background:var(--green)}
.funnel-qualified{--w:72%}
.funnel-booked{--w:44%}
.funnel-completed{--w:28%}
.funnel-paid{--w:22%}
.dashboard-card>p{font-size:13.5px;line-height:1.5;color:var(--muted)}
.safety-grid{display:grid;grid-template-columns:1fr 1fr;margin-top:clamp(40px,5vw,60px);padding:clamp(8px,1.5vw,16px);border-radius:var(--r-card);background:var(--sunk)}
.safety-grid article{padding:clamp(20px,2.6vw,32px)}
.safety-grid article:nth-child(odd){border-right:1px solid var(--line)}
.safety-grid article:nth-child(n+3){border-top:1px solid var(--line)}
.safety-grid h3{margin-bottom:10px;font-size:clamp(1.25rem,1.1rem + .4vw,1.4375rem);line-height:1.2;letter-spacing:-.018em}
.safety-grid p{color:var(--ink-2)}
.connections-grid{display:grid;gap:12px;margin-top:clamp(40px,5vw,60px)}
.connection-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);transition:border-color 200ms ease,box-shadow 200ms ease}
.connection-card[open]{border-color:var(--line-strong);box-shadow:var(--shadow-card)}
.connection-card summary{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr) 15rem;grid-template-rows:auto auto;gap:6px 32px;align-items:center;padding:clamp(20px,2.4vw,28px) clamp(20px,2.6vw,32px);border-radius:var(--r-card);list-style:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
/* On a tablet in landscape the first column gets more of the room, so "Your Bloomrel dashboard" stays on one line like the other two titles. */
@media (min-width:901px) and (max-width:1100px){.connection-card summary{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) 15rem;column-gap:24px}}
.connection-card summary::-webkit-details-marker{display:none}
.connection-status{display:inline-flex;align-items:center;min-height:32px;padding:5px 14px;border-radius:var(--r-pill);background:var(--green-100);color:var(--green-800);font-size:14.5px;font-weight:700;line-height:1.2;text-wrap:balance}
.connection-status-review{background:var(--sunk);color:var(--ink-2);box-shadow:inset 0 0 0 1.5px var(--line-strong)}
.connection-card .connection-status{grid-column:1;grid-row:1;justify-self:start}
.connection-card h3{grid-column:1;grid-row:2;font-size:clamp(1.375rem,1.1rem + .6vw,1.625rem);line-height:1.15;letter-spacing:-.022em}
.connection-card summary p{grid-column:2;grid-row:1/3;color:var(--ink-2)}
.connection-toggle{grid-column:3;grid-row:1/3;justify-self:end;display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 8px 0 18px;border-radius:var(--r-pill);background:var(--sunk);font-size:15.5px;font-weight:700;color:var(--ink);white-space:nowrap}
.connection-toggle b{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--surface);font-size:18px;font-weight:700;line-height:1;transition:transform 200ms var(--ease-out)}
.connection-card[open] .connection-toggle b{transform:rotate(45deg)}
.connection-body{max-width:78ch;padding:0 clamp(20px,2.6vw,32px) clamp(20px,2.6vw,28px)}
.connection-body p{color:var(--ink-2)}
.connection-body p+p{margin-top:12px}
.connection-body strong{color:var(--ink)}
.integration-planning{margin-top:clamp(40px,5vw,64px);padding:clamp(24px,3.4vw,40px);border-radius:var(--r-card);background:var(--sunk)}
.integration-planning-heading h3{margin-bottom:8px;font-size:clamp(1.375rem,1.1rem + .7vw,1.75rem);line-height:1.15;letter-spacing:-.022em}
.integration-planning-heading p{color:var(--ink-2)}
.integration-options{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;margin:24px 0 18px}
.integration-option{display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding:24px;border-radius:var(--r-inner);background:var(--surface);border:1px solid var(--line)}
.integration-option h4{margin-top:6px;font-size:22px;line-height:1.2;letter-spacing:-.018em}
.integration-option p{color:var(--ink-2)}
.integration-option .text-link{margin-top:auto}
.integration-planning-note{font-size:15px;line-height:1.5;color:var(--muted)}
.connection-note{display:flex;align-items:center;gap:12px 32px;margin-top:40px;padding-top:28px;border-top:1px solid var(--line)}
.connection-note>span{flex:none;font-size:18px;font-weight:var(--w-heavy,700)}
.connection-note p{max-width:60ch;color:var(--ink-2)}
.connection-note .text-link{flex:none;margin-left:auto}
@media (hover:hover) and (pointer:fine){.connection-card:hover{border-color:var(--line-strong)}}
.pricing-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px;margin-top:clamp(40px,5vw,60px)}
.price-card{display:grid;grid-row:span 5;grid-template-rows:subgrid;row-gap:22px;padding:clamp(24px,3vw,40px);border-radius:var(--r-card)}
.price-card.launch{background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow-card)}
.price-card.ongoing{background:var(--sunk);border:1px solid var(--sunk)}
@supports not (grid-template-rows:subgrid){.price-card{grid-row:auto;grid-template-rows:none}}
/* The tag sits in the corner, out of the price's row, so both plans keep the number and its unit on one line at every width. */
.price-top{position:relative}
.price-top>.start-tag,.price-top>.volume-tag{position:absolute;top:0;right:0}
.price-top>div{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:14px}
.plan-label{flex-basis:100%;margin-bottom:10px;font-size:15px;font-weight:700;color:var(--green-800)}
.price-top h3{font-size:clamp(3.25rem,1.9rem + 4.2vw,6rem);line-height:1;letter-spacing:-.045em;font-variant-numeric:tabular-nums}
.price-top small{font-size:clamp(1.1875rem,1.05rem + .45vw,1.375rem);font-weight:700;letter-spacing:-.01em;color:var(--ink-2)}
.start-tag,.volume-tag{flex:none;padding:7px 14px;border-radius:var(--r-pill);font-size:14.5px;font-weight:700;line-height:1.2;white-space:nowrap}
.start-tag{background:var(--green-100);color:var(--green-800)}
.volume-tag{background:var(--surface);color:var(--ink-2)}
.price-card>p{color:var(--ink-2)}
.price-card ul{list-style:none;padding:0;display:grid;gap:10px;align-content:start}
.price-card li{color:var(--ink-2)}
.price-card li strong{font-weight:var(--w-heavy,700);color:var(--ink)}
.price-card>.pill-button,.price-card>.outline-button{justify-self:start;align-self:end}
.plan-fine{font-size:14px;line-height:1.5;color:var(--muted)}
.pricing-note{max-width:80ch;margin-top:24px;font-size:14.5px;line-height:1.55;color:var(--muted)}
.pricing-note+.pricing-note{margin-top:8px}
@media (hover:hover) and (pointer:fine){.price-card.ongoing .outline-button:not(:disabled):hover{background:var(--surface)}}
.value-section{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(40px,6vw,96px);align-items:center}
/* Reassurance notes, not controls: the proof list's drawn check, with no pill that looks tappable. */
.value-points{display:flex;flex-wrap:wrap;gap:10px 24px;margin-top:24px}
.value-points span{position:relative;padding-left:30px;color:var(--ink-2);font-size:15.5px;font-weight:600;line-height:1.5}
.value-points span::before{content:"";position:absolute;left:0;top:2px;width:20px;height:20px;border-radius:50%;background:var(--green-100)}
.value-points span::after{content:"";position:absolute;left:7px;top:6px;width:5px;height:9px;border:solid var(--green-800);border-width:0 2px 2px 0;transform:rotate(45deg)}
.calculator{display:grid;gap:22px;padding:clamp(20px,3vw,32px);background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);box-shadow:var(--shadow-card)}
.calculator-input{display:grid;gap:6px}
.calculator-input label{display:flex;justify-content:space-between;align-items:baseline;gap:16px;font-size:16px;font-weight:700;line-height:1.35;color:var(--ink);text-wrap:balance}
.calculator-input output{font-size:18px;font-weight:var(--w-heavy,700);font-variant-numeric:tabular-nums;white-space:nowrap}
input[type=range]{-webkit-appearance:none;appearance:none;display:block;width:100%;height:44px;margin:0;background:transparent;cursor:pointer}
input[type=range]::-webkit-slider-runnable-track{height:8px;border-radius:var(--r-pill);background:linear-gradient(90deg,var(--green-700) var(--range-progress,20%),var(--line) var(--range-progress,20%))}
input[type=range]::-moz-range-track{height:8px;border-radius:var(--r-pill);background:var(--line)}
input[type=range]::-moz-range-progress{height:8px;border-radius:var(--r-pill);background:var(--green-700)}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:28px;height:28px;margin-top:-10px;border-radius:50%;background:var(--surface);border:2px solid var(--ink);box-shadow:0 2px 6px rgb(7 24 29 / .18);transition:transform 160ms var(--ease-out)}
input[type=range]::-moz-range-thumb{width:24px;height:24px;border-radius:50%;background:var(--surface);border:2px solid var(--ink)}
input[type=range]:active::-webkit-slider-thumb{transform:scale(1.08)}
input[type=range]:focus-visible{outline:3px solid var(--ink);outline-offset:2px;border-radius:var(--r-pill)}
.calculator-result{display:grid;gap:6px;padding:20px 22px;border-radius:var(--r-inner);background:var(--green-50);border:1px solid var(--green-200)}
.calculator-result span{font-size:15px;font-weight:700;color:var(--green-800);text-wrap:balance}
.calculator-result strong{font-size:clamp(2.5rem,1.8rem + 2vw,3.5rem);font-weight:var(--w-heavy,700);line-height:1;letter-spacing:-.045em;font-variant-numeric:tabular-nums;color:var(--ink)}
.calculator-result small{font-size:15px;color:var(--ink-2)}
.calculator-note{font-size:14px;line-height:1.5;color:var(--muted)}
.faq{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(32px,6vw,96px);align-items:start}
.faq-title{position:sticky;top:104px}
.faq-list details+details{border-top:1px solid var(--line)}
.faq-list summary{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:72px;padding:18px 0;font-size:clamp(1.0625rem,1rem + .25vw,1.1875rem);font-weight:700;line-height:1.4;color:var(--ink);list-style:none;cursor:pointer;-webkit-tap-highlight-color:transparent;text-wrap:balance}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary::after{content:"";flex:none;width:36px;height:36px;border-radius:50%;background:linear-gradient(var(--ink),var(--ink)) center/14px 2px no-repeat,linear-gradient(var(--ink),var(--ink)) center/2px 14px no-repeat,var(--sunk);transition:transform 200ms var(--ease-out),background-color 180ms ease}
.faq-list details[open] summary::after{transform:rotate(45deg);background-color:var(--green-100)}
.faq-list details p{max-width:66ch;margin-bottom:24px;color:var(--ink-2)}
.faq-list a{color:var(--ink);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px;text-decoration-color:var(--green)}
@media (hover:hover) and (pointer:fine){.faq-list summary:hover::after{background-color:var(--green-100)}}
.contact-section{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(40px,6vw,88px);align-items:start}
.contact-copy{position:sticky;top:104px}
.contact-methods{display:grid;margin-top:32px}
.contact-methods a{display:grid;gap:2px;padding:16px 0;text-decoration:none}
.contact-methods a+a{border-top:1px solid var(--line)}
.contact-methods small{font-size:14.5px;font-weight:700;color:var(--muted)}
.contact-methods strong{font-size:20px;font-weight:var(--w-heavy,700);letter-spacing:-.01em;overflow-wrap:anywhere}
@media (hover:hover) and (pointer:fine){.contact-methods a:hover strong{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:6px;text-decoration-color:var(--green)}}
.contact-forms{display:grid;gap:20px}
.contact-form{display:grid;gap:16px;padding:clamp(20px,3vw,28px);background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card)}
.contact-form.callback-form{gap:18px;box-shadow:var(--shadow-card)}
.contact-form .callback-head h3{font-size:22px}
.contact-form>.pill-button{justify-self:start}
.contact-form select{appearance:none;-webkit-appearance:none;padding-right:48px;background-image:linear-gradient(45deg,transparent 50%,var(--ink) 50%),linear-gradient(135deg,var(--ink) 50%,transparent 50%);background-position:calc(100% - 27px) 50%,calc(100% - 21px) 50%;background-size:6px 6px;background-repeat:no-repeat}
.contact-form select:has(option[value=""]:checked){color:var(--placeholder)}
.contact-form select option{color:var(--ink)}
.contact-form .form-consent{display:flex;flex-wrap:nowrap;align-items:flex-start;gap:12px;font-weight:400}
.contact-form .form-consent input{flex:none;width:22px;height:22px;min-height:0;margin:2px 0 0;padding:0;border:0;background:none;accent-color:var(--green-700)}
.contact-form .form-consent span{font-size:15px;line-height:1.55;font-weight:400;color:var(--ink-2)}
.form-consent a{color:var(--ink);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px;text-decoration-color:var(--green)}
.draft-actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.draft-actions .outline-button{min-height:44px;padding:0 18px;font-size:15.5px}
.draft-actions p,#copy-status{flex-basis:100%;margin-top:4px;font-size:14px;line-height:1.45;color:var(--muted)}
#copy-status:empty{display:none}
.notice-page{padding-bottom:clamp(72px,9vw,120px)}
.notice-page>*{max-width:46rem}
/* Running text keeps a readable measure (about 72 characters), and the lead and the date line stop at the same edge. Set in rem, so the edge holds in any font. The carrier table may use the free width beside it. */
.notice-page>.notice-content{max-width:none}
.notice-content>*{max-width:46rem}
.notice-content>p:not(.notice-lead),.notice-content>ul,.notice-content>ol,.notice-content>.notice-lead,.notice-page>.notice-date{max-width:35.5rem}
.notice-page h1{margin-bottom:12px}
.notice-date{margin-bottom:8px;padding-bottom:28px;border-bottom:1px solid var(--line);font-size:15px;font-weight:600;color:var(--muted)}
.notice-content .notice-lead,.notice-lead{margin:28px 0 8px;font-size:var(--lead);line-height:1.5;color:var(--ink)}
.notice-content h2{margin:48px 0 12px;font-size:clamp(1.375rem,1.2rem + .5vw,1.625rem);line-height:1.2;letter-spacing:-.018em}
.notice-content p,.notice-content li{font-size:17px;line-height:1.7;color:var(--ink-2)}
.notice-content p+p,.notice-content p+ol,.notice-content p+ul,.notice-content ol+p,.notice-content ul+p{margin-top:14px}
.notice-content strong{color:var(--ink)}
.notice-content ul{padding-left:22px}
.notice-content ul>li+li{margin-top:6px}
.notice-content li::marker{color:var(--green-700)}
.notice-content ol{list-style:none;counter-reset:step;padding:0;display:grid;gap:14px}
.notice-content ol>li{counter-increment:step;position:relative;padding-left:44px}
.notice-content ol>li::before{content:counter(step);position:absolute;left:0;top:1px;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--green-100);color:var(--green-800);font-size:15px;font-weight:var(--w-heavy,700);line-height:1}
.notice-content a{color:var(--ink);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px;text-decoration-color:var(--green);overflow-wrap:anywhere}
.notice-content a[href^="tel:"]{overflow-wrap:normal}
/* A table wider than its frame scrolls inside it. A soft shadow on the right edge shows there is more; it is covered once the table's end scrolls into view. */
.notice-table-wrap{margin:20px 0 28px;overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-card);background:linear-gradient(270deg,var(--surface) 45%,rgb(252 253 253 / 0)) right/44px 100% no-repeat local,radial-gradient(farthest-side at 100% 50%,rgb(7 24 29 / .16),rgb(7 24 29 / 0)) right/16px 100% no-repeat scroll,var(--surface)}
.notice-content>.notice-table-wrap:has(.codes-table){max-width:62rem}
.notice-content table{width:100%;border-collapse:separate;border-spacing:0;font-size:16px;line-height:1.55;text-align:left;color:var(--ink-2)}
.notice-content caption{caption-side:top;padding:18px 20px 10px;text-align:left;font-size:15px;font-weight:700;color:var(--muted)}
/* A table that scrolls sideways has its title above the frame, so the title never scrolls away with the cells. */
.notice-content>.table-caption{margin:28px 0 0;font-size:15px;font-weight:700;line-height:1.5;color:var(--muted)}
.notice-content>.table-caption+.notice-table-wrap{margin-top:10px}
.notice-content th,.notice-content td{padding:14px 20px;vertical-align:top;text-wrap:pretty}
.notice-content thead th{background:var(--sunk);font-size:15px;font-weight:700;color:var(--ink)}
.notice-content tbody tr+tr>*{border-top:1px solid var(--line)}
.notice-content tbody th{font-weight:700;color:var(--ink)}
/* The carrier stays in view while the codes scroll sideways on a phone. */
.codes-table tbody th{position:sticky;left:0;z-index:1;background:var(--surface)}
.codes-table thead th:first-child{position:sticky;left:0;z-index:2}
.codes-table td:last-child{min-width:11.5rem}
/* With room to spare, each way to turn forwarding off reads on one line. */
@media (min-width:1000px){.codes-table td:last-child:not([colspan]){white-space:nowrap}}
.notice-table-wrap code{padding:2px 8px;border-radius:var(--r-pill);background:var(--sunk);color:var(--ink);font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.92em;white-space:nowrap}
.notice-page.not-found{min-height:62vh}
.not-found .notice-lead{max-width:40ch;color:var(--ink-2)}
.not-found .hero-actions{margin-top:32px}
@keyframes pop{from{opacity:0;transform:translateY(-4px) scale(.98)}}
@keyframes rise{from{opacity:0;transform:translateY(14px)}}
@keyframes rise-card{from{opacity:0;transform:translateY(22px) scale(.985)}}
@keyframes turn-in{from{opacity:0;transform:translateY(8px) scale(.98)}}
@keyframes note-in{from{opacity:0;transform:translateY(-4px)}}
@keyframes pulse{50%{opacity:.35;transform:scale(.8)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes fade{from{opacity:0}}
@media (prefers-reduced-motion:no-preference){.hero-copy>:not(form),.page-intro>*,main>section:first-child>.section-heading>*,.contact-copy>*,.notice-page>*{animation:rise 720ms var(--ease-out) both}.hero-copy>:nth-child(2),.page-intro>:nth-child(2),main>section:first-child>.section-heading>:nth-child(2),.contact-copy>:nth-child(2),.notice-page>:nth-child(2){animation-delay:70ms}.hero-copy>:nth-child(3),.page-intro>:nth-child(3),main>section:first-child>.section-heading>:nth-child(3),.contact-copy>:nth-child(3),.notice-page>:nth-child(3){animation-delay:140ms}.hero-copy>:nth-child(n+4),.page-intro>:nth-child(n+4),.contact-copy>:nth-child(n+4),.notice-page>:nth-child(n+4){animation-delay:210ms}.call-player{animation:rise-card 820ms var(--ease-out) 140ms both}.call-player:target{animation:fade 200ms ease both}}
@media (max-width:1060px){.site-header{grid-template-columns:minmax(0,1fr) auto}.nav,.header-login{display:none}.mobile-menu{display:block}}
@media (max-width:900px){.hero{grid-template-columns:minmax(0,1fr);gap:40px}.hero-copy{padding-top:0}.hero-intro{max-width:34ch}}
@media (max-width:900px){.flow{grid-template-columns:minmax(0,1fr)}.flow-origin{flex-direction:row;align-items:center;gap:16px;margin-bottom:28px}.flow-origin::before{left:21px;right:auto;top:22px;width:2px;height:72px}.flow-steps{grid-template-columns:minmax(0,1fr);gap:40px;padding:0 0 0 60px}.stop::before{content:"";position:absolute;left:-45px;top:15px;width:14px;height:14px;border-radius:50%;background:var(--green);box-shadow:0 0 0 5px var(--bg)}.stop:not(:last-child)::after{left:-39px;right:auto;top:22px;bottom:-62px;width:2px;height:auto}.stop h3{margin-top:18px}}
@media (max-width:900px){.explore-grid{grid-template-columns:minmax(0,1fr)}.explore-numbers{grid-row:auto}.next-step{grid-template-columns:minmax(0,1fr);align-items:start}.site-footer{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.footer-intro{grid-column:1/-1}}
@media (max-width:900px){.workflow,.proof-panel,.value-section,.faq,.contact-section,.safety-grid,.integration-options,.pricing-grid{grid-template-columns:minmax(0,1fr)}.workflow .section-heading,.faq-title,.contact-copy{position:static}.safety-grid article:nth-child(odd){border-right:0}.safety-grid article+article{border-top:1px solid var(--line)}.connection-card summary{grid-template-columns:minmax(0,1fr);grid-template-rows:none}.connection-card .connection-status,.connection-card h3,.connection-card summary p,.connection-toggle{grid-column:1;grid-row:auto}.connection-toggle{justify-self:start;margin-top:8px}.connection-note{flex-direction:column;align-items:flex-start}.connection-note .text-link{margin-left:0}.price-card{grid-row:auto;grid-template-rows:none}}
@media (max-width:560px){html{scroll-padding-top:80px}body{font-size:16.5px}.site-header{min-height:65px;gap:8px}.brand-word{font-size:19px}.brand-glyph{width:30px;height:30px}.header-actions{gap:6px}.mobile-menu summary{padding:0 14px}.hero{gap:32px}.eyebrow+h1{margin-top:16px}.hero-intro{margin-top:18px}.hero-actions{margin-top:24px}.hero-callback{padding:20px 18px}.field-row{grid-template-columns:minmax(0,1fr)}}
@media (max-width:560px){.call-player{padding:14px}.player-scroll{height:224px;padding:12px}.player-hint{gap:18px;padding:16px}.player-status{padding:5px 10px}.player-bubble{padding:10px 14px;font-size:16px}.player-turn{max-width:92%}.player-transport{gap:10px;padding:0 2px}.player-clock{min-width:0;font-size:13.5px}}
@media (max-width:560px){.proof-copy ul{grid-template-columns:minmax(0,1fr)}.site-footer{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:24px 16px}.notice-content th,.notice-content td{padding:12px 10px;font-size:14.5px}.notice-content caption{padding:16px 10px 8px}.codes-table tbody th,.codes-table thead th:first-child{box-shadow:inset -1px 0 0 var(--line)}.footer-bottom{margin-top:16px}.notice-page.not-found{min-height:0}}
@media (max-width:560px){.integration-options{gap:0;margin:12px 0 8px}.integration-option{padding:20px 0;background:none;border:0;border-radius:0}.integration-option+.integration-option{border-top:1px solid var(--line)}}
@media (max-width:374px){.mobile-menu summary{padding:0 12px}.player-head{flex-wrap:wrap}.player-head>div{flex:1 1 150px}.player-status{margin-left:56px}.notice-content th,.notice-content td,.notice-content thead th{padding:12px 8px;font-size:14px}.integration-planning{padding-inline:16px}.connection-status{font-size:14px}}
@media (max-width:349px){:root{--h1:2.125rem;--h2:2rem}.site-footer{grid-template-columns:minmax(0,1fr)}.eyebrow{padding:6px 12px;font-size:14px}.next-step{padding:28px 24px}.next-step h2{font-size:1.875rem}}
/* "Let's talk" stays in the header on a 360px phone, as in the approved design; only below 356px is there no room beside the wordmark and "Menu". */
@media (max-width:355px){.header-actions .pill-button{display:none}}
/* The cookie names keep one line from 350px up, 390 and 360 phones included. The <wbr> in "fo_onboarding" is taken out of layout there (Chromium breaks at a <wbr> even under nowrap), so the name column fits the name in whatever font is showing; only a phone under 350px splits it after "fo_". */
@media (min-width:350px){.notice-content tbody th wbr{display:none}}
@media (min-width:400px){.notice-content table:not(.codes-table) thead th:first-child{width:8.25rem}}
@media (min-width:561px){.notice-content thead th:last-child{white-space:nowrap}.notice-content table:not(.codes-table) thead th:first-child{width:10.5rem}}
/* A phone on its side: all six menu links fit without scrolling, "Login" included. */
@media (max-height:440px){.mobile-nav a{min-height:40px}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.hero-copy>:not(form),.page-intro>*,main>section:first-child>.section-heading>*,.contact-copy>*,.notice-page>*,.call-player{animation:fade 200ms ease both}.player-turn{animation:fade 160ms ease both}.mobile-menu[open] .mobile-nav{animation:none}.hero-callback{transition:none}.callback-form output[data-state]{animation:none}.pill-button:active:not(:disabled),.outline-button:active:not(:disabled),.player-play:active,.explore-card:active,.mobile-menu summary:active,.player-hint:active .player-ring{transform:none}.call-player[data-state="playing"] .player-pulse{animation:none}.call-player.loading .player-play::after{animation:none;border-color:var(--green-700);border-style:dotted}.player-play svg,.menu-icon::before,.menu-icon::after{transition:opacity 120ms ease}.explore-arrow{transition:none}.connection-toggle b,.faq-list summary::after{transition:background-color 180ms ease}input[type=range]::-webkit-slider-thumb{transition:none}input[type=range]:active::-webkit-slider-thumb{transform:none}}
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:reduce){.explore-card:hover .explore-arrow{transform:none}}
/* Windows high contrast: background colours are replaced and gradients dropped, so the waveform, sliders, icons, pill edges, the logo's "b", Rono's bubble and the spoken words are redrawn with system colours. The call card's small "b" avatars keep their own ink circle, which a light theme would blank along with the cream "b" on it. The FAQ sign clips its own text backplate, which would otherwise paint over the top and bottom of its ring. */
@media (forced-colors:active){.player-bars i{background:GrayText}.player-bars i.on,.player-fill::after{background:Highlight}input[type=range]::-webkit-slider-runnable-track{background:CanvasText}.faq-list summary::after{content:"+";display:grid;place-items:center;overflow:hidden;padding-bottom:4px;border:2px solid CanvasText;font-size:26px;font-weight:400;line-height:1}.brand-glyph rect,.brand-glyph circle{fill:CanvasText}.brand-glyph path:last-child{fill:Canvas}.rono .player-bubble{border:1px solid CanvasText}.player-bubble .w:not(.on){color:GrayText}.player-avatar,.player-who-av{forced-color-adjust:none}.contact-form select{background-image:none;appearance:auto}.pill-button,.outline-button,.player-play,.mobile-menu summary,.connection-toggle{border:2px solid ButtonText}.menu-icon::before,.menu-icon::after{background:CanvasText}.nav a[aria-current="page"],.mobile-nav a[aria-current="page"]{outline:2px solid CanvasText;outline-offset:-2px}}