/* Landing page. Mobile first, from the design's "Version 5 · One call" board. */

/* Sticky header, which turns to Day with the story (landing.js) */
.v5-hdr{position:sticky;top:0;z-index:var(--z-sticky)}
.hdr-logo{position:relative;display:inline-flex;height:28px;width:183px;flex:none}
.hdr-logo img{position:absolute;left:0;top:0;height:28px;width:auto;display:block}
.v5-logo-day{opacity:0}
.nav-links{display:none;gap:28px;align-items:center}
.nav-links a{color:var(--ink);text-decoration:none;font-size:15px;font-weight:600;padding:6px 0;box-shadow:inset 0 -2px 0 transparent;transition:box-shadow var(--duration-2) var(--ease-out)}
.nav-links a[aria-current="true"]{box-shadow:inset 0 -2px 0 var(--signal)}
.btn-hdr{min-height:40px;padding:0 18px;font-size:13px;white-space:nowrap}
.cta-short{display:inline}.cta-long{display:none}
@media (min-width:560px){.cta-short{display:none}.cta-long{display:inline}}
@media (max-width:420px){.hdr-logo{width:150px}.hdr-logo img{height:23px}.hdr-row{gap:12px}}
.anchor-top{position:absolute;top:0}

/* The timeline rail every section hangs on */
.sec{border-top:1px solid var(--rule)}
.sec-first{border-top:0}
.sec-raised{background:var(--paper-raised)}
.tl{position:relative;max-width:var(--container-max);margin:0 auto;padding:72px 16px 72px 48px}
.tl::before{content:"";position:absolute;left:21px;top:0;bottom:0;width:1px;background:var(--rule)}
.tl-fill{position:absolute;left:21px;top:0;bottom:0;width:1px;background:var(--signal);transform:scaleY(0);transform-origin:50% 0}
.ent{position:relative;display:flex;flex-direction:column;gap:12px}
.ent-dot{position:absolute;left:-32px;top:2px;width:11px;height:11px;border-radius:9999px;background:var(--paper);border:1px solid var(--rule-strong)}
.ent-dot.is-live{background:var(--signal);border-color:var(--signal);box-shadow:0 0 0 4px var(--signal-soft)}

.stack-6,.stack-8,.stack-12,.stack-14,.stack-36,.stack-40{display:flex;flex-direction:column}
.stack-6{gap:6px}.stack-8{gap:8px}.stack-12{gap:12px}.stack-14{gap:14px}.stack-36{gap:36px}.stack-40{gap:40px}
.mw-760{max-width:760px}.mw-900{max-width:900px}.mw-1000{max-width:1000px}

.g2,.g3,.g5,.chips,.acts{display:grid;gap:24px;grid-template-columns:minmax(0,1fr)}
.g5{gap:12px}
.chips{gap:10px;grid-template-columns:repeat(2,minmax(0,1fr));list-style:none;margin:0;padding:0}
.acts{gap:10px;list-style:none;margin:0;padding:0}

/* 0001 Hero */
.ent-hero{gap:28px}
.hero-h1{margin:0;display:flex;flex-direction:column;gap:28px;font:inherit}
.hero-lines{display:block;max-width:980px}
.v5-eyebrow,.v5-line{display:block}
.v5-ctas{display:flex;flex-direction:column;gap:12px;align-items:flex-start}
.stream{border:1px solid var(--rule);border-radius:var(--radius-lg);background:var(--paper-sunken);padding:16px;display:flex;flex-direction:column;gap:4px;overflow-x:auto}
.stream .wl-logline{white-space:nowrap}
/* The hero's entrance: CSS, so it starts at first paint rather than after the deferred scripts.
   Same choreography as the motion playbook: eyebrow, the two headline lines unmask, then the lead,
   the buttons and the record; the log lines type in. Eases are the design system's ease-out. */
@media (prefers-reduced-motion:no-preference){
.motion-full .v5-eyebrow,.motion-calm .v5-eyebrow{animation:wl-hero-in .6s var(--ease-out) both}
.motion-full .v5-line{animation:wl-hero-line .8s var(--ease-out) .3s both}
.motion-full .v5-line+.v5-line{animation-delay:.44s}
.motion-full .v5-sub,.motion-calm .v5-sub{animation:wl-hero-in .6s var(--ease-out) .84s both}
.motion-full .v5-ctas,.motion-calm .v5-ctas{animation:wl-hero-in .6s var(--ease-out) .92s both}
.motion-full .v5-stream,.motion-calm .v5-stream{animation:wl-hero-in .6s var(--ease-out) 1s both}
.motion-full .v5-log{animation:wl-hero-type .45s steps(30) 1.5s both}
.motion-full .v5-log:nth-child(2){animation-delay:1.85s}
.motion-full .v5-log:nth-child(3){animation-delay:2.2s}
.motion-full .v5-log:nth-child(4){animation-delay:2.55s}
.motion-calm .v5-eyebrow,.motion-calm .v5-sub,.motion-calm .v5-ctas,.motion-calm .v5-stream{animation-name:wl-hero-fade}
.motion-calm .v5-line{animation:wl-hero-fade .6s var(--ease-out) .3s both}
}
@keyframes wl-hero-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes wl-hero-fade{from{opacity:0}to{opacity:1}}
@keyframes wl-hero-line{from{clip-path:inset(100% 0 0 0);transform:translateY(16px)}to{clip-path:inset(0 0 0 0);transform:none}}
@keyframes wl-hero-type{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}

/* 0002 Problem */
.frag{border:1px solid var(--rule);border-radius:var(--radius-md);background:var(--paper-raised);padding:14px;display:flex;flex-direction:column;gap:8px;min-height:116px}

/* 0003 Both */
.ent-both{gap:20px}
.both-stage{display:flex;flex-direction:column;gap:56px;min-height:0}
.both-layer{display:flex;flex-direction:column;gap:24px}
.both-layer:first-child{gap:12px}
.both-h2{margin:0;display:flex;flex-direction:column;gap:12px;font:inherit}
.both-q{display:block;max-width:900px;color:var(--ink-muted)}
.both-mega{display:block;color:var(--signal-text);margin-top:16px}
.chip{display:flex;align-items:center;gap:10px;padding:12px 14px;border:1px solid var(--rule);border-radius:var(--radius-md);background:var(--paper-raised);font-weight:600;font-size:15px;line-height:20px}
.chip.is-signal{border-color:var(--signal)}
.act{display:grid;grid-template-columns:24px minmax(0,1fr) auto;gap:12px;align-items:center;padding:14px 16px;border:1px solid var(--rule);border-radius:var(--radius-md);background:var(--paper-raised)}
@media (max-width:480px){.act{grid-template-columns:24px minmax(0,1fr)}.act .t-log{grid-column:2}}

/* 0004 Replay */
.v5-replay{transition:background-color 600ms var(--ease-out),color 600ms var(--ease-out)}
.v5-replay:not(.day){background:var(--paper)}
.pin-spacer:has(> .v5-replay.day){background:#ffffff}
.replay-intro{max-width:460px}
.clock{font:500 64px/64px var(--font-mono);letter-spacing:-.02em;margin:0;font-variant-numeric:tabular-nums}
.phases{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}
/* Steps other than the current one are muted by colour, not opacity, so their text keeps 4.5:1 contrast. */
.phase{display:grid;grid-template-columns:64px minmax(0,1fr);gap:12px;padding:12px 0 12px 12px;border-left:2px solid var(--rule);color:var(--ink-muted)}
.phase .t-body{color:var(--ink-muted)}
.phase.is-current{border-left-color:#00d68f}
.phase.is-current .t-body{color:var(--ink)}
.replay-panel{display:flex;flex-direction:column;align-items:center;gap:24px;padding:40px 24px;border:1px solid var(--rule);border-radius:var(--radius-lg);background:var(--paper-raised)}
.replay-panel .t-heading,.replay-label{text-align:center;max-width:420px}
.replay-log{max-width:100%}
@media (max-width:560px){.replay-log .wl-logline{grid-template-columns:auto minmax(0,1fr)}.replay-log .wl-logline-text{grid-column:1 / -1;overflow-wrap:normal}}

/* 0005 Tell */
.card{border:1px solid var(--rule);border-radius:var(--radius-lg);background:var(--paper);overflow:hidden}
.card-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;padding:14px 20px;border-bottom:1px solid var(--rule);background:var(--paper-raised)}
.mail-row{display:grid;grid-template-columns:72px minmax(0,1fr);gap:12px;padding:10px 20px;border-bottom:1px solid var(--rule)}
.mail-body{padding:18px 20px;display:flex;flex-direction:column;gap:12px}
.card-actions{display:flex;flex-wrap:wrap;gap:8px;padding:0 20px 20px}

/* 0006 Reports */
.report-controls{display:flex;flex-direction:column;gap:20px}
.pager{display:flex;flex-wrap:wrap;gap:8px}
.pager button{min-height:44px;padding:0 14px;border-radius:9999px;border:1px solid var(--rule-strong);background:transparent;color:var(--ink);font:600 13px/16px var(--font-sans);cursor:pointer}
.pager button:hover{background:var(--surface-hover)}
.pager button[aria-pressed="true"]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.list{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.list li{display:flex;gap:10px;align-items:flex-start;font-size:15px;line-height:24px}
.list li>.wl-icon{margin-top:2px}
.steps{gap:8px}
.desk{position:relative;height:520px;border:1px solid var(--rule);border-radius:var(--radius-lg);background:var(--paper-sunken);overflow:hidden;isolation:isolate}
.pg-wrap{position:absolute;left:50%;top:40px;width:300px;height:424px;margin-left:-150px}
.pg{width:100%;height:100%;background:#ffffff;color:#000000;border:1px solid #d4d4d4;border-radius:4px;padding:24px 22px;display:flex;flex-direction:column;gap:12px;transition:transform 300ms var(--ease-out);text-align:left;font-family:var(--font-sans);overflow:hidden}
.pg-top{display:flex;justify-content:space-between;align-items:center}
.pg-logo{font-weight:800;font-size:13px;line-height:16px;letter-spacing:-.02em;color:#000000}
.pg .pg-stamp{font:500 8px/12px var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:#5c5c5c;margin:0}
.pg .pg-h{font-weight:800;font-size:22px;line-height:24px;letter-spacing:-.03em;margin:0}
.pg .pg-t{font-size:10px;line-height:15px;margin:0;color:#3d3d3d}
.pg .pg-row{display:grid;grid-template-columns:44px minmax(0,1fr);gap:8px;padding:6px 0;border-top:1px solid #e8e8e8;font-size:10px;line-height:14px}
.pg-d{font-family:var(--font-mono);color:#5c5c5c}
.pg-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:8px}
.pg .pg-num{font-weight:800;font-size:28px;line-height:28px;letter-spacing:-.03em}
.pg-bars{display:grid;grid-template-columns:repeat(30,minmax(0,1fr));gap:2px;margin-top:8px}
.pg-bars span{height:18px;border-radius:1px;background:#00d68f}
.pg-bars span.is-found{background:#ffb224}
.pg-foot{margin-top:auto!important}

/* 0008 Proof */
.risk{display:flex;flex-direction:column;gap:12px;padding:24px;border:1px solid var(--rule);border-radius:var(--radius-md);background:var(--paper)}

/* 0009 Questions */
.faq-wrap{display:flex;flex-direction:column;gap:28px;max-width:820px}
.faq details{border-top:1px solid var(--rule);padding:18px 0}
.faq details:last-child{border-bottom:1px solid var(--rule)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;font-weight:600;font-size:18px;line-height:26px;min-height:44px}
.faq summary::-webkit-details-marker{display:none}
.faq details[open] .chev{transform:rotate(180deg)}
.faq .q{margin:0;font:inherit;letter-spacing:inherit}
.faq details>p{margin-top:12px}
.chev{transition:transform var(--duration-2) var(--ease-out);display:inline-flex}

/* 0010 Offer */
.offer-terms{display:grid;grid-template-columns:minmax(0,1fr);gap:28px}
.offer-card{display:flex;flex-direction:column;gap:20px;padding:24px;border:2px solid var(--ink);border-radius:var(--radius-lg);background:var(--paper)}
.cd{display:flex;flex-direction:column;gap:10px}
.cd-head{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.cd-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.cd-cell{display:flex;flex-direction:column;gap:4px;padding:12px;border:1px solid var(--rule);border-radius:var(--radius-sm);background:var(--paper-sunken)}
.cd-num{font:500 32px/36px var(--font-mono);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.offer-form{display:flex;flex-direction:column;gap:16px;padding-top:20px;border-top:1px solid var(--rule)}
.done{display:flex;flex-direction:column;gap:12px;padding-top:16px;border-top:1px solid var(--rule)}
.start-card{padding:32px;border:1px solid var(--rule);border-radius:var(--radius-lg);background:var(--paper-raised)}
.wait{display:flex;flex-direction:column;gap:12px;padding-top:16px;border-top:1px solid var(--rule)}
.plug{display:grid;grid-template-columns:64px minmax(0,1fr);gap:16px;padding:20px;border:1px solid var(--rule);border-radius:var(--radius-md);background:var(--paper)}
@media (max-width:480px){.start-card{padding:20px}.offer-card{padding:20px}}

/* Wider screens */
@media (min-width:768px){
.tl{padding:96px 32px 96px 88px}.tl::before,.tl-fill{left:37px}.ent-dot{left:-56px}
.nav-links{display:flex}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g5{grid-template-columns:repeat(2,minmax(0,1fr))}
.chips{grid-template-columns:repeat(3,minmax(0,1fr))}
.desk{height:600px}.pg-wrap{width:340px;height:480px;margin-left:-170px;top:56px}
.pg .pg-h{font-size:26px;line-height:28px}.pg .pg-t{font-size:11px;line-height:16px}.pg .pg-row{font-size:11px;line-height:16px}
}
@media (min-width:768px) and (max-width:1023px){.nav-links{gap:18px}.nav-links a{font-size:14px}}
@media (min-width:1024px){
.g2{grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:64px;align-items:center}
.g2-start{align-items:start}
.g5{grid-template-columns:repeat(5,minmax(0,1fr))}
}
@media (prefers-reduced-motion:reduce){.chev,.v5-replay,.pg,.nav-links a{transition:none}}

/* ---------- Forms: WPForms markup in the design system's TextField, Button and Alert ---------- */
.wl-form form{display:flex;flex-direction:column;gap:16px;margin:0}
.wl-form .wpforms-field-container{display:flex;flex-direction:column;gap:16px}
.wl-form .wpforms-field{display:grid;gap:6px;padding:0;margin:0;min-width:0}
/* The anti-spam decoy field: hidden from people and screen readers; bots still see it in the HTML. */
.wl-form .wpforms-field[data-field-type="text"]{display:none!important}
.wl-form .wpforms-field-label{font:600 13px/16px var(--font-sans);color:var(--ink);margin:0}
.wl-form .wpforms-required-label{display:none}
/* WPForms' screen-reader notes (e.g. "submit button is disabled while sending"): read, not shown. */
.wl-form .wpforms-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.wl-form input[type="email"],.wl-form input[type="number"]{width:100%;max-width:none;font:400 15px/22px var(--font-sans);color:var(--ink);background:var(--paper);border:1px solid var(--rule-strong);border-radius:var(--radius-sm);padding:10px 12px;min-height:44px;appearance:none;-moz-appearance:textfield;margin:0;box-shadow:none}
.wl-form input::-webkit-outer-spin-button,.wl-form input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.wl-form input::placeholder{color:var(--ink-muted);opacity:1}
.wl-form input:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.wl-form .wpforms-field-description{margin:0;font:400 13px/20px var(--font-sans);color:var(--ink-muted)}
.wl-form .wpforms-has-error input,.wl-form input.wpforms-error{border-color:var(--status-error)}
/* An error replaces the hint, as in the design. */
.wl-form .wpforms-has-error .wpforms-field-description{display:none}
.wl-form em.wpforms-error,.wl-form label.wpforms-error{display:flex;gap:6px;align-items:flex-start;margin:0;font:500 13px/20px var(--font-sans);font-style:normal;color:var(--status-error);padding:0}
.wl-form em.wpforms-error::before,.wl-form label.wpforms-error::before{content:"";flex:none;width:14px;height:14px;margin-top:3px;background:currentColor;-webkit-mask:var(--wl-icon-alert) center/14px no-repeat;mask:var(--wl-icon-alert) center/14px no-repeat}
.wl-root{--wl-icon-alert:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3'/%3E%3Cpath d='M12 9v4'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E");--wl-icon-arrow:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E");--wl-icon-bell:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.268 21a2 2 0 0 0 3.464 0'/%3E%3Cpath d='M3.262 15.326A1 1 0 0 0 4 17h16a1 1 0 0 0 .74-1.673C19.41 13.956 18 12.499 18 8A6 6 0 0 0 6 8c0 4.499-1.411 5.956-2.738 7.326'/%3E%3C/svg%3E")}

/* Submit: the design's Button with its icon; while sending, a spinner and the processing text. */
.wl-form .wpforms-submit-container{display:flex;padding:0;margin:0}
.wl-form .wpforms-submit{width:auto}
.wl-form .wpforms-submit::before{content:"";flex:none;width:16px;height:16px;background:currentColor;-webkit-mask:var(--wl-icon-arrow) center/16px no-repeat;mask:var(--wl-icon-arrow) center/16px no-repeat}
.wl-form-wait .wpforms-submit::before{-webkit-mask-image:var(--wl-icon-bell);mask-image:var(--wl-icon-bell)}
/* While sending, WPForms puts .wpforms-loading on the container (and in some versions disables the button). */
.wl-form.wpforms-loading .wpforms-submit,.wl-form .wpforms-loading .wpforms-submit,.wl-form .wpforms-submit:disabled{cursor:progress}
.wl-form.wpforms-loading .wpforms-submit.is-primary,.wl-form .wpforms-loading .wpforms-submit.is-primary,.wl-form .wpforms-submit.is-primary:disabled{background:var(--signal);border-color:var(--signal);color:var(--on-signal)}
.wl-form.wpforms-loading .wpforms-submit.is-secondary,.wl-form .wpforms-loading .wpforms-submit.is-secondary,.wl-form .wpforms-submit.is-secondary:disabled{background:transparent;border-color:var(--rule-strong);color:var(--ink)}
.wl-form.wpforms-loading .wpforms-submit::before,.wl-form .wpforms-loading .wpforms-submit::before,.wl-form .wpforms-submit:disabled::before{-webkit-mask:none;mask:none;background:none;border:2px solid currentColor;border-right-color:transparent;border-radius:9999px;box-sizing:border-box}
@media (prefers-reduced-motion:no-preference){.wl-form.wpforms-loading .wpforms-submit::before,.wl-form .wpforms-loading .wpforms-submit::before,.wl-form .wpforms-submit:disabled::before{animation:wl-spin .8s linear infinite}}
.wl-form .wpforms-submit-spinner{display:none!important}

/* Errors for the whole form (closed, token expired) and the design's "didn't send" alert. */
.wl-form .wpforms-error-container,.wl-form .wpforms-error-alert{margin:0;padding:var(--space-3) var(--space-4);border-radius:var(--radius-md);background:var(--status-error-soft);color:var(--ink);font:400 14px/22px var(--font-sans)}
.wl-form .wpforms-error-container p{margin:0}
.wl-form-alert{margin-bottom:0}
.wl-form noscript,.wl-form .wpforms-error-noscript{font:400 13px/20px var(--font-sans);color:var(--ink-muted)}

/* Waitlist: field and button on one row, wrapping on narrow screens. */
.wl-form-wait form{flex-direction:row;flex-wrap:wrap;align-items:flex-start;gap:12px}
.wl-form-wait .wpforms-field-container{flex:1 1 240px;min-width:0}
.wl-form-wait .wpforms-submit-container{flex:none;padding-top:22px}

/* Sent: the confirmation takes the form's place. */
.wl-form .wpforms-confirmation-container,.wl-form .wpforms-confirmation-container-full{display:flex;flex-direction:column;gap:12px;margin:0;padding:0;background:none;border:0;color:var(--ink)}
.wl-form [class^="wpforms-confirmation-container"] p{margin:0}
.wl-form [class^="wpforms-confirmation-container"]:focus{outline:none}
.wl-form-alert-icon{width:18px;height:18px;margin-top:2px;background:var(--status-error);-webkit-mask:var(--wl-icon-alert) center/18px no-repeat;mask:var(--wl-icon-alert) center/18px no-repeat}