/* Cleartrill / September 2026 Design tokens first, page sections second, phone rules last. Original brand assets. No framework, build step, remote font or icon library. */ @font-face { font-family:Outfit; src:url('assets/outfit.ttf') format('truetype'); font-weight:100 900; font-display:swap } @font-face { font-family:Instrument; src:url('assets/instrument-sans.ttf') format('truetype'); font-weight:100 900; font-display:swap } :root { --paper:#FFFFFF; /* the ground: white (founder, 2026-09-22); brand paper #F4EFE6 is available per page via data-ground="paper" */ --ink:#1F2422; --copper:#B86B3A; --diaz:#5B92A1; --signal:#2F8F83; --green-ink:#22695F; --line:#D9D2C5; --muted:#565E58; --page:1320px; --gutter:clamp(24px,5vw,80px); font-family:Instrument,Arial,sans-serif; color:var(--ink); background:var(--paper); font-synthesis:none } /* Ground switch: brings the brand paper back on one page; the default is white (founder, 2026-09-22). */ html[data-ground="paper"] { --paper:#F4EFE6 } * { box-sizing:border-box } html { scroll-behavior:smooth; scroll-padding-top:32px } body { margin:0; font-size:19px; line-height:1.55; -webkit-font-smoothing:antialiased } button,input,select,textarea { font:inherit } button,a,input,select { touch-action:manipulation } button { cursor:pointer } a { color:inherit; text-underline-offset:5px } img,svg { max-width:100% } button { color:inherit } button:disabled { cursor:not-allowed; opacity:.55 } button,a,input,select,summary { -webkit-tap-highlight-color:transparent } :focus-visible { outline:3px solid var(--green-ink); outline-offset:6px } input:focus-visible,select:focus-visible { outline-offset:2px } [hidden] { display:none!important } h1,h2,h3,p,figure,blockquote { margin:0 } h1,h2,h3 { font-family:Outfit,Arial,sans-serif; font-weight:600; line-height:1.04; letter-spacing:-.035em } h1 { font-size:clamp(64px,7vw,104px) } h2 { font-size:clamp(42px,4.6vw,68px) } h3 { font-size:32px } p+p { margin-top:20px } button,select,input { border-radius:0 } button { border:0 } input,select { background:var(--paper); color:var(--ink); border:1px solid var(--line); padding:12px 14px; min-height:52px; max-width:100% } input::placeholder { color:var(--muted) } input[type=range] { accent-color:var(--signal); padding:0; min-height:44px; width:100%; cursor:pointer } input[type=checkbox] { accent-color:var(--signal); min-height:24px; width:24px; flex-shrink:0 } .wrap { max-width:calc(var(--page) + 2*var(--gutter)); margin-inline:auto; padding-inline:var(--gutter) } .section { padding-top:116px; padding-bottom:116px } .kicker { font-size:17px; color:var(--muted); margin-bottom:24px } .index,.plan-label { font-size:15px; font-weight:600; letter-spacing:.065em } .fine,.example-label { font-size:16px; color:var(--muted); line-height:1.55 } .body-large { font-size:25px; line-height:1.45 } .wordmark { font-family:Outfit,Arial,sans-serif; font-weight:600; letter-spacing:.14em; text-decoration:none; font-size:26px; white-space:nowrap } .actions { display:flex; align-items:center; flex-wrap:wrap; gap:18px 30px } .button { display:inline-flex; align-items:center; justify-content:center; gap:22px; background:var(--signal); color:var(--paper); border:1px solid var(--signal); border-radius:4px; padding:17px 25px; font-size:20px; font-weight:700; line-height:1.3; min-height:58px; text-decoration:none; transition:background .2s,transform .2s } .button:hover { background:var(--green-ink); border-color:var(--green-ink); transform:translateY(-2px) } .button.secondary { background:transparent; color:var(--ink); border-color:var(--line) } .button.secondary:hover { border-color:var(--ink) } .button.compact { padding:12px 19px; min-height:52px } .button.full { width:100% } .text-button { display:inline-flex; align-items:center; justify-content:flex-start; gap:15px; font-size:20px; font-weight:600; min-height:48px; padding:7px 0; background:transparent; text-decoration:none; color:var(--green-ink); border-bottom:1px solid var(--line) } .text-button:hover { border-color:var(--green-ink) } .play-icon { font-size:31px; line-height:1 } .skip { position:fixed; left:20px; top:-100px; padding:15px; background:var(--paper); z-index:100 } .skip:focus { top:12px } .status-dot { display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--signal); flex-shrink:0 } .green { color:var(--green-ink) } /* The headline and hanging mark share one deliberately open composition. */ .design-note { padding:8px var(--gutter); font-size:14px; color:var(--muted); display:flex; justify-content:space-between; gap:15px; border-bottom:1px solid var(--line) } .design-note a { white-space:nowrap } .site-header { height:110px; display:flex; justify-content:space-between; align-items:center; gap:28px } .site-header nav { display:flex; gap:34px; margin-left:auto; margin-right:24px } .site-header nav a { font-size:18px; text-decoration:none } .site-header nav a:hover { text-decoration:underline } .menu-button { display:none; background:transparent; font-size:28px; min-width:48px; min-height:48px } .mobile-menu { padding-block:18px; border-bottom:1px solid var(--line) } .mobile-menu a { display:block; padding:12px 0 } .hero { padding-top:42px; position:relative; overflow:hidden } .hero-layout { display:grid; grid-template-columns:1.22fr 1fr; gap:50px; align-items:start } .hero-copy { position:relative; z-index:2 } .hero h1 { margin-bottom:31px } .hero-parenthesis { letter-spacing:-.05em } .hero .lead { font-size:25px; line-height:1.45; max-width:570px } .hero-explainer { font-size:19px; color:var(--muted); margin-top:20px } .hero .actions { margin-top:30px } .hero .fine { margin-top:19px } .hero-object { padding-top:52px; position:relative; min-width:0 } .hanging-bell { position:relative; --bell-width:270px; --ring-y:calc(var(--bell-width) * .08); width:100%; padding-top:0; isolation:isolate } .hanging-bell:before,.hanging-bell:after { content:""; height:1px; background:var(--ink); position:absolute; top:var(--ring-y); left:0; right:0 } .hanging-bell:before { z-index:0 } .hanging-bell:after { z-index:2; right:50% } .hanging-bell svg { width:var(--bell-width); height:auto; display:block; margin:auto; position:relative; z-index:1; overflow:visible } .bell-swing { transform-origin:50px 8px } .bell-gentle .bell-swing { animation:bell-sway 9s ease-in-out infinite } .bell-ring .bell-swing { animation:bell-ring 1.8s ease-in-out 1 } .hero-bell { --bell-width:360px; margin-top:0 } .hero-bell:before,.hero-bell:after { left:-5vw } .hero-bell:before { right:-100vw } .hero-bell:after { right:50% } .answer-slip { position:relative; margin:15px auto 0; max-width:410px; border-top:1px solid var(--ink); padding:20px 0 0 } .slip-heading { display:flex; gap:12px; align-items:center; font-size:17px; color:var(--green-ink) } .answer-slip>p { font-family:Outfit; font-size:29px; line-height:1.2; margin:15px 0 } .slip-foot { display:flex; flex-direction:column; font-size:17px } .answer-slip .example-label { display:block; margin-top:15px; font-size:14px } .hero-bottom { display:flex; justify-content:space-between; gap:24px; margin-top:60px; padding-top:26px; padding-bottom:28px; border-bottom:1px solid var(--ink); font-size:16px; color:var(--muted) } .hero-bottom a { color:var(--ink); text-decoration:none; display:flex; gap:25px } .section-heading { display:grid; grid-template-columns:1.15fr 1fr; gap:0 80px; align-items:end; margin-bottom:58px } .section-heading .kicker { grid-column:1/-1 } .section-heading>p:last-child { color:var(--muted); font-size:23px; margin:0 0 4px } .channel-stories { display:grid; grid-template-columns:repeat(3,1fr); gap:48px } .channel-stories article { border-top:1px solid var(--line); padding-top:25px; min-width:0 } .channel-stories .index { color:var(--muted) } .channel-stories h3 { font-size:36px; margin:28px 0 20px } .channel-stories p { font-size:20px; color:var(--muted) } .channel-example { display:flex; gap:16px; align-items:center; border-top:1px solid var(--line); padding-top:23px; margin-top:32px; font-size:16px } .channel-example strong { display:block; font-size:16px; font-weight:400; color:var(--green-ink); margin-top:5px } .channel-icon { font-family:Outfit; font-size:35px } /* Human moments, rendered as correspondence, not fabricated testimonials. */ .moment-section { padding:90px 0 100px; border-top:1px solid var(--ink); border-bottom:1px solid var(--line) } .moment-section .section-heading { margin-bottom:30px } .profession-tabs { display:flex; gap:8px 25px; flex-wrap:wrap; border-bottom:1px solid var(--line); padding-bottom:16px; margin-bottom:54px } .profession-tabs button { font-size:18px; font-weight:600; min-height:48px; background:transparent; padding:8px 0; border-bottom:2px solid transparent; color:var(--muted) } .profession-tabs button[aria-selected=true] { color:var(--green-ink); border-color:var(--signal) } .moment-grid { display:grid; grid-template-columns:1fr 1fr; gap:90px; align-items:start } .moment-time { color:var(--muted); font-size:18px; margin-bottom:22px } .moment-grid h3 { font-size:48px; max-width:520px; margin-bottom:24px } .moment-grid>div>p:last-child { font-size:21px; max-width:450px; color:var(--muted) } .conversation-paper { border:1px solid var(--line); padding:29px 32px; position:relative } .paper-title { display:flex; justify-content:space-between; gap:18px; font-size:16px; color:var(--muted); padding-bottom:18px; border-bottom:1px solid var(--line) } .conversation-paper blockquote { font-family:Outfit; font-size:32px; line-height:1.2; padding:28px 0 } .conversation-answer { display:flex; gap:12px; align-items:baseline } .conversation-answer p { font-size:23px; color:var(--green-ink) } .paper-outcome { display:flex; gap:16px; margin-top:28px; padding-top:21px; border-top:1px solid var(--line); font-size:17px } .knowledge-section { display:grid; grid-template-columns:1fr 1fr; gap:100px; align-items:center } .knowledge-paper { border-top:2px solid var(--ink); border-bottom:1px solid var(--ink); padding:24px 0 } .business-domain { font-family:Outfit; font-size:42px; margin:34px 0 } .business-domain span { float:right; color:var(--green-ink) } .knowledge-row { display:flex; justify-content:space-between; gap:24px; align-items:center; padding:21px 0; border-top:1px solid var(--line); font-size:18px } .knowledge-row>span { color:var(--muted) } .knowledge-row strong { text-align:right; font-weight:600 } .knowledge-seal { display:flex; gap:15px; align-items:center; margin-top:18px; padding:17px 0; color:var(--green-ink); font-size:18px } .knowledge-copy>p:not(.kicker) { margin-top:26px } .knowledge-copy>p:not(.body-large):not(.kicker):not(.assurance) { color:var(--muted) } .knowledge-copy .assurance { font-weight:600 } .knowledge-copy .text-button { margin-top:28px } .film-section { display:grid; grid-template-columns:1fr 1fr; gap:50px; border-top:1px solid var(--line); border-bottom:1px solid var(--ink); padding-block:64px; align-items:center } .film-intro .text-button { margin-top:24px } .film-poster { text-align:center; position:relative; padding:32px 20px } .film-poster .hanging-bell { --bell-width:180px } .film-poster-note { display:flex; gap:14px; justify-content:center; align-items:baseline; margin:26px 0 16px; font-size:19px } .film-poster-note strong { display:block; font-family:Outfit; font-size:27px; margin-top:8px; font-weight:600 } .app-section { display:grid; grid-template-columns:1.05fr 1fr; align-items:center; gap:90px } .app-pitch .body-large { margin-top:29px } .quiet-list { padding:0; list-style:none; margin:32px 0 } .quiet-list li { display:flex; gap:23px; border-top:1px solid var(--line); padding:17px 0; font-size:19px } .quiet-list li span { color:var(--muted); font-size:15px; line-height:2 } .app-pitch .fine { margin-top:18px } .phone-stage { display:flex; justify-content:center } .phone-frame { width:376px; border:1px solid var(--ink); outline:1px solid var(--line); outline-offset:7px; border-radius:42px; padding:16px 14px 0; background:var(--paper); overflow:hidden } .phone-top { display:flex; justify-content:space-between; padding:0 15px 15px; font-size:15px; font-weight:600 } .phone-content { padding:12px 13px 0 } .phone-brand { font-family:Outfit; font-size:17px; letter-spacing:.14em; display:flex; justify-content:space-between; align-items:center } .phone-brand>span { font:400 13px Instrument; letter-spacing:0; color:var(--muted) } .phone-date { font-size:16px; color:var(--muted); margin:28px 0 11px } .phone-content h3 { font-size:38px; margin-bottom:25px } .phone-coverage { padding:16px 0; border-block:1px solid var(--line); display:flex; align-items:center; gap:8px; font-size:15px; color:var(--green-ink) } .phone-coverage strong { font-weight:600 } .tiny-switch { height:21px; width:34px; border-radius:20px; background:var(--signal); margin-left:auto; position:relative; flex-shrink:0 } .tiny-switch:after { content:""; position:absolute; background:var(--paper); height:15px; width:15px; border-radius:50%; top:3px; right:3px } .phone-numbers { display:grid; grid-template-columns:1fr 1fr; padding:20px 0 } .phone-numbers strong { font-family:Outfit; font-size:43px; line-height:1.1; display:block } .phone-numbers span { font-size:15px; color:var(--muted) } .phone-event { padding:16px 0; border-top:1px solid var(--line); font-size:16px } .event-label { font-size:14px; font-weight:600; display:block; margin-bottom:7px } .phone-event>strong { font-size:18px; font-weight:600 } .phone-event p { margin-top:7px; color:var(--muted); font-size:16px } .phone-tabs { display:flex; justify-content:space-between; font-size:15px; padding:20px 0 27px; border-top:1px solid var(--line) } .phone-tabs .selected { color:var(--green-ink); font-weight:600 } .voice-section { border-top:1px solid var(--line); display:grid; grid-template-columns:1fr 1fr; gap:90px; align-items:center } .voice-section>div>p:not(.kicker) { margin-top:24px } .voice-section>div>p:not(.body-large) { color:var(--muted) } .voice-section .text-button { margin-top:24px } .voice-note { padding:32px; border:1px solid var(--line) } .voice-note blockquote { font-family:Outfit; font-size:31px; line-height:1.3; margin:28px 0 } .voice-note figcaption { font-size:16px; color:var(--green-ink) } .voice-line { height:1px; background:var(--ink); margin-top:34px } .setup-section { border-top:1px solid var(--line) } .setup-steps { display:grid; grid-template-columns:repeat(3,1fr); list-style:none; padding:0; margin:0 0 45px; gap:48px } .setup-steps li { border-top:1px solid var(--line); padding-top:20px } .setup-steps li>span { font-family:Outfit; font-size:70px; line-height:1; color:var(--signal) } .setup-steps h3 { margin:22px 0 17px; font-size:31px } .setup-steps p { color:var(--muted) } /* Pricing has an honest empty state until local Price IDs are supplied. */ .pricing-section { border-top:1px solid var(--ink) } .pricing-controls { display:flex; justify-content:space-between; gap:20px; align-items:center; margin-bottom:28px } .pricing-controls p { font-size:18px; color:var(--muted) } .pricing-controls label { display:flex; align-items:center; gap:17px; font-size:17px } .pricing-controls select { min-width:100px } .price-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)) } .price-plan { padding:28px 30px; border-top:1px solid var(--ink); border-right:1px solid var(--line); display:flex; flex-direction:column } .price-plan:first-child { padding-left:0 } .price-plan:last-child { border-right:0; padding-right:0 } .price-plan h3 { font-size:34px; margin:20px 0 29px } .price-plan .plan-label { font-size:13px; color:var(--muted) } .price-amount { margin-bottom:23px } .price-amount>span { font-family:Outfit; font-size:50px; line-height:1.05; letter-spacing:-.045em; display:block } .price-amount small { font-size:16px; color:var(--muted); margin-top:10px; display:block } .price-amount.pending>span { font-size:30px; line-height:1.3 } .price-plan>p:not(.plan-label) { color:var(--muted); font-size:19px } .price-plan ul { padding:0; list-style:none; flex:1; margin:24px 0 31px } .price-plan li { padding:10px 0; border-bottom:1px solid var(--line); font-size:17px } .price-plan .button { padding:15px 12px; gap:12px; font-size:20px } .pricing-section>#currency-note { margin-top:26px } .pricing-bottom { border-top:1px solid var(--line); padding-top:29px; margin-top:28px; display:grid; grid-template-columns:1fr 1fr; gap:60px } .pricing-bottom label { display:block; margin-bottom:10px; font-size:18px } .code-row { display:flex; gap:10px } .code-row input { min-width:0; flex:1; text-transform:uppercase } #discount-result { margin-top:10px } .value-section { display:grid; grid-template-columns:1fr 1fr; gap:100px; border-top:1px solid var(--line); align-items:center } .value-section h2+p { margin-top:26px; color:var(--muted); font-size:23px } .value-result { margin:34px 0 20px } .value-result output { font-family:Outfit; display:block; font-size:70px; line-height:1.05; letter-spacing:-.04em; color:var(--signal) } .value-result span { font-size:17px; color:var(--muted) } .value-controls { display:grid; gap:16px } .value-controls label { display:flex; justify-content:space-between; gap:25px; font-size:20px } .value-controls output { font-weight:600; color:var(--green-ink); white-space:nowrap } .value-controls input+label { margin-top:23px } .origin-section { border-block:1px solid var(--ink); padding:95px 0 50px; overflow:hidden } .origin-layout { display:grid; grid-template-columns:1fr 1fr; gap:90px } .origin-layout blockquote { font-family:Outfit; font-size:33px; line-height:1.3; padding-top:46px; margin-bottom:26px } .origin-layout p:not(.kicker) { color:var(--muted) } .origin-ending { font-size:23px; line-height:1.6; margin-top:26px } .origin-ending strong { color:var(--ink); font-weight:600 } .origin-bell { --bell-width:125px; margin-top:40px } .faq-section { display:grid; grid-template-columns:.85fr 1.15fr; gap:80px } .faq-list details { border-bottom:1px solid var(--line); padding:21px 0 } .faq-list details:first-child { border-top:1px solid var(--line) } .faq-list summary { font-size:22px; font-weight:600; cursor:pointer; list-style:none; display:flex; justify-content:space-between; gap:25px } .faq-list summary:after { content:"+"; font-size:24px; font-weight:400 } .faq-list details[open] summary:after { content:"−" } .faq-list summary::-webkit-details-marker { display:none } .faq-list details>p { font-size:19px; color:var(--muted); margin-top:18px; max-width:580px } .closing-section { text-align:center; padding-top:40px; padding-bottom:100px } .closing-section h2 { font-size:clamp(60px,8vw,110px); margin:30px 0 40px } .closing-section h2>span { color:var(--signal) } .closing-section .fine { margin-top:20px } .site-footer { border-top:1px solid var(--ink); display:grid; grid-template-columns:1.2fr 1fr 1fr; gap:24px 65px; padding-top:42px; padding-bottom:30px } .site-footer>div>a:not(.wordmark),.footer-link { display:block; text-align:left; font-size:17px; background:transparent; margin-bottom:15px; padding:0; color:var(--green-ink); text-decoration:none } .site-footer>div>p { font-size:16px; color:var(--muted); margin-top:18px } .footer-caption { grid-column:1/-1; font-size:14px; color:var(--muted); padding-top:18px } /* Preview interactions. Native dialogs give us Escape and focus containment. */ dialog { background:var(--paper); color:var(--ink); border:1px solid var(--ink); border-radius:5px; padding:45px; max-height:92dvh; max-width:calc(100vw - 32px); width:680px; overflow:auto } dialog::backdrop { background:rgba(31,36,34,.48) } .dialog-close { position:absolute; right:12px; top:9px; font:400 32px Instrument; background:transparent; min-width:48px; min-height:48px; z-index:5 } .dialog-wordmark { font-size:21px; margin-bottom:35px } .setup-dialog h2 { font-size:43px; margin-bottom:21px } .setup-dialog .kicker { margin-bottom:14px } .step-progress { display:flex; gap:8px; margin:23px 0 35px } .step-progress span { height:3px; background:var(--line); flex:1 } .step-progress span.active { background:var(--signal) } .field { display:flex; flex-direction:column; gap:8px; margin:20px 0; font-size:18px } .field-row { display:grid; grid-template-columns:1fr 1fr; gap:16px } .setup-dialog .actions { margin-top:27px } .setup-dialog p { color:var(--muted) } .setup-options { display:grid; grid-template-columns:1fr 1fr; gap:11px; margin-top:23px } .setup-options button { background:transparent; padding:15px; text-align:left; border:1px solid var(--line); font-size:18px; min-height:58px } .setup-options button[aria-pressed=true] { border:2px solid var(--signal); padding:14px; color:var(--green-ink) } .setup-summary { border-block:1px solid var(--line); padding:17px 0; margin:24px 0 } .setup-summary>p { font-size:18px } .setup-summary>p+p { margin-top:8px } .check-label { display:flex; align-items:flex-start; gap:14px; margin-top:20px; font-size:17px } .setup-dialog .fine { font-size:16px; margin-top:14px } .setup-bell { --bell-width:145px; margin:35px 0 } .info-dialog h2 { font-size:36px; margin-bottom:24px } .info-dialog p { margin-bottom:28px } .film-dialog { width:1120px; padding:0 } .film-screen { height:min(630px,70vh); min-height:440px; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:40px 32px 26px; position:relative; overflow:hidden } .film-screen>.kicker { font-size:20px; margin-bottom:25px } .film-screen h2 { font-size:clamp(39px,5vw,68px); line-height:1.05 } .film-screen>.example-label { position:absolute; bottom:19px; left:20px; font-size:14px } .film-visual { width:100%; max-width:660px; margin-top:30px } .film-visual .hanging-bell { --bell-width:140px } .film-message { padding:20px; border-block:1px solid var(--line); font-size:24px } .film-message strong { font-family:Outfit; font-size:33px; font-weight:600; display:block; margin-top:10px } .film-knowledge { display:flex; justify-content:center; gap:25px; flex-wrap:wrap; font-size:23px } .film-knowledge span { padding:10px 0; border-bottom:1px solid var(--line) } .film-controls { display:flex; gap:20px; align-items:center; padding:18px 25px; border-top:1px solid var(--line) } .film-track { height:3px; background:var(--line); flex:1; overflow:hidden } .film-track span { display:block; height:100%; background:var(--signal); width:0 } .film-controls output { font-size:16px; white-space:nowrap } .film-controls .text-button { font-size:18px } #toast { position:fixed; bottom:28px; left:50%; transform:translate(-50%,20px); max-width:calc(100vw - 36px); width:max-content; background:var(--paper); border:1px solid var(--ink); padding:15px 22px; z-index:90; opacity:0; pointer-events:none; font-size:17px; transition:opacity .2s,transform .2s } #toast.show { opacity:1; transform:translate(-50%,0) } @keyframes bell-sway { 0%,55%,100% { transform:rotate(0) } 60% { transform:rotate(5deg) } 66% { transform:rotate(-4deg) } 72% { transform:rotate(2.5deg) } 78% { transform:rotate(-1.5deg) } 85% { transform:rotate(.5deg) } } @keyframes bell-ring { 0%,100% { transform:rotate(0) } 15% { transform:rotate(8deg) } 30% { transform:rotate(-6deg) } 45% { transform:rotate(4deg) } 60% { transform:rotate(-2deg) } 80% { transform:rotate(1deg) } } /* App reference: quiet sidebar on a computer, native-feeling tabs on a phone. */ .app-layout { display:grid; grid-template-columns:244px minmax(0,1fr); min-height:100vh } .app-sidebar { border-right:1px solid var(--line); padding:34px 25px; display:flex; flex-direction:column; position:sticky; top:0; height:100dvh } .app-sidebar>.wordmark { font-size:20px } .workspace-label { padding:33px 0 27px; border-bottom:1px solid var(--line); font-size:17px } .workspace-label strong { display:block } .workspace-label span { font-size:15px; color:var(--muted) } .app-sidebar nav { display:grid; margin-top:24px; gap:6px } .app-sidebar nav button { text-align:left; padding:13px 12px; background:transparent; font-size:18px; border-left:2px solid transparent } .app-sidebar nav button[aria-current=page] { color:var(--green-ink); border-color:var(--signal); font-weight:600 } .app-sidebar>a:last-child { margin-top:auto; padding-top:25px; font-size:16px; color:var(--green-ink) } .app-topbar { padding:22px 42px; display:flex; align-items:center; justify-content:space-between; gap:20px; border-bottom:1px solid var(--line); font-size:17px } .app-topbar>span { color:var(--muted) } .app-content { max-width:1250px; padding:44px 48px 70px; margin:auto } .app-page-head { display:flex; align-items:end; justify-content:space-between; gap:25px; margin-bottom:33px } .app-page-head h1 { font-size:49px } .app-page-head .kicker { margin-bottom:14px } .app-notice { font-size:16px; color:var(--muted); padding:16px 0; border-block:1px solid var(--line); margin-bottom:30px } .coverage-hero { display:grid; grid-template-columns:1fr 200px; border-block:1px solid var(--ink); padding:30px 0 20px; gap:30px; margin:30px 0 } .coverage-hero h2 { font-size:39px; margin:13px 0 20px } .coverage-hero p { color:var(--muted); font-size:19px; max-width:600px } .coverage-hero .hanging-bell { --bell-width:150px; margin-top:24px; align-self:start } .all-on { display:flex; align-items:center; gap:13px; min-height:50px; padding:10px 14px; border:1px solid var(--line); background:transparent; border-radius:4px; font-size:18px; white-space:nowrap } .all-on[aria-checked=true] { border-color:var(--signal); color:var(--green-ink) } .switch-track { width:43px; height:25px; background:var(--line); border-radius:20px; padding:3px; display:block; flex-shrink:0 } .switch-track:after { content:""; display:block; width:19px; height:19px; background:var(--paper); border-radius:50%; transition:transform .2s } .all-on[aria-checked=true] .switch-track { background:var(--signal) } .all-on[aria-checked=true] .switch-track:after { transform:translateX(18px) } .channel-summary { display:flex; gap:26px; flex-wrap:wrap; margin-top:25px; padding-top:20px; border-top:1px solid var(--line); font-size:17px; grid-column:1/-1 } .channel-summary span { display:flex; gap:9px; align-items:center } .app-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:25px; padding:17px 0 30px } .app-stats strong { font-family:Outfit; font-size:46px; line-height:1; display:block; margin-bottom:13px } .app-stats span { font-size:18px; color:var(--muted) } .app-stats small { display:block; font-size:16px; color:var(--muted); margin-top:5px } .app-columns { display:grid; grid-template-columns:1.25fr 1fr; gap:50px; margin-top:12px } .app-section-head { display:flex; justify-content:space-between; gap:20px; align-items:center; margin-bottom:14px } .app-section-head h2 { font-size:28px } .app-section-head button { font-size:17px } .activity-row { border-top:1px solid var(--line); padding:20px 0 } .activity-row>button { display:block; text-align:left; background:transparent; width:100%; padding:0 } .activity-row strong { font-size:22px; font-weight:600 } .activity-row p { font-size:18px; color:var(--muted); margin-top:7px } .activity-row .row-meta { display:flex; justify-content:space-between; margin-bottom:11px; font-size:15px; color:var(--muted) } .activity-row .event-label { margin:0 } .schedule-row { display:flex; gap:23px; border-top:1px solid var(--line); padding:20px 0 } .schedule-row>span { font-family:Outfit; font-size:32px; line-height:1.1; width:48px; flex-shrink:0 } .schedule-row>span small { font:400 15px Instrument; display:block; margin-top:6px } .schedule-row strong { font-size:19px } .schedule-row p { font-size:17px; color:var(--muted); margin-top:7px } .app-mobile-nav { display:none } .app-form { max-width:760px } .app-form section { border-top:1px solid var(--line); padding:27px 0 } .app-form h2 { font-size:30px; margin-bottom:15px } .app-form p { color:var(--muted); font-size:18px } .setting-line { display:flex; justify-content:space-between; gap:25px; align-items:center; padding:16px 0 } .setting-line span { display:block; color:var(--muted); font-size:16px } .setting-line strong { display:block; font-weight:600; font-size:19px } .ring-input { max-width:120px } .protected-row { display:flex; justify-content:space-between; align-items:center; gap:20px; padding:13px 0; border-top:1px solid var(--line); font-size:19px } .protected-row button { background:transparent; font-size:16px; color:var(--green-ink); min-height:44px } .contact-form { display:flex; gap:12px; margin-top:20px } .contact-form input { min-width:0; flex:1 } .channel-toggle { display:flex; align-items:center; gap:15px; font-size:18px } .example-conversation { display:grid; gap:23px; margin-top:25px } .example-conversation p { border:1px solid var(--line); padding:20px 23px; max-width:90%; font-size:22px } .example-conversation p:nth-child(even) { justify-self:end } .example-conversation small { display:block; font-size:16px; color:var(--green-ink); margin-bottom:9px } .message-filter { display:flex; gap:12px; margin:25px 0 } .message-filter button { background:transparent; border:1px solid var(--line); padding:11px 20px; font-size:18px } .message-filter button[aria-pressed=true] { border-color:var(--signal); color:var(--green-ink) } .app-detail-back { margin-bottom:30px } @media(min-width:1550px) { .hero-bell { --bell-width:390px } .hero-object { padding-top:57px } .hero-layout { gap:90px } } @media(max-width:1150px) { .site-header nav { gap:21px; margin-right:0 } .hero-layout { gap:25px; grid-template-columns:1.2fr .85fr } .hero-bell { --bell-width:300px } .hero .lead { font-size:23px } .hero-explainer { font-size:18px } .answer-slip>p { font-size:25px } .slip-heading { font-size:16px } .channel-stories { gap:27px } .knowledge-section,.app-section,.voice-section,.moment-grid,.value-section,.origin-layout { gap:50px } .section-heading { gap:0 50px } .price-plan { padding:26px 20px } .price-plan .plan-label { font-size:12px } .price-plan .button { font-size:20px; padding-inline:10px } .app-layout { grid-template-columns:220px minmax(0,1fr) } .app-sidebar { padding-inline:19px } .app-content { padding:32px } .app-topbar { padding:19px 32px } .app-page-head h1 { font-size:42px } .coverage-hero { grid-template-columns:1fr 130px; gap:20px } .coverage-hero .hanging-bell { --bell-width:120px } .app-columns { gap:30px } .app-stats strong { font-size:40px } .app-stats span { font-size:17px } } @media(max-width:900px) { .site-header nav { display:none } .site-header .button { margin-left:auto } .hero-layout { grid-template-columns:1.15fr .85fr } .hero h1 { font-size:66px } .hero-bell { --bell-width:245px } .hero-object { padding-top:57px } .answer-slip { margin-top:22px } .slip-foot { font-size:16px } .hero .lead { font-size:22px } .hero-explainer { font-size:18px } .desktop-break { display:none } .hero .actions { gap:15px } .text-button { font-size:18px } .section { padding-block:80px } .section-heading>p:last-child { font-size:20px } .channel-stories h3 { font-size:29px } .channel-stories p { font-size:18px } .channel-example { align-items:flex-start; gap:10px } .channel-example strong { font-size:15px } .channel-icon { font-size:25px } .moment-grid h3 { font-size:40px } .moment-grid { gap:32px } .conversation-paper { padding:23px } .conversation-paper blockquote { font-size:27px } .knowledge-section { gap:35px } .knowledge-row { display:block } .knowledge-row>span { display:block; font-size:17px } .knowledge-row strong { text-align:left; display:block; margin-top:6px; font-size:19px } .knowledge-copy .body-large { font-size:23px } .film-section { gap:22px } .film-poster { padding-inline:0 } .app-section { gap:45px; grid-template-columns:1fr 340px } .phone-frame { width:320px; padding-inline:10px } .phone-content { padding-inline:10px } .phone-content h3 { font-size:34px } .phone-coverage { font-size:14px } .phone-brand { font-size:16px } .voice-section { gap:40px } .voice-note { padding:24px } .voice-note blockquote { font-size:27px } .setup-steps { gap:25px } .setup-steps h3 { font-size:27px } .price-grid { grid-template-columns:1fr 1fr } .price-plan:nth-child(2) { border-right:0; padding-right:0 } .price-plan:last-child { grid-column:1/-1; display:grid; grid-template-columns:1fr 1fr; gap:10px 50px; margin-top:32px; padding:30px 0 0 } .price-plan:last-child h3 { margin:0 0 20px } .price-plan:last-child .plan-label { grid-column:1/-1 } .price-plan:last-child .price-amount { grid-column:1; grid-row:3 } .price-plan:last-child>p:not(.plan-label) { grid-column:1 } .price-plan:last-child ul { grid-column:2; grid-row:2/5; margin:0 0 20px } .price-plan:last-child .button { grid-column:2 } .pricing-bottom { gap:25px; grid-template-columns:1fr } .code-row { max-width:550px } .value-section { gap:45px } .value-controls label { font-size:18px } .origin-layout { gap:42px } .origin-layout blockquote { font-size:29px } .faq-section { gap:45px; grid-template-columns:.75fr 1.25fr } .faq-list summary { font-size:20px } .site-footer { gap:25px; grid-template-columns:1.2fr 1fr 1fr } .site-footer .wordmark { font-size:22px } .app-sidebar { display:none } .app-layout { display:block } .app-topbar { padding:17px 25px } .app-content { padding:35px 25px 120px } .app-mobile-nav { display:grid; grid-template-columns:repeat(5,1fr); position:fixed; bottom:0; left:0; right:0; background:var(--paper); border-top:1px solid var(--line); padding:11px 12px calc(11px + env(safe-area-inset-bottom)); z-index:10 } .app-mobile-nav button { background:transparent; font-size:16px; min-height:46px; padding:8px 4px } .app-mobile-nav button[aria-current=page] { color:var(--green-ink); font-weight:600; border-top:2px solid var(--signal) } .app-topbar>span { font:600 20px Outfit; letter-spacing:.12em } .app-topbar>span span { display:none } } @media(max-width:640px) { :root { --gutter:24px } body { font-size:18px } .design-note { font-size:13px; align-items:center; padding-block:8px } .design-note span { max-width:255px } .design-note a { font-size:13px } .site-header { height:86px; gap:12px } .site-header .wordmark { font-size:21px } .site-header .button { display:none } .menu-button { display:block; margin-left:auto } .hero { padding-top:27px } .hero-layout { display:flex; flex-direction:column; gap:0 } .hero h1 { font-size:clamp(53px,12.8vw,76px); line-height:1.04; margin-bottom:25px } .hero .kicker { font-size:16px; margin-bottom:22px } .hero .lead { font-size:22px; line-height:1.45 } .hero-explainer { font-size:18px; margin-top:18px } .hero .actions { gap:18px 24px; margin-top:25px } .hero .text-button { font-size:19px } .hero .fine { font-size:15px; max-width:280px } .hero-object { padding-top:50px; width:100% } .hero-bell { --bell-width:240px } .hero-bell:before,.hero-bell:after { left:calc(-1 * var(--gutter)) } .answer-slip { margin:7px 0 0; padding-top:20px; max-width:100% } .answer-slip>p { font-size:27px } .slip-foot { font-size:17px } .answer-slip .example-label { font-size:14px } .hero-bottom { margin-top:31px; font-size:15px; align-items:center; gap:30px; padding-block:23px } .hero-bottom>span { max-width:200px } .hero-bottom a { gap:14px; white-space:nowrap } .section { padding-block:65px } h2 { font-size:43px; line-height:1.07 } .section-heading { display:block; margin-bottom:33px } .section-heading .kicker { font-size:16px; margin-bottom:19px } .section-heading>p:last-child { margin-top:23px; font-size:20px } .channel-stories { grid-template-columns:1fr; gap:32px } .channel-stories article { padding-top:21px } .channel-stories h3 { font-size:33px; margin:20px 0 14px } .channel-stories p { font-size:20px } .channel-example { margin-top:22px; padding-top:18px; align-items:center; font-size:17px; gap:17px } .channel-example strong { font-size:16px } .channel-icon { font-size:32px } .moment-section { padding:64px 0 } .profession-tabs { gap:5px 23px; margin-bottom:32px } .profession-tabs button { font-size:17px } .moment-grid { grid-template-columns:1fr; gap:29px } .moment-time { font-size:17px; margin-bottom:20px } .moment-grid h3 { font-size:39px } .moment-grid>div>p:last-child { font-size:19px } .conversation-paper { padding:22px } .paper-title { font-size:15px; gap:15px } .conversation-paper blockquote { font-size:29px } .conversation-answer p { font-size:21px } .paper-outcome { font-size:17px } .knowledge-section { display:flex; flex-direction:column; gap:35px; align-items:stretch } .knowledge-copy { order:-1 } .body-large { font-size:23px } .knowledge-copy>p:not(.kicker) { margin-top:22px } .knowledge-copy .text-button { margin-top:23px } .business-domain { font-size:36px } .knowledge-row { display:flex } .knowledge-row>span { font-size:16px; max-width:115px } .knowledge-row strong { font-size:17px; text-align:right; max-width:170px } .knowledge-seal { font-size:16px } .film-section { grid-template-columns:1fr; padding-block:48px; gap:20px } .film-intro .kicker { font-size:16px; max-width:260px } .film-poster { padding:26px 0 8px } .film-poster-note strong { font-size:26px } .app-section { grid-template-columns:1fr; gap:49px } .quiet-list li { font-size:18px; gap:17px } .phone-stage { padding:0 6px } .phone-frame { width:min(350px,100%) } .phone-content { padding-inline:11px } .phone-content h3 { font-size:37px } .phone-coverage { font-size:15px } .phone-date { font-size:17px } .phone-brand { font-size:17px } .voice-section { grid-template-columns:1fr; gap:35px } .voice-note { padding:24px } .voice-note blockquote { font-size:29px } .voice-section .fine { font-size:16px } .setup-steps { grid-template-columns:1fr; gap:26px; margin-bottom:30px } .setup-steps li { display:grid; grid-template-columns:48px 1fr; gap:11px 23px; align-items:start; padding-top:23px } .setup-steps li>span { font-size:53px; grid-row:1/3 } .setup-steps h3 { font-size:29px; margin:0 } .setup-steps p { grid-column:2; font-size:18px } .price-grid { display:block } .pricing-controls { margin-bottom:15px } .price-plan,.price-plan:first-child,.price-plan:nth-child(2),.price-plan:last-child { display:flex; flex-direction:column; padding:28px 0 31px; margin:0; border-right:0 } .price-plan .plan-label { font-size:14px } .price-plan h3,.price-plan:last-child h3 { font-size:35px; margin:19px 0 25px } .price-amount>span { font-size:54px } .price-plan>p:not(.plan-label) { font-size:20px } .price-plan li { font-size:18px } .price-plan ul,.price-plan:last-child ul { margin:22px 0 28px } .price-plan .button { min-height:58px } .price-plan:last-child .price-amount>span { font-size:44px } .pricing-bottom { padding-top:22px; margin-top:23px; gap:23px } .code-row { gap:9px } .code-row .button { padding-inline:14px; white-space:nowrap; font-size:20px } .code-row input { width:50%; font-size:18px } .value-section { grid-template-columns:1fr; gap:32px } .value-result output { font-size:64px } .value-controls label { font-size:18px } .value-section h2+p { font-size:22px } .origin-section { padding:60px 0 38px } .origin-layout { grid-template-columns:1fr; gap:30px } .origin-layout blockquote { padding:0; font-size:30px } .origin-ending { font-size:23px } .origin-bell { --bell-width:110px; margin-top:31px } .faq-section { grid-template-columns:1fr; gap:32px } .faq-list summary { font-size:21px } .faq-list details>p { font-size:18px } .closing-section { padding:10px var(--gutter) 70px } .closing-section .kicker { max-width:260px; margin-inline:auto; font-size:16px } .closing-section h2 { font-size:62px; margin:24px 0 32px } .site-footer { grid-template-columns:1fr 1fr; gap:31px 20px; padding-top:33px } .site-footer>div:first-child { grid-column:1/-1 } .site-footer .wordmark { font-size:24px } .site-footer>div>a:not(.wordmark),.footer-link { font-size:16px; min-height:30px } .footer-caption { font-size:13px } .button { padding:16px 20px; gap:17px } .text-button { font-size:19px } .field-row { grid-template-columns:1fr; gap:0 } dialog { padding:34px 24px; max-height:94dvh } .setup-dialog h2 { font-size:35px } .dialog-wordmark { font-size:20px; margin-bottom:28px } .setup-options { gap:10px } .setup-options button { font-size:17px; padding:12px } .setup-options button[aria-pressed=true] { padding:11px } .step-progress { margin:22px 0 26px } .setup-dialog .actions { gap:18px } .setup-dialog .actions .button { width:100% } .film-screen { min-height:480px; height:70dvh; padding:42px 23px } .film-screen>.kicker { font-size:18px; margin-bottom:22px } .film-screen h2 { font-size:42px } .film-visual { margin-top:25px } .film-knowledge { gap:12px 18px; font-size:20px } .film-message { font-size:21px; padding:18px 0 } .film-message strong { font-size:30px } .film-controls { flex-wrap:wrap; gap:15px; padding:18px } .film-controls .button { font-size:20px; min-width:98px } .film-track { flex-basis:45%; flex-grow:1 } .film-controls output { margin-left:auto; font-size:15px } .film-screen>.example-label { font-size:13px } .app-topbar { padding:14px 20px } .app-topbar>span { font-size:18px; letter-spacing:.1em } .all-on { font-size:17px; padding:8px 10px; gap:9px } .app-content { padding:29px 22px 125px } .app-page-head { display:block; margin-bottom:26px } .app-page-head h1 { font-size:39px } .app-page-head .kicker { font-size:16px } .app-page-head>.button { margin-top:22px } .app-notice { font-size:15px; margin-bottom:26px } .coverage-hero { grid-template-columns:1fr 94px; gap:17px; padding:24px 0 17px; margin:26px 0 } .coverage-hero h2 { font-size:30px; margin:11px 0 18px } .coverage-hero p { font-size:17px } .coverage-hero .kicker { font-size:15px } .coverage-hero .hanging-bell { --bell-width:90px; margin-top:28px } .channel-summary { display:grid; gap:12px; margin-top:0; font-size:16px } .app-stats { grid-template-columns:1fr 1fr; gap:24px 15px; padding-bottom:24px } .app-stats>div:last-child { grid-column:1/-1; padding-top:17px; border-top:1px solid var(--line) } .app-stats>div:last-child strong { font-size:36px } .app-stats strong { font-size:42px; margin-bottom:9px } .app-stats span { font-size:17px } .app-stats small { font-size:15px } .app-columns { grid-template-columns:1fr; gap:35px } .app-section-head h2 { font-size:28px } .app-section-head button { font-size:16px } .activity-row p { font-size:18px } .app-mobile-nav { padding-inline:7px } .app-mobile-nav button { font-size:15px } .app-form h2 { font-size:30px } .contact-form { flex-wrap:wrap } .contact-form .button { width:100% } .app-form .button { font-size:20px } .example-conversation p { font-size:20px; max-width:96% } .example-conversation small { font-size:15px } .app-content>.actions { margin-top:25px } .app-layout #toast { bottom:100px } } @media(max-width:370px) { .hero h1 { font-size:49px } .hero .actions { align-items:flex-start; flex-direction:column; gap:13px } .hero-bottom { font-size:14px } .hero-bottom>span { max-width:180px } .site-header .wordmark { font-size:20px } .design-note { font-size:12px } .design-note span { max-width:205px } .phone-coverage { font-size:13px } .phone-brand { font-size:15px } .phone-content { padding-inline:6px } .phone-brand>span { font-size:12px } .phone-event p { font-size:15px } .coverage-hero { grid-template-columns:1fr } .coverage-hero .hanging-bell { display:none } .app-topbar>span { font-size:16px } .app-mobile-nav button { font-size:14px } .app-topbar { padding-inline:16px } .app-content { padding-inline:18px } .code-row { flex-wrap:wrap } .code-row input { width:100%; flex-basis:100% } } @media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto } *,*:before,*:after { animation:none!important; transition:none!important } .button:hover { transform:none } } @media print { .design-note,.site-header nav,.button,.text-button,dialog,.app-mobile-nav { display:none!important } .section { break-inside:avoid; padding-block:35px } .site-header { height:75px } .hero h1 { font-size:60px } .hero-bell { --bell-width:250px } body { font-size:13pt } } /* Signup, optional setup, billing and empty-state references. */ .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 } textarea { font:inherit; font-size:19px; line-height:1.5; background:var(--paper); color:var(--ink); border:1px solid var(--line); padding:14px; max-width:100%; resize:vertical } .signup-layout { display:grid; grid-template-columns:1fr 1fr; min-height:calc(100dvh - 40px) } .signup-story { padding:47px clamp(28px,5vw,80px); border-right:1px solid var(--line); display:flex; flex-direction:column; justify-content:space-between; gap:50px; overflow:hidden } .signup-story h1 { font-size:clamp(52px,5.2vw,80px); margin-bottom:26px } .signup-story>div>p:not(.kicker) { font-size:23px; color:var(--muted) } .signup-story .hanging-bell { --bell-width:210px } .signup-story>.fine { text-align:center } .signup-main { padding:40px clamp(26px,4.4vw,75px) 65px; max-width:740px; width:100%; margin:auto } .signup-main h2 { font-size:53px; margin-bottom:24px } .signup-main>#setup-content>p:not(.kicker) { font-size:21px; color:var(--muted) } .signup-main>#setup-content>.fine { font-size:16px; margin-top:18px } .signup-main .step-progress { margin:26px 0 40px } .signup-progress-header { display:flex; gap:15px; justify-content:space-between; align-items:center; margin-bottom:44px } .signup-progress-header .text-button { font-size:16px; border:0 } .signup-progress-header>span { font-size:15px; color:var(--muted); white-space:nowrap } .social-signin { display:grid; gap:12px; margin-top:31px } .email-divider { display:flex; gap:18px; align-items:center; font-size:16px; color:var(--muted); margin:27px 0 } .email-divider:before,.email-divider:after { content:""; height:1px; flex:1; background:var(--line) } .inline-link { background:transparent; padding:0; display:inline; color:var(--green-ink); font:inherit; text-decoration:underline; text-underline-offset:3px } .signup-main .setup-options { margin-block:28px } .signup-main .fine { font-size:16px; margin-top:13px } .signup-main .setup-summary { margin-top:25px } .signup-main .actions { margin-top:27px } .mobile-signup-brand { display:none } .onboarding-links { display:grid } .onboarding-links a { display:flex; justify-content:space-between; gap:22px; padding:16px 0; border-bottom:1px solid var(--line); font-size:19px; text-decoration:none; color:var(--green-ink) } .app-note-panel { border-top:1px solid var(--ink); margin-top:28px; padding-top:25px } .app-note-panel h3 { font-size:29px; line-height:1.2; margin-bottom:18px } .app-note-panel p { font-size:19px; color:var(--muted); margin-bottom:20px } .app-note-panel .actions { margin-bottom:25px } .app-note-panel h2 { font-size:39px; margin-bottom:25px } .search-field { display:grid; gap:12px; max-width:620px; margin-bottom:25px } .search-field label { font-size:17px } .connection-banner { display:flex; justify-content:space-between; gap:25px; align-items:center; border-top:1px solid var(--ink); padding:25px 0; margin-bottom:24px } .connection-banner strong { font:600 27px Outfit } .connection-banner p { font-size:18px; color:var(--muted); margin-top:12px } .calendar-caption { display:flex; justify-content:space-between; align-items:center; gap:20px; margin-bottom:24px } .calendar-caption h2 { font-size:29px } .calendar-caption>span { font-size:16px; color:var(--muted) } .calendar-week { display:grid; grid-template-columns:repeat(7,1fr); border-block:1px solid var(--line); margin-bottom:22px } .calendar-week button { padding:18px 4px; background:transparent; border-right:1px solid var(--line); text-align:center } .calendar-week button:last-child { border-right:0 } .calendar-week button.chosen { color:var(--green-ink); border-bottom:3px solid var(--signal); padding-bottom:15px } .calendar-week span { font-size:16px } .calendar-week strong { display:block; font:600 31px Outfit; margin-top:9px } .empty-design { padding:40px 0 } .empty-design h3 { font-size:29px } .empty-design p { color:var(--muted); margin-top:17px } .customer-row { display:grid; grid-template-columns:55px 1fr auto; align-items:center; gap:23px; padding:24px 0; border-top:1px solid var(--line) } .customer-row h2 { font-size:25px } .customer-row p { font-size:17px; color:var(--muted); margin-top:9px } .customer-initials { display:flex; justify-content:center; align-items:center; width:50px; height:50px; border:1px solid var(--line); border-radius:50%; font-family:Outfit; font-size:20px } .customer-row .text-button { font-size:17px } .money-feature { padding:35px 0; border-block:1px solid var(--line); margin-bottom:35px } .money-feature>strong { font:600 clamp(72px,8vw,108px) Outfit; color:var(--signal); letter-spacing:-.04em; line-height:1.1 } .money-feature>p:not(.kicker) { font-size:25px; margin-top:14px } .money-feature>span { font-size:18px; color:var(--muted); display:block; margin-top:18px } .locked-opener { font-family:Outfit; font-size:25px; line-height:1.4; padding:23px 0; border-block:1px solid var(--line); margin:24px 0 } .coverage-inline { display:flex; gap:35px; justify-content:space-between; align-items:center; padding:27px 0; border-top:1px solid var(--ink) } .coverage-inline h2 { font-size:34px; margin-bottom:18px } .coverage-inline p { font-size:19px; color:var(--muted); max-width:650px } .trial-panel { display:grid; grid-template-columns:1fr 1fr; gap:65px; border-block:1px solid var(--ink); padding:32px 0; margin-bottom:35px } .trial-panel h2 { font-size:35px; margin-bottom:18px } .trial-panel p { font-size:18px; color:var(--muted) } .trial-panel label { display:flex; justify-content:space-between; font-size:17px } .trial-panel progress { width:100%; height:6px; border:0; display:block; margin:15px 0 30px; background:var(--line); accent-color:var(--signal) } .trial-panel progress::-webkit-progress-bar { background:var(--line) } .trial-panel progress::-webkit-progress-value { background:var(--signal) } .app-price-grid { display:grid; grid-template-columns:1fr 1fr; gap:35px; margin-bottom:25px } .app-price-grid article { padding:26px; border:1px solid var(--line) } .app-price-grid h2 { font-size:30px } .app-price-grid article>strong { font:600 42px Outfit; display:block; margin:22px 0 } .app-price-grid small { font:400 16px Instrument; display:block; margin-top:8px } .app-price-grid p { font-size:19px; color:var(--muted); margin-bottom:22px } .app-price-grid .button { font-size:20px; padding:15px } .report-letter { padding:35px; border:1px solid var(--line); max-width:850px } .report-from { font-size:15px; letter-spacing:.1em; color:var(--muted); margin-bottom:26px } .report-letter h2 { font-size:40px; line-height:1.15 } .report-letter h2+p { font-size:23px; color:var(--muted); margin-top:20px } .report-letter .app-stats { padding:32px 0 } .report-letter h3 { font-size:29px } .report-letter .button { margin-top:26px } .voice-design-options { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-bottom:22px } .voice-design-options>label { padding:20px; border:1px solid var(--line); display:grid; gap:12px; align-content:start } .voice-design-options input { min-height:20px; accent-color:var(--signal); margin:0; width:20px; height:20px } .voice-design-options strong { font-size:21px; font-weight:600 } .voice-design-options span { font-size:17px; color:var(--muted) } .consent-steps { padding-left:24px; font-size:19px; line-height:1.6 } .consent-steps li { padding:7px 0 } .more-list { display:grid } .more-link { padding:20px 0; border-bottom:1px solid var(--line); display:flex; justify-content:space-between; align-items:center; text-align:left; gap:30px; font-size:22px; background:transparent; color:var(--ink); text-decoration:none } .more-link span { color:var(--green-ink) } .detail-facts { margin:30px 0 } .detail-facts>div { border-top:1px solid var(--line); padding:17px 0 } .detail-facts span { font-size:16px; color:var(--muted); display:block } .detail-facts strong { font-size:22px; display:block; font-weight:600; margin-top:8px } .cover-time-options,.connect-options { display:grid; grid-template-columns:1fr 1fr; gap:13px; margin:26px 0 } .payment-reference { margin:27px 0 } .payment-reference h3 { font-size:27px; margin-top:27px } .payment-reference p { margin-top:12px } .payment-reference>div { display:flex; flex-wrap:wrap; gap:15px; margin:19px 0 } .payment-reference>div span { border:1px solid var(--line); padding:10px 13px; font-size:18px } .recording-state { display:flex; flex-direction:column; align-items:center; text-align:center; gap:22px; margin:35px 0 } .record-circle { width:56px; height:56px; border-radius:50%; border:2px solid var(--signal); position:relative } .record-circle:after { content:""; position:absolute; inset:12px; border-radius:50%; background:var(--signal) } .recording-state>span:last-child { font-size:17px; color:var(--muted) } .review-answer { padding:22px; border:1px solid var(--line); margin:25px 0 } .review-answer h3 { font-size:26px; margin:15px 0 } .review-answer p { font-size:20px } @media(max-width:1000px) { .signup-story { padding-inline:35px } .signup-story h1 { font-size:57px } .signup-main { padding-inline:35px } .signup-main h2 { font-size:46px } .trial-panel { gap:35px } .app-price-grid { gap:23px } .customer-row { grid-template-columns:50px 1fr } .customer-row .text-button { grid-column:2; justify-self:start } .voice-design-options { gap:10px } .voice-design-options>label { padding:16px } .signup-main .setup-options { grid-template-columns:1fr 1fr } } @media(max-width:640px) { .signup-layout { display:block } .signup-story { display:none } .mobile-signup-brand { display:block; font-size:22px; margin-bottom:19px } .signup-main { padding:26px 25px 55px } .signup-main h2 { font-size:43px } .signup-main>#setup-content>p:not(.kicker) { font-size:21px } .signup-progress-header { margin-bottom:27px; gap:10px } .signup-progress-header .text-button { font-size:15px; min-height:42px } .signup-progress-header>span { font-size:14px } .signup-main .step-progress { margin-bottom:32px } .signup-main .kicker { font-size:16px } .signup-main .fine { font-size:16px } .signup-main .social-signin { margin-top:26px } .signup-main .actions .button { width:100% } .signup-main .field-row { grid-template-columns:1fr } .signup-main .setup-options { gap:10px } .signup-main .setup-options button { font-size:17px } .signup-main .setup-bell { --bell-width:120px; margin:20px 0 30px } .onboarding-links a { font-size:18px } .connection-banner { display:block } .connection-banner .button { margin-top:22px } .connection-banner p { font-size:18px } .calendar-caption h2 { font-size:26px } .calendar-caption>span { font-size:14px } .calendar-week button { padding:13px 2px } .calendar-week button.chosen { padding-bottom:10px } .calendar-week span { font-size:14px } .calendar-week strong { font-size:28px } .customer-row { gap:15px; padding:22px 0 } .customer-row h2 { font-size:24px } .customer-row p { font-size:17px } .customer-row .text-button { font-size:17px } .money-feature { padding:30px 0 } .money-feature>strong { font-size:78px } .money-feature>p:not(.kicker) { font-size:23px } .money-feature>span { font-size:17px } .coverage-inline { align-items:flex-start; gap:20px; flex-wrap:wrap } .coverage-inline h2 { font-size:34px } .coverage-inline p { font-size:18px } .locked-opener { font-size:23px } .trial-panel { grid-template-columns:1fr; gap:30px } .trial-panel h2 { font-size:33px } .trial-panel progress:last-child { margin-bottom:5px } .app-price-grid { grid-template-columns:1fr; gap:20px } .app-price-grid article { padding:25px } .app-form .connection-list .setting-line { align-items:flex-start; flex-wrap:wrap; gap:16px } .app-form .connection-list .setting-line .button { min-height:50px; padding:12px 18px } .report-letter { padding:25px 20px } .report-letter h2 { font-size:34px } .report-letter h2+p { font-size:21px } .report-letter .app-stats { grid-template-columns:1fr 1fr } .report-letter .app-stats strong { font-size:39px } .report-letter .app-stats>div:last-child strong { font-size:34px } .voice-design-options { grid-template-columns:1fr } .voice-design-options>label { grid-template-columns:24px 1fr; gap:8px 13px; align-items:center } .voice-design-options span { grid-column:2 } .cover-time-options,.connect-options { grid-template-columns:1fr } .cover-time-options { gap:11px } .cover-time-options .button { font-size:20px } .more-link { font-size:21px } .app-note-panel h2 { font-size:35px } .app-note-panel h3 { font-size:27px } .app-note-panel p { font-size:18px } } /* Trial details stay available without turning the offer into launch copy. */ .trial-terms { margin-top: 14px; max-width: 560px; font-size: 18px; } .trial-terms summary { cursor: pointer; color: var(--green-ink); font-weight: 600; padding-block: 8px; } .trial-terms p { margin: 10px 0 0; color: var(--muted); font-size: 18px; line-height: 1.55; } .origin-source { display: inline-block; margin-top: 20px; color: var(--green-ink); font-size: 18px; }