@font-face {
  font-family: "Instrument Serif";
  src: url("fonts/instrument-serif-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("fonts/inter-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --canvas: #faf9f7;
  --card: #ffffff;
  --line: #e7e4de;
  --line-2: #f0eee9;
  --chip: #f3f1ec;
  --ink: #1c1b19;
  --ink-2: #6f6a63;
  --ink-3: #a39e96;
  --ok: #1e7f58;
  --ok-bg: #e7f3ec;
  --rev: #2b63c4;
  --rev-bg: #e9f0fb;
  --need: #a8620b;
  --need-bg: #fbf0dd;
  --sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --serif: "Instrument Serif", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", Consolas, monospace;
  --wrap: 1160px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font: 16px/1.55 var(--sans);
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 4px; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }
.skip { position: absolute; left: -999px; }
.skip:focus { left: 12px; top: 12px; background: var(--card); padding: 8px 12px; z-index: 99; }

/* Header */
.top { position: sticky; top: 0; z-index: 40; background: rgba(250, 249, 247, .88); backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid transparent; transition: border-color .2s; }
.top.scrolled { border-bottom-color: var(--line); }
.top .wrap { display: flex; align-items: center; gap: 28px; height: 64px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.brand img { width: 28px; height: 28px; }
.brand span { font: 400 26px/1 var(--serif); letter-spacing: -.01em; }
.nav { display: flex; gap: 22px; font-size: 14.5px; color: var(--ink-2); }
.nav a { text-decoration: none; }
.nav a:hover { color: var(--ink); }
.top .right { margin-left: auto; display: flex; align-items: center; gap: 14px; }
.beta { font-size: 12.5px; color: var(--ink-2); border: 1px solid var(--line); border-radius: 999px; padding: 4px 10px; background: var(--card); white-space: nowrap; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: 10px; padding: 10px 18px; font: 500 15px/1.2 var(--sans); text-decoration: none; border: 1px solid var(--line); background: var(--card); color: var(--ink); transition: background .15s, border-color .15s, transform .15s; }
.btn:hover { border-color: var(--ink-3); }
.btn.dark { background: var(--ink); color: var(--canvas); border-color: var(--ink); }
.btn.dark:hover { background: #33312d; }
.btn.lg { padding: 13px 22px; font-size: 16px; border-radius: 12px; }

/* Type */
.eyebrow { font-size: 12px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-2); margin: 0 0 14px; }
h1, h2, h3 { margin: 0; font-weight: 400; }
h1 { font: 400 clamp(44px, 6.4vw, 80px)/1.02 var(--serif); letter-spacing: -.02em; }
h2 { font: 400 clamp(34px, 4.2vw, 52px)/1.06 var(--serif); letter-spacing: -.015em; }
h3 { font: 600 17px/1.3 var(--sans); letter-spacing: -.005em; }
.lead { font-size: clamp(17px, 1.6vw, 20px); color: var(--ink-2); max-width: 640px; margin: 22px 0 0; }
p { margin: 0; }
em.serif { font-family: var(--serif); font-style: italic; }

section { padding: 112px 0; }
section.tight { padding: 72px 0; }
.section-head { max-width: 720px; margin-bottom: 56px; }
.section-head p { color: var(--ink-2); font-size: 18px; margin-top: 18px; }
.rule { border-top: 1px solid var(--line); }

/* Hero */
.hero { padding: 84px 0 40px; text-align: center; }
.hero .lead { margin-left: auto; margin-right: auto; }
.hero .ctas { display: flex; gap: 12px; justify-content: center; margin-top: 34px; flex-wrap: wrap; }
.hero .note { margin-top: 16px; font-size: 13.5px; color: var(--ink-3); }
.hero-shot { margin-top: 64px; }

/* Product shot frame */
.shot { background: var(--card); border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 1px 0 rgba(0,0,0,.02), 0 30px 60px -30px rgba(28, 27, 25, .25), 0 12px 24px -16px rgba(28, 27, 25, .12); overflow: hidden; text-align: left; font-size: 13px; line-height: 1.4; }
.shot .bar { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-bottom: 1px solid var(--line); background: var(--card); }
.shot .dots { display: flex; gap: 6px; }
.shot .dots i { width: 10px; height: 10px; border-radius: 50%; background: var(--line); display: block; }
.shot .url { flex: 1; max-width: 360px; margin: 0 auto; text-align: center; font-size: 12px; color: var(--ink-3); background: var(--chip); border-radius: 6px; padding: 4px 10px; }
.app-head { display: flex; align-items: center; gap: 10px; padding: 10px 18px; border-bottom: 1px solid var(--line); }
.app-head .wm { font: 400 20px/1 var(--serif); }
.app-head .crumb { color: var(--ink-3); }
.app-head .crumb b { color: var(--ink); font-weight: 500; }
.app-head .tabs { margin-left: 18px; display: flex; gap: 4px; }
.app-head .tabs span { padding: 5px 10px; border-radius: 7px; color: var(--ink-2); }
.app-head .tabs span.on { background: var(--chip); color: var(--ink); font-weight: 500; }
.app-head .who { margin-left: auto; width: 26px; height: 26px; border-radius: 50%; background: #d9d3c8; }
.app-body { padding: 20px 22px 24px; background: var(--canvas); }
.app-title { display: flex; align-items: end; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.app-title .t { font: 400 28px/1 var(--serif); }
.app-title .s { color: var(--ink-2); margin-top: 6px; font-size: 12.5px; }
.app-title .acts { display: flex; gap: 6px; }
.mini-btn { font-size: 12px; padding: 6px 10px; border-radius: 8px; border: 1px solid var(--line); background: var(--card); white-space: nowrap; }
.mini-btn.dark { background: var(--ink); color: var(--canvas); border-color: var(--ink); }
.filters { display: flex; gap: 6px; margin-bottom: 12px; flex-wrap: wrap; }
.pill { font-size: 12px; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--line); background: var(--card); color: var(--ink-2); }
.pill.on { background: var(--ink); color: var(--canvas); border-color: var(--ink); }

table.sched { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--card); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.sched th { text-align: left; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); padding: 9px 12px; border-bottom: 1px solid var(--line); background: #fcfbf9; }
.sched td { padding: 9px 12px; border-bottom: 1px solid var(--line-2); vertical-align: middle; }
.sched tr:last-child td { border-bottom: 0; }
.sched .trade td { background: #fcfbf9; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); padding: 7px 12px; }
.tag { display: inline-block; font: 500 11px/1.5 var(--mono); background: var(--chip); border-radius: 4px; padding: 0 5px; color: var(--ink); }
.thumb { width: 30px; height: 30px; border-radius: 6px; background: var(--chip); display: inline-block; vertical-align: middle; margin-right: 10px; }
.it { display: flex; align-items: center; }
.it b { font-weight: 500; display: block; }
.it small { color: var(--ink-2); font-size: 12px; }
.st { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 500; border-radius: 999px; padding: 2px 9px; white-space: nowrap; }
.st::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.st.ok { color: var(--ok); background: var(--ok-bg); }
.st.rev { color: var(--rev); background: var(--rev-bg); }
.st.need { color: var(--need); background: var(--need-bg); }
.muted { color: var(--ink-2); }
.hide-sm { }

/* Swatch "thumbnails": finishes drawn with gradients */
.f-brass { background: linear-gradient(135deg, #e6cf97, #b48c43 60%, #8a6a2c); }
.f-black { background: linear-gradient(135deg, #4a4844, #1c1b19); }
.f-oak { background: repeating-linear-gradient(100deg, #d8b98e 0 3px, #cfae80 3px 6px, #dcc19a 6px 9px); }
.f-zellige { background: linear-gradient(135deg, #cfe0dc, #9fbfb8 50%, #b9d2cc); }
.f-marble { background: linear-gradient(120deg, #f4f2ee 30%, #d9d6cf 32%, #f1efea 35%, #e6e3dd 70%, #cfccc5 72%, #f3f1ec 75%); }
.f-linen { background: repeating-linear-gradient(0deg, #e9e3d8 0 2px, #e2dbcd 2px 4px); }
.f-plaster { background: radial-gradient(circle at 30% 30%, #f1ebe2, #ddd2c2); }
.f-steel { background: linear-gradient(135deg, #e7e8e8, #b9bcbd 55%, #9ea2a3); }
.f-glass { background: radial-gradient(circle at 50% 35%, #fff 0 18%, #f4e9cf 19% 30%, #e9e5dc 31%); }
.f-terracotta { background: linear-gradient(135deg, #d99a76, #b86a47); }

/* Logos/press strip replacement: the problem */
.problem { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.problem div { border-top: 1px solid var(--ink); padding-top: 18px; }
.problem h3 { margin-bottom: 8px; }
.problem p { color: var(--ink-2); font-size: 15.5px; }

/* How it works */
.steps { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; counter-reset: step; border-top: 1px solid var(--line); }
.step { padding: 26px 22px 0 0; position: relative; }
.step::before { counter-increment: step; content: "0" counter(step); display: block; font: 400 34px/1 var(--serif); color: var(--ink-3); margin-bottom: 18px; }
.step h3 { margin-bottom: 8px; }
.step p { color: var(--ink-2); font-size: 15px; }
.soon { margin-top: 40px; display: flex; gap: 16px; align-items: center; padding: 18px 22px; border: 1px dashed var(--line); border-radius: 14px; background: var(--card); }
.soon .badge { font-size: 11.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--need); background: var(--need-bg); border-radius: 999px; padding: 3px 10px; white-space: nowrap; }
.soon p { color: var(--ink-2); font-size: 15px; }
.soon b { color: var(--ink); font-weight: 600; }

/* Feature rows (copy + shot) */
.feature { display: grid; grid-template-columns: 1fr 1.25fr; gap: 64px; align-items: center; }
.feature + .feature { margin-top: 120px; }
.feature.flip .copy { order: 2; }
.feature .copy p { color: var(--ink-2); font-size: 17px; margin-top: 16px; }
.feature ul { list-style: none; padding: 0; margin: 22px 0 0; }
.feature li { padding: 9px 0 9px 28px; border-top: 1px solid var(--line); position: relative; font-size: 15px; }
.feature li::before { content: ""; position: absolute; left: 4px; top: 16px; width: 10px; height: 6px; border-left: 2px solid var(--ok); border-bottom: 2px solid var(--ok); transform: rotate(-45deg); }

/* Quick add shot */
.rooms { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding-bottom: 34px; }
.room { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 14px; }
.room h4 { margin: 0 0 8px; font-size: 14px; font-weight: 600; display: flex; justify-content: space-between; }
.room h4 span { font-weight: 400; color: var(--ink-3); font-size: 12px; }
.room .row { display: flex; align-items: center; gap: 8px; padding: 3px 0; }
.room .row i { margin-left: auto; width: 7px; height: 7px; border-radius: 50%; background: #e1a54a; }
.room .row i.ok { background: var(--ok); }
.room .row i.rev { background: var(--rev); }
.qa { margin-top: 10px; position: relative; }
.qa .box { border: 1px solid var(--ink); border-radius: 8px; padding: 7px 10px; background: var(--card); }
.qa .box .caret { display: inline-block; width: 1px; height: 14px; background: var(--ink); vertical-align: -2px; animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.qa .hint { display: flex; gap: 8px; align-items: center; margin-top: 6px; font-size: 11.5px; }
.qa .hint .chip { background: var(--chip); border-radius: 999px; padding: 1px 8px; color: var(--ink-2); }
.qa .hint .k { margin-left: auto; color: var(--ink-3); }
.qa .list { position: absolute; left: 0; right: 0; top: 36px; background: var(--card); border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 12px 24px -12px rgba(0,0,0,.2); overflow: hidden; z-index: 2; }
.qa .list div { display: flex; justify-content: space-between; padding: 6px 10px; }
.qa .list div.on { background: var(--chip); }
.qa .list small { color: var(--ink-3); }

/* Import shot */
.import { padding: 18px; background: var(--canvas); }
.paste { display: flex; gap: 8px; }
.paste .in { flex: 1; border: 1px solid var(--line); background: var(--card); border-radius: 8px; padding: 8px 10px; color: var(--ink-2); font-size: 12.5px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.found { margin-top: 14px; display: grid; grid-template-columns: 120px 1fr; gap: 16px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 14px; }
.found .pic { border-radius: 8px; aspect-ratio: 1; }
.kv { display: grid; grid-template-columns: 92px 1fr; gap: 6px 10px; font-size: 12.5px; }
.kv dt { color: var(--ink-3); }
.kv dd { margin: 0; }
.kv dd.hl { background: #fff7e6; border-radius: 4px; padding: 0 4px; margin-left: -4px; }
.found .actions { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; border-top: 1px solid var(--line-2); padding-top: 12px; font-size: 12px; color: var(--ink-2); }

/* Client choice shot */
.choose { padding: 18px; background: var(--canvas); }
.choose .q { font: 400 22px/1.2 var(--serif); margin-bottom: 4px; }
.choose .sub { color: var(--ink-2); font-size: 12.5px; margin-bottom: 14px; }
.opts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.opt { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 10px; }
.opt.picked { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
.opt .pic { aspect-ratio: 4 / 3; border-radius: 8px; margin-bottom: 8px; }
.opt b { font-weight: 500; display: block; font-size: 12.5px; }
.opt small { color: var(--ink-2); font-size: 11.5px; display: block; }
.opt .pick { margin-top: 8px; font-size: 11.5px; text-align: center; border-radius: 7px; padding: 5px; border: 1px solid var(--line); }
.opt.picked .pick { background: var(--ink); color: var(--canvas); border-color: var(--ink); }
.opt.mine { border-style: dashed; }
.note-row { margin-top: 12px; display: flex; gap: 10px; align-items: center; background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 9px 12px; font-size: 12.5px; color: var(--ink-2); }
.note-row .av { width: 22px; height: 22px; border-radius: 50%; background: #c9b9a3; flex: none; }

/* Share shot */
.share { display: grid; grid-template-columns: 1.2fr 1fr; gap: 0; }
.share .left { padding: 18px; border-right: 1px solid var(--line); background: var(--canvas); }
.share .right { padding: 18px; background: #f1efea; display: flex; align-items: center; justify-content: center; }
.linkrow { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; margin-bottom: 8px; display: flex; align-items: center; gap: 10px; font-size: 12.5px; }
.linkrow .who { font-weight: 500; }
.linkrow small { color: var(--ink-3); display: block; font-size: 11.5px; }
.linkrow .qr { margin-left: auto; width: 34px; height: 34px; }
.paper { background: #fff; width: 100%; max-width: 240px; aspect-ratio: 8.5 / 11; box-shadow: 0 10px 30px -12px rgba(0,0,0,.3); padding: 16px 14px; font-size: 8px; position: relative; }
.paper .ph { display: flex; justify-content: space-between; align-items: start; border-bottom: 1px solid var(--line); padding-bottom: 8px; margin-bottom: 8px; }
.paper .ph b { font: 400 14px/1 var(--serif); display: block; }
.paper .ph small { color: var(--ink-2); }
.paper .ph svg { width: 30px; height: 30px; }
.paper .ln { display: flex; gap: 6px; align-items: center; padding: 4px 0; border-bottom: 1px solid var(--line-2); }
.paper .ln .tag { font-size: 7px; }
.paper .ln .bar2 { height: 4px; border-radius: 2px; background: var(--chip); flex: 1; }
.paper .ln .bar2.s { flex: .5; }
.paper .foot { position: absolute; bottom: 10px; left: 14px; right: 14px; display: flex; justify-content: space-between; color: var(--ink-3); font-size: 6.5px; }

/* Feature grid */
.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 18px; overflow: hidden; }
.cell { background: var(--card); padding: 28px 26px 30px; }
.cell .ic { width: 36px; height: 36px; border-radius: 10px; background: var(--chip); display: flex; align-items: center; justify-content: center; margin-bottom: 18px; }
.cell .ic svg { width: 18px; height: 18px; stroke: var(--ink); fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.cell h3 { margin-bottom: 8px; }
.cell p { color: var(--ink-2); font-size: 15px; }

/* Audiences */
.people { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.person { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 24px 22px; }
.person .who { font: 400 26px/1.1 var(--serif); margin-bottom: 12px; }
.person p { color: var(--ink-2); font-size: 15px; }
.person .sees { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line-2); font-size: 13px; color: var(--ink-2); }
.person .sees b { color: var(--ink); font-weight: 500; }

/* Job site band */
.dark-band { background: var(--ink); color: var(--canvas); border-radius: 28px; padding: 72px 64px; display: grid; grid-template-columns: 1.1fr 1fr; gap: 64px; align-items: center; }
.dark-band .eyebrow { color: #a39e96; }
.dark-band p.l { color: #c9c4bb; font-size: 18px; margin-top: 18px; }
.dark-band ul { list-style: none; padding: 0; margin: 28px 0 0; }
.dark-band li { padding: 12px 0; border-top: 1px solid #3a3834; color: #e7e3dc; font-size: 15.5px; }
.dark-band li b { color: #fff; font-weight: 600; }
.phone { width: 250px; margin: 0 auto; background: #0e0e0d; border-radius: 38px; padding: 12px; box-shadow: 0 40px 80px -30px rgba(0,0,0,.6); }
.phone .scr { background: var(--canvas); color: var(--ink); border-radius: 28px; overflow: hidden; font-size: 11.5px; min-height: 470px; }
.phone .sb { height: 26px; }
.phone .ph-h { padding: 4px 16px 12px; border-bottom: 1px solid var(--line); }
.phone .ph-h small { color: var(--ink-3); font-size: 10px; }
.phone .ph-h b { font: 400 20px/1.1 var(--serif); display: block; margin-top: 2px; }
.phone .ph-it { padding: 14px 16px; }
.phone .ph-it .pic { height: 120px; border-radius: 12px; margin-bottom: 12px; }
.phone .ph-it .kv { grid-template-columns: 70px 1fr; font-size: 11px; }
.phone .ph-it .ttl { font-weight: 600; font-size: 14px; margin: 4px 0 10px; }
.phone .ph-it .dl { margin-top: 14px; border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; display: flex; justify-content: space-between; background: var(--card); }

/* CTA + footer */
.cta { text-align: center; }
.cta h2 { max-width: 760px; margin: 0 auto; }
.cta p { color: var(--ink-2); font-size: 18px; margin: 18px auto 0; max-width: 560px; }
.cta .ctas { margin-top: 32px; display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
footer { border-top: 1px solid var(--line); padding: 36px 0 48px; color: var(--ink-2); font-size: 14px; }
footer .wrap { display: flex; gap: 24px; align-items: center; flex-wrap: wrap; }
footer .brand span { font-size: 22px; color: var(--ink); }
footer .brand img { width: 22px; height: 22px; }
footer nav { display: flex; gap: 20px; margin-left: auto; }
footer nav a { text-decoration: none; }
footer nav a:hover { color: var(--ink); }

/* Reveal on scroll (only when JS is running) */
.js .reveal { opacity: 0; transform: translateY(14px); transition: opacity .6s ease, transform .6s ease; }
.js .reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .qa .box .caret { animation: none; }
}

/* Responsive */
@media (max-width: 1000px) {
  .nav { display: none; }
  .steps { grid-template-columns: 1fr 1fr; }
  .step { padding-bottom: 26px; }
  .feature, .feature.flip { grid-template-columns: 1fr; gap: 36px; }
  .feature.flip .copy { order: 0; }
  .grid { grid-template-columns: 1fr 1fr; }
  .people { grid-template-columns: 1fr 1fr; }
  .dark-band { grid-template-columns: 1fr; padding: 56px 32px; }
}
@media (max-width: 640px) {
  section { padding: 80px 0; }
  .wrap { padding: 0 18px; }
  .top .beta { display: none; }
  .hero { padding-top: 56px; }
  .problem, .steps, .grid, .people { grid-template-columns: 1fr; }
  .rooms, .opts { grid-template-columns: 1fr; }
  .opts .opt:nth-child(3) { display: none; }
  .share { grid-template-columns: 1fr; }
  .share .left { border-right: 0; border-bottom: 1px solid var(--line); }
  .hide-sm { display: none; }
  .app-head .tabs { display: none; }
  .app-title .acts .mini-btn:not(.dark) { display: none; }
  .found { grid-template-columns: 1fr; }
  .found .pic { max-width: 140px; }
  .dark-band { border-radius: 20px; padding: 44px 22px; }
  footer nav { margin-left: 0; }
}