/* A product story, scoped to the workflow page. */
.how-page { --how-paper:#faf9f6; --how-ink:#202821; --how-muted:#5d655c; --how-line:#ddded5; --how-accent:#ad4e20; background:var(--how-paper); color:var(--how-ink); }
.how-page .how-main { padding-top:76px; }
.how-wrap { width:min(1240px,calc(100% - 64px)); margin-inline:auto; }
.how-page .site-nav { background:rgba(250,249,246,.96); border-bottom:1px solid var(--how-line); backdrop-filter:blur(16px); }
.how-page .nav-inner { max-width:1304px; padding-inline:32px; }
.how-page .nav-logo { gap:9px; }
.how-page .nav-logo img { width:32px; height:36px; object-fit:contain; }
.how-wordmark { font-family:var(--font-display); font-size:18px; font-weight:800; letter-spacing:-.7px; color:var(--how-ink); white-space:nowrap; }
.how-wordmark span { color:var(--how-accent); }
.how-page .nav-links { gap:25px; }
.how-page .nav-links > a,.how-page .nav-dropdown-trigger,.how-page .nav-signin { color:#424b41; }
.how-page .nav-dropdown-trigger:hover,.how-page .nav-signin:hover { color:var(--how-accent); }
.how-page .nav-dropdown-trigger svg { stroke:currentColor; }
.how-page .nav-hamburger span { background:var(--how-ink); }
.how-page .nav-logo-dark { display:none; }.how-page .nav-logo-light { display:block; }
.how-hero { padding:72px 0 80px; }
.how-hero-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:76px; align-items:center; }
.how-eyebrow { display:flex; align-items:center; gap:10px; font:700 10px/1.6 var(--font-mono); letter-spacing:1.5px; text-transform:uppercase; color:#6a533f; margin:0 0 24px; }
.how-eyebrow > span { height:7px;width:7px;border-radius:50%;background:var(--how-accent);box-shadow:0 0 0 4px #ad4e2010; }
.how-hero h1 { font:800 clamp(42px,4.5vw,66px)/1.07 var(--font-display); letter-spacing:-.05em; margin:0 0 24px; color:var(--how-ink); }
.how-page em { font-style:normal; color:var(--how-accent); }
.how-hero-lede { font-size:18px;line-height:1.75;max-width:470px;color:var(--how-muted);margin-bottom:28px; }
.how-actions { display:flex; align-items:center;gap:24px; flex-wrap:wrap; }
.how-button { display:inline-flex;align-items:center;justify-content:center;gap:26px;min-height:52px;padding:14px 23px;border-radius:9px;background:var(--how-ink);color:#fff;font-weight:700;font-size:14px;box-shadow:0 3px 0 #20282118;transition:background .2s,transform .2s; }
.how-button:hover { color:#fff;background:#3a503d;transform:translateY(-2px); }
.how-text-link { display:inline-flex;align-items:center;gap:16px;min-height:44px;color:var(--how-ink);font-weight:650;font-size:13px;text-underline-offset:5px; }
.how-text-link:hover { color:var(--how-accent);text-decoration:underline; }
.how-microcopy { font-size:11px;color:var(--how-muted);margin:17px 0 0; }
.how-principles { display:flex;gap:20px;border-top:1px solid var(--how-line);padding-top:22px;margin-top:35px; }
.how-principles span { color:var(--how-muted);font-size:11px;line-height:1.7; }.how-principles b { display:block;color:#394335;font-size:12px; }
.how-demo { background:#fff;border:1px solid #dce0d7;border-radius:16px;overflow:hidden;box-shadow:0 2px 4px #20282106,0 22px 54px -26px #20282145; }
.how-demo-top { display:flex;align-items:center;gap:10px;background:#202821;color:#fff;padding:16px 20px;font-size:12px; }
.how-demo-mark { font:800 21px/1 var(--font-display);color:#f6c5a0; }
.how-sample { margin-left:auto;font:10px/1.5 var(--font-mono);color:#c5cfc1; }
.how-demo-controls { display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-bottom:1px solid #e6e8e1;padding:0 12px;gap:4px;background:#fcfcf9; }
.how-demo-controls[hidden] { display:none; }
.how-demo-panel[hidden] { display:flex; visibility:hidden; pointer-events:none; }
.how-demo-controls button { appearance:none;border:0;border-bottom:2px solid transparent;background:transparent;min-height:61px;padding:13px 8px;text-align:left;font:700 12px/1.5 var(--font-body);color:#666e61;cursor:pointer; }
.how-demo-controls button > span { display:block;font:10px/1.5 var(--font-mono);opacity:1; }
.how-demo-controls button[aria-selected=true] { color:#9b401b;border-bottom-color:var(--how-accent); }
.how-demo-controls button:hover { background:#f0efe8; }
.how-demo-stage { min-height:360px;display:grid; }
.how-demo-panel { grid-area:1 / 1; padding:25px;display:flex;flex-direction:column;min-width:0; }
.how-contact { display:flex;align-items:center;gap:10px; }
.how-avatar { background:#e9eee6;color:#496144;font:700 13px var(--font-display);width:40px;height:40px;border-radius:50%;display:grid;place-items:center;flex-shrink:0; }
.how-contact strong { display:block;font-size:13px; }.how-contact div > span { display:block;font-size:10px;color:#6c7466;margin-top:3px; }
.how-contact-state { margin-left:auto;font-size:9px;font-weight:650;padding:5px 8px;border-radius:20px;background:#f0f5ed;color:#3e6138;white-space:nowrap; }
.how-event { display:flex;align-items:flex-start;gap:14px;padding:28px 0 22px; }.how-event-dot { height:12px;width:12px;border:3px solid #b3552c;border-radius:50%;box-shadow:0 0 0 5px #b3552c10;flex-shrink:0;margin-top:4px; }
.how-overline { display:block;text-transform:uppercase;font:700 9px/1.5 var(--font-mono);letter-spacing:.9px;color:#806043;margin-bottom:8px; }
.how-demo-panel h2 { font:750 25px/1.14 var(--font-display);letter-spacing:-.7px;margin:0 0 10px;color:var(--how-ink); }
.how-demo-panel p { font-size:12px;line-height:1.7;color:#60695b;margin:0; }
.how-context-row { display:flex;justify-content:space-between;align-items:center;gap:14px;padding:10px 0;border-top:1px solid #ebede6;font-size:10px; }.how-context-row > span { color:#697161; }.how-context-row b { font-weight:600;text-align:right; }
.how-demo-panel .how-demo-note { border-top:1px solid #e9ebe4;padding-top:14px;margin-top:auto;font-size:10px;line-height:1.6; }
.how-priority { padding:24px 0 18px; }
.how-mini-queue { margin-bottom:20px; }.how-mini-queue > div { display:flex;align-items:center;gap:12px;padding:10px 12px;border:1px solid #e3e7dc;border-radius:8px;background:#f8faf5;margin-bottom:6px; }.how-mini-queue > div > b { color:#8c613e;font:10px var(--font-mono); }.how-mini-queue > div > span:nth-child(2) { font-size:12px;flex:1; }.how-mini-queue small { display:block;font-size:10px;color:#697362;margin-top:3px; }.how-mini-queue > div > span:last-child { font:9px var(--font-mono);color:#687260; }
.how-draft { margin:25px 0 18px;padding:20px;border:1px solid #ddded1;border-radius:9px;background:#fcfaf3; }.how-draft p { font-size:14px;line-height:1.7;color:#424c3a; }.how-draft > div { display:flex;gap:8px;flex-wrap:wrap;margin-top:16px; }.how-draft > div > span { font-size:9px;padding:4px 7px;border:1px solid #e5ddcc;border-radius:5px;color:#756348; }
.how-review-row { display:flex;gap:10px;align-items:center;margin-bottom:22px; }.how-review-row > span { color:#9c522b;font-size:24px; }
.how-action-options { display:flex;flex-direction:column;gap:7px;margin-bottom:22px; }.how-action-options > span { display:flex;justify-content:space-between;border:1px solid #e0e4d8;border-radius:7px;padding:9px 12px;font-size:11px;font-weight:600; }.how-action-options b { color:#a05e2e; }
.how-demo-bottom { display:flex;align-items:center;gap:10px;padding:15px 25px;border-top:1px solid #e5e8dd;background:#f9fbf5; }.how-demo-bottom > span { color:#668154; }.how-demo-bottom p { font-size:10px;color:#66765d;margin:0; }
.how-chapters { position:sticky;top:75px;z-index:20;background:rgba(250,249,246,.96);border-block:1px solid var(--how-line);backdrop-filter:blur(16px); }.how-chapters > div { display:flex;gap:36px; }.how-chapters a { padding-block:20px;min-height:54px;font-size:12px;font-weight:650;color:#616a59;white-space:nowrap; }.how-chapters a:hover { color:var(--how-accent); }.how-chapters a:last-child { margin-left:auto;color:var(--how-accent); }
.how-section { padding:94px 0;scroll-margin-top:156px; }.how-section-heading { display:grid;grid-template-columns:1.2fr 1fr;gap:100px;align-items:end;margin-bottom:48px; }.how-section-heading .how-eyebrow { margin-bottom:17px; }
.how-section h2 { font:750 clamp(30px,3.3vw,44px)/1.14 var(--font-display);letter-spacing:-.035em;color:var(--how-ink);margin:0 0 20px; }.how-section-heading h2 { margin:0; }.how-section-heading > p,.how-workspace-copy > p:not(.how-eyebrow),.how-control-grid > div > p:not(.how-eyebrow) { font-size:16px;line-height:1.8;color:var(--how-muted);margin:0; }
.how-process { display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px; }.how-process article { border-top:1px solid #cdd1c4;padding-top:18px;display:flex;flex-direction:column; }.how-process-number { font:12px var(--font-mono);color:#9b562c;margin-bottom:36px; }.how-process h3 { font:700 22px/1.3 var(--font-display);letter-spacing:-.6px;margin:0 0 12px; }.how-process p { color:var(--how-muted);font-size:13px;line-height:1.85;margin:0 0 22px; }.how-process a { color:#935024;font-size:11px;font-weight:700;margin-top:auto;min-height:44px;display:inline-flex;align-items:center;gap:10px; }.how-process a:hover { text-decoration:underline; }
.how-score-note { display:flex;gap:25px;align-items:flex-start;background:#efeee6;border:1px solid #e2e1d6;border-radius:10px;padding:22px 25px;margin-top:40px; }.how-score-badge { white-space:nowrap;font:10px/1.8 var(--font-mono);text-transform:uppercase;letter-spacing:.4px;color:#74603f; }.how-score-note p { color:#5f6657;font-size:12px;line-height:1.8;margin:0; }
.how-workspace { background:#eeefe8;border-block:1px solid #e2e4d8; }.how-workspace-grid { display:grid;grid-template-columns:.86fr 1.14fr;gap:90px;align-items:center; }.how-surface-list { margin:25px 0; }.how-surface-list > div { display:flex;align-items:flex-start;gap:17px;padding:17px 0;border-bottom:1px solid #d9ddcf; }.how-surface-symbol { width:27px;color:#9c572c;font-size:22px;flex-shrink:0; }.how-surface-list h3 { font-size:14px;margin:0 0 5px; }.how-surface-list p { margin:0;font-size:12px;line-height:1.8;color:#636b5b; }
.how-product-figure,.how-team-figure { margin:0;border:1px solid #d8ddd1;border-radius:13px;overflow:hidden;background:#fff;box-shadow:0 18px 45px -28px #26332255; }.how-figure-top { display:flex;align-items:center;gap:20px;border-bottom:1px solid #e2e6db;background:#f9faf6;padding:15px 20px;font-size:11px;color:#647159; }.how-figure-top > span:first-child { font-size:8px;color:#a9b2a0;letter-spacing:2px; }.how-figure-top > span:last-child,.how-figure-top a { margin-left:auto;font-size:10px; }.how-figure-top a { color:#86552f; }.how-product-figure img { display:block;width:100%;height:auto; }.how-embed-image { max-height:600px;overflow:auto;overscroll-behavior:contain; }.how-product-figure figcaption,.how-team-figure figcaption { border-top:1px solid #e4e7dc;padding:12px 20px;color:#6a745f;font-size:10px;line-height:1.7;background:#fafbf7; }
.how-team-figure img { width:100%;height:auto;display:block; }.how-team-benefits { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:50px;margin-top:35px; }.how-team-benefits article > span { font:9px var(--font-mono);letter-spacing:1px;color:#8b613d; }.how-team-benefits h3 { font:700 20px var(--font-display);margin:13px 0 10px; }.how-team-benefits p { font-size:13px;line-height:1.8;color:var(--how-muted);margin:0; }
.how-controls { background:#222d24;color:#eef2e7; }.how-controls h2 { color:#fff; }.how-controls .how-eyebrow { color:#dac9a6; }.how-control-grid { display:grid;grid-template-columns:1fr 1.2fr;gap:130px; }.how-control-grid > div > p:not(.how-eyebrow) { color:#bac7b2; }.how-controls .how-text-link { color:#e7d1ad;margin-top:22px; }.how-control-items article { display:flex;gap:22px;padding:22px 0;border-bottom:1px solid #46513e; }.how-control-items article:first-child { padding-top:0; }.how-control-items article > span { color:#d5b886;font:11px var(--font-mono);margin-top:5px; }.how-control-items h3 { font:700 21px var(--font-display);margin:0 0 10px;color:#fff; }.how-control-items p { font-size:13px;line-height:1.85;color:#bdc8b4;margin:0; }.how-control-items a { display:inline-flex;align-items:center;min-height:44px;color:#e7d1ad;font-size:12px;text-decoration:underline;text-underline-offset:4px; }
.how-start { padding:100px 0;text-align:center;background:#f3efe5;scroll-margin-top:150px; }.how-start .how-eyebrow,.how-start .how-actions { justify-content:center; }.how-start h2 { font:800 clamp(33px,4vw,54px)/1.1 var(--font-display);letter-spacing:-.04em;margin:0 0 22px;color:var(--how-ink); }.how-start p:not(.how-eyebrow) { color:var(--how-muted);font-size:15px;line-height:1.8;margin:0 0 27px; }
.how-page :is(a,button,[tabindex]):focus-visible { outline:3px solid #b55729;outline-offset:4px; }.how-demo-controls button:focus-visible { outline-offset:-4px; }
@media(min-width:769px) and (max-width:1150px) { .how-hero-grid { gap:36px; }.how-hero h1 { font-size:49px; }.how-page .nav-links { gap:14px; }.how-wordmark { font-size:15px; }.how-contact-state { max-width:80px;white-space:normal;text-align:center; }.how-workspace-grid { gap:45px; }.how-control-grid { gap:65px; }.how-demo-panel { padding:20px; }.how-sample { font-size:8px; } }
@media(max-width:768px) { .how-wrap { width:calc(100% - 40px); }.how-page .nav-inner { padding-inline:20px; }.how-page .how-main { padding-top:68px; }.how-hero { padding:43px 0 40px; }.how-hero-grid,.how-workspace-grid,.how-control-grid,.how-section-heading { grid-template-columns:minmax(0,1fr);gap:30px; }.how-hero h1 { font-size:clamp(40px,9.5vw,62px); }.how-hero-lede { font-size:16px;line-height:1.8;max-width:520px; }.how-eyebrow { font-size:9px;margin-bottom:19px; }.how-actions { gap:18px; }.how-text-link { font-size:12px; }.how-microcopy { font-size:10px;line-height:1.7; }.how-principles { margin-top:26px;padding-top:17px;justify-content:space-between;gap:12px; }.how-principles span { font-size:10px; }.how-principles b { font-size:11px; }.how-demo { margin-top:8px; }.how-demo-top { padding:14px 15px;font-size:11px;gap:8px; }.how-sample { font-size:8px; }.how-demo-controls { padding-inline:8px;gap:0; }.how-demo-controls button { font-size:11px;padding:12px 5px; }.how-demo-panel { padding:20px; }.how-demo-stage { min-height:383px; }.how-contact-state { font-size:8px;padding:4px 6px; }.how-contact strong { font-size:12px; }.how-contact div > span { font-size:9px; }.how-contact { gap:8px; }.how-avatar { height:33px;width:33px;font-size:11px; }.how-demo-panel h2 { font-size:25px; }.how-context-row { font-size:9px; }.how-demo-bottom { padding:13px 20px; }.how-demo-bottom p { font-size:9px; }.how-chapters { top:67px; }.how-chapters > div { width:100%;overflow-x:auto;padding-inline:20px;gap:25px;overscroll-behavior-x:contain; }.how-chapters a { padding-block:15px;font-size:11px;min-height:47px; }.how-chapters a:last-child { margin-left:0; }.how-section { padding:58px 0;scroll-margin-top:130px; }.how-section-heading { margin-bottom:30px;gap:15px; }.how-section-heading > p,.how-workspace-copy > p:not(.how-eyebrow),.how-control-grid > div > p:not(.how-eyebrow) { font-size:14px; }.how-section h2 { font-size:34px; }.how-process { grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 24px; }.how-process-number { margin-bottom:22px; }.how-process h3 { font-size:21px; }.how-process p { font-size:12px;line-height:1.8; }.how-process a { font-size:10px;gap:4px; }.how-score-note { flex-direction:column;gap:8px;padding:20px;margin-top:28px; }.how-score-note p { font-size:11px; }.how-team-benefits { grid-template-columns:minmax(0,1fr);gap:24px; }.how-team-benefits article { border-bottom:1px solid var(--how-line);padding-bottom:18px; }.how-team-benefits p { font-size:12px; }.how-figure-top { padding:12px 14px;gap:10px; }.how-figure-top > span:first-child { display:none; }.how-figure-top a { font-size:9px; }.how-control-grid { gap:35px; }.how-control-items h3 { font-size:20px; }.how-start { padding:62px 0; }.how-start p:not(.how-eyebrow) { font-size:13px; }.how-page footer { padding-bottom:95px; } }
@media(max-width:360px) { .how-contact-state { max-width:67px;white-space:normal;text-align:center; }.how-demo-top { flex-wrap:wrap; }.how-sample { margin-left:auto; }.how-hero h1 { font-size:38px; }.how-demo-controls button { font-size:10px; }.how-demo-panel { padding:16px; }.how-demo-stage { min-height:410px; }.how-button { padding:13px 17px;gap:18px;font-size:13px; }.how-actions { gap:13px; }.how-wordmark { font-size:16px; }.how-process { column-gap:18px; }.how-process h3 { font-size:19px; } }
@media(prefers-reduced-motion:reduce) { .how-page *, .how-page *::before,.how-page *::after { scroll-behavior:auto!important;transition:none!important;animation:none!important; } }