@layer reset, base, components, responsive;
@layer components {
  .stories-heading {display:flex;align-items:flex-end;justify-content:space-between;gap:40px;margin-bottom:44px}
  .stories-heading .eyebrow {margin-bottom:18px}
  .stories-context {max-width:330px;padding-bottom:5px}
  .story-preview-label {display:inline-block;font-size:.875rem;font-weight:600;color:#4549ba;margin-bottom:12px}
  .stories-context p {font-size:1rem;line-height:1.65}
  .stories-grid {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
  .story-card {margin:0;min-width:0;padding:32px;display:flex;flex-direction:column;border:1px solid var(--line);border-radius:18px;background:#fff}
  .story-salon {background:#eeedfa;border-color:#dddcf0}
  .story-card-top {display:flex;align-items:center;gap:12px;margin-bottom:34px}
  .story-monogram {width:49px;height:49px;flex-shrink:0;display:grid;place-items:center;border:1px solid #d2d6cd;border-radius:14px;background:#e7ece4;color:#344d3e;font-family:var(--serif);font-size:1.6rem;line-height:1}
  .story-salon .story-monogram {color:#6f453b;background:#efe3dd;border-color:#dec9be}
  .story-studio .story-monogram {color:#43554a;background:#e4e9e0;border-color:#cbd4c6}
  .story-kind {color:var(--ink);font-size:.9375rem;font-weight:600;line-height:1.4}
  .story-kind small {display:block;font-weight:400;font-size:.875rem;color:var(--muted);margin-top:3px}
  .story-quote-mark {margin-left:auto;align-self:flex-start;color:#6669c0;font-family:var(--serif);font-size:3.7rem;line-height:1}
  .story-card h3 {font-family:var(--sans);font-size:.875rem;font-weight:600;letter-spacing:0;line-height:1.5;color:#4c50b1;margin-bottom:14px}
  .story-card blockquote {margin:0 0 30px}
  .story-card blockquote p {font-family:var(--serif);font-size:clamp(1.3rem,1.75vw,1.65rem);line-height:1.45;letter-spacing:-.018em;color:var(--ink)}
  .story-card figcaption {margin-top:auto;padding-top:21px;border-top:1px solid #deded9;display:flex;flex-direction:column;gap:5px}
  .story-card figcaption strong {font-size:1rem;font-weight:600}
  .story-card figcaption>span {font-size:.875rem;color:var(--muted);line-height:1.5}
  .story-card figcaption .text-link {margin-top:12px}
  .customer-reference {margin-top:24px;border:1px solid var(--line);border-radius:16px;background:#f0efeb;overflow:hidden}
  .customer-reference summary {display:flex;align-items:center;gap:18px;padding:24px 30px;list-style:none}
  .customer-reference summary::-webkit-details-marker {display:none}
  .reference-icon {display:grid;place-items:center;flex-shrink:0;width:42px;height:42px;background:#e3e2f6;color:var(--accent);border-radius:50%}
  .customer-reference summary strong {display:block;font-size:1rem;font-weight:600;line-height:1.5}
  .customer-reference summary>span>span {display:block;font-size:.875rem;color:var(--muted);margin-top:3px}
  .reference-toggle {margin-left:auto;font-size:1.7rem;line-height:1;transition:transform .2s ease}
  .customer-reference[open] .reference-toggle {transform:rotate(45deg)}
  .reference-content {display:grid;grid-template-columns:1.2fr 1fr;gap:55px;padding:8px 30px 32px}
  .reference-content h3 {font-family:var(--serif);font-size:1.8rem;margin-bottom:15px}
  .reference-content p {font-size:1rem;line-height:1.7}
  .reference-content .reference-status {font-size:.875rem;margin-top:14px}
  .reference-questions {border-left:1px solid #d5d2c9;padding-left:32px;align-self:center}
  .reference-questions ul {margin-top:14px;padding-left:20px}
  .reference-questions li {font-size:1rem;color:var(--muted);margin-bottom:10px;line-height:1.6}
}
@layer responsive {
  @media(max-width:1000px) {.story-card{padding:24px}.stories-grid{gap:16px}.story-card-top{gap:10px}.story-quote-mark{display:none}}
  @media(max-width:760px) {.stories-heading{display:block;margin-bottom:30px}.stories-context{margin-top:24px;max-width:none}.stories-grid{grid-template-columns:1fr}.story-card{padding:28px}.story-card-top{margin-bottom:24px}.story-quote-mark{display:block}.story-card blockquote p{font-size:1.5rem}.customer-reference summary{padding:22px 20px;gap:12px}.reference-content{grid-template-columns:1fr;gap:26px;padding:4px 24px 28px}.reference-questions{border-left:0;border-top:1px solid #d5d2c9;padding:24px 0 0}.reference-icon{display:none}}
  @media(prefers-reduced-motion:reduce) {.reference-toggle{transition:none}}
}
@layer reset{*,*::before,*::after{box-sizing:border-box}body,h1,h2,h3,p,ul,ol{margin:0}button,input,select,textarea{font:inherit}button,a,input,select,textarea{-webkit-tap-highlight-color:transparent}img{max-width:100%;display:block}button{cursor:pointer}a{color:inherit}button{color:inherit}}
@layer base{:root{--paper:#f7f6f3;--white:#fff;--ink:#1c1b19;--muted:#5f5d57;--line:#e7e5e0;--accent:#4c51e0;--success:#0a7a4b;--serif:Georgia,'Times New Roman',serif;--sans:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif}html{scroll-behavior:smooth;scroll-padding-top:100px}body{background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.6}::selection{background:#dddfff}a{text-underline-offset:5px}a:hover{color:var(--accent)}:focus-visible{outline:3px solid var(--accent);outline-offset:5px}h1,h2,h3{font-weight:400;line-height:1.09;letter-spacing:-.045em}h1,h2{font-family:var(--serif)}h1{font-size:clamp(3.3rem,5.5vw,5.5rem)}h2{font-size:clamp(2.5rem,4vw,4rem)}h3{font-size:1.5rem;letter-spacing:-.025em}p{color:var(--muted)}button{border:0}svg{width:22px;height:22px;flex-shrink:0}a,button{touch-action:manipulation}ul{padding-left:1.3rem}summary{cursor:pointer}small{font-size:.875rem}input,select,textarea{width:100%;min-height:50px;border:1px solid #c6c3bb;border-radius:11px;padding:12px;background:var(--white);color:var(--ink)}label{display:block;font-size:.9375rem;font-weight:600;margin-bottom:7px}}
@layer components{.wrap{max-width:1280px;width:calc(100% - 112px);margin:auto}.skip{position:fixed;left:16px;top:-100px;z-index:20;background:white;padding:12px}.skip:focus{top:16px}.header{height:100px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);gap:32px}.logo{font-family:var(--serif);font-size:2.4rem;font-weight:600;letter-spacing:-.075em;text-decoration:none;line-height:1}.logo span{color:var(--accent)}.nav{display:flex;gap:30px;align-items:center}.nav a{text-decoration:none;font-size:.9375rem}.nav a[aria-current=page]{color:var(--accent)}.button{display:inline-flex;align-items:center;justify-content:center;gap:22px;background:var(--accent);color:white;text-decoration:none;border:1px solid var(--accent);padding:14px 22px;border-radius:11px;font-weight:600;font-size:.9375rem;line-height:1.5;min-height:50px;transition:background .2s}.button:hover{background:#3d41b8;color:white}.button.secondary{background:transparent;color:var(--ink);border-color:#cecbc4}.button.secondary:hover{background:#efede7}.button.small{padding:11px 18px;min-height:46px}.text-link{display:inline-flex;align-items:center;gap:14px;font-weight:600;text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:4px}.menu-toggle{display:none;background:transparent;padding:12px}.eyebrow{font-size:.75rem;letter-spacing:.11em;font-weight:700;text-transform:uppercase;color:var(--muted);line-height:1.5}.hero{padding:64px 0 66px;display:grid;grid-template-columns:1.08fr 1fr;gap:72px;align-items:center}.hero h1{margin:24px 0 25px}.hero h1 em{font-style:normal;color:var(--accent)}.hero .intro{max-width:455px;font-size:1.125rem;line-height:1.7}.actions{display:flex;gap:24px;flex-wrap:wrap;align-items:center;margin-top:30px}.fine{font-size:.875rem;color:var(--muted);margin-top:16px}.hero-art{position:relative;background:#dfd8ca;border-radius:4px 4px 60px 4px;min-height:570px;overflow:hidden}.hero-photo{width:100%;height:570px;object-fit:cover}.photo-note{position:absolute;top:22px;left:24px;color:#fff;font-size:.75rem;letter-spacing:.1em;font-weight:700;text-shadow:0 1px 4px #000}.loyalty-demo{background:white;padding:26px;border:1px solid var(--line);border-radius:16px;width:calc(100% - 64px);margin:auto;position:absolute;bottom:28px;left:32px}.card-top{display:flex;justify-content:space-between;align-items:flex-start;gap:15px}.venue-name{font-family:var(--serif);font-size:1.9rem;line-height:1.2;letter-spacing:-.04em}.card-top p{font-size:.8125rem;margin-top:5px}.stamp-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:11px;margin:23px 0 19px}.stamp{aspect-ratio:1;display:grid;place-items:center;border:1px dashed #c6c3bb;border-radius:50%;color:#99968e}.stamp svg{width:24px;height:24px}.stamp.filled{color:#fff;background:#344d3e;border-color:#344d3e}.stamp:last-child{border-style:solid}.demo-progress{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:.75rem;font-weight:700;letter-spacing:.055em}.stamp-button{background:#edf0ea;color:#344d3e;width:100%;border-radius:9px;min-height:44px;display:flex;align-items:center;justify-content:center;gap:9px;margin-top:18px;font-size:.875rem;font-weight:600}.stamp-button:hover{background:#e0e7db}.stamp.landed{animation:stamp-in .48s ease-out}@keyframes stamp-in{0%{transform:scale(1.6);opacity:0}60%{transform:scale(.92);opacity:1}100%{transform:scale(1)}}.proof-strip{display:flex;justify-content:space-between;gap:20px;padding:23px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);font-size:.875rem}.proof-strip span{display:flex;align-items:center;gap:9px}.proof-strip svg{width:17px;height:17px}.section{padding:100px 0}.section-head{display:grid;grid-template-columns:1.2fr 1fr;gap:80px;align-items:end;margin-bottom:48px}.section-head .eyebrow{margin-bottom:18px}.section-head>p{max-width:440px;font-size:1.0625rem}.footer{padding:56px 0 26px;border-top:1px solid var(--line)}.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:35px}.footer-brand p{max-width:250px;margin-top:22px;font-size:.9375rem}.footer h3{font-size:.875rem;font-weight:600;letter-spacing:0;margin-bottom:17px}.footer a:not(.logo){display:block;text-decoration:none;font-size:.875rem;margin-bottom:11px;color:var(--muted)}.footer a:hover{color:var(--accent)}.footer-bottom{border-top:1px solid var(--line);padding-top:24px;margin-top:45px;display:flex;justify-content:space-between;font-size:.8125rem;color:var(--muted)}.footer-bottom div{display:flex;gap:22px}.footer-bottom a{font-size:.8125rem!important}.demo-label{color:var(--muted);font-size:.75rem;margin-top:8px}.placeholder-photo{height:570px;background:#d8d0c0}.placeholder-photo p{padding:32px;font-family:var(--serif);font-size:2rem;max-width:300px;color:#344d3e}}
@layer responsive{@media(min-width:1500px){.hero{padding-top:80px;padding-bottom:80px}}@media(max-width:1050px){.wrap{width:calc(100% - 64px)}.nav{gap:20px}.hero{gap:36px}.hero-art,.hero-photo,.placeholder-photo{height:530px;min-height:530px}.loyalty-demo{padding:22px;left:22px;width:calc(100% - 44px)}.stamp-grid{gap:8px}.section-head{gap:35px}.proof-strip{flex-wrap:wrap}}@media(max-width:760px){.wrap{width:calc(100% - 40px)}.header{height:82px;gap:14px}.logo{font-size:2.15rem}.header>.button{margin-left:auto;padding:10px 13px;font-size:.8125rem;min-height:44px}.header>.button svg{display:none}.menu-toggle{display:block}.nav{display:none}.nav.open{display:flex;position:absolute;left:0;top:82px;right:0;z-index:10;padding:24px;background:var(--paper);border-bottom:1px solid var(--line);align-items:flex-start;flex-direction:column}.hero{grid-template-columns:1fr;padding:44px 0;gap:40px}.hero h1{font-size:clamp(2.45rem,11.8vw,3.55rem);margin-top:20px}.hero .intro{font-size:1.0625rem}.hero-art,.hero-photo,.placeholder-photo{height:530px;min-height:530px}.loyalty-demo{left:20px;width:calc(100% - 40px);bottom:22px;padding:22px}.hero-art{border-radius:4px 4px 40px 4px}.proof-strip{display:grid;grid-template-columns:1fr 1fr;gap:19px 14px;font-size:.8125rem}.section{padding:68px 0}.section-head{grid-template-columns:1fr;gap:24px}.footer-grid{grid-template-columns:1fr 1fr}.footer-brand{grid-column:1/-1}.footer-bottom{flex-direction:column;gap:18px}.actions{gap:20px}.button{gap:15px}.stamp-grid{gap:10px}}@media(max-width:370px){.hero h1{font-size:2.7rem}.loyalty-demo{padding:17px}.stamp-grid{gap:7px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}}}
@layer components{
.hero-art .loyalty-demo{max-width:390px;left:auto;right:26px;bottom:26px;padding:23px}.hero-photo{object-position:center bottom}.hero-art .stamp-grid{gap:9px;margin:18px 0 16px}.hero-art .stamp{width:100%;max-width:52px;justify-self:center}.hero-art .stamp svg{width:22px;height:22px}.hero-art .venue-name{font-size:1.7rem}.hero-art .demo-progress{font-size:.75rem}.hero-art .demo-label{margin-top:7px}
.tap-story{display:grid;grid-template-columns:repeat(3,1fr);gap:56px}.step{padding-top:26px;border-top:1px solid #c6c3bb}.step-number{font-family:var(--serif);font-size:2.125rem;color:#77746b;display:block;margin-bottom:27px}.step h3{font-family:var(--serif);font-size:1.9rem;margin-bottom:15px}.step p{font-size:.9375rem;line-height:1.75}.section-foot{margin-top:44px;display:flex;justify-content:space-between;gap:24px;font-size:.9375rem}.platform-section{background:#ebe9e2;padding:84px 0}.platform-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:94px}.platform-grid h2{margin:22px 0 24px}.platform-grid>div>p:not(.eyebrow){max-width:445px;margin-bottom:28px}.feature-rows a{display:flex;align-items:center;justify-content:space-between;gap:20px;text-decoration:none;border-bottom:1px solid #d0cdc3;padding:24px 0}.feature-rows a:first-child{padding-top:0}.feature-rows h3{font-family:var(--serif);font-size:1.7rem;margin-bottom:8px}.feature-rows p{font-size:.9375rem}.feature-rows a:hover h3{color:var(--accent)}.pilot-caption{font-size:.8125rem;margin-top:42px}.industry-list a{display:grid;grid-template-columns:1fr 1.8fr 24px;gap:25px;align-items:center;border-top:1px solid var(--line);padding:29px 0;text-decoration:none}.industry-list a:last-child{border-bottom:1px solid var(--line)}.industry-list h3{font-family:var(--serif);font-size:2rem}.industry-index{font-size:.875rem;color:var(--muted)}.industry-list a:hover h3,.industry-list a:hover h2{color:var(--accent)}.price-banner{display:grid;grid-template-columns:1.25fr 1fr;gap:75px;background:#efeee9;border:1px solid var(--line);padding:55px 60px;margin-top:2px;border-radius:4px 48px 4px 4px}.price-banner h2{margin:20px 0 24px}.price-banner p:not(.eyebrow){max-width:420px;margin-bottom:24px}.price-aside{padding-left:58px;border-left:1px solid #d4d1c7;display:flex;flex-direction:column;align-items:flex-start;justify-content:center}.display-price{font-size:4.7rem;line-height:1.2;letter-spacing:-.07em;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums;margin:18px 0!important}.display-price span{font-size:.875rem;letter-spacing:0;font-weight:400;color:var(--muted);margin-left:9px}.price-aside>p:not(.display-price){font-size:.9375rem;line-height:1.9}.faq-section{display:grid;grid-template-columns:1fr 1.4fr;gap:85px}.faq-section h2{margin-top:20px}.faq-list details{border-top:1px solid var(--line);padding:22px 0}.faq-list details:last-child{border-bottom:1px solid var(--line)}.faq-list summary{list-style:none;display:flex;justify-content:space-between;gap:20px;font-weight:500;line-height:1.6}.faq-list summary::-webkit-details-marker{display:none}.faq-list summary span{font-size:1.4rem;font-weight:300;line-height:1.2}.faq-list details[open] summary span{transform:rotate(45deg)}.faq-list details p{font-size:.9375rem;margin-top:18px;line-height:1.85;padding-right:30px}.closing{background:#e7e8f3;padding:70px 0 76px}.closing-inner{display:flex;align-items:center;justify-content:space-between;gap:60px}.closing h2{margin:20px 0}.closing p:not(.eyebrow){max-width:610px}.closing .fine{font-size:.8125rem}.closing .button{min-width:225px}.closing-inner>div:last-child{flex-shrink:0}.page-intro{padding:68px 0 60px}.page-intro h1{font-size:clamp(3rem,5.3vw,5.4rem);max-width:980px;margin:24px 0}.lead{font-size:1.125rem;line-height:1.8;max-width:665px}.breadcrumbs{display:flex;align-items:center;flex-wrap:wrap;gap:11px;font-size:.8125rem;margin-bottom:36px;color:var(--muted)}.breadcrumbs a{text-decoration:none}.story-layout{display:grid;grid-template-columns:1.1fr 1fr;gap:100px;padding-bottom:90px}.numbered-block{padding:34px 0 45px;border-top:1px solid var(--line)}.numbered-block>span{font-size:.75rem;letter-spacing:.1em;font-weight:600;color:var(--muted)}.numbered-block h2{font-size:2.7rem;margin:20px 0}.numbered-block p+p{margin-top:20px}.sticky-aside{position:sticky;top:40px;align-self:start}.demo-stage{background:#dedfd5;position:relative;min-height:400px;display:flex;align-items:center;justify-content:center;border-radius:4px 4px 44px 4px}.demo-stage .loyalty-demo{position:static;width:calc(100% - 55px);margin:25px;max-width:420px}.prose p{margin-bottom:24px}.prose h2{margin-bottom:24px}.feature-editorial{display:grid;grid-template-columns:1fr 1fr;gap:90px;align-items:center;padding:20px 0 0}.feature-editorial .demo-stage{min-height:430px}.feature-details{display:grid;grid-template-columns:1fr 1fr;gap:52px 80px}.prose-section{padding-top:30px;border-top:1px solid #d5d2c8}.prose-section h2{font-size:2.25rem;max-width:500px;margin-bottom:22px}.prose-section p{line-height:1.85}.notice{background:#eeede6;border:1px solid #d9d5c8;border-radius:8px;padding:20px 25px;color:#57544d;font-size:.9375rem}.notice strong{color:var(--ink)}.ordering-layout{display:grid;grid-template-columns:1fr 1fr;gap:95px}.ordering-layout h2{margin:22px 0}.plain-list>div{padding:25px 0;border-top:1px solid #d2cec3}.plain-list h3{font-family:var(--serif);font-size:1.8rem;margin-bottom:14px}.journey-rows>div{display:grid;grid-template-columns:.8fr .8fr 1.6fr;gap:30px;border-top:1px solid #cdc9be;padding:33px 0}.journey-rows>div>span{font-size:.75rem;letter-spacing:.08em;font-weight:600}.journey-rows h3{font-size:1.9rem;font-family:var(--serif)}.journey-rows p{line-height:1.8}.directory{padding-top:0}.directory h2{font-size:2.5rem;margin-bottom:16px}.directory a{padding:36px 0}.audience-note{display:grid;grid-template-columns:1fr 1fr;gap:80px;padding-bottom:95px;align-items:center}.industry-feature{display:grid;grid-template-columns:1.5fr 1fr;gap:100px;background:#ebe9e2;padding:50px 56px;border-radius:4px 45px 4px 4px}.industry-feature h2{font-size:2.9rem;margin:22px 0}.industry-feature p{margin:22px 0}.industry-feature aside{border-left:1px solid #ccc8bc;padding-left:50px;align-self:center}.check-list{list-style:none;padding:0;margin-top:22px}.check-list li{font-size:.9375rem;padding:10px 0 10px 26px;position:relative}.check-list li::before{content:'✓';position:absolute;left:0;color:var(--muted)}.related-note{padding-bottom:70px}.pricing-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}.plan{padding:33px 28px;background:white;border:1px solid var(--line);border-radius:16px;display:flex;flex-direction:column;align-items:stretch}.plan.featured{border:1.5px solid var(--accent);background:#f2f2fb}.plan-label{font-size:.75rem;letter-spacing:.11em;color:var(--muted);font-weight:600;margin-bottom:24px}.plan.featured .plan-label{color:var(--accent)}.plan h2{font-size:2.5rem;margin-bottom:15px}.plan>p{font-size:.9375rem}.plan .display-price{font-size:4.4rem}.plan .button{padding:14px 12px;gap:7px;font-size:.875rem;margin-top:15px}.plan .button svg{width:18px}.plan .check-list{margin-top:25px}.plan-note{padding-top:20px;margin-top:20px;border-top:1px solid var(--line);font-size:.8125rem!important}.price-notes{padding-top:24px}.price-notes p{font-size:.8125rem;line-height:1.9}.pricing-detail{display:grid;grid-template-columns:1fr 1.4fr;gap:90px}.pricing-detail h2{margin-top:22px}.table-scroll{overflow-x:auto;margin:24px 0;max-width:100%;border:1px solid var(--line);border-radius:12px;background:#fff}table{border-collapse:collapse;width:100%;text-align:left;font-size:.9375rem}caption{text-align:left;padding:22px;font-weight:600;font-size:1.1rem}th,td{padding:24px 22px;border-top:1px solid var(--line);vertical-align:top;min-width:170px}th{font-weight:600}thead th{font-size:.8125rem;background:#eeede8;color:var(--muted)}td{color:var(--muted)}.ours{background:#f1f1fc}.sources{font-size:.8125rem;line-height:1.85}.sources a{color:var(--ink)}.research-note{border-top:1px solid var(--line);padding:40px 0 70px}.research-note h2{margin:20px 0}.research-note p:not(.eyebrow){max-width:780px;margin-bottom:20px}.guide-grid{display:grid;grid-template-columns:1fr 1fr;gap:55px;padding-top:0}.guide-art{display:flex;min-height:275px;align-items:center;padding:40px;text-decoration:none;border-radius:4px 4px 45px 4px;background:#e0e2d8;color:#344d3e}.guide-art span{font-family:var(--serif);font-size:3.6rem;line-height:1.1;letter-spacing:-.05em}.guide-art.art-1{color:#514338;background:#e6ddd1}.guide-grid .eyebrow{margin-top:28px}.guide-grid h2{font-size:2.35rem;margin:20px 0}.guide-grid h2 a{text-decoration:none}.guide-grid p{margin-bottom:22px}.article-body{max-width:730px;padding-bottom:90px;font-size:1.0625rem}.article-byline{padding:22px 0;margin-bottom:35px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);font-size:.8125rem}.article-body>p,.article-body>ul{margin-bottom:24px;line-height:1.9}.article-body h2{font-size:2.4rem;margin:46px 0 24px}.article-body li{margin-bottom:12px;color:var(--muted)}.article-end{border-top:1px solid var(--line);padding-top:28px;margin-top:44px}.article-end p{margin-bottom:24px}.legal{max-width:800px;padding:55px 0 80px}.legal h1{font-size:3.7rem;margin:42px 0 24px}.legal h2{font-size:2rem;margin:35px 0 20px}.legal p,.legal ul{margin-bottom:20px;line-height:1.9}.legal li{color:var(--muted);margin-bottom:12px}.legal td,.legal th{min-width:0;padding:13px 12px;font-size:.875rem}.legal table{margin:22px 0}.setup-layout{display:grid;grid-template-columns:1.35fr 1fr;gap:70px;padding-bottom:95px;align-items:start}.setup-progress{display:flex;gap:17px;padding-bottom:20px;font-size:.8125rem;color:var(--muted)}.setup-progress span{border-bottom:2px solid var(--line);padding-bottom:12px;flex:1}.setup-progress .active{color:var(--accent);border-color:var(--accent);font-weight:600}.form-notice{font-size:.8125rem;padding:16px 20px;margin:5px 0 28px}fieldset{border:0;padding:0;margin:0;min-width:0}legend{font-family:var(--serif);font-size:1.8rem;letter-spacing:-.03em;margin-bottom:24px;line-height:1.3}.field{margin-bottom:22px}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}.optional{font-weight:400;color:var(--muted)}textarea{resize:vertical;display:block}.field-hint{font-size:.8125rem;margin-top:8px}.form-actions{display:flex;align-items:center;gap:18px;flex-wrap:wrap}.text-button{background:transparent;text-decoration:underline;text-underline-offset:5px;padding:12px}.profile-live{position:sticky;top:35px}.profile-live>.eyebrow{margin-bottom:22px}.profile-card{border:1px solid var(--line);border-radius:16px;overflow:hidden;background:white;--card-ink:#344d3e;--card-paper:#e7ece4}.profile-card-head{background:var(--card-paper);color:var(--card-ink);padding:32px}.preview-monogram{display:grid;place-items:center;width:55px;height:55px;border:1px solid currentColor;border-radius:11px;font-family:var(--serif);font-size:2rem;margin-bottom:28px}.profile-card-head p{color:inherit;font-size:.8125rem;margin-top:12px;overflow-wrap:anywhere}.profile-card-head h2{font-size:2.5rem;margin-top:12px;overflow-wrap:anywhere}.profile-card-body{padding:30px}.profile-card-body>p{font-size:.9375rem;overflow-wrap:anywhere}.preview-stamps{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin:30px 0}.preview-stamps span{aspect-ratio:1;border:1px dashed #aaa99f;border-radius:50%;display:grid;place-items:center;color:var(--card-ink)}.preview-stamps svg{width:22px;height:22px}.profile-card-body>strong{font-size:.875rem;color:var(--card-ink);overflow-wrap:anywhere}.profile-summary{padding:0;margin:30px 0}.profile-summary>div{padding:15px 0;border-top:1px solid var(--line);display:grid;grid-template-columns:110px 1fr;gap:20px}.profile-summary dt{font-size:.875rem;color:var(--muted)}.profile-summary dd{margin:0;overflow-wrap:anywhere}.profile-summary div:last-child{border-bottom:1px solid var(--line)}#profile-success h2{font-size:2.65rem;margin:20px 0}#profile-success>p{line-height:1.85}[hidden]{display:none!important}}
@layer responsive{@media(max-width:1100px){.platform-grid,.feature-editorial,.ordering-layout,.story-layout,.setup-layout{gap:45px}.hero-art{min-height:570px}.hero-photo{height:570px;object-position:center top}.tap-story{gap:35px}.price-banner{padding:45px 40px;gap:35px}.price-aside{padding-left:35px}.faq-section{gap:45px}.plan{padding:28px 20px}.plan .button{font-size:.8125rem}.plan .display-price{font-size:3.8rem}.industry-feature{gap:50px;padding:42px}.industry-feature aside{padding-left:30px}}@media(max-width:760px){.tap-story{grid-template-columns:1fr;gap:28px}.step{padding-top:20px;display:grid;grid-template-columns:42px 1fr;column-gap:16px}.step-number{grid-row:1/3;font-size:1.7rem}.step p{grid-column:2}.step h3{font-size:1.8rem;margin-bottom:12px}.section-foot{flex-direction:column;align-items:flex-start}.platform-section{padding:60px 0}.platform-grid,.feature-editorial,.ordering-layout,.story-layout{grid-template-columns:1fr;gap:35px}.platform-grid h2{margin-top:18px}.feature-rows h3{font-size:1.65rem}.pilot-caption{margin-top:30px}.industry-list a{grid-template-columns:1fr 24px;gap:8px 18px;padding:24px 0}.industry-index{grid-column:1}.industry-list h3{grid-column:1;grid-row:2;font-size:1.75rem}.industry-list svg{grid-column:2;grid-row:1/3}.price-banner{grid-template-columns:1fr;padding:35px 28px;gap:30px}.price-aside{border-left:0;border-top:1px solid #d4d1c7;padding:28px 0 0}.price-banner h2{font-size:2.7rem}.faq-section{grid-template-columns:1fr;gap:32px}.faq-section h2 br{display:initial}.faq-section h2{max-width:320px}.closing-inner{flex-direction:column;align-items:flex-start;gap:28px}.closing{padding:56px 0}.closing h2{font-size:2.8rem}.closing .button{min-width:0}.page-intro{padding:42px 0}.page-intro h1{font-size:3.25rem;overflow-wrap:break-word}.lead{font-size:1.0625rem}.breadcrumbs{margin-bottom:28px}.story-layout{padding-bottom:60px}.sticky-aside{position:static;grid-row:1}.demo-stage{min-height:360px}.demo-stage .loyalty-demo{width:calc(100% - 36px);margin:18px}.numbered-block h2{font-size:2.5rem}.feature-details{grid-template-columns:1fr;gap:35px}.prose-section h2{font-size:2.1rem}.feature-editorial{padding-top:0}.feature-editorial .demo-stage{min-height:370px}.notice{padding:18px;font-size:.875rem}.journey-rows>div{grid-template-columns:1fr;gap:15px}.journey-rows h3{font-size:2rem}.directory a>div{grid-column:1;grid-row:2}.directory h2{font-size:2.1rem;margin-top:6px}.directory svg{grid-row:1/3}.audience-note{grid-template-columns:1fr;gap:24px;padding-bottom:60px}.industry-feature{grid-template-columns:1fr;gap:28px;padding:32px 25px}.industry-feature h2{font-size:2.3rem}.industry-feature aside{border-left:0;border-top:1px solid #ccc8bc;padding:25px 0 0}.pricing-grid{grid-template-columns:1fr;gap:22px}.plan{padding:32px}.plan .button{font-size:.9375rem;justify-content:space-between}.plan .display-price{font-size:4.5rem}.plan h2{font-size:2.6rem}.pricing-detail{grid-template-columns:1fr;gap:30px}.plan .check-list li{font-size:.9375rem}.table-scroll{border-radius:8px}th,td{min-width:190px;padding:18px}.research-note{padding-bottom:60px}.guide-grid{grid-template-columns:1fr;gap:50px}.guide-art{min-height:220px;padding:30px}.guide-art span{font-size:3rem}.guide-grid h2{font-size:2.1rem}.article-body{font-size:1rem;padding-bottom:65px}.article-body h2{font-size:2.15rem}.legal{padding-top:35px}.legal h1{font-size:3rem}.legal table{font-size:.8125rem}.legal td,.legal th{padding:10px 7px;overflow-wrap:anywhere}.setup-layout{grid-template-columns:1fr;gap:45px}.setup-progress{gap:8px;font-size:.75rem}.form-grid{gap:15px}.profile-live{position:static}.profile-card{max-width:440px}.profile-live>.eyebrow{margin-bottom:15px}.profile-card-head h2{font-size:2.5rem}.hero-art,.hero-photo{height:565px;min-height:565px}.hero-photo{object-position:center top}.loyalty-demo{bottom:22px}.photo-note{display:none}.feature-editorial .prose .button{margin-top:5px}}@media(max-width:400px){.form-grid{grid-template-columns:1fr;gap:0}.setup-progress{font-size:.75rem;gap:10px}.profile-card-head{padding:25px}.profile-card-body{padding:25px}.hero-art,.hero-photo{height:550px;min-height:550px}.hero .actions{gap:22px}.proof-strip{grid-template-columns:1fr}.page-intro h1{font-size:2.9rem}.stamp-grid{gap:8px}}}

@layer components{.setup-page .page-intro{padding-top:48px;padding-bottom:42px}.setup-page .page-intro h1{font-size:4rem}}
@layer responsive{@media(max-width:760px){.setup-page .page-intro{padding-top:35px;padding-bottom:32px}.setup-page .page-intro h1{font-size:2.65rem}}@media(max-width:360px){.setup-page .page-intro h1{font-size:2.25rem}}}

@layer components{
.service-hero{gap:64px;align-items:center}.service-hero .hero-format{font-size:1rem;max-width:440px;line-height:1.7;margin-top:22px}.hero-format strong{display:block;color:var(--ink)}.service-hero h1{font-size:clamp(3.3rem,5.2vw,5.2rem)}.service-hero .intro{max-width:475px}.shared-app-demo{background:#eceae4;border:1px solid #dedbd1;padding:27px;border-radius:6px 6px 40px 6px;min-width:0}.app-demo-top{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-bottom:19px;border-bottom:1px solid #d1cec4}.app-demo-top .logo{font-size:2rem}.app-demo-top .eyebrow{font-size:.75rem;letter-spacing:.07em}.app-demo-label{font-family:var(--serif);font-size:1.65rem;color:var(--ink);margin:20px 0 13px;letter-spacing:-.03em}.business-picker{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-bottom:20px}.business-choice{display:flex;align-items:center;text-align:left;gap:10px;background:transparent;border:1px solid #d4d0c6;border-radius:10px;padding:13px 11px;min-width:0;transition:background .2s,border-color .2s}.business-choice[aria-pressed=true]{background:white;border-color:#9a9588}.business-choice>span:nth-child(2){min-width:0}.business-choice strong{display:block;font-family:var(--serif);font-size:1.03rem;font-weight:500;line-height:1.25;letter-spacing:-.02em}.business-choice small{display:block;font-size:.75rem;line-height:1.4;margin-top:4px;color:var(--muted)}.business-choice>svg{display:none}.business-initial{height:32px;width:32px;flex-shrink:0;display:grid;place-items:center;border-radius:7px;background:#efe3dd;color:#6f453b;font-family:var(--serif);font-size:1.35rem;letter-spacing:-.08em}.business-initial.studio{color:#43554a;background:#e4e9e0}.business-initial.pet{color:#785328;background:#eee6d8}.business-initial.cafe{color:#344d3e;background:#e7ece4}.selected-business-card{--example-ink:#6f453b;--example-paper:#efe3dd;position:relative;background:white;border:1px solid var(--line);border-radius:14px;padding:24px;overflow:hidden}.selected-business-card .eyebrow{color:var(--muted);font-size:.75rem;margin:0 0 6px}.selected-business-card .venue-name{font-size:1.85rem;color:var(--example-ink)}.selected-business-card>.card-top>svg{color:var(--example-ink)}.example-stamps{display:grid;grid-template-columns:repeat(6,1fr);gap:9px;margin:23px 0}.example-stamp{display:grid;place-items:center;aspect-ratio:1;border:1px dashed #b8b3a9;border-radius:50%;color:var(--example-ink);max-width:52px;width:100%;justify-self:center}.example-stamp svg{height:20px;width:20px}.example-stamp.filled{background:var(--example-ink);color:white;border-color:var(--example-ink)}.example-progress{display:flex;justify-content:space-between;align-items:center;gap:13px;font-size:.75rem;color:var(--example-ink)}.example-progress>strong{white-space:nowrap}.example-progress>span{text-align:right}.example-tap{display:flex;align-items:center;justify-content:center;gap:9px;font-size:.875rem;font-weight:600;width:100%;background:var(--example-paper);color:var(--example-ink);border-radius:9px;padding:12px;margin-top:19px;min-height:46px}.shared-app-demo>.demo-label{margin-top:15px;font-size:.75rem;line-height:1.6}.selected-business-card.is-switching{animation:paper-switch .38s cubic-bezier(.2,.8,.2,1)}@keyframes paper-switch{from{opacity:.3;transform:translateY(10px) rotate(-1deg)}to{opacity:1;transform:none}}.example-stamp.just-stamped{animation:stamp-in .48s ease-out}.selected-business-card.is-stamped::after{content:'';position:absolute;inset:0;border:2px solid var(--example-ink);border-radius:14px;pointer-events:none;animation:ink-touch .5s ease-out forwards}@keyframes ink-touch{from{opacity:.3}to{opacity:0}}
}
@layer responsive{@media(max-width:1100px){.service-hero{gap:35px}.shared-app-demo{padding:21px}.business-picker{grid-template-columns:1fr}.business-choice{padding:10px}.business-choice>svg{display:block;width:16px;margin-left:auto}.app-demo-top .eyebrow{max-width:130px;text-align:right}.selected-business-card{padding:20px}}@media(max-width:760px){.service-hero h1{font-size:clamp(2.65rem,11.8vw,3.55rem)}.shared-app-demo{padding:22px}.business-picker{grid-template-columns:1fr 1fr}.business-choice>svg{display:none}.business-choice strong{font-size:1rem}.business-choice small{font-size:.75rem}.business-choice{align-items:flex-start}.business-initial{display:none}.selected-business-card .venue-name{font-size:1.65rem}.app-demo-top .eyebrow{font-size:.75rem}.shared-app-demo>.demo-label{font-size:.75rem}.service-hero .hero-format{font-size:.9375rem}.example-stamps{gap:7px}}@media(max-width:370px){.shared-app-demo{padding:17px}.selected-business-card{padding:17px}.example-progress{align-items:flex-start;flex-direction:column;gap:5px}.example-progress>span{text-align:left}.example-tap{font-size:.8125rem}}}

@layer components{
.availability{display:inline-block;font-size:.875rem;font-weight:700;letter-spacing:.065em;line-height:1.6;padding:6px 9px;border:1px solid #c9c7bf;border-radius:6px;color:#465348;background:#e7eae3}.availability.upcoming{background:#eeedf9;color:#4e49a3;border-color:#d5d2ea}.availability.researching{color:#705927;background:#eee9dc;border-color:#d8ceb9}.launch-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:45px;list-style:none;padding:0;counter-reset:steps}.launch-steps li{border-top:1px solid #ccc8bd;padding-top:24px}.launch-steps .step-number{margin-bottom:24px}.launch-steps h3{font-family:var(--serif);font-size:1.8rem;margin-bottom:18px}.launch-steps p{font-size:1rem;line-height:1.8}.launch-story>.fine{margin-top:28px}.app-formats{padding-top:8px}.format-grid{display:grid;grid-template-columns:1fr 1fr;gap:26px}.format-card{border:1px solid #d8d4ca;border-radius:15px;padding:36px;display:flex;flex-direction:column;background:white;min-width:0}.format-card>.availability{align-self:flex-start}.standalone-format{background:#f0eeea}.format-mark{margin:35px 0 28px;min-height:60px;display:flex;gap:25px;align-items:center}.format-mark .logo{font-size:2.8rem}.small-business-name{font-family:var(--serif);font-size:1.15rem;color:var(--muted);line-height:1.4;max-width:145px}.brand-app-icon{display:grid;place-items:center;width:58px;height:58px;border-radius:13px;color:#6f453b;background:#efe3dd;border:1px solid #d4beb3;flex-shrink:0;font-family:var(--serif);font-size:2.5rem;letter-spacing:-.08em}.format-card h3{font-family:var(--serif);font-size:2rem;margin-bottom:18px}.format-card>p{line-height:1.8}.format-card .check-list{margin:20px 0 25px}.format-card .check-list li{font-size:.9375rem}.format-card .format-best{border-top:1px solid var(--line);padding-top:23px;margin-top:auto;margin-bottom:26px;font-size:.9375rem}.format-card .format-best strong{color:var(--ink)}.format-card .button{align-self:flex-start;font-size:.875rem}.format-footnote{margin-top:23px;font-size:.875rem;max-width:1000px;line-height:1.8}.service-directory-section{background:#eae8e1;padding:80px 0}.category-grid{display:grid;grid-template-columns:1fr 1fr;column-gap:58px}.category-grid>a{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:26px 0;border-top:1px solid #d0cbc0;text-decoration:none}.category-grid h3{font-family:var(--serif);font-size:1.7rem}.category-grid p{margin-top:8px;font-size:.875rem}.category-grid>a>svg{width:20px}.category-grid>a:hover h3{color:var(--accent)}.hospitality-inline{border-top:1px solid #d0cbc0;padding-top:36px;margin-top:30px;display:flex;justify-content:space-between;align-items:center;gap:50px}.hospitality-inline h3{font-family:var(--serif);font-size:1.8rem;margin-bottom:16px}.hospitality-inline p{max-width:620px;font-size:1rem}.hospitality-inline .text-link{flex-shrink:0;font-size:.9375rem}.loyalty-editorial{padding-top:85px;padding-bottom:85px}.loyalty-editorial h2{margin:22px 0}.loyalty-editorial .text-link{margin-top:25px}.reward-examples>div{display:grid;grid-template-columns:.7fr 1fr;gap:25px;padding:25px 0;border-top:1px solid #d7d2c8;align-items:center}.reward-examples>div>p{font-family:var(--serif);color:var(--ink);font-size:1.55rem;line-height:1.3;letter-spacing:-.025em}.reward-examples>.fine{font-size:.8125rem}.roadmap-summary{display:grid;grid-template-columns:1fr 1fr;gap:50px}.roadmap-summary article{border-top:1px solid #d1cbbe;padding-top:27px}.roadmap-summary h3{font-family:var(--serif);font-size:2rem;margin:24px 0 18px}.roadmap-summary article>p{line-height:1.8}.roadmap-summary .text-link{margin-top:23px}.home-price{display:flex;align-items:center;justify-content:space-between;gap:50px;padding-bottom:15px}.home-price h2{font-size:3rem;margin:22px 0}.home-price p{max-width:750px}.home-price .button{flex-shrink:0}.directory-block{padding-top:0}.directory-heading{margin-bottom:38px}.directory-heading h2{margin-top:18px}.audience-note p+p{margin-top:22px}.audience-note .text-link{margin-top:25px}.listing-note{padding:34px;background:#eae8e1;border:1px solid #d6d0c3;border-radius:6px 6px 40px 6px}.listing-note h3{font-family:var(--serif);font-size:2.6rem;margin:35px 0 23px}.listing-note .check-list{margin-bottom:30px}.format-playground{border-top:1px solid var(--line);padding-top:60px;display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center}.format-playground h2{margin:20px 0}.format-playground>div>p{max-width:470px}.format-switch{display:flex;gap:10px;flex-wrap:wrap;margin-top:27px}.format-switch button{background:transparent;border:1px solid #c9c3b8;border-radius:9px;padding:12px 14px;font-size:.875rem;min-height:47px}.format-switch button[aria-pressed=true]{background:var(--ink);color:white;border-color:var(--ink)}.format-illustration{border:1px solid #d3cec2;border-radius:14px;background:#eeece5;padding:25px;min-width:0}.format-window-title{font-family:var(--serif);font-size:1.65rem;line-height:1.3;border-bottom:1px solid #d6cfc1;padding-bottom:17px;margin-bottom:20px;min-height:52px}.format-neighbours{display:flex;gap:10px;min-height:39px;margin-bottom:17px}.format-neighbours span{padding:8px 10px;border:1px solid #d5cec1;border-radius:7px;font-size:.75rem;color:var(--muted)}.format-business-focus{background:white;border:1px solid #d7cfc3;border-radius:13px;padding:27px;transition:background .3s,border-color .3s}.format-business-focus h3{font-family:var(--serif);font-size:2.15rem;margin:25px 0 15px;color:#6f453b}.format-business-focus p{font-size:.9375rem}.format-illustration>p{font-size:.875rem;line-height:1.7;margin-top:23px;min-height:48px}.format-illustration[data-format-illustration=standalone] .format-business-focus{background:#efe3dd;border-color:#c9b0a2}.format-illustration[data-format-illustration=standalone] .brand-app-icon{background:#6f453b;color:white}.format-illustration[data-format-illustration=standalone] .format-window-title{color:#6f453b}.format-illustration[data-format-illustration=standalone] .format-neighbours{visibility:hidden}.roadmap-page{padding-bottom:40px}.roadmap-lane{display:grid;grid-template-columns:.85fr 1.2fr;gap:90px;border-top:1px solid #d4cfc3;padding:48px 0 62px}.roadmap-lane h2{font-size:2.65rem;margin-top:24px}.roadmap-features article+article{margin-top:34px;padding-top:28px;border-top:1px solid var(--line)}.roadmap-features h3{font-family:var(--serif);font-size:2rem;margin-bottom:17px}.roadmap-features p{line-height:1.85}.roadmap-features .text-link{margin-top:22px}.roadmap-notice{margin-bottom:75px}.service-specific-intro{display:grid;grid-template-columns:1.3fr 1fr;gap:80px;padding:45px;background:#eeece5;border:1px solid #d8d2c7;border-radius:5px 40px 5px 5px}.service-specific-intro h2{font-size:2.7rem;margin:26px 0}.service-specific-intro p{line-height:1.85;margin-bottom:22px}.service-specific-intro aside{border-left:1px solid #d0c8ba;padding-left:40px;align-self:center}.service-soon{margin-top:25px;padding-top:25px;border-top:1px solid #d0c8ba}.service-soon p{font-size:.875rem;margin-top:15px}.service-needs{display:grid;grid-template-columns:repeat(3,1fr);gap:44px}.service-needs article{border-top:1px solid #d3cdc1;padding-top:25px}.service-needs h2{font-size:2.05rem;margin-bottom:23px}.service-needs p{line-height:1.85}.related-note{display:flex;gap:32px;flex-wrap:wrap}.pricing-format-note{margin-bottom:30px}.coffee-photo{max-width:700px;padding-bottom:50px}.coffee-photo img{height:310px;width:100%;object-fit:cover;object-position:center 36%;border-radius:5px 5px 38px 5px}.is-revealed{animation:quiet-arrival .6s cubic-bezier(.2,.7,.2,1) both}@keyframes quiet-arrival{from{opacity:.5;transform:translateY(16px)}to{opacity:1;transform:none}}
}
@layer responsive{@media(max-width:1100px){.nav{gap:20px}.format-card{padding:28px}.format-playground{gap:45px}.service-specific-intro{gap:40px;padding:35px}.service-specific-intro aside{padding-left:30px}.roadmap-lane{gap:50px}.service-needs{gap:28px}.service-needs h2{font-size:1.9rem}.category-grid{column-gap:35px}}@media(max-width:760px){.launch-steps{grid-template-columns:1fr;gap:30px}.launch-steps li{display:grid;grid-template-columns:42px 1fr;gap:10px 16px}.launch-steps .step-number{grid-row:1/3;margin:0;font-size:1.7rem}.launch-steps h3{margin-bottom:5px}.launch-steps li>p{grid-column:2;font-size:.9375rem}.app-formats{padding-top:0}.format-grid{grid-template-columns:1fr;gap:22px}.format-card{padding:27px}.format-mark{margin:29px 0 24px}.format-card h3{font-size:1.85rem}.format-card .button{font-size:.875rem;gap:12px}.format-footnote{font-size:.8125rem}.service-directory-section{padding:60px 0}.category-grid{grid-template-columns:1fr}.category-grid>a{padding:23px 0}.category-grid h3{font-size:1.75rem}.hospitality-inline{flex-direction:column;align-items:flex-start;gap:23px;margin-top:22px}.hospitality-inline p{font-size:.9375rem}.loyalty-editorial{padding-top:65px;padding-bottom:65px}.reward-examples{width:100%}.reward-examples>div{gap:18px;grid-template-columns:.7fr 1fr}.reward-examples>div>p{font-size:1.45rem}.roadmap-summary{grid-template-columns:1fr;gap:32px}.roadmap-summary h3{font-size:1.9rem}.home-price{flex-direction:column;align-items:flex-start;gap:27px;padding-bottom:0}.home-price h2{font-size:2.55rem}.format-playground{grid-template-columns:1fr;gap:35px;padding-top:40px}.format-illustration{padding:23px}.format-business-focus{padding:23px}.format-business-focus h3{font-size:2rem}.format-neighbours span{font-size:.75rem;padding:8px}.format-switch{gap:9px}.format-switch button{padding:12px;font-size:.875rem}.roadmap-lane{grid-template-columns:1fr;gap:27px;padding:32px 0 40px}.roadmap-lane h2{font-size:2.4rem}.roadmap-notice{margin-bottom:60px}.service-specific-intro{grid-template-columns:1fr;padding:28px;gap:28px}.service-specific-intro h2{font-size:2.35rem}.service-specific-intro aside{padding:25px 0 0;border-left:0;border-top:1px solid #d0c8ba}.service-needs{grid-template-columns:1fr;gap:34px}.service-needs h2{font-size:2.1rem}.listing-note{padding:28px}.listing-note h3{font-size:2.45rem}.coffee-photo img{height:260px}.related-note{gap:23px;align-items:flex-start;flex-direction:column}}@media(max-width:370px){.format-card{padding:23px}.format-mark{gap:20px}.small-business-name{font-size:1.05rem}.format-neighbours{flex-wrap:wrap;min-height:70px}.format-card .button{align-self:stretch;white-space:normal}.format-card .button svg{width:18px}.format-business-focus{padding:20px}.service-specific-intro{padding:23px}}@media(prefers-reduced-motion:reduce){.is-revealed,.is-switching,.just-stamped{animation:none!important}.format-business-focus{transition:none!important}}}

@layer components{.setup-panel,.profile-live,.field{min-width:0}.field select{max-width:100%}}

@layer components{
.logo{white-space:nowrap;letter-spacing:-.055em}.logo span{font-size:.8em;letter-spacing:-.045em}.format-mark{flex-wrap:wrap;gap:16px 24px}
.visual-journey .section-head,.compact-formats .section-head{grid-template-columns:1fr;gap:0;margin-bottom:38px}.visual-journey .section-head h2,.compact-formats .section-head h2{font-size:clamp(2.5rem,4.5vw,3.75rem)}
.visual-journey .launch-steps{grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}.visual-journey .launch-steps li{border:0;padding:0;min-width:0;display:block}.journey-surface{height:206px;display:flex;align-items:center;justify-content:center;padding:22px;border-radius:12px;background:#eae6df;border:1px solid #e0d9ce}.listing-surface{background:#e8e9f2;border-color:#dadce9}.reward-surface{background:#e6eae3;border-color:#d8dfd3}.mini-profile,.mini-directory,.mini-reward{background:#fff;border:1px solid #d9d3cb;border-radius:10px;width:100%;max-width:252px;box-shadow:0 8px 20px #302b2010;min-width:0}.mini-profile{text-align:center;padding:16px}.mini-avatar{display:grid;place-items:center;background:#efe3dd;color:#6f453b;font-family:var(--serif);font-size:1.8rem;width:45px;height:45px;border-radius:10px;margin:0 auto 10px}.mini-profile strong{display:block;font-size:1rem;color:var(--ink)}.mini-profile small{display:block;font-size:.75rem;margin-top:3px}.mini-profile-details{display:flex;justify-content:center;gap:14px;margin-top:15px;padding-top:10px;border-top:1px solid var(--line);font-size:.75rem;color:var(--muted)}.mini-directory{padding:15px}.mini-directory>.logo{display:block;font-size:1.25rem;margin-bottom:13px}.mini-place{display:flex;align-items:center;gap:8px;font-size:.75rem;padding:5px 7px;border-radius:7px;color:var(--muted)}.mini-place.selected{background:#f4ece7;color:#6f453b}.mini-place>svg{width:15px;height:15px;margin-left:auto;flex-shrink:0}.mini-initial{display:grid;place-items:center;width:25px;height:25px;flex-shrink:0;border-radius:6px;background:#efe3dd;color:#6f453b;font-family:var(--serif);font-size:1rem}.mini-initial.studio{background:#e4e9e0;color:#43554a}.mini-initial.cafe{background:#e7ece4;color:#344d3e}.mini-reward{padding:20px}.mini-reward-title{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:.8125rem;color:#43554a}.mini-reward-title>svg{width:20px;height:20px}.mini-stamps{display:flex;gap:8px;margin:20px 0}.mini-stamps>span{border-radius:50%;width:30px;height:30px;background:#43554a;color:white;display:grid;place-items:center}.mini-stamps svg{width:16px;height:16px}.mini-reward>strong{display:block;font-family:var(--serif);font-size:1.1rem;color:#43554a;font-weight:500}.mini-reward>small{display:block;font-size:.75rem;margin-top:7px}.journey-caption{display:grid;grid-template-columns:26px 1fr;gap:15px;margin-top:27px}.visual-journey .step-number{font-size:1.15rem;line-height:1.6;margin:0;color:var(--accent)}.visual-journey .launch-steps h3{font-size:1.7rem;line-height:1.2;margin-bottom:11px}.visual-journey .launch-steps p{font-size:1rem;line-height:1.65;max-width:300px}.visual-journey>.fine{margin-top:30px;font-size:.8125rem}
.compact-formats .format-card{padding:30px 34px}.compact-formats .format-visual{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:124px;margin:18px 0 21px;border-bottom:1px solid #d8d4ca;padding:18px 0 29px}.compact-formats .format-visual>.logo{font-size:2.3rem}.app-family{display:flex;gap:6px;align-items:center}.app-family .mini-initial{width:32px;height:32px;font-size:1.3rem}.app-family .selected{width:43px;height:43px;border:1px solid #ceb5a8;font-size:1.6rem}.compact-formats .own-visual{justify-content:flex-start;gap:24px}.own-app-name{font-family:var(--serif);font-size:1.6rem;color:#6f453b}.own-app-name small{display:block;margin-top:7px;font-family:var(--sans);font-size:.8125rem;letter-spacing:0;color:var(--muted)}.compact-formats .format-card h3{font-size:2rem;margin-bottom:14px}.compact-formats .format-card>p{font-size:1rem;line-height:1.7;max-width:370px}.compact-formats .check-list{margin:24px 0 30px}.compact-formats .format-card>.button{margin-top:auto}.compact-formats .format-footnote{font-size:.8125rem}
}
@layer responsive{
@media(max-width:1100px){.compact-formats .format-card{padding:27px}.compact-formats .format-visual{flex-wrap:wrap;align-content:center;justify-content:flex-start;min-height:146px;gap:20px}.visual-journey .launch-steps{gap:22px}.journey-surface{padding:17px}.journey-caption{gap:10px}.visual-journey .launch-steps h3{font-size:1.55rem}.mini-reward{padding:16px}.mini-stamps{gap:6px}.mini-stamps>span{width:27px;height:27px}.mini-profile-details{gap:10px}}
@media(min-width:761px) and (max-width:980px){.header{gap:20px}.header>.button{margin-left:auto}.menu-toggle{display:block}.nav{display:none}.nav.open{display:flex;position:absolute;left:0;right:0;top:100px;padding:25px;background:var(--paper);z-index:10;flex-direction:column;align-items:flex-start;border-bottom:1px solid var(--line)}}
@media(max-width:760px){.header>.logo{font-size:1.85rem}.header{gap:10px}.header>.button{font-size:.75rem;padding:10px}.menu-toggle{padding:10px}.app-demo-top{flex-wrap:wrap;gap:12px}.app-demo-top .eyebrow{max-width:none;text-align:left}.visual-journey .section-head,.compact-formats .section-head{margin-bottom:30px}.visual-journey .launch-steps{grid-template-columns:1fr;gap:32px}.visual-journey .launch-steps li{display:grid;grid-template-columns:1fr 1fr;gap:25px;align-items:center}.journey-caption{margin:0;gap:12px}.journey-surface{height:202px;padding:18px}.visual-journey .launch-steps h3{font-size:1.7rem}.visual-journey .launch-steps p{grid-column:auto}.visual-journey .step-number{grid-row:auto;font-size:1.1rem}.compact-formats .format-visual{flex-wrap:nowrap;min-height:124px;justify-content:space-between}.compact-formats .own-visual{justify-content:flex-start}.compact-formats .format-card h3{font-size:1.9rem}.format-mark .logo{font-size:2.3rem}}
@media(max-width:520px){.visual-journey .launch-steps li{display:block}.journey-surface{height:194px}.journey-caption{margin-top:22px;grid-template-columns:25px 1fr}.visual-journey .launch-steps{gap:38px}.compact-formats .format-visual{flex-wrap:wrap;gap:20px}.compact-formats .format-visual>.logo{font-size:2.05rem}.app-family .mini-initial{width:28px;height:28px}.app-family .selected{width:37px;height:37px}.compact-formats .own-visual{flex-wrap:nowrap}.own-app-name{font-size:1.4rem}.compact-formats .format-card{padding:25px}.compact-formats .format-card>.button{white-space:normal;gap:12px}}
@media(max-width:370px){.header>.logo{font-size:1.55rem}.header>.button{font-size:.75rem;padding:9px 8px}.header{gap:6px}.menu-toggle{padding:8px}.compact-formats .format-card{padding:22px}.compact-formats .format-visual{min-height:142px}.compact-formats .own-visual{gap:16px}}
}

/* ═══════════════════════════════════════════════════════════════════════════
   17 September 2026. Design-system corrections and the components added with
   the navigation, the hero showcase, the real screenshots and the two forms.
   Appended rather than woven in, so what changed on this date stays legible.
   ═══════════════════════════════════════════════════════════════════════════ */

@layer base {
  /* DESIGN.md makes ink the primary text colour. Body copy was set in the
     secondary grey site-wide; secondary now has to be asked for. */
  p { color: inherit }
  :root {
    --serif: ui-serif, "New York", Georgia, "Times New Roman", serif;
    --line-strong: #d6d3cc;
  }
  /* Tap targets. Apple asks for 44pt; WCAG 2.5.8 asks for 24 CSS px minimum. */
  summary { min-height: 44px; display: flex; align-items: center }
}

@layer components {
  /* ── The wordmark: the 360-ring beside the name, as on the app icon. */
  .logo-word { font-family: var(--serif); font-weight: 600; color: var(--ink) }
  .logo-word b { font-weight: 600; color: var(--accent) }
  .footer .logo-word { color: var(--ink) }

  /* ── Navigation: a drop-down on a desktop, an accordion on a phone. */
  .nav { display: flex; align-items: center; gap: 4px }
  .nav-group { position: relative }
  .nav-trigger {
    display: inline-flex; align-items: center; gap: 6px; background: transparent;
    font: inherit; font-size: .9375rem; color: var(--ink); cursor: pointer;
    padding: 12px 10px; border-radius: 9px;
  }
  .nav-trigger svg { width: 15px; height: 15px; transition: transform .2s ease }
  .nav-trigger[aria-expanded="true"] { background: #efeeea }
  .nav-trigger[aria-expanded="true"] svg { transform: rotate(180deg) }
  .nav-trigger[data-current="true"] { color: var(--accent) }
  .nav-link { padding: 12px 10px; border-radius: 9px; text-decoration: none; font-size: .9375rem }
  .nav-cta { display: none }
  .nav-menu {
    position: absolute; top: calc(100% + 8px); left: -8px; z-index: 60;
    min-width: 316px; padding: 9px; background: var(--white);
    border: 1px solid var(--line); border-radius: 14px;
  }
  .nav-menu a {
    display: block; padding: 11px 12px; border-radius: 10px; text-decoration: none;
    color: var(--ink); font-size: .9375rem;
  }
  .nav-menu a strong { display: block; font-weight: 600 }
  .nav-menu a span { display: block; margin-top: 2px; font-size: .8125rem; color: var(--muted); line-height: 1.45 }
  .nav-menu a:hover, .nav-menu a:focus-visible { background: #f2f1ed; color: var(--ink) }
  .nav-menu a[aria-current="page"] { color: var(--accent) }

  /* ── The hero showcase. Eleven mock pages, one visible at a time. */
  .showcase {
    background: #f1f0ec; border: 1px solid var(--line); border-radius: 16px;
    padding: 18px; min-width: 0;
  }
  .showcase-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 16px }
  .showcase-brand { font-family: var(--serif); font-size: 1.35rem; font-weight: 600; letter-spacing: -.05em }
  .showcase-brand b { color: var(--accent); font-weight: 600 }
  .showcase-top { margin-bottom: 12px }
  .showcase-top .eyebrow { margin: 0; text-align: right; white-space: nowrap; font-size: .6rem }
  .showcase-lede { font-size: .82rem; color: var(--muted); margin-bottom: 12px }

  /* The stage shows the top of the device and clips the rest, so the section
     stays the height of the copy beside it. The page inside scrolls. */
  .showcase-stage { position: relative; height: 450px; overflow: hidden }
  .showcase-stage::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 72px; z-index: 2;
    background: linear-gradient(rgba(241, 240, 236, 0), #f1f0ec); pointer-events: none;
  }

  .showcase-rail-wrap { display: flex; align-items: center; gap: 6px; margin-bottom: 16px }
  .showcase-rail {
    display: flex; gap: 7px; overflow-x: auto; scroll-snap-type: x proximity;
    scrollbar-width: none; padding-bottom: 2px; flex: 1; min-width: 0;
  }
  .showcase-rail::-webkit-scrollbar { display: none }
  .showcase-rail button {
    flex: 0 0 auto; scroll-snap-align: start; background: var(--white);
    border: 1px solid var(--line); border-radius: 8px; padding: 9px 12px;
    font: inherit; font-size: .8125rem; font-weight: 600; color: var(--muted);
    cursor: pointer; min-height: 40px; white-space: nowrap;
  }
  .showcase-rail button[aria-selected="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper) }
  .showcase-arrow {
    flex-shrink: 0; width: 34px; height: 40px; display: grid; place-items: center;
    background: var(--white); border: 1px solid var(--line); border-radius: 8px;
    color: var(--ink); cursor: pointer;
  }
  .showcase-arrow svg { width: 17px; height: 17px }
  .showcase-arrow:disabled { opacity: .35; cursor: default }
  .no-rail-scroll .showcase-arrow { display: none }

  /* ── A venue page, drawn on a phone. The frame is a fixed size so switching
     between trades cannot change the height of the hero. */
  .phone {
    width: 300px; height: 620px; margin: 0 auto; flex-shrink: 0;
    background: #1c1b19; border-radius: 42px; padding: 9px;
  }
  .phone-screen {
    position: relative; height: 100%; border-radius: 34px; overflow: hidden;
    background: var(--paper); display: flex; flex-direction: column;
  }
  .phone-status {
    position: absolute; top: 0; left: 0; right: 0; z-index: 3;
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 18px 8px; font-size: .68rem; font-weight: 700;
    background: rgba(247, 246, 243, .72);
    backdrop-filter: blur(14px) saturate(1.4); -webkit-backdrop-filter: blur(14px) saturate(1.4);
  }
  .phone-batt { position: relative; width: 21px; height: 11px; border: 1.5px solid var(--ink); border-radius: 3px }
  .phone-batt::after { content: ''; position: absolute; inset: 2px; background: var(--ink); border-radius: 1px }
  .phone-scroll {
    flex: none; height: 441px; overflow-y: auto;
    padding: 46px 13px 24px; display: flex; flex-direction: column; gap: 9px;
    scrollbar-width: none;
  }
  /* A scrolling flex column shrinks its children to fit, which silently
     collapsed the map block to nothing. Blocks keep their own height and the
     column overflows instead, which is the whole point of it scrolling. */
  .phone-scroll > * { flex-shrink: 0 }
  .phone-scroll::-webkit-scrollbar { display: none }

  .mock-brand { background: var(--mock-ink); color: #fff; border-radius: 14px; padding: 12px }
  .mock-avatar {
    width: 32px; height: 32px; display: grid; place-items: center; margin-bottom: 7px;
    border-radius: 9px; background: rgba(255, 255, 255, .2); color: #fff;
    font-family: var(--serif); font-size: 1rem;
  }
  .mock-brand strong { display: block; font-family: var(--serif); font-size: 1.15rem; font-weight: 600; letter-spacing: -.02em }
  .mock-brand small { display: block; margin-top: 2px; font-size: .72rem; color: rgba(255, 255, 255, .78) }
  .mock-place {
    align-self: flex-start; display: inline-flex; align-items: center; gap: 6px;
    background: var(--white); border: 1px solid var(--line); border-radius: 8px;
    padding: 6px 9px; font-size: .7rem; color: var(--muted);
  }
  .mock-place svg { width: 13px; height: 13px }

  .mock-rows { display: flex; flex-direction: column; gap: 7px }
  .mock-row {
    display: flex; align-items: center; gap: 10px; padding: 9px 10px;
    background: var(--white); border: 1px solid var(--line); border-radius: 11px;
  }
  .mock-row-icon {
    width: 28px; height: 28px; flex-shrink: 0; display: grid; place-items: center;
    border-radius: 8px; background: var(--mock-paper); color: var(--mock-ink);
  }
  .mock-row-icon svg { width: 15px; height: 15px }
  .mock-row-text { flex: 1; min-width: 0 }
  .mock-row-text b { display: block; font-size: .8rem; font-weight: 600; color: var(--ink) }
  .mock-row-text small { display: block; font-size: .68rem; color: var(--muted) }
  .mock-row > svg:last-child { width: 14px; height: 14px; flex-shrink: 0; color: var(--muted); transform: rotate(-90deg) }

  /* An announcement block. A hairline on white rather than a near-paper fill,
     which was invisible against the page behind it. */
  .mock-note {
    font-size: .72rem; line-height: 1.5; color: var(--muted);
    background: var(--white); border: 1px solid var(--line);
    border-radius: 10px; padding: 9px 11px;
  }
  .mock-offer {
    display: flex; align-items: center; gap: 8px; padding: 9px 11px;
    background: var(--mock-paper); border-radius: 10px; font-size: .72rem; color: var(--mock-ink);
  }
  .mock-offer svg { width: 14px; height: 14px; flex-shrink: 0 }

  .mock-card { background: var(--mock-paper); border-radius: 12px; padding: 12px }
  .mock-card-top { display: flex; align-items: center; justify-content: space-between; color: var(--mock-ink); font-size: .68rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase }
  .mock-card-top svg { width: 15px; height: 15px }
  /* One row, whatever the card size: the grid divides the width by the number
     of stamps rather than letting a tenth one wrap on its own. */
  .mock-stamps { display: grid; grid-template-columns: repeat(var(--n, 9), 1fr); gap: 4px; margin: 10px 0 9px }
  .mock-stamp {
    aspect-ratio: 1; width: 100%; max-width: 25px; justify-self: center;
    display: grid; place-items: center; border-radius: 50%;
    border: 1.5px dashed color-mix(in srgb, var(--mock-ink) 26%, transparent);
    color: color-mix(in srgb, var(--mock-ink) 26%, transparent);
  }
  .mock-stamp svg { width: 55%; height: 55% }
  .mock-stamp.filled {
    background: color-mix(in srgb, var(--mock-ink) 17%, #fff);
    border: 1.5px solid var(--mock-ink); color: var(--mock-ink);
  }
  .mock-coupon {
    display: flex; align-items: center; gap: 11px; padding: 11px 12px;
    background: var(--white); border: 1.5px dashed color-mix(in srgb, var(--mock-ink) 42%, transparent);
    border-radius: 11px;
  }
  .mock-coupon-art {
    width: 30px; height: 30px; flex-shrink: 0; display: grid; place-items: center;
    border-radius: 9px; background: var(--mock-paper); color: var(--mock-ink);
  }
  .mock-coupon-art svg { width: 16px; height: 16px }
  .mock-coupon strong { display: block; font-size: .8rem; font-weight: 600; color: var(--ink) }
  .mock-coupon small { display: block; font-size: .68rem; color: var(--muted) }

  .mock-map { position: relative; height: 88px; border-radius: 11px; overflow: hidden; background: var(--mock-paper) }
  .mock-map-art { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .6 }
  .mock-map-pin {
    position: absolute; top: 26px; left: 50%; transform: translateX(-50%);
    width: 26px; height: 26px; display: grid; place-items: center;
    border-radius: 50%; background: var(--mock-ink); color: #fff;
  }
  .mock-map-pin svg { width: 14px; height: 14px }
  .mock-map-label {
    position: absolute; left: 8px; right: 8px; bottom: 8px; padding: 6px 9px;
    background: rgba(255, 255, 255, .92); border-radius: 8px;
    font-size: .68rem; color: var(--ink); text-align: center;
  }

  .mock-tap {
    display: flex; align-items: center; justify-content: center; gap: 7px; margin-top: 11px;
    padding: 9px; border-radius: 9px; background: var(--mock-ink); color: #fff;
    font-size: .75rem; font-weight: 600;
  }
  .mock-tap svg { width: 15px; height: 15px }

  .mock-card strong { display: block; font-family: var(--serif); font-size: 1rem; color: var(--mock-ink) }
  .mock-card small { display: block; margin-top: 2px; font-size: .68rem; color: color-mix(in srgb, var(--mock-ink) 72%, #fff) }

  /* ── What the product actually includes. */
  .capability-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px 34px; margin-top: 8px }
  .capability-grid article { border-top: 1px solid var(--line); padding-top: 18px }
  .capability-grid h3 { font-family: var(--serif); font-size: 1.35rem; margin-bottom: 9px }
  .capability-grid p { color: var(--muted); font-size: .9375rem; margin-bottom: 13px }
  .capability-shots { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px; margin-top: 46px }

  /* ── A real capture of the app. Always captioned, always a demo venue. */
  .shot { margin: 30px 0 }
  .shot img {
    display: block; width: 100%; max-width: 300px; height: auto;
    border: 1px solid var(--line); border-radius: 16px; background: var(--white);
  }
  .shot figcaption { margin-top: 11px; font-size: .8125rem; color: var(--muted) }
  .capability-shots .shot { margin: 0 }
  .capability-shots .shot img { max-width: 100% }

  /* ── The forms. */
  .waitlist-layout { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .85fr); gap: 54px; align-items: start; padding-bottom: 40px }
  .waitlist-aside { border: 1px solid var(--line); border-radius: 16px; padding: 26px; background: var(--white) }
  .waitlist-steps { list-style: none; padding: 0; counter-reset: step; margin: 16px 0 0 }
  .waitlist-steps li { counter-increment: step; position: relative; padding: 0 0 20px 40px; font-size: .9375rem; color: var(--muted) }
  .waitlist-steps li::before {
    content: counter(step); position: absolute; left: 0; top: -2px; width: 27px; height: 27px;
    display: grid; place-items: center; border-radius: 8px; background: #eeedfa; color: var(--accent);
    font-size: .8125rem; font-weight: 700;
  }
  .waitlist-steps strong { color: var(--ink); font-weight: 600 }
  .waitlist-note { border-top: 1px solid var(--line); padding-top: 18px; margin-top: 4px }
  .waitlist-note p { font-size: .875rem; color: var(--muted) }
  .form-error {
    background: #fdeceb; border: 1px solid #f0c8c4; border-radius: 11px;
    padding: 12px 14px; font-size: .9375rem; color: #8c2018; margin-bottom: 18px;
  }
  #waitlist-form .field, .contact-form .field { margin-bottom: 20px }
  #waitlist-form .button, .contact-form .button { width: 100%; justify-content: center }
  #waitlist-done, #contact-done, #referral-done, #assistant-done { padding: 6px 0 }
  #waitlist-done h2, #contact-done h2, #referral-done h2, #assistant-done h2 { font-family: var(--serif); font-size: 2.6rem; margin: 10px 0 18px }
  #waitlist-done p, #contact-done p, #referral-done p, #assistant-done p { color: var(--muted); margin-bottom: 14px }
  .field-hint { margin-top: 7px; font-size: .8125rem; color: var(--muted) }
  .optional { font-weight: 400; color: var(--muted) }

  /* ── The founder's note. The photograph appears when the file is dropped in. */
  .founder-note {
    display: grid; grid-template-columns: 148px minmax(0, 1fr); gap: 30px; align-items: start;
    border: 1px solid var(--line); border-radius: 16px; background: var(--white);
    padding: 30px; margin: 40px 0;
  }
  .founder-note:not(:has(img)) { grid-template-columns: minmax(0, 1fr) }
  .founder-photo { width: 148px; height: 148px; border-radius: 14px; object-fit: cover; background: #efeeea }
  .founder-text p { color: var(--muted) }
  .founder-sign { margin-top: 18px; color: var(--ink) !important; font-weight: 600 }
  .founder-sign span { display: block; font-weight: 400; color: var(--muted); font-size: .875rem; margin-top: 2px }

  /* ── Odds and ends. */
  .price-vat { font-size: .875rem; color: var(--muted); margin: -10px 0 20px }
  /* Five columns on one line: the brand, then the four link groups. The grid
     was four wide with five children, so the last group wrapped to its own row. */
  .footer-grid { grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr; gap: 30px }
  .footer-made { margin-top: 14px; font-size: .8125rem }
  .directory-heading.sub { margin: 46px 0 22px }
  .directory-heading.sub:first-of-type { margin-top: 30px }
  .hero-copy { min-width: 0 }
  .contact-form { max-width: 620px }

  /* Hairlines, not shadows. */
  .mini-profile, .mini-directory, .mini-reward { box-shadow: none; border-color: var(--line) }
  /* No icon in a coloured circle. */
  .reference-icon { border-radius: 9px; background: transparent; width: 26px; height: 26px }
  /* The app tints a filled stamp; it does not fill it with ink. */
  .example-stamp.filled {
    background: color-mix(in srgb, var(--example-ink) 14%, #fff);
    color: var(--example-ink); border-color: var(--example-ink); border-style: solid;
  }
  .stamp.filled { border-style: solid }
  /* Secondary text has to be asked for now that paragraphs inherit ink. */
  .lead, .intro, .fine, .demo-label, .sources, .article-byline,
  .plan p, .plan-note, .price-notes p, .format-footnote, .category-grid a p,
  .capability-grid p, .journey-caption p, .story-card figcaption > span,
  .section-head > p, .audience-note p, .prose-section p, .service-needs p,
  .roadmap-features p, .plain-list p, .faq-list p, .closing p, .footer-brand p { color: var(--muted) }
  .notice, .notice p { color: var(--ink) }
}

@layer responsive {
  @media (max-width: 1080px) {
    .capability-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  }
  @media (max-width: 860px) {
    .waitlist-layout { grid-template-columns: minmax(0, 1fr); gap: 34px }
    .capability-shots { grid-template-columns: minmax(0, 1fr) }
  }
  @media (max-width: 760px) {
    /* A hard break in a display line leaves orphans on a narrow screen. */
    .page-intro h1 br, .hero h1 br { display: none }
    .page-intro h1, .hero h1 { font-size: clamp(2.5rem, 9vw, 3rem); text-wrap: balance }
    .setup-page .page-intro h1 { font-size: clamp(2.5rem, 9vw, 3rem) }

    /* The menu becomes an accordion; every row is a full-width target. */
    .nav { flex-direction: column; align-items: stretch; gap: 0; padding-bottom: 8px }
    .nav-group { position: static }
    .nav-trigger { width: 100%; justify-content: space-between; padding: 14px 4px; border-radius: 0; border-bottom: 1px solid var(--line) }
    .nav-trigger[aria-expanded="true"] { background: transparent }
    .nav-link { display: block; width: 100%; padding: 14px 4px; border-radius: 0; border-bottom: 1px solid var(--line) }
    .nav-menu { position: static; min-width: 0; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; padding: 4px 0 10px 10px; background: transparent }
    .nav-menu a span { display: none }
    .nav-menu a { padding: 12px 8px }

    /* One call to action in the header is enough; on a phone it lives in the menu. */
    .header > .button.small { display: none }
    .nav-cta { display: block; color: var(--accent); font-weight: 600 }
    .footer a:not(.logo) { padding: 11px 0; margin-bottom: 0 }
    .breadcrumbs a { padding: 10px 0 }
    .text-link { padding-top: 8px }

    .showcase { padding: 16px }
    .showcase-top .eyebrow { display: none }
    .capability-grid { grid-template-columns: minmax(0, 1fr); gap: 26px }
    .founder-note { grid-template-columns: minmax(0, 1fr); padding: 22px; gap: 20px }
    .shot img { max-width: 100% }
  }
}

/* Unlayered, and last: some of the original sheet sits outside the cascade
   layers, which beats anything declared inside one. These are the few rules
   that have to win outright. */
@media (max-width: 760px) {
  .header .nav { align-items: stretch }
  .header .nav > .nav-group, .header .nav > .nav-link { width: 100% }
  .header .nav .nav-trigger { width: 100% }
}

@layer components {
  /* ── Every product screenshot is a phone screen, so it is shown in a phone.
     Same bezel as the hero mock, sized down for in-page figures. */
  .device {
    display: block; width: 248px; max-width: 100%; padding: 7px;
    background: #1c1b19; border-radius: 34px;
  }
  /* One phone, whatever the capture. The screens were taken at slightly
     different heights; a fixed screen ratio keeps every frame identical rather
     than showing two differently shaped phones side by side. */
  .device-screen { display: block; aspect-ratio: 804 / 1638; border-radius: 27px; overflow: hidden; background: var(--white) }
  .shot { margin: 34px 0 }
  .shot img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; border: 0; border-radius: 0; max-width: none }
  .shot figcaption { margin-top: 13px; font-size: .8125rem; color: var(--muted); max-width: 248px }
  /* A mockup that arrives already framed carries its own bezel and shadow, so
     ours comes off and it is simply sized. */
  .shot-framed img { display: block; width: 100%; max-width: 300px; height: auto; border: 0; border-radius: 0; object-fit: contain }
  .shot-framed figcaption { max-width: 300px }
  .capability-shots { display: flex; flex-wrap: wrap; justify-content: center; gap: 48px; margin-top: 50px }
  .showcase .demo-label { text-align: center; margin-top: 12px }
  .capability-shots .shot { margin: 0 }
}

@media (max-width: 760px) {
  .phone { width: 274px; height: 566px }
  .showcase-stage { height: 390px }
  .phone-scroll { height: 381px }
  .capability-shots { gap: 30px; justify-content: flex-start }
}

/* Unlayered: the hero centres its columns, so a taller stage would shunt the
   copy beside it. The showcase is a fixed height now, but pin the top anyway. */
.hero.service-hero { align-items: center }

/* Unlayered: an unframed screen is sized by its container, both in the
   capability grid and below 760px, and sits on white because a raw capture has
   no edge of its own. A framed mockup arrives at a fixed size, with its own
   bezel and a transparent surround, so it keeps one width everywhere and the
   paper shows through behind the phone. */
.shot-framed img { max-width: 300px; background: none }

/* Unlayered: the closing call to action, now inside the column the rest of the
   page reads in rather than against the viewport edge. */
.page-cta { margin-top: 6px; margin-bottom: 86px }

/* Unlayered: four plans now, so they go two-up before they go one-up. */
@media (max-width: 1180px) { .pricing-grid { grid-template-columns: repeat(2, 1fr) } }
@media (max-width: 760px) { .pricing-grid { grid-template-columns: 1fr } }

/* Unlayered: the consent bar. Sits on the paper, square-cornered like every
   other button on the site, and never covers the whole screen. */
.consent {
  position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 40;
  display: flex; gap: 18px 24px; align-items: center; justify-content: space-between; flex-wrap: wrap;
  max-width: 760px; margin: 0 auto; padding: 16px 20px;
  background: var(--white); border: 1px solid var(--line); border-radius: 11px;
  box-shadow: 0 6px 28px rgba(28, 27, 25, .1);
}
.consent p { margin: 0; font-size: .875rem; color: var(--muted); flex: 1 1 320px }
.consent a { color: var(--ink) }
.consent-actions { display: flex; gap: 10px; flex-wrap: wrap }
.consent .button { min-height: 42px; padding: 10px 16px; font-size: .875rem; gap: 0 }
.consent .consent-ghost { background: transparent; color: var(--ink); border-color: var(--line) }
@media (max-width: 520px) { .consent-actions { width: 100% } .consent .button { flex: 1 } }

/* Unlayered: the founder portrait is a cut-out, so it is a circle on the paper
   rather than a photograph in a box. */
.founder-note {
  /* The note is the only child of .feature-details, which is a two-column grid,
     so without this it sits in one 544px column and the photo squeezes the text
     to about 368px. Span both, then cap the measure so the line length stays
     readable rather than running the full 1168. */
  grid-column: 1 / -1;
  display: grid; grid-template-columns: 148px minmax(0, 620px); gap: 30px; align-items: start;
}
.founder-photo { border-radius: 50%; background: none }
@media (max-width: 760px) { .founder-note { grid-template-columns: minmax(0, 1fr) } }

/* Unlayered: a column of links written as one paragraph each has no rhythm of
   its own — those paragraphs carry no margin, so each underline sits against
   the line below it and the closing button against the last link. Only a
   paragraph that is nothing but a link is affected; prose with a link in it
   keeps its own spacing. */
p:has(> .text-link:only-child) { margin-bottom: 15px }

/* ── Pricing comparison ───────────────────────────────────────────────────
   The plan cards carry the decision; these sections carry the detail, opened
   one at a time. Five columns will not sit inside a phone at the site's
   default cell padding, so this table sets its own: the feature name stays
   left, every value centres under its plan. */
.vh { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0 }
/* A .vh label in a cell the table has scrolled off to the right is absolutely
   positioned, so it is clipped only by a positioned scroller. Without this the
   labels escaped .table-scroll and widened the whole page on a phone (the
   pricing page scrolled sideways to 477px at 390). */
.table-scroll { position: relative }
/* The legal pages' tables are not in a scroller, so their cells must be free to
   shrink. The phone rule th,td{min-width:190px} sits in the later `responsive`
   layer, which beats `.legal td{min-width:0}` in `base` whatever the
   specificity, and pushed the privacy page to 400px at 390. Unlayered wins. */
.legal td, .legal th { min-width: 0 }

/* The notes close the plans' block. With nothing below them the compare section's
   eyebrow sat 12px under the last note and read as one more (390px, 29 Sep). */
.price-notes { padding-bottom: 28px }
.plan-compare-section { padding-top: 12px }
.compare-heading { margin: 18px 0 14px }
.compare-intro { max-width: 520px; margin-bottom: 32px }

.compare-group { border-top: 1px solid var(--line) }
.compare-group:last-of-type { border-bottom: 1px solid var(--line) }
.compare-group > summary {
  list-style: none; cursor: pointer; display: flex; align-items: center;
  justify-content: space-between; gap: 20px; padding: 24px 0;
  font-weight: 500; font-size: 1.0625rem; line-height: 1.5;
}
.compare-group > summary::-webkit-details-marker { display: none }
.compare-group > summary:hover { color: var(--accent) }
.compare-group > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px }
.compare-mark { font-size: 1.5rem; font-weight: 300; line-height: 1; flex-shrink: 0; transition: transform .2s }
.compare-group[open] > summary .compare-mark { transform: rotate(45deg) }
.compare-group .table-scroll { margin: 0 0 30px }

.plan-compare { font-size: .9375rem }
.plan-compare th, .plan-compare td { min-width: 0; padding: 14px; vertical-align: middle; text-align: center }
.plan-compare thead th { font-size: .75rem; letter-spacing: .04em; white-space: nowrap }
.plan-compare thead th:first-child { text-align: left; padding-left: 18px }
.plan-compare tbody th { text-align: left; font-weight: 500; color: var(--ink); min-width: 215px; padding-left: 18px }
.plan-compare td { color: var(--muted) }

@media (max-width: 760px) {
  .plan-compare th, .plan-compare td { padding: 12px 9px; font-size: .875rem }
  .plan-compare tbody th { min-width: 168px; padding-left: 12px }
  .plan-compare thead th:first-child { padding-left: 12px }
  .compare-group > summary { font-size: 1rem; padding: 20px 0 }
}
@media (prefers-reduced-motion: reduce) { .compare-mark { transition: none } }

/* ── Plan cards share their rows ───────────────────────────────────────────
   Each card is the same seven things in the same order: label, name,
   description, price, VAT line, button, features. The descriptions wrap to
   different lengths, so left alone every price, button and list sat at its own
   height. As a subgrid each card takes its row heights from the tallest item
   in that row across the grid, so they line up whatever the copy says.
   Only where cards sit side by side — stacked on a phone there is nothing to
   line up, and the flex column stays. The grid's row gap is zeroed because a
   subgrid would otherwise put it between a card's own rows; the gap between
   two rows of cards comes back as a margin. A browser without subgrid drops
   that one declaration and the card stacks exactly as before. */
@media (min-width: 761px) {
  .pricing-grid { row-gap: 0 }
  .pricing-grid > .plan { display: grid; grid-row: span 7; grid-template-rows: subgrid; row-gap: 0 }
  /* In a grid row a button would stretch to the row's height; keep it its own. */
  .pricing-grid > .plan > .button { align-self: start }
}
@media (min-width: 761px) and (max-width: 1180px) {
  .pricing-grid > .plan { margin-bottom: 22px }
}

/* ── Drawn mocks: a catering page, table ordering, a landing page ───────────
   scripts/mocks.mjs. Everything inside a mock is sized in em off .bm-body or
   the section, so one font-size change scales a whole mock down for a phone.
   Brand colours arrive as --b-ink / --b-paper on the mock itself, the same two
   values the homepage showcase gives each invented business. */
.mock-wrap { padding-block: 8px 34px }
.mock-figure { margin: 0 }
.mock-figure figcaption { font-size: .8125rem; color: var(--muted); text-align: center; margin-top: 14px }

.bm { background: var(--white); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; margin: 0 auto; box-shadow: 0 26px 50px -34px rgba(28, 27, 25, .38) }
.bm-wide { max-width: 860px }
.bm-bar { display: flex; align-items: center; gap: 12px; padding: 10px 14px; background: #efeee9; border-bottom: 1px solid var(--line) }
.bm-dots { display: flex; gap: 6px; flex-shrink: 0 }
.bm-dots i { display: block; width: 10px; height: 10px; border-radius: 50%; background: #d7d4cc }
.bm-url { flex: 1; min-width: 0; max-width: 340px; margin-inline: auto; display: flex; align-items: center; justify-content: center; gap: 6px; background: var(--white); border: 1px solid var(--line); border-radius: 7px; padding: 5px 10px; font: 500 .75rem/1.3 var(--sans); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.bm-url svg { width: 9px; height: 11px; flex-shrink: 0; color: #9a978f }
.bm-body { font-family: var(--sans); color: var(--ink); font-size: 14px; line-height: 1.35 }
@media (max-width: 560px) { .bm-body { font-size: 11.5px } .bm-dots { display: none } }

/* The caterer's page */
.cm { background: var(--paper) }
.cm-head { display: flex; align-items: center; gap: 1em; padding: 1.3em 1.5em; color: #fff; background: var(--b-ink); background: linear-gradient(135deg, var(--b-ink), color-mix(in srgb, var(--b-ink) 74%, #000)) }
.cm-logo { width: 2.9em; height: 2.9em; border-radius: .7em; background: var(--b-paper); color: var(--b-ink); display: grid; place-items: center; font: 600 1.15em/1 var(--serif); flex-shrink: 0 }
.cm-id { display: flex; flex-direction: column; gap: .2em; min-width: 0 }
.cm-id strong { font: 600 1.55em/1.1 var(--serif); letter-spacing: -.02em }
.cm-id span { font-size: .82em; opacity: .85 }
.cm-badge { margin-left: auto; font-size: .66em; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; padding: .5em .85em; border-radius: .5em; background: rgba(255, 255, 255, .16); white-space: nowrap }
.cm-when { display: flex; flex-wrap: wrap; align-items: center; gap: .5em 1.4em; padding: .85em 1.5em; background: var(--white); border-bottom: 1px solid var(--line); font-size: .86em; color: var(--muted) }
.cm-when b { color: var(--ink); font-weight: 600; margin-right: .3em }
.cm-change { margin-left: auto; color: var(--b-ink); font-weight: 600; text-decoration: underline; text-underline-offset: .2em }
.cm-rail { display: flex; gap: .5em; padding: .85em 1.5em; overflow: hidden; white-space: nowrap; border-bottom: 1px solid var(--line); -webkit-mask-image: linear-gradient(90deg, #000 86%, transparent); mask-image: linear-gradient(90deg, #000 86%, transparent) }
.cm-rail span { flex-shrink: 0; font-size: .8em; font-weight: 600; padding: .5em .95em; border-radius: .6em; background: var(--white); border: 1px solid var(--line); color: var(--muted) }
.cm-rail .on { background: var(--b-ink); border-color: var(--b-ink); color: #fff }
.cm-sec { display: flex; align-items: baseline; justify-content: space-between; gap: 1em; padding: 1.15em 1.5em .65em }
.cm-sec strong { font: 600 1.3em/1.2 var(--serif); letter-spacing: -.015em }
.cm-sec span { font-size: .8em; color: var(--muted) }
.cm-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: .9em; padding: 0 1.5em 1.2em }
.cm-item { background: var(--white); border: 1px solid var(--line); border-radius: .8em; overflow: hidden; display: flex; flex-direction: column }
.cm-img { position: relative; aspect-ratio: 3 / 2; background: var(--b-paper); display: grid; place-items: center }
.cm-img svg { width: 94%; height: auto; display: block }
.cm-tag { position: absolute; top: .55em; left: .55em; font-size: .64em; font-weight: 700; padding: .32em .6em; border-radius: .45em; background: var(--white); color: var(--b-ink) }
.cm-info { flex: 1; display: flex; flex-direction: column; gap: .2em; padding: .7em .75em .75em }
.cm-info strong { font-size: .86em; font-weight: 600; line-height: 1.25 }
.cm-info > span { font-size: .74em; color: var(--muted) }
.cm-row { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: .5em }
.cm-row b { font-size: .88em; font-weight: 700 }
.cm-add { width: 1.75em; height: 1.75em; border-radius: .5em; background: var(--b-ink); color: #fff; display: grid; place-items: center; font-weight: 600; line-height: 1 }
.cm-basket { display: flex; align-items: center; justify-content: space-between; gap: 1em; margin: 0 1.5em 1.4em; padding: .75em .75em .75em 1.1em; border-radius: .8em; background: var(--ink); color: #fff; font-size: .86em }
.cm-basket b { font-weight: 700 }
.cm-go { flex-shrink: 0; background: var(--white); color: var(--ink); font-weight: 700; padding: .55em 1.15em; border-radius: .55em }
@media (max-width: 760px) { .cm-grid { grid-template-columns: repeat(2, 1fr) } .cm-badge { display: none } }

/* Ordering from the table */
.tq { display: grid; grid-template-columns: 1fr 1.05fr; gap: 70px; align-items: center }
.tq-copy h2 { margin: 20px 0 22px }
.tq-visual { position: relative; overflow: hidden; display: flex; align-items: flex-end; justify-content: center; min-height: 540px; padding: 44px 28px 40px; background: #ebe9e2; border-radius: 4px 44px 4px 4px }
.tq-card { position: relative; z-index: 1; width: 190px; margin: 0 -26px 26px 0; padding: 18px 18px 16px; background: var(--white); border: 1px solid var(--line); border-radius: 14px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 7px; transform: rotate(-4deg); box-shadow: 0 20px 30px -22px rgba(28, 27, 25, .5) }
.tq-card::after { content: ''; position: absolute; left: 22%; right: 22%; bottom: -12px; height: 12px; background: #d6d2c8; border-radius: 0 0 8px 8px }
.tq-card-venue { font: 600 .95rem/1.2 var(--serif); color: var(--b-ink) }
.tq-card strong { font-size: .68rem; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; color: var(--muted) }
.tq-qr { display: block; width: 134px; height: 134px; margin: 3px 0; color: #1c1b19 }
.tq-card-table { font: 600 1.35rem/1.1 var(--serif); color: var(--ink) }
.tq-phone { position: relative; z-index: 2; flex-shrink: 0; width: 252px; height: 504px; padding: 8px; background: #1c1b19; border-radius: 38px }
.tq-screen { position: relative; height: 100%; display: flex; flex-direction: column; padding: 44px 14px 14px; border-radius: 31px; overflow: hidden; background: var(--paper); font-family: var(--sans) }
.tq-status { position: absolute; top: 0; left: 0; right: 0; display: flex; align-items: center; justify-content: space-between; padding: 13px 18px 0; font-size: .66rem; font-weight: 700 }
.tq-venue { display: flex; align-items: center; gap: 10px; padding-bottom: 12px; border-bottom: 1px solid var(--line) }
.tq-mono { width: 36px; height: 36px; flex-shrink: 0; display: grid; place-items: center; border-radius: 9px; background: var(--b-paper); color: var(--b-ink); font: 600 1rem/1 var(--serif) }
.tq-venue strong { display: block; font: 600 1.02rem/1.2 var(--serif); letter-spacing: -.01em }
.tq-venue span { font-size: .64rem; color: var(--muted) }
.tq-chip { align-self: flex-start; margin: 12px 0 10px; padding: 6px 10px; border-radius: 8px; background: var(--b-ink); color: #fff; font-size: .68rem; font-weight: 700 }
.tq-items { display: flex; flex-direction: column; gap: 8px }
.tq-item { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 8px; padding: 9px 10px; background: var(--white); border: 1px solid var(--line); border-radius: 10px }
.tq-item b { display: block; font-size: .74rem; font-weight: 600 }
.tq-item i { display: block; margin-top: 1px; font-style: normal; font-size: .62rem; color: var(--muted) }
.tq-item em { font-style: normal; font-size: .72rem; font-weight: 600 }
.tq-qty, .tq-plus { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 7px; font-size: .7rem; font-weight: 700 }
.tq-qty { background: var(--b-paper); color: var(--b-ink) }
.tq-plus { background: var(--b-ink); color: #fff }
.tq-pay { margin-top: auto; display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; border-radius: 12px; background: var(--ink); color: #fff; font-size: .78rem; font-weight: 600 }
.tq-pay b { font-weight: 700 }
@media (max-width: 900px) { .tq { grid-template-columns: 1fr; gap: 36px } }
/* On a phone the card and the phone scale down together, as one picture,
   rather than each shrinking on its own and the text inside running out of
   room. zoom (not transform) so the layout box shrinks with it. */
@media (max-width: 520px) {
  .tq-visual { min-height: 0; padding: 28px 10px 24px }
  .tq-card, .tq-phone { zoom: .72 }
}
}

/* The website builder's page preview (the .lp-page inside .wb-preview) */
.lp-page { background: var(--white) }
.lp-nav { display: flex; align-items: center; justify-content: space-between; gap: 1em; padding: .95em 1.4em; border-bottom: 1px solid var(--line) }
.lp-brand { display: flex; align-items: center; gap: .6em; font: 600 1.05em/1.2 var(--serif); color: var(--b-ink) }
.lp-brand i { width: 1.9em; height: 1.9em; display: grid; place-items: center; border-radius: .5em; background: var(--b-paper); font-style: normal; font-size: .9em }
.lp-links { display: flex; gap: 1.2em; font-size: .8em; color: var(--muted) }
.lp-hero { display: grid; grid-template-columns: 1.15fr .85fr; min-height: 16em; background: var(--b-paper) }
.lp-hero-copy { display: flex; flex-direction: column; justify-content: center; gap: .8em; padding: 2em 1.6em }
.lp-hero-copy strong { font: 600 2em/1.05 var(--serif); letter-spacing: -.03em; color: var(--b-ink) }
.lp-hero-copy > span { max-width: 22em; font-size: .86em; color: #4f5b53 }
.lp-ctas { display: flex; flex-wrap: wrap; gap: .6em; margin-top: .3em }
.lp-btn { white-space: nowrap; padding: .7em 1.1em; border-radius: .6em; background: var(--b-ink); color: #fff; font-size: .78em; font-weight: 700 }
.lp-ghost { background: transparent; color: var(--b-ink); box-shadow: inset 0 0 0 1.5px var(--b-ink) }
.lp-photo { display: block; width: 100%; height: 100%; min-height: 0; object-fit: cover }
.lp-strip { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line) }
.lp-strip span { padding: .9em 1.1em; border-right: 1px solid var(--line); font-size: .76em; color: var(--muted) }
.lp-strip span:last-child { border-right: 0 }
.lp-strip b { display: block; margin-bottom: .15em; color: var(--ink); font-weight: 600 }
@media (max-width: 560px) {
  .lp-links { display: none }
  .lp-hero { grid-template-columns: 1fr }
  .lp-photo { height: 10em }
  .lp-strip { grid-template-columns: 1fr }
  .lp-strip span { border-right: 0; border-bottom: 1px solid var(--line) }
  .lp-strip span:last-child { border-bottom: 0 }
}

/* ── Coming soon ────────────────────────────────────────────────────────────
   Bookings and subscriptions, per trade (scripts/soon.mjs). Dashed cards and
   the indigo badge say "not yet" before a word is read. */
.soon-head { max-width: 640px; margin-bottom: 26px }
.soon-head h2 { margin: 18px 0 12px }
.soon-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px }
.soon-grid.soon-1 { grid-template-columns: minmax(0, 560px) }
.soon-grid.soon-3 { grid-template-columns: repeat(3, 1fr) }
.soon-card { padding: 26px 26px 24px; border: 1.5px dashed #cfcae6; border-radius: 14px; background: rgba(238, 237, 249, .35) }
.soon-kind { font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #4e49a3 }
.soon-card h3 { font-family: var(--serif); font-size: 1.7rem; margin: 10px 0 10px; line-height: 1.2 }
.soon-card p { font-size: .9375rem; line-height: 1.75 }
.soon-link { margin-top: 22px }
.soon-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-top: 34px; padding: 16px 20px; border: 1.5px dashed #cfcae6; border-radius: 12px; font-size: .9375rem; color: var(--ink) }
.soon-strip .text-link { margin-left: auto }
.compare-soon { color: #4e49a3 !important; font-weight: 600; letter-spacing: .02em }
@media (max-width: 900px) { .soon-grid.soon-3 { grid-template-columns: 1fr } }
@media (max-width: 760px) { .soon-grid { grid-template-columns: 1fr } .soon-strip .text-link { margin-left: 0 } }

/* ── Marketing page ─────────────────────────────────────────────────────── */
.mk-art { background: #ebe9e2; border-radius: 4px 44px 4px 4px; padding: 46px 36px 30px }
.mk-stage { display: flex; align-items: center; justify-content: center }
.mk-email { position: relative; z-index: 1; width: 410px; margin-right: -40px; padding: 20px 60px 20px 22px; background: var(--white); border: 1px solid var(--line); border-radius: 14px; font-family: var(--sans); box-shadow: 0 22px 40px -28px rgba(28, 27, 25, .45) }
.mk-email-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-bottom: 12px; margin-bottom: 14px; border-bottom: 1px solid var(--line) }
.mk-from { display: flex; align-items: center; gap: 9px; font-size: .78rem; color: var(--muted) }
.mk-from i { width: 30px; height: 30px; flex-shrink: 0; display: grid; place-items: center; border-radius: 8px; background: #e7ece4; color: #344d3e; font: 600 .9rem/1 var(--serif); font-style: normal }
.mk-from b { color: var(--ink); font-weight: 600 }
.mk-time { font-size: .72rem; color: var(--muted); white-space: nowrap }
.mk-subject { display: block; margin-bottom: 8px; font: 600 1.35rem/1.25 var(--serif); letter-spacing: -.015em }
.mk-email p { margin-bottom: 14px; font-size: .85rem; line-height: 1.6; color: var(--muted) }
.mk-btn { display: inline-block; margin-bottom: 14px; padding: 9px 14px; border-radius: 9px; background: #344d3e; color: #fff; font-size: .78rem; font-weight: 700 }
.mk-foot { display: block; padding-top: 10px; border-top: 1px solid var(--line); font-size: .68rem; color: #8f8c85 }
.mk-foot u { color: var(--muted) }
.mk-phone { position: relative; z-index: 2; flex-shrink: 0; width: 240px; height: 420px; padding: 8px; background: #1c1b19; border-radius: 36px }
.mk-lock { height: 100%; display: flex; flex-direction: column; align-items: center; padding: 36px 12px 12px; border-radius: 29px; overflow: hidden; color: #fff; font-family: var(--sans); background: linear-gradient(170deg, #5b6b8c, #2b3550 55%, #1d2336) }
.mk-clock { font-size: 3.2rem; font-weight: 300; letter-spacing: -.04em; line-height: 1 }
.mk-date { margin: 6px 0 22px; font-size: .78rem; opacity: .85 }
.mk-notif { align-self: stretch; display: flex; gap: 10px; padding: 11px 12px; border-radius: 16px; background: rgba(255, 255, 255, .86); color: var(--ink) }
.mk-notif > div { flex: 1; min-width: 0 }
.mk-icon { width: 34px; height: 34px; flex-shrink: 0; display: grid; place-items: center; border-radius: 9px; background: #344d3e; color: #e7ece4; font: 600 .95rem/1 var(--serif) }
.mk-app { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 2px; font-size: .6rem; font-weight: 700; letter-spacing: .06em; color: #5f5d57 }
.mk-app em { font-style: normal; font-weight: 500; letter-spacing: 0 }
.mk-notif b { display: block; font-size: .78rem; font-weight: 600 }
.mk-notif div > span:last-child { display: block; font-size: .72rem; color: #4a4843 }
.mk-segs { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 26px }
.mk-segs span { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 9px; background: var(--white); border: 1px solid var(--line); font-size: .82rem; color: var(--muted) }
.mk-segs i { width: 8px; height: 8px; border-radius: 50%; background: var(--accent) }
.mk-segs b { color: var(--ink); font-weight: 700; font-variant-numeric: tabular-nums }
.mk-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 16px; overflow: hidden }
.mk-tool { background: var(--white); padding: 26px 24px 24px }
.mk-plan { display: inline-block; padding: 4px 8px; border-radius: 6px; background: #eeedf9; color: #4e49a3; font-size: .72rem; font-weight: 700; letter-spacing: .04em }
.mk-plan-free { background: #e7eae3; color: #465348 }
.mk-tool h3 { margin: 14px 0 8px; font-family: var(--serif); font-size: 1.5rem; line-height: 1.2 }
.mk-tool p { font-size: .9375rem; line-height: 1.7 }
.mk-plans-link { margin-top: 22px }
.mk-rules { max-width: 760px }
.mk-rules li { font-size: 1rem; line-height: 1.7 }
.mk-rules strong { color: var(--ink) }
@media (max-width: 1000px) { .mk-grid { grid-template-columns: repeat(2, 1fr) } }
@media (max-width: 760px) {
  .mk-art { padding: 28px 14px 22px }
  .mk-stage { flex-direction: column; gap: 18px }
  .mk-email { width: 100%; max-width: 400px; margin: 0; padding-right: 22px }
  .mk-grid { grid-template-columns: 1fr }
}
@media (max-width: 520px) { .mk-phone { zoom: .84 } }

/* ── The website builder (/website/) ───────────────────────────────────────
   A chat beside the page it is rebuilding, then how that page reads in search
   and in an AI answer. Sized in em off .bm-body, like the other browser mocks. */
.wb-body { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); min-height: 30em }
.wb-chat { display: flex; flex-direction: column; gap: .7em; padding: 1.1em; background: #f3f2ee; border-right: 1px solid var(--line) }
.wb-head { display: flex; align-items: center; gap: .5em; padding-bottom: .7em; border-bottom: 1px solid var(--line); font-size: .78em; font-weight: 700; color: var(--muted) }
.wb-dot { width: .6em; height: .6em; border-radius: 50%; background: var(--accent) }
.wb-msg { max-width: 90%; padding: .7em .85em; border-radius: .9em; font-size: .8em; line-height: 1.45 }
.wb-me { align-self: flex-end; background: var(--accent); color: #fff; border-bottom-right-radius: .3em }
.wb-ai { align-self: flex-start; background: var(--white); border: 1px solid var(--line); border-bottom-left-radius: .3em }
.wb-ai b { font-weight: 700 }
.wb-ref { display: block; margin-top: .45em; padding: .35em .6em; border-radius: .5em; background: rgba(255, 255, 255, .2); font-size: .92em; font-weight: 600 }
.wb-typing { display: flex; gap: .3em; padding: .85em .9em }
.wb-typing i { width: .42em; height: .42em; border-radius: 50%; background: #b9b6ae; animation: wb-dot 1.2s infinite ease-in-out }
.wb-typing i:nth-child(2) { animation-delay: .15s }
.wb-typing i:nth-child(3) { animation-delay: .3s }
@keyframes wb-dot { 0%, 80%, 100% { opacity: .35; transform: none } 40% { opacity: 1; transform: translateY(-.15em) } }
.wb-input { margin-top: auto; display: flex; align-items: center; justify-content: space-between; padding: .55em .55em .55em .9em; border-radius: .8em; background: var(--white); border: 1px solid var(--line); font-size: .78em; color: #9a978f }
.wb-input span { width: 1.9em; height: 1.9em; display: grid; place-items: center; border-radius: .55em; background: var(--ink); color: #fff; font-weight: 700 }
.wb-preview { background: var(--white); font-size: 12.5px; overflow: hidden }
@media (max-width: 760px) {
  .wb-body { grid-template-columns: 1fr; min-height: 0 }
  .wb-chat { border-right: 0; border-bottom: 1px solid var(--line) }
}
@media (prefers-reduced-motion: reduce) { .wb-typing i { animation: none; opacity: .6 } }

.ws-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px }
.ws-path { padding: 30px 30px 26px; background: var(--white); border: 1px solid var(--line); border-radius: 16px }
.ws-kind { font-size: .75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--accent) }
.ws-path h3 { margin: 12px 0 12px; font-family: var(--serif); font-size: 1.9rem; line-height: 1.2 }
.ws-path > p { font-size: 1rem; line-height: 1.75 }
.ws-steps { margin: 20px 0 0; padding: 18px 0 0 20px; border-top: 1px solid var(--line); display: grid; gap: 8px; font-size: .9375rem }
.ws-steps li::marker { color: var(--accent); font-weight: 700 }
.ws-find { display: grid; grid-template-columns: 1fr 1fr; gap: 70px; align-items: center }
.ws-find-copy h2 { margin: 20px 0 22px }
.fm { display: grid; gap: 26px }
.fm-card { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 26px 20px 18px; background: var(--white); border: 1px solid var(--line); border-radius: 14px; font-family: var(--sans); box-shadow: 0 18px 36px -28px rgba(28, 27, 25, .4) }
.fm-label { position: absolute; top: -12px; left: 16px; padding: 5px 10px; border-radius: 7px; background: var(--accent); color: #fff; font-size: .7rem; font-weight: 700; letter-spacing: .03em }
.fm-url { font-size: .75rem; color: #3a6a4a }
.fm-title { font-size: 1.05rem; font-weight: 500; color: #2c3fb8 }
.fm-desc { font-size: .85rem; line-height: 1.5; color: var(--muted) }
.fm-q { align-self: flex-end; max-width: 88%; margin-bottom: 8px; padding: 9px 12px; border-radius: 12px 12px 4px 12px; background: #efeee9; font-size: .85rem }
.fm-ai p { font-size: .9rem; line-height: 1.6; color: var(--ink) }
.fm-src { align-self: flex-start; margin-top: 6px; padding: 4px 9px; border-radius: 6px; background: #eeedf9; color: #4e49a3; font-size: .72rem; font-weight: 600 }
.ws-built { grid-template-columns: repeat(3, 1fr) }
@media (max-width: 900px) { .ws-find { grid-template-columns: 1fr; gap: 40px } }
@media (max-width: 760px) { .ws-grid, .ws-built { grid-template-columns: 1fr } }
.ws-plan { margin-bottom: 26px }

/* Paragraph runs. The reset zeroes p margins and these containers set none of
   their own, so consecutive paragraphs ran together. Base layer, zero
   specificity: any component that spaces its own paragraphs still wins. */
@layer base {
  :where(.prose-section, .founder-text, .price-notes, .source-note, .plain-list > div, main section.wrap, main > .wrap) > p + p { margin-top: 1em }
  /* A bare section heading had nothing under it but the reset's zero. */
  :where(main section.wrap, main > .wrap) > h2 { margin-bottom: .5em }
  /* Reading text keeps the article measure (.article-body) instead of the full 1168px wrap. */
  :where(main section.wrap, main > .wrap, .plain-list > div, .faq-list details) > p { max-width: 730px }
}
.price-notes p, .source-note p, .sources { max-width: 78ch }
/* The dated sources note that closes each comparison, above the closing button. */
.source-note { padding-bottom: 40px }
/* Contact: the aside's quick links, the same text links used everywhere. */
.aside-links { list-style: none; padding: 0; margin: 16px 0 22px; display: grid; gap: 14px }

/* The assistant page (/assistant/): the chat mock beside the Monday brief, and
   the "what should it do first?" boxes. The chat itself is the website
   builder's (wb-*). */
.as-art { display: grid }
.as-stage { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 20px; align-items: start; padding: 22px; border: 1px solid var(--line); border-radius: 18px; background: #efeee9; font-size: 16px }
.as-chat { border: 1px solid var(--line); border-radius: 16px; background: #f7f6f3; min-height: 25em }
.as-confirm { align-self: stretch; display: grid; gap: .45em; padding: .85em .9em; border: 1px solid var(--line); border-radius: .9em; background: var(--white); font-size: .8em }
.as-confirm b { font-weight: 700; color: var(--ink) }
.as-k { font-size: .78em; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted) }
.as-btns { display: flex; gap: .5em; margin-top: .2em }
.as-yes, .as-no { padding: .45em .9em; border-radius: .6em; font-weight: 700; font-size: .95em }
.as-yes { background: var(--ink); color: #fff }
.as-no { border: 1px solid var(--line); color: var(--muted) }
.as-brief { display: grid; gap: .75em; padding: 1.2em; border: 1px solid var(--line); border-radius: 16px; background: var(--white); font-size: .9em }
.as-brief strong { font-family: var(--serif); font-weight: 400; font-size: 1.35em; line-height: 1.25; letter-spacing: -.02em }
.as-brief p { color: var(--muted); line-height: 1.55 }
.as-brief .availability { justify-self: start; font-size: .72em; padding: 4px 7px }
.as-draft { padding: .8em .9em; border-radius: .8em; background: #eeedf9; color: #3e3a8f; font-weight: 600; font-size: .92em }
.as-send { justify-self: start; padding: .55em 1em; border-radius: .7em; background: var(--accent); color: #fff; font-weight: 700; font-size: .9em }
.as-wants { border: 0; padding: 0; margin: 0 0 20px; min-width: 0 }
.as-wants legend { display: block; font-family: var(--sans); font-size: .9375rem; font-weight: 600; margin-bottom: 10px; padding: 0 }
.as-wants legend .optional { font-weight: 400; color: var(--muted) }
.as-wants-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px }
.as-want { display: flex; align-items: flex-start; gap: 10px; margin: 0; padding: 11px 12px; border: 1px solid #c6c3bb; border-radius: 11px; background: var(--white); font-weight: 500; font-size: .9375rem; line-height: 1.35; cursor: pointer }
.as-want input { width: 18px; height: 18px; min-height: 0; flex: none; margin: 1px 0 0; padding: 0; accent-color: var(--accent) }
.as-want:has(input:checked) { border-color: var(--accent); background: #f4f4fd }
@media (max-width: 900px) { .as-stage { grid-template-columns: 1fr } .as-chat { min-height: 0 } }
@media (max-width: 560px) { .as-stage { padding: 14px } .as-wants-grid { grid-template-columns: 1fr } }

/* A section heading that introduces a form (/referrals/, /assistant/) sits close to it,
   instead of a full section's padding away. */
.section:has(+ .waitlist-layout) { padding-bottom: 32px }

/* Dalve (2 Oct): the assistant's hero on /assistant/, the avatar in its chat,
   and the band under the six tools on the homepage. */
.as-intro { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 48px; align-items: center }
.as-intro > .breadcrumbs { grid-column: 1 / -1 }
.as-intro-art { margin: 0 }
.as-intro-art img { width: clamp(150px, 22vw, 280px); height: auto; display: block }
.as-avatar { width: 1.9em; height: 1.9em; flex: none }
.dalve-band { justify-content: flex-start }
.dalve-band img { width: 72px; height: 72px; flex: none }
.dalve-band > div { flex: 1 1 auto; min-width: 0 }
@media (max-width: 760px) {
  .as-intro { grid-template-columns: minmax(0, 1fr); gap: 20px }
  .as-intro > .breadcrumbs { order: -2 }
  .as-intro-art { order: -1 }
  .as-intro-art img { width: 120px }
  .dalve-band img { width: 56px; height: 56px }
}

/* Homepage master message (2 Oct): the line under the H1 that names Dalve. */
.hero-sub { font-family: var(--serif); font-size: clamp(1.5rem, 2.4vw, 2.1rem); line-height: 1.2; letter-spacing: -.02em; color: var(--ink); margin-top: 14px; margin-bottom: 16px }
.hero-now strong { display: inline }

/* Get the app (/download/, 14 Oct): the two stores' badges, and a QR code of the page's own address for a
   desktop visitor to scan. The badges are the stores' artwork, never redrawn; the same height side by side. */
.dl-intro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 300px); gap: 0 88px; align-items: center }
.dl-intro > .breadcrumbs { grid-column: 1 / -1 }
.store-badges { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px }
.store-badge { display: block; border-radius: 9px; line-height: 0; transition: opacity .2s }
.store-badge:hover { opacity: .82 }
.store-badge img { display: block; width: auto; height: 52px }
.dl-copy .fine { max-width: 560px; margin-top: 28px }
.dl-qr { margin: 0; padding: 26px; background: var(--white); border: 1px solid var(--line); border-radius: 18px }
.dl-qr svg { display: block; width: 100%; max-width: 248px; height: auto; margin: 0 auto }
.dl-qr figcaption { margin-top: 18px; font-size: .9375rem; line-height: 1.55; color: var(--muted) }
.dl-qr figcaption strong { display: block; margin-bottom: 4px; color: var(--ink); font-weight: 600 }
.dl-qr-url { display: block; margin-top: 10px; color: var(--ink); font-size: .8125rem; font-weight: 600 }
@media (max-width: 860px) {
  .dl-intro { grid-template-columns: minmax(0, 1fr); gap: 44px }
  .dl-qr { max-width: 340px }
}
@media (max-width: 400px) { .store-badge img { height: 46px } }