/* DidPrice marketing pages — ported 1:1 from the approved NAS prototype (style-v4). */
:root{--ink:#202622;--muted:#68716a;--paper:#f7f8f2;--white:#fff;--line:#dde2d8;--lime:#d3ef85;--green:#32634a;--dark:#1c2520;--red:#9e443c;font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-synthesis:none;color:var(--ink);background:var(--paper)}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:24px}
body{margin:0}
a{color:inherit}
button,input,select{font:inherit}
button,summary{cursor:pointer}
button,input,select{min-width:0;max-width:100%}
input,select{width:100%}
button:disabled{opacity:.5;cursor:not-allowed}
button,a,input,select,summary{-webkit-tap-highlight-color:transparent}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible,[tabindex]:focus-visible{outline:3px solid #67a964;outline-offset:4px}
svg{flex-shrink:0}
h1,h2,h3,p{margin-top:0}
h1,h2,h3{font-weight:620}
p{line-height:1.65}
a{text-underline-offset:4px}
button{border:0}
h1,h2{letter-spacing:-.055em}
h3{letter-spacing:-.025em}
section,aside,main,div{min-width:0}
[hidden]{display:none!important}
.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}
.skip-link{position:fixed;z-index:20;left:16px;top:-80px;padding:12px 20px;background:var(--lime);color:var(--ink);border-radius:6px}
.skip-link:focus{top:12px}
.wrap{width:min(1248px,calc(100% - 112px));margin-inline:auto}
.brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none;font-size:25px;font-weight:720;letter-spacing:-1.2px;white-space:nowrap}
.brand-dot{color:var(--lime)}
.button{display:inline-flex;align-items:center;justify-content:center;gap:28px;min-height:48px;padding:13px 20px;border:1px solid transparent;border-radius:5px;text-decoration:none;font-size:13px;font-weight:650;line-height:1.4;transition:background .15s,transform .15s}
.button:hover{transform:translateY(-1px)}
.button span[aria-hidden]{font-size:20px;line-height:1}
.lime{background:var(--lime);color:var(--dark)}
.lime:hover{background:#e1f5ae}
.text-link{display:inline-flex;align-items:center;gap:16px;font-size:13px;font-weight:620;text-decoration:none;border-bottom:1px solid #65746a;padding:8px 0}
.text-link:hover{border-color:var(--lime)}
.eyebrow{font-size:10px;line-height:1.5;letter-spacing:1.7px;font-weight:700;margin-bottom:24px}
.signal-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--lime);margin-right:7px}
.outline-badge{display:inline-block;border:1px solid currentColor;border-radius:4px;padding:5px 8px;font-size:10px;font-weight:550;line-height:1.3}
.tiny-label{font-size:10px;letter-spacing:2px;font-weight:600}
.marketing-page{background:var(--dark);color:var(--paper)}
.marketing-nav{display:flex;align-items:center;justify-content:space-between;gap:24px;height:100px;border-bottom:1px solid #39433a}
.marketing-nav nav{display:flex;gap:29px;font-size:12px;color:#d3d9ce}
.marketing-nav nav a{text-decoration:none}
.marketing-nav nav a:hover{color:var(--lime)}
.nav-cta{border-color:#5b695b;min-height:40px;padding:9px 15px;gap:22px;font-size:12px}
.nav-cta:hover{background:#303c31}
.hero{display:grid;grid-template-columns:1.13fr 1fr;align-items:center;gap:70px;padding-top:83px;padding-bottom:75px}
.hero .eyebrow{color:#ccd7c2}
.hero h1{font-size:clamp(44px,4.8vw,70px);line-height:1.075;margin-bottom:27px;letter-spacing:-.057em}
.hero h1>span{color:var(--lime)}
.hero-lead{font-size:16px;line-height:1.8;color:#c0c9bd;max-width:485px;margin-bottom:29px}
.hero-actions{display:flex;align-items:center;gap:26px}
.preview-note{color:#a2af9d;font-size:11px;margin:17px 0 0}
.hero-art{position:relative;padding:29px;border:1px solid #485345;border-radius:10px;background:#263127;box-shadow:0 25px 60px #111a1426;transform:rotate(-1deg)}
.art-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:22px;color:#d3e0c6}
.art-top .outline-badge{color:#a9b89c;font-size:9px;border-color:#56664d}
.art-caption{display:flex;justify-content:space-between;font-size:8px;letter-spacing:1.1px;color:#b1c1a6;margin-top:23px}
.art-disclaimer{font-size:10px;line-height:1.6;color:#aaba9e;margin:17px 0 0}
.audience-band{border-top:1px solid #39433a;border-bottom:1px solid #39433a;background:#202a22}
.audience-band>.wrap{display:flex;justify-content:space-between;align-items:center;gap:30px;padding-block:24px}
.audience-band p{margin:0;font-size:12px;color:#abb8a6}
.audience-band .wrap>div{display:flex;gap:45px;font-size:12px;color:#d5decd}
.section{padding-block:95px}
.section h2,.pricing-section h2{font-size:clamp(30px,3.2vw,45px);line-height:1.13;margin-bottom:22px}
.workflow{display:grid;grid-template-columns:1fr 1fr;gap:100px}
.section-intro>p:last-child{font-size:14px;color:#afbdab;max-width:390px}
.section .eyebrow{color:var(--lime)}
.steps article{display:flex;gap:25px;padding:25px 0;border-bottom:1px solid #3e493d}
.steps article:first-child{padding-top:0}
.steps article:last-child{border-bottom:0;padding-bottom:0}
.step-number{font-size:11px;letter-spacing:1px;color:var(--lime);padding-top:4px}
.steps h3{font-size:20px;margin-bottom:8px}
.steps p{font-size:13px;color:#afbdab;margin-bottom:0;line-height:1.75}
.comparison-section{background:#f0f2e8;color:var(--ink)}
.comparison-section .eyebrow{color:#577141}
.comparison-heading{display:grid;grid-template-columns:1fr 1fr;gap:110px;align-items:end;margin-bottom:31px}
.comparison-heading h2{margin:0}
.comparison-heading>p{font-size:14px;color:var(--muted);margin:0;max-width:390px}
.example-label{display:flex;align-items:center;gap:16px;padding:18px 0}
.example-label .outline-badge{flex-shrink:0;color:var(--green);background:#e1e9d8;border-color:#bfccb4}
.example-label p{font-size:11px;color:var(--muted);margin:0}
.comparison-table{border:1px solid #d7dece;border-radius:8px;background:#fff;overflow:hidden}
.comparison-table table{border-collapse:collapse;width:100%;font-size:13px;table-layout:fixed;text-align:left}
.comparison-table caption{text-align:left;padding:23px 28px;font-size:16px;font-weight:650;letter-spacing:-.3px;border-bottom:1px solid var(--line);caption-side:top}
.comparison-table caption span{font-size:11px;font-weight:400;color:var(--muted);float:right;letter-spacing:0}
.comparison-table th,.comparison-table td{padding:18px 28px;border-bottom:1px solid #e8ece3;overflow-wrap:anywhere}
.comparison-table thead th{font-size:10px;text-transform:uppercase;letter-spacing:1px;background:#f8faf4;color:var(--muted);font-weight:550}
.comparison-table tbody th{font-weight:500}
.comparison-table tr:last-child>*{border:0}
.before-value{color:#955e51;text-decoration:line-through;text-decoration-color:#bd9386}
.after-value{display:inline-block;background:#e9f3dc;padding:5px 9px;margin:-5px -9px;border-radius:3px;color:#34563e;font-weight:550}
.comparison-bottom{display:grid;grid-template-columns:1.2fr 1fr auto;align-items:start;gap:40px;padding-top:25px}
.comparison-bottom p{font-size:11px;color:var(--muted);margin:0}
.comparison-bottom p:first-child{font-size:12px}
.comparison-bottom strong{font-weight:600;color:var(--ink);display:inline-block;margin-bottom:5px}
.dark-link{border-color:#a8b79a;font-size:11px;white-space:nowrap}
.product-scope{display:grid;grid-template-columns:.9fr 1.3fr;gap:70px}
.section-lead{font-size:14px;color:#afbdab;max-width:340px}
.scope-grid{display:grid;grid-template-columns:1fr 1fr;gap:25px}
.scope-grid article{border-top:1px solid #5d6e54;padding-top:20px}
.scope-tag{font-size:9px;letter-spacing:1px;color:var(--lime)}
.scope-grid h3{font-size:19px;line-height:1.3;margin-top:20px}
.scope-grid ul{list-style:none;padding:0;margin:0}
.scope-grid li{font-size:12px;color:#b9c5b2;line-height:1.65;margin-bottom:12px;padding-left:20px;position:relative}
.scope-grid li:before{content:'↗';position:absolute;left:0;color:var(--lime)}
.scope-grid p{font-size:12px;color:#afbdab;line-height:1.75}
.planned .scope-tag{color:#b0baa7}
.pricing-section{padding:45px;display:grid;grid-template-columns:1fr 1fr;gap:90px;background:#2a3629;border:1px solid #4d6043;border-radius:9px}
.pricing-section .eyebrow{color:var(--lime)}
.pricing-section h2{font-size:36px}
.pricing-section>div>p:last-child{font-size:13px;color:#b9c5b2;margin-bottom:0}
.pricing-card>.outline-badge{color:#c3d6ad;border-color:#607650}
.price{font-size:62px;letter-spacing:-4px;line-height:1.2;margin:22px 0 15px;font-weight:550}
.price>span{font-size:12px;letter-spacing:0;font-weight:400;color:#b7c5ab}
.pricing-card>p:not(.price){font-size:12px;color:#bdcab4;margin-bottom:22px}
.pricing-card .button{width:100%;justify-content:space-between;font-size:12px}
.pricing-card small{display:block;font-size:10px;text-align:center;color:#b7c5ab;margin-top:12px}
.faq{display:grid;grid-template-columns:1fr 1.2fr;gap:90px}
.faq h2{font-size:36px}
.faq-list details{border-bottom:1px solid #3e4b39}
.faq-list details:first-child{border-top:1px solid #3e4b39}
.faq-list summary{padding:21px 28px 21px 0;position:relative;list-style:none;font-size:13px;font-weight:500}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary:after{content:'+';position:absolute;right:0;font-size:19px;top:17px;color:var(--lime)}
.faq-list details[open] summary:after{content:'−'}
.faq-list details p{color:#b2c0a9;font-size:12px;line-height:1.8;max-width:95%;padding-bottom:12px}
.closing{text-align:center;border-top:1px solid #3e493d;padding-block:65px 80px}
.closing .eyebrow{color:#b7c4ab;font-size:9px}
.closing h2{font-size:clamp(32px,3.5vw,48px);line-height:1.15;margin-bottom:29px}
.marketing-footer{display:flex;align-items:center;justify-content:space-between;gap:40px;border-top:1px solid #3e493d;padding-block:30px}
.marketing-footer .brand{font-size:22px;gap:0}
.marketing-footer p{font-size:10px;color:#a7b59e;margin:0;margin-right:auto}
.marketing-footer>a:last-child{font-size:11px;color:#c0cdb5;text-decoration:none}
.rail-bottom .outline-badge{font-size:9px;border-color:#596a4d;color:#c8d6bb}
#add-form{padding:2px 0 9px}
#add-form label{display:block;font-size:10px;font-weight:550;margin:11px 0 6px}
#add-form input{padding:10px;font-size:11px;background:#fff}
#add-form button{width:100%;margin-top:12px;min-height:37px}
.detail .eyebrow{color:#72875e;font-size:8px;letter-spacing:1.5px;margin-bottom:9px}
.empty-state>p:not(.eyebrow){max-width:400px;margin-inline:auto;font-size:12px;color:var(--muted);line-height:1.8}
.empty-state .button{margin-top:5px;min-height:40px;font-size:11px;gap:18px}
@media(min-width:1600px){.hero{padding-block:110px}
.hero h1{font-size:76px}}
@media(max-width:1150px){.wrap{width:calc(100% - 64px)}
.hero{gap:35px}
.hero h1{font-size:52px}
.hero-lead{font-size:14px}
.hero-art{padding:21px}
.hero-actions{gap:18px}
.hero-actions .button{gap:20px}
.marketing-nav nav{gap:20px;font-size:11px}
.workflow,.comparison-heading,.faq{gap:60px}
.product-scope{grid-template-columns:1fr;gap:25px}
.product-scope>div:first-child{max-width:550px}
.section-lead{max-width:450px}
.scope-grid{gap:60px}
.comparison-bottom{grid-template-columns:1fr 1fr;gap:20px}
.comparison-bottom a{justify-self:start}
.pricing-section{gap:40px;padding:36px}}
@media(max-width:850px){.marketing-nav{height:auto;min-height:90px;flex-wrap:wrap;gap:18px;padding-block:20px}
.marketing-nav nav{order:3;width:100%;justify-content:space-between;max-width:400px}
.hero{grid-template-columns:1fr;gap:45px;padding-block:55px}
.hero h1{font-size:61px;max-width:650px}
.hero-lead{font-size:16px;max-width:540px}
.hero-art{width:100%;max-width:510px;justify-self:center;padding:27px}
.art-caption{font-size:9px}
.audience-band>.wrap{align-items:start;flex-direction:column;gap:13px}
.audience-band .wrap>div{gap:30px}
.workflow,.comparison-heading,.pricing-section,.faq{grid-template-columns:1fr;gap:35px}
.section{padding-block:65px}
.workflow .section-intro>p:last-child{max-width:500px}
.comparison-heading>p{max-width:550px}
.comparison-table th,.comparison-table td{padding:17px 20px}
.comparison-table caption{padding:22px 20px}
.pricing-section{padding:30px}
.pricing-section>div:first-child>p:last-child{max-width:500px}
.pricing-card{max-width:500px}
.faq{gap:15px}
.marketing-footer{flex-wrap:wrap;gap:20px}
.marketing-footer p{margin:0}
.empty-state .button{gap:9px;padding-inline:10px;font-size:10px}
.empty-state .eyebrow{font-size:7px}}
@media(max-width:600px){.wrap{width:calc(100% - 40px)}
.marketing-nav{gap:18px;padding-block:20px}
.marketing-nav .brand{font-size:23px;gap:8px}
.brand-mark{width:28px;height:28px}
.nav-cta{font-size:10px;padding:8px 10px;gap:12px;min-height:36px}
.marketing-nav nav{font-size:11px;gap:12px}
.hero{padding-top:42px;padding-bottom:42px;gap:35px}
.hero .eyebrow{font-size:8px;letter-spacing:1.2px;margin-bottom:20px}
.hero h1{font-size:clamp(39px,10.5vw,59px);line-height:1.09;margin-bottom:22px}
.hero-lead{font-size:14px;line-height:1.8;margin-bottom:25px}
.desktop-break{display:none}
.hero-actions{gap:20px;flex-wrap:wrap}
.hero-actions .button{font-size:12px;gap:20px;padding:13px 16px;min-height:46px}
.hero-actions .text-link{font-size:11px;gap:10px}
.preview-note{font-size:9px}
.hero-art{padding:18px;transform:none}
.art-top{gap:6px;margin-bottom:17px}
.tiny-label{font-size:8px;letter-spacing:1.3px}
.art-top .outline-badge{font-size:8px;padding:4px 6px}
.art-caption{font-size:7px;margin-top:18px}
.art-disclaimer{font-size:9px}
.audience-band>.wrap{padding-block:21px}
.audience-band p{font-size:11px}
.audience-band .wrap>div{font-size:10px;gap:24px}
.section{padding-block:52px}
.section .eyebrow{font-size:8px;letter-spacing:1.3px;margin-bottom:18px}
.section h2{font-size:34px;line-height:1.15}
.workflow{gap:28px}
.section-intro>p:last-child{font-size:13px}
.steps article{gap:19px;padding-block:21px}
.steps h3{font-size:19px}
.steps p{font-size:12px}
.comparison-heading{gap:18px;margin-bottom:18px}
.comparison-heading>p{font-size:13px}
.example-label{align-items:start;flex-direction:column;gap:10px;padding:10px 0 18px}
.example-label p{font-size:10px}
.comparison-table table{font-size:11px}
.comparison-table caption{font-size:14px;padding:18px 13px}
.comparison-table caption span{float:none;display:block;margin-top:5px;font-size:9px}
.comparison-table th,.comparison-table td{padding:16px 11px}
.comparison-table thead th{font-size:8px;letter-spacing:.6px;line-height:1.6}
.after-value{padding:3px;margin:-3px}
.comparison-bottom{grid-template-columns:1fr;gap:15px}
.comparison-bottom p{font-size:11px}
.scope-grid{grid-template-columns:1fr;gap:25px}
.scope-grid h3{margin-top:15px}
.scope-grid li{margin-bottom:8px}
.product-scope{gap:19px}
.scope-grid article{padding-top:18px}
.pricing-section{padding:27px 22px;gap:30px}
.pricing-section .eyebrow{font-size:8px;letter-spacing:1.1px}
.pricing-section h2{font-size:29px}
.pricing-section>div>p:last-child{font-size:12px}
.price{font-size:56px}
.pricing-card .button{gap:12px;padding:12px;font-size:11px}
.pricing-card small{font-size:9px}
.faq{gap:5px}
.faq-list summary{font-size:12px;line-height:1.6;padding-block:18px}
.faq-list details p{font-size:11px}
.closing{padding-block:46px}
.closing .eyebrow{font-size:7px;letter-spacing:1.2px;line-height:1.8}
.closing h2{font-size:31px}
.closing .button{font-size:12px}
.marketing-footer{align-items:start;flex-direction:column;gap:14px;padding-block:27px}
.marketing-footer p{font-size:9px}
.marketing-footer>a:last-child{font-size:10px}
.empty-state .eyebrow{font-size:8px}
.empty-state .button{font-size:11px;padding-inline:14px}
.empty-state>p:not(.eyebrow){font-size:11px}
#add-form input{font-size:13px;padding:11px}
#add-form button{min-height:40px}
input[type=search]{min-height:38px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}
*,*:before,*:after{animation:none!important;transition:none!important}
.button:hover{transform:none}}
.ow-icon{width:19px;height:19px;display:inline-block;vertical-align:middle;flex-shrink:0}
.brand-mark{color:var(--lime);width:38px;height:38px}
.marketing-nav .brand{gap:12px}
.hero{grid-template-columns:1fr 1.06fr;gap:38px;padding-block:66px}
.hero h1{font-size:clamp(44px,4.5vw,65px)}
.hero-art.signal-studio{padding:22px 22px 17px;transform:none;background:#202b22;border-color:#46553e;box-shadow:0 30px 70px #080f0b44,inset 0 1px 0 #d3ef8519;border-radius:14px;position:relative;isolation:isolate}
.signal-studio:before{content:'';position:absolute;inset:10px;border:1px solid #d3ef850b;border-radius:9px;pointer-events:none;z-index:-1}
.signal-studio .art-top{margin:0 0 10px;gap:12px}
.offer-scene{display:block;width:100%;height:auto;aspect-ratio:600/480;overflow:visible;font-family:inherit}
.scene-kicker{fill:#c9d9bb;font-size:9px;letter-spacing:1.1px}
.hero-art.signal-studio{container-type:inline-size}
.signal-studio .art-disclaimer{font-size:min(18px,3cqw);font-weight:600;line-height:1.45;margin:18px -12px 0;padding:16px 14px;color:#f7f8f2;background:#121b17;border:1px solid #46553e;border-left:4px solid #d3ef85;border-radius:8px;white-space:nowrap}
.step-art{width:124px;flex-shrink:0}
.step-diagram{width:122px;height:82px;color:#bacbad;display:block;margin-top:9px}
.steps article{gap:25px}
.steps .step-number{font-size:10px;color:var(--lime);letter-spacing:2px}
.scope-grid li{display:flex;align-items:center;gap:12px}
.scope-grid li:before{display:none}
.scope-grid li .ow-icon{color:var(--lime)}
.local-notice>.ow-icon{color:#60794b;flex-shrink:0}
.waiting>.ow-icon{width:48px;height:48px;color:#6c8d4d;margin:0 0 18px}
.empty-visual>.ow-icon{color:#789359}
@media(min-width:1600px){.hero{padding-block:85px}
.hero h1{font-size:72px}}
@media(max-width:1150px){.hero{gap:25px}
.hero-art.signal-studio{padding:16px}
.step-art{width:100px}
.step-diagram{width:100px}}
@media(max-width:850px){.hero{grid-template-columns:1fr;gap:34px;padding-block:45px}
.hero-art.signal-studio{max-width:600px}
.hero h1{font-size:61px}
.steps article{gap:22px}
.step-art{width:124px}
.step-diagram{width:122px}}
@media(max-width:600px){.hero h1{font-size:clamp(39px,10.5vw,59px)}
.hero-art.signal-studio{padding:14px 10px 12px;border-radius:10px}
.signal-studio .art-top{padding:0 4px;gap:5px}
.signal-studio .art-disclaimer{font-size:16px;margin:16px 0 0;padding:14px 12px;white-space:normal}
.step-art{width:84px}
.step-diagram{width:84px;height:65px}
.steps article{gap:17px}
.marketing-nav .brand-mark{width:31px;height:31px}}
@media(prefers-reduced-motion:reduce){.offer-scene *{animation:none!important;transition:none!important}}
.locale-picker{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0;font-size:12px;min-width:0;max-width:100%}
.locale-picker label{margin:0;font-size:12px;white-space:nowrap}
.locale-picker select{width:auto;min-width:0;max-width:190px;padding:8px;border:1px solid currentColor;border-radius:5px;background:#f7f8f2;color:#202622;font:inherit}
.locale-picker button{padding:8px;font:inherit;background:transparent;color:inherit;border:1px solid currentColor;border-radius:5px}
.locale-picker.js-enabled button{display:none}
.marketing-nav{flex-wrap:wrap;gap:18px}
.marketing-nav .locale-picker{order:4}
@media(max-width:700px){.marketing-nav .locale-picker{order:0;width:100%;justify-content:flex-end}
.marketing-nav .brand{flex:1}
.locale-picker select{max-width:190px}
.hero h1{overflow-wrap:normal}}
.fineprint{font-size:12px;opacity:.65;margin:6px 0 0}
.feed-sample{margin:24px 0 0;padding:18px 20px;border:1px solid var(--line,#d7dece);border-radius:8px;background:#121b17;color:#dfe8d4;font:12px/1.65 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;overflow-x:auto;max-width:100%}
.feed-sample code{white-space:pre;display:block}
