:root{--ink:var(--color-ink);--green:var(--color-brand);--paper:var(--color-paper);--muted:var(--color-muted)}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:var(--space-8)}body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--font-body);line-height:var(--leading-body)}main{max-width:none;margin:0;padding:0}a{color:inherit;text-decoration:none}.site-nav,footer{max-width:1280px;margin:auto;display:flex;align-items:center;justify-content:space-between;padding:var(--space-6) var(--space-10)}.brand{font-size:var(--text-2xl);font-weight:var(--weight-brand);letter-spacing:-1px}.brand span{color:var(--green)}nav{display:flex;align-items:center;gap:var(--space-6);font-size:var(--text-sm)}nav a:hover,.text-link:hover{text-decoration:underline}.button{display:inline-flex;align-items:center;justify-content:center;border-radius:var(--radius-control);background:var(--green);color:white;padding:var(--space-4) var(--space-6);font-weight:var(--weight-heading);font-size:var(--text-sm);border:1px solid var(--green)}.button:hover{background:var(--color-brand-dark)}.button.small{padding:var(--space-2) var(--space-4)}.button.outline{background:transparent;color:var(--green)}.button.outline:hover{background:var(--color-soft)}.hero{max-width:1280px;margin:auto;padding:var(--space-16) var(--space-10) var(--space-24);display:grid;grid-template-columns:1.1fr 1fr;gap:var(--space-20);align-items:center}.eyebrow{font-size:var(--text-xs);letter-spacing:2px;font-weight:var(--weight-heading);color:var(--green);margin:0 0 var(--space-6)}h1{font-size:clamp(48px,5.4vw,76px);line-height:var(--leading-heading);letter-spacing:-3px;margin:0 0 var(--space-6);font-weight:var(--weight-brand)}h1 em{font-family:var(--font-accent);font-weight:var(--weight-normal);color:var(--green)}.intro{max-width:460px;font-size:var(--text-lg);color:var(--muted);margin:0 0 var(--space-6)}.hero-actions{display:flex;gap:var(--space-6);align-items:center}.text-link{font-size:var(--text-sm);font-weight:var(--weight-heading)}.fine{color:var(--muted);font-size:var(--text-xs);margin:var(--space-4) 0 0;max-width:800px}.demo{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-card);box-shadow:var(--shadow-overlay);transform:rotate(2deg);padding:var(--space-6)}.demo-top,.demo-bottom{display:flex;justify-content:space-between;align-items:center;font-size:var(--text-xs);letter-spacing:1.5px;font-weight:var(--weight-heading)}.demo-top{margin-bottom:var(--space-4)}.object{height:220px;background:var(--color-border);border-radius:var(--radius-card);display:flex;justify-content:center;align-items:center;overflow:hidden;position:relative}.disc{width:165px;height:165px;border-radius:var(--radius-round);background:repeating-radial-gradient(circle,var(--color-ink) 0 2px,var(--color-text) 3px 4px);color:var(--color-border);display:grid;place-items:center;font-size:var(--text-3xl);position:relative;left:50px}.sleeve{background:var(--color-border);width:145px;height:170px;padding:var(--space-4);line-height:var(--leading-heading);position:relative;left:-30px;transform:rotate(-8deg);font-size:var(--text-xl);box-shadow:var(--shadow-card)}.sleeve b{font-size:var(--text-3xl)}.sleeve small{display:block;margin-top:var(--space-8);font-size:var(--text-xs);line-height:var(--leading-body)}.demo-details{padding:var(--space-6) var(--space-1)}.demo-details .eyebrow{margin-bottom:var(--space-2)}.demo-details h2{font-size:var(--text-2xl);letter-spacing:-.5px;margin:0 0 var(--space-2)}.demo-details p{color:var(--muted);font-size:var(--text-sm)}.demo-tags{display:flex;gap:var(--space-3);font-size:var(--text-xs)}.demo-tags span{background:var(--color-soft);border-radius:var(--radius-control);padding:var(--space-1) var(--space-2)}.demo-bottom{border-top:1px solid var(--color-border);padding-top:var(--space-4);color:var(--green)}.demo-caption{font-size:var(--text-xs);color:var(--muted);margin:var(--space-2) 0 0}.section{max-width:1280px;margin:auto;padding:var(--space-20) var(--space-10);border-top:1px solid var(--color-border)}h2{font-size:var(--text-4xl);line-height:var(--leading-heading);letter-spacing:-1px;margin:0 0 var(--space-8)}.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-12);margin-top:var(--space-12)}.number{color:var(--green);font-size:var(--text-xs);letter-spacing:2px}h3{font-size:var(--text-xl);line-height:var(--leading-heading);margin:var(--space-4) 0 var(--space-3)}.steps p,.features p,.section-intro{color:var(--muted);font-size:var(--text-sm)}.feature-section{background:var(--color-soft);display:grid;grid-template-columns:1fr 1.4fr;gap:var(--space-16);padding:var(--space-20) max(var(--space-10),calc((100vw - 1280px)/2))}.features{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-6) var(--space-10)}.features article>span{font-size:var(--text-2xl);color:var(--green)}.features h3{font-size:var(--text-lg);margin:var(--space-2) 0}.features p{margin:0}.pricing{border:0}.section-intro{max-width:650px}.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-4);margin-top:var(--space-10)}.plans article{padding:var(--space-8);background:white;border:1px solid var(--color-border);border-radius:var(--radius-card);display:flex;flex-direction:column}.plans .pro{background:var(--color-ink);color:white;border-color:var(--color-ink)}.plan-label{font-size:var(--text-xs);letter-spacing:1.6px;color:var(--green);font-weight:var(--weight-heading)}.pro .plan-label{color:var(--color-border)}.plans h3{font-size:var(--text-xl);min-height:54px}.price{font-size:var(--text-4xl);font-weight:var(--weight-brand);letter-spacing:-1.5px;margin:var(--space-2) 0 var(--space-6)}.price small{font-size:var(--text-xs);letter-spacing:0;font-weight:var(--weight-normal);display:block;color:var(--muted)}.pro .price small,.pro .terms{color:var(--color-border)}.plans ul{list-style:none;padding:0;margin:0 0 var(--space-4);font-size:var(--text-sm)}.plans li{padding:var(--space-2) 0;border-bottom:1px solid var(--color-soft)}.plans li:before{content:'✓';margin-right:var(--space-2);color:var(--green)}.pro li{border-color:color-mix(in srgb, var(--color-surface) 8%, transparent)}.pro li:before{color:var(--color-border)}.terms{font-size:var(--text-xs);color:var(--muted);margin:0 0 var(--space-6)}.plans .button{margin-top:auto}.closing{text-align:center;background:var(--color-soft);padding:var(--space-16) var(--space-6)}.closing h2{font-family:var(--font-accent);font-weight:var(--weight-normal);font-size:var(--text-4xl)}.closing .eyebrow{margin-bottom:var(--space-4)}footer{font-size:var(--text-xs);color:var(--muted)}footer nav{font-size:var(--text-xs)}a:focus-visible{outline:3px solid var(--color-warning);outline-offset:5px}@media(max-width:900px){.hero{gap:var(--space-8);padding-top:var(--space-10)}.hero-actions{flex-wrap:wrap}.feature-section{grid-template-columns:1fr;gap:var(--space-4)}.plans article{padding:var(--space-6)}.site-nav nav{gap:var(--space-4)}}@media(max-width:650px){.site-nav{padding:var(--space-4)}.site-nav nav>a[href^='#']{display:none}.brand{font-size:var(--text-xl)}.site-nav nav{gap:var(--space-3)}.button.small{font-size:var(--text-xs);padding:var(--space-2)}.hero{grid-template-columns:1fr;padding:var(--space-8) var(--space-6) var(--space-12);gap:var(--space-10)}h1{font-size:var(--text-5xl)}.demo{transform:none}.section{padding:var(--space-12) var(--space-6)}h2{font-size:var(--text-3xl)}.steps,.plans{grid-template-columns:1fr;gap:var(--space-6)}.steps{margin-top:var(--space-8)}.feature-section{padding:var(--space-12) var(--space-6)}.features{gap:var(--space-6);grid-template-columns:1fr}.plans h3{min-height:0}.closing h2{font-size:var(--text-3xl)}footer{padding:var(--space-6) var(--space-6);flex-wrap:wrap;gap:var(--space-3)}footer p{width:100%;order:3;margin:0}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

.cookie-notice{max-width:1240px;margin:0 auto;padding:0 var(--space-6) var(--space-6)}.cookie-notice a{color:inherit;text-decoration:underline}

.example-photo{display:block;width:100%;height:260px;object-fit:contain;background:var(--color-soft);border-radius:var(--radius-card)}.real-example .demo-details h2{font-size:var(--text-2xl)}.value-steps{grid-template-columns:repeat(4,1fr)}.faq-page{max-width:940px;margin:auto;padding:var(--space-12) var(--space-6) var(--space-16)}.faq-page h1{font-size:clamp(36px,5vw,56px);letter-spacing:-1.5px}.faq-page details,.faq-preview details{border:1px solid var(--color-border);border-radius:var(--radius-card);background:white;margin:var(--space-3) 0;padding:var(--space-4) var(--space-6)}.faq-page summary,.faq-preview summary{cursor:pointer;font-size:var(--text-base);font-weight:var(--weight-heading)}.faq-page details p,.faq-preview details p{color:var(--muted);margin-bottom:0}.faq-page a,.faq-preview .text-link{text-decoration:underline}.faq-help{margin-top:var(--space-8)}.faq-preview .text-link{display:inline-block;margin-top:var(--space-4)}@media(max-width:900px){.value-steps{grid-template-columns:repeat(2,1fr)}}@media(max-width:650px){.value-steps{grid-template-columns:1fr}.site-nav nav>a[href="/faq.html"]{display:none}.example-photo{height:250px}.faq-page{padding-top:var(--space-8)}}

.demo{transform:none}.demo-top{letter-spacing:1px}.section>.eyebrow,.feature-section .eyebrow{letter-spacing:1px}

.sample-range{display:flex;gap:var(--space-6);align-items:center;margin:var(--space-4) 0}.sample-range strong{font-size:var(--text-4xl);color:var(--green);white-space:nowrap}.sample-range span{max-width:320px;color:var(--muted)}.sample-comparisons{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-4);margin:var(--space-6) 0}.sample-comparison{background:white;border:1px solid var(--color-border);border-radius:var(--radius-card);padding:var(--space-6)}.sample-comparison h3{font-size:var(--text-lg);margin:var(--space-2) 0 var(--space-4)}.sample-condition{font-size:var(--text-xs);color:var(--muted);margin:0}.sample-price{font-size:var(--text-2xl);font-weight:var(--weight-heading);margin:var(--space-3) 0}.sample-price small{font-size:var(--text-xs);font-weight:var(--weight-normal);color:var(--muted)}.sample-own{font-size:var(--text-sm);color:var(--muted)}.sample-market a{text-decoration:underline}@media(max-width:650px){.sample-comparisons{grid-template-columns:1fr}.sample-range{align-items:flex-start;flex-direction:column;gap:var(--space-1)}.sample-range strong{font-size:var(--text-3xl)}}

