@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600;9..40,700&family=Newsreader:opsz,wght@6..72,400;6..72,500&display=swap');

:root { --ink:#193b35; --muted:#5e726b; --line:#dce5df; --soft:#f4f7f3; --mint:#cbdfc7; --accent:#197563; --signal:#d4613d; --paper:#fbfcfa; }

.inside-feedback { display:grid; grid-template-columns:.74fr 1.26fr; gap:66px; align-items:start; padding:116px 0 124px; border-top:1px solid var(--line); }
.inside-feedback .section-intro { position:sticky; top:30px; }.inside-feedback .section-intro>p:not(.eyebrow) { margin:22px 0; color:var(--muted); font-size:15px; line-height:1.62; }
.feature-scroll { display:grid; grid-template-columns:minmax(0,1.28fr) minmax(260px,.72fr); gap:40px; align-items:start; }.feature-visual { position:sticky; top:35px; padding-top:3px; }.feature-browser { position:relative; overflow:hidden; aspect-ratio:1.5; border:1px solid #d7e0d9; border-radius:15px; background:#eff3ef; box-shadow:0 22px 46px #193b3512; }.feature-image { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transform:scale(1.025); transition:opacity .42s ease,transform .55s ease; }.feature-image.is-active { opacity:1; transform:scale(1); }.feature-caption { display:flex; gap:10px; margin:15px 4px 0; color:var(--muted); font-size:13px; line-height:1.45; }.feature-caption-number,.feature-number { color:var(--accent); font-family:"DM Mono",monospace; font-size:11px; font-weight:500; }.feature-caption-number { min-width:19px; }.feature-stories { display:grid; gap:0; }.feature-story { min-height:218px; padding:20px 0 27px 23px; border-top:1px solid var(--line); opacity:.42; transition:opacity .2s ease,transform .25s ease; }.feature-story:last-child { border-bottom:1px solid var(--line); }.feature-story.is-active { opacity:1; transform:translateX(5px); }.feature-story h3 { margin:32px 0 10px; font-size:18px; letter-spacing:-.025em; }.feature-story p { margin:0; color:var(--muted); font-size:14px; line-height:1.6; }
.roadmap-callout { display:grid; grid-template-columns:1fr 1fr; gap:64px; margin:0 0 115px; padding:48px 54px; border-radius:15px; color:#e9f4ed; background:var(--ink); }.roadmap-callout h2 { max-width:440px; margin:16px 0 0; font-family:Newsreader,Georgia,serif; font-size:clamp(2.25rem,3.5vw,3.5rem); font-weight:400; letter-spacing:-.055em; line-height:.97; }.roadmap-callout .eyebrow { color:#b8e1c1; }.roadmap-callout .eyebrow span { background:#9dd7a6; }.roadmap-callout>div:last-child { align-self:end; }.roadmap-callout>div:last-child p { margin:0 0 20px; color:#bfd0c6; font-size:15px; line-height:1.6; }.roadmap-callout .text-link { color:white; }
.footer-links { display:flex; gap:20px; color:var(--muted); font-size:13px; font-weight:600; }.footer-links a:hover { color:var(--accent); }

.roadmap-page { padding-top:84px; }.roadmap-hero { max-width:760px; margin:0 auto 76px; text-align:center; }.roadmap-hero h1 { margin:18px 0 20px; font-family:Newsreader,Georgia,serif; font-size:clamp(3.3rem,6.3vw,5.8rem); font-weight:400; letter-spacing:-.07em; line-height:.92; }.roadmap-hero>p:not(.eyebrow) { max-width:620px; margin:0 auto; color:var(--muted); font-size:17px; line-height:1.6; }.roadmap-hero .roadmap-disclaimer { margin-top:24px; padding:12px 16px; border:1px solid #d7e5da; border-radius:8px; color:#547065; background:#f2f7f2; font-size:12px; }.roadmap-track { border-top:1px solid var(--line); }.roadmap-item { display:grid; grid-template-columns:110px .9fr 1.25fr; gap:26px; padding:38px 0 40px; border-bottom:1px solid var(--line); }.roadmap-status { align-self:start; width:max-content; padding:5px 8px; border-radius:999px; font-family:"DM Mono",monospace; font-size:10px; letter-spacing:.05em; text-transform:uppercase; }.available .roadmap-status { color:#176252; background:#d8efe0; }.planned .roadmap-status { color:#776b3e; background:#f4edca; }.roadmap-index { margin:0 0 11px; color:#78978b; font-family:"DM Mono",monospace; font-size:11px; }.roadmap-item h2,.roadmap-principles h2 { margin:0; font-family:Newsreader,Georgia,serif; font-size:clamp(1.8rem,2.5vw,2.5rem); font-weight:400; letter-spacing:-.045em; line-height:1; }.roadmap-item>div:last-child p { margin:0; color:var(--muted); font-size:15px; line-height:1.6; }.roadmap-item .text-link { display:inline-block; margin-top:17px; }.roadmap-principles { margin:104px 0; }.principles-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:23px; margin-top:31px; }.principles-grid article { padding:25px; border:1px solid var(--line); border-radius:12px; background:white; }.principles-grid h2 { font-size:2rem; }.principles-grid p { margin:14px 0 0; color:var(--muted); font-size:14px; line-height:1.6; }.roadmap-closing { margin-bottom:90px; }
@media (max-width:760px) { .inside-feedback { grid-template-columns:1fr; gap:36px; padding:76px 0; }.inside-feedback .section-intro { position:static; }.feature-scroll { grid-template-columns:1fr; gap:25px; }.feature-visual { position:static; }.feature-browser { aspect-ratio:1.42; }.feature-stories { grid-template-columns:1fr; gap:10px; }.feature-story { min-height:0; padding:18px; border:1px solid var(--line); border-radius:10px; background:white; opacity:1; }.feature-story:last-child { border-bottom:1px solid var(--line); }.feature-story.is-active { transform:none; box-shadow:0 7px 18px #193b350c; }.feature-story h3 { margin-top:28px; font-size:16px; }.feature-story p { font-size:13px; }.roadmap-callout { grid-template-columns:1fr; gap:27px; margin-bottom:72px; padding:39px 28px; }.roadmap-page { padding-top:55px; }.roadmap-hero { margin-bottom:54px; }.roadmap-item { grid-template-columns:1fr; gap:15px; padding:28px 0; }.principles-grid { grid-template-columns:1fr; gap:13px; }.roadmap-principles { margin:75px 0; }.roadmap-closing { margin-bottom:55px; } }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:"DM Sans",Arial,sans-serif; font-size:16px; }
a { color:inherit; text-decoration:none; }
.site-header, main, footer { max-width:1180px; margin:0 auto; padding-left:32px; padding-right:32px; }
.site-header { height:88px; display:flex; align-items:center; justify-content:space-between; }
.brand { display:inline-flex; align-items:center; gap:9px; font-weight:700; letter-spacing:-.04em; font-size:21px; }
.brand-mark { display:grid; place-items:center; width:29px; height:29px; color:white; font-family:Georgia,serif; font-size:18px; font-weight:400; border-radius:9px 9px 9px 2px; background:var(--accent); }
nav { display:flex; align-items:center; gap:25px; font-size:14px; font-weight:500; }
nav a:not(.button):hover,.text-link:hover,.already:hover { color:var(--accent); }
.sign-in { color:var(--muted); }
.button { display:inline-flex; align-items:center; justify-content:center; gap:15px; border-radius:8px; padding:15px 21px; color:white; background:var(--ink); font-size:15px; font-weight:600; box-shadow:0 5px 15px #193b3522; transition:transform .18s ease,background .18s ease; }
.button:hover { transform:translateY(-2px); background:var(--accent); }.button span { font-size:20px; line-height:0; }.button-small { padding:10px 15px; font-size:13px; }
.hero { padding-top:92px; text-align:center; }.eyebrow { margin:0; display:inline-flex; align-items:center; gap:9px; color:var(--accent); font-family:"DM Mono",monospace; font-size:11px; font-weight:500; letter-spacing:.09em; text-transform:uppercase; }.eyebrow span { width:7px; height:7px; border-radius:50%; background:#80b281; }.hero .eyebrow { color:var(--signal); }.hero .eyebrow span { background:var(--signal); }
h1,h2,h3,p { margin-top:0; }.hero h1 { max-width:840px; margin:21px auto 24px; font-family:Newsreader,Georgia,serif; font-weight:400; font-size:clamp(3.25rem,6.1vw,5.8rem); letter-spacing:-.065em; line-height:.94; }.hero-emphasis { display:block; color:var(--signal); }.hero-copy { max-width:595px; margin:0 auto; color:var(--muted); font-size:18px; line-height:1.6; }.hero-actions { display:flex; align-items:center; justify-content:center; gap:25px; margin-top:31px; }.text-link { font-size:14px; font-weight:600; }.text-link span { margin-left:5px; }.hero-note { margin:17px 0 65px; color:#809088; font-size:13px; }
.conversation-preview { position:relative; overflow:hidden; min-height:440px; border:1px solid #d3ddd5; border-radius:16px; background:#e6eee7; box-shadow:0 21px 45px #193b3514; }.preview-bar { display:flex; align-items:center; gap:6px; height:41px; padding:0 17px; border-bottom:1px solid #d2ddd4; background:#f7f9f6; }.preview-bar>span { width:8px; height:8px; border-radius:50%; background:#c4cec7; }.preview-bar div { height:17px; width:270px; margin:auto; border-radius:5px; background:#e4eae4; }.preview-content { width:65%; min-height:399px; padding:58px 9%; background:#fbf7ef; }.preview-kicker { margin-bottom:21px; color:#6d8778; font-family:"DM Mono",monospace; font-size:10px; letter-spacing:.13em; }.preview-content h2 { max-width:490px; margin-bottom:17px; font-family:Newsreader,Georgia,serif; font-size:clamp(2rem,3.5vw,3.3rem); font-weight:400; letter-spacing:-.045em; line-height:1; }.preview-content>p:not(.preview-kicker) { max-width:350px; color:#718075; font-size:14px; line-height:1.6; }.sample-card { display:inline-block; margin-top:17px; padding:10px 13px; border-radius:5px; color:white; background:#2d6657; font-size:12px; }
.feedback-thread { position:absolute; right:0; top:41px; bottom:0; width:35%; min-width:315px; padding:22px 19px; background:white; box-shadow:-10px 0 25px #183d3610; }.thread-label { display:flex; align-items:center; gap:8px; margin-bottom:21px; font-size:13px; font-weight:700; }.thread-label i { width:10px; height:10px; border-radius:3px; background:var(--accent); }.thread-label span { margin-left:auto; color:#798a82; font-size:12px; }.comment { padding:13px; margin:0 0 10px; border:1px solid #e2e8e2; border-radius:9px; background:#fff; }.comment strong { font-size:12px; }.comment p { margin:5px 0 9px; color:#40564d; font-size:12px; line-height:1.45; }.comment small { color:#98a59e; font-size:10px; }.comment.reply { margin-left:16px; background:#f1f7f1; border-color:#d8e7d7; }.new-comment { display:flex; align-items:center; justify-content:space-between; padding:10px 11px; border:1px solid #dbe4dd; border-radius:7px; color:#a1aaa4; font-size:11px; }.new-comment b { display:grid; place-items:center; width:18px; height:18px; border-radius:5px; color:white; background:var(--accent); }.pin { position:absolute; z-index:2; display:grid; place-items:center; width:27px; height:27px; border:2px solid white; border-radius:50%; color:white; background:var(--accent); box-shadow:0 2px 6px #193b3544; font-size:11px; font-weight:700; }.pin-one { top:162px; left:44%; }.pin-two { bottom:95px; left:25%; }
.steps { display:grid; grid-template-columns:.75fr 1.25fr; gap:80px; padding-top:130px; padding-bottom:125px; }.section-intro h2,.closing h2 { margin:17px 0 0; font-family:Newsreader,Georgia,serif; font-size:clamp(2.5rem,4vw,4rem); font-weight:400; letter-spacing:-.055em; line-height:.98; }.steps ol { display:grid; grid-template-columns:repeat(3,1fr); gap:27px; margin:3px 0 0; padding:0; list-style:none; }.steps li { border-top:1px solid #cbd8d0; padding-top:17px; }.step-icon { display:block; width:25px; height:25px; margin-bottom:18px; stroke:var(--accent); stroke-linecap:round; stroke-linejoin:round; stroke-width:1.55; }.steps li>span { color:#79968b; font-family:"DM Mono",monospace; font-size:11px; }.steps h3 { margin:12px 0 10px; font-size:17px; letter-spacing:-.025em; }.steps li p { color:var(--muted); font-size:14px; line-height:1.55; }
.closing { margin-bottom:90px; padding:73px max(8%,32px); border-radius:16px; background:var(--mint); text-align:center; }.closing h2 { max-width:600px; margin-left:auto; margin-right:auto; }.closing>p:not(.eyebrow) { max-width:490px; margin:20px auto 28px; color:#426056; line-height:1.55; }.closing .already { display:block; margin-top:18px; color:#426056; font-size:13px; font-weight:600; }
footer { display:flex; align-items:center; justify-content:space-between; padding-top:25px; padding-bottom:34px; border-top:1px solid var(--line); }footer p { margin:0; color:#809087; font-size:13px; }
@media (max-width:760px) { .site-header,main,footer { padding-left:20px; padding-right:20px; }.site-header { height:75px; } nav { gap:14px; }nav>a:not(.button) { display:none; }.hero { padding-top:57px; }.hero h1 { font-size:clamp(3rem,14vw,4.3rem); }.hero-copy { font-size:16px; }.hero-actions { flex-direction:column; gap:18px; }.hero-note { margin-bottom:42px; }.conversation-preview { min-height:598px; }.preview-content { width:100%; min-height:270px; padding:38px 28px; }.feedback-thread { top:311px; width:100%; min-width:0; }.pin-one { top:138px; left:80%; }.pin-two { bottom:244px; left:19%; }.steps { grid-template-columns:1fr; gap:45px; padding-top:78px; padding-bottom:78px; }.steps ol { gap:22px; }.steps h3 { margin-top:19px; }.closing { margin:0 20px 55px; padding:53px 24px; }.closing+.x { display:none; } footer { margin-left:20px; margin-right:20px; padding-left:0; padding-right:0; } footer p { display:none; } }
@media (max-width:470px) { .steps ol { grid-template-columns:1fr; }.steps li { padding-top:14px; }.steps h3 { margin:13px 0 7px; }.steps li p { margin-bottom:0; }.hero-actions .button { width:100%; }.conversation-preview { margin-left:-4px; margin-right:-4px; }.preview-content h2 { font-size:2rem; } }

.sample-card { border:0; font:inherit; font-size:12px; cursor:pointer; }.sample-card:hover { background:#197563; } footer { gap:20px; } footer>a:not(.brand) { color:var(--muted); font-size:13px; font-weight:600; }

.pricing-page { padding-top:84px; }.pricing-hero { max-width:710px; margin:0 auto 58px; text-align:center; }.pricing-hero h1 { margin:18px 0; font-family:Newsreader,Georgia,serif; font-size:clamp(3.1rem,6vw,5.3rem); font-weight:400; letter-spacing:-.065em; line-height:.95; }.pricing-hero>p:not(.eyebrow) { max-width:535px; margin:0 auto; color:var(--muted); font-size:17px; line-height:1.6; }.pricing-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:15px; align-items:stretch; }.price-card { position:relative; padding:29px; border:1px solid var(--line); border-radius:14px; background:white; }.price-card.featured { border:2px solid var(--accent); box-shadow:0 14px 32px #193b3510; }.popular { position:absolute; top:-13px; left:22px; margin:0; padding:5px 9px; border-radius:999px; color:white; background:var(--accent); font-family:"DM Mono",monospace; font-size:10px; letter-spacing:.06em; text-transform:uppercase; }.plan-name { margin-bottom:16px; font-size:17px; font-weight:700; }.price { display:flex; align-items:baseline; gap:5px; margin-bottom:11px; }.price strong { font-family:Newsreader,Georgia,serif; font-size:53px; font-weight:400; letter-spacing:-.06em; line-height:.9; }.price span { color:#7a8d84; font-size:13px; }.plan-summary { min-height:51px; color:var(--muted); font-size:14px; line-height:1.55; }.price-cta { display:block; margin:24px 0; padding:12px; border-radius:7px; color:white; background:var(--ink); text-align:center; font-size:14px; font-weight:700; }.featured .price-cta { background:var(--accent); }.price-card ul { display:grid; gap:11px; margin:0; padding:20px 0 0; border-top:1px solid var(--line); list-style:none; color:#43594f; font-size:13px; }.price-card li::before { content:'✓'; margin-right:9px; color:var(--accent); font-weight:700; }.coming-soon { margin:20px 0 0; color:#809087; font-size:11px; line-height:1.45; }.pricing-note { margin:23px 0 88px; color:#708279; text-align:center; font-size:13px; }.pricing-page .closing { margin:0 0 90px; } @media (max-width:760px) { .pricing-page { padding-top:55px; }.pricing-grid { grid-template-columns:1fr; max-width:450px; margin:auto; }.pricing-page .closing { margin:0 0 55px; }.plan-summary { min-height:0; } }