.guide-page{max-width:850px}.guide-page h2{font-size:1.5rem;margin-top:2rem}.guide-page p{line-height:var(--leading-reading)}.guide-page .intro{font-size:1.15rem}
@media(max-width:650px){.site-nav{flex-wrap:wrap;gap:var(--space-4)}.site-nav .brand{white-space:nowrap}.site-nav nav{flex-wrap:wrap;gap:var(--space-4)}.site-nav nav a{white-space:nowrap}}
:root{--muted:var(--color-muted)}.button{border-radius:var(--radius-control)}.demo,.sample-comparison,.plans article,.faq-page details,.faq-preview details{border-radius:var(--radius-card)}.fine,.terms,.sample-condition,.sample-own{color:var(--color-muted)}
.feature-icon{width:26px;height:26px;color:var(--green);margin-bottom:var(--space-3)}

body{font-family:var(--font-body);line-height:var(--leading-body)}h1,h2,h3{line-height:var(--leading-heading);font-weight:var(--weight-heading)}h1{font-size:clamp(var(--text-4xl),5.4vw,var(--text-hero));letter-spacing:-.035em}.intro{line-height:var(--leading-body)}.demo,.sample-comparison{box-shadow:var(--shadow-card)}a,button{transition:color var(--duration-fast) var(--ease-standard),background var(--duration-fast) var(--ease-standard)}.section p,.guide-page p{line-height:var(--leading-reading)}.site-nav .brand{font-weight:var(--weight-brand)}
@media(max-width:650px){.site-nav nav>a[href="/#how"]{display:none}}

/* The same SVG mark is used in navigation, footers and browser tabs. */
.brand{display:inline-flex;align-items:center;gap:var(--space-2);text-decoration:none;line-height:1}
.brand .brand-logo{display:block;width:36px;height:36px;flex-shrink:0}
.brand .brand-name{color:var(--color-ink);font-weight:var(--weight-brand)}
.brand .branddot{color:var(--color-brand)}
@media(max-width:650px){.brand .brand-logo{width:28px;height:28px}}

/* Features share the page content width and keep readable columns. */
.feature-section{grid-template-columns:minmax(0,1fr);gap:var(--space-8);padding:var(--space-16) max(var(--space-10),calc((100% - 1200px)/2))}
.feature-section>div{min-width:0}
.feature-section h2{max-width:720px;margin-bottom:0}
.feature-section .features{grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-8)}
@media(max-width:1000px){.feature-section .features{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:650px){.feature-section{padding:var(--space-12) var(--space-6)}.feature-section .features{grid-template-columns:minmax(0,1fr);gap:var(--space-6)}}

/* Phone layout: compact introduction and comfortable touch targets. */
@media(max-width:650px){
.hero{padding-top:var(--space-6);gap:var(--space-6)}
.hero h1{font-size:var(--text-4xl);margin-bottom:var(--space-4)}
.hero .eyebrow{margin-bottom:var(--space-4)}
.hero .intro{font-size:var(--text-base);margin-bottom:var(--space-4)}
.hero-actions{gap:var(--space-4)}
.hero-actions>.text-link{display:inline-flex;align-items:center;min-height:44px}
.real-example{padding:var(--space-4)}
.real-example .demo-details{padding-top:var(--space-4);padding-bottom:var(--space-4)}
.real-example .demo-tags{flex-wrap:wrap}
.example-photo{height:220px}
.site-nav nav{width:100%;gap:var(--space-3);justify-content:space-between}
.site-nav nav>a{display:inline-flex;align-items:center;min-height:44px}
.site-nav nav>a[href="/#how"],.site-nav nav>a[href="/faq.html"]{display:none}
.plans .button{min-height:44px}
}

/* Keep the photo and its result visible alongside the introduction. */
.hero{padding-top:var(--space-8);padding-bottom:var(--space-12);gap:var(--space-10);grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.hero h1{font-size:clamp(40px,4.5vw,64px)}
.hero .intro{max-width:480px}
.hero .example-photo{height:180px}
.hero .demo-details{padding:var(--space-4) 0}
.hero .demo-details p{margin:var(--space-2) 0}
.hero .demo-details h2{font-size:var(--text-xl)}
@media(max-width:650px){
.hero{grid-template-columns:minmax(0,1fr);gap:var(--space-6)}
.hero h1{font-size:var(--text-4xl)}
.hero .intro{margin-bottom:var(--space-3)}
.hero .real-example{display:grid;grid-template-columns:100px minmax(0,1fr);gap:var(--space-3)}
.hero .demo-top,.hero .demo-bottom,.hero .demo-caption{grid-column:1/-1}
.hero .demo-top{margin-bottom:0}
.hero .example-photo{height:150px}
.hero .demo-details{padding:0}
.hero .demo-details h2{font-size:var(--text-base)}
.hero .demo-details .eyebrow{font-size:10px;margin-bottom:var(--space-2);letter-spacing:.6px}
.hero .demo-tags{display:none}
.hero .demo-caption{margin:0}
}

@media(max-width:650px){
.hero{gap:var(--space-4)}
.hero>div:first-child{display:contents}
.hero>div:first-child>.eyebrow{order:0;margin:0}
.hero>div:first-child>h1{order:1;font-size:32px;margin:0}
.hero>div:first-child>.intro{order:2;margin:0}
.hero>.real-example{order:3}
.hero>div:first-child>.hero-actions{order:4;gap:var(--space-3)}
.hero>div:first-child>.fine{order:5;margin:0}
.hero-actions>.text-link{font-size:var(--text-xs)}
}