/* Quotem site previews. The October 2026 look (Quotem design system): near-white dotted ground, white cards with a real edge,
   Sora Bold titles, Manrope text, green for the one action, deep green for the one key moment, gold only for progress and the wow.
   The real site is light only, so this commits to one look and sets every colour explicitly. */
:root{
  --canvas:#F6F5F0; --dot:rgba(26,22,19,.13); --white:#FFFFFF; --ink:#1A1613; --text2:#3F3A33; --quiet:#5A5248;
  --edge:#E3E0D8; --field-edge:#CFCAC0; --green:#2E4636; --green-hover:#EEF3EE; --sage:#E4EAE3; --deep:#14251C; --stage-muted:#A8B8AD;
  --gold:#E1B84B; --gold-tint:#FBF0D6; --gold-ink:#5C430B; --clay:#A9461F; --clay-tint:#F6E3DA; --clay-ink:#8A3A1E;
  --wait-tint:#F1F0EB; --kind-clip:#E3E9EF; --kind-clip-ink:#24384A; --kind-article:#EFE9DD; --kind-article-ink:#4A4033;
  --lift:0 1px 2px rgba(26,22,19,.05),0 10px 28px -20px rgba(20,37,28,.28);
  --lift-hover:0 2px 4px rgba(26,22,19,.05),0 24px 48px -24px rgba(20,37,28,.28);
  --display:Sora,"Avenir Next","Segoe UI",system-ui,sans-serif; --body:Manrope,"Helvetica Neue",Arial,system-ui,sans-serif;
  --r-control:12px; --r-card:16px; --r-panel:20px;
  color-scheme:light;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background-color:var(--canvas);background-image:radial-gradient(var(--dot) 1px,transparent 1.2px);background-size:22px 22px;color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:30;background:var(--white)}
img{max-width:100%;display:block}
a{color:var(--green)}
:focus-visible{outline:2px solid var(--green);outline-offset:3px;border-radius:4px}
h1,h2,h3,h4{font-family:var(--display);font-weight:700;margin:0;text-wrap:balance;color:var(--ink)}
.hero-title{font-size:clamp(40px,6.4vw,76px);line-height:1.02;letter-spacing:-.035em}
h1.page{font-size:clamp(34px,4.6vw,52px);line-height:1.06;letter-spacing:-.035em}
h2{font-size:clamp(28px,3.4vw,40px);line-height:1.08;letter-spacing:-.035em}
h3{font-size:clamp(20px,2vw,26px);line-height:1.15;letter-spacing:-.02em}
h4{font-size:19px;line-height:1.3;letter-spacing:-.01em}
p{margin:0}
.lead{font-size:19px;line-height:1.5;color:var(--text2);max-width:60ch}
.small{font-size:14px;line-height:1.45}
.quiet{color:var(--quiet)}
.label{font-size:13px;font-weight:600;line-height:1.3;color:var(--green)}
.mark{background:linear-gradient(transparent 58%,var(--gold-tint) 58%,var(--gold-tint) 94%,transparent 94%);padding:0 .06em}
.wrap{max-width:1200px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.wrap.narrow{max-width:900px}

/* header */
.site-head{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:rgba(255,255,255,.92);backdrop-filter:saturate(1.2) blur(8px);border-bottom:1px solid var(--edge)}
.site-head .wrap{display:flex;align-items:center;gap:28px;padding-block:14px}
.logo img{height:30px;width:auto}
.site-nav{display:flex;gap:4px;flex-wrap:wrap}
.site-nav a{color:var(--text2);text-decoration:none;font-weight:500;font-size:15px;padding:8px 10px;border-radius:10px}
.site-nav a:hover{background:var(--green-hover);color:var(--green)}
.site-nav a[aria-current="page"]{color:var(--ink);font-weight:700}
.head-cta{margin-left:auto;display:flex;align-items:center;gap:14px}
.head-cta .signin{color:var(--ink);text-decoration:none;font-weight:600;font-size:15px}
.menu-btn{display:none}
@media (max-width:960px){
  .site-nav{display:none;position:absolute;left:0;right:0;top:100%;background:var(--white);border-bottom:1px solid var(--edge);padding:8px max(16px,env(safe-area-inset-left,0px)) 14px;flex-direction:column}
  .site-nav.open{display:flex}
  .menu-btn{display:inline-flex}
  .head-cta .signin{display:none}
}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:0 20px;border-radius:var(--r-control);font:600 16px var(--body);text-decoration:none;cursor:pointer;border:1px solid transparent;transition:background .15s,transform .1s,box-shadow .15s}
.btn:active{transform:scale(.98)}
.btn-primary{background:var(--green);color:#fff}
.btn-primary:hover{background:var(--deep)}
.btn-outline{background:var(--white);color:var(--ink);border-color:var(--field-edge)}
.btn-outline:hover{background:var(--green-hover);color:var(--green);border-color:var(--green)}
.btn-quiet{background:transparent;color:var(--ink);padding:0 6px}
.btn-quiet:hover{color:var(--green)}
.btn-sm{min-height:38px;padding:0 14px;font-size:14px}
.on-deep .btn-primary{background:var(--canvas);color:var(--deep)}
.on-deep .btn-primary:hover{background:#fff}

/* sections */
section{padding-block:clamp(48px,7vw,88px)}
.sec-head{display:grid;gap:14px;margin-bottom:32px;max-width:760px}
.sec-split{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:24px 48px;align-items:end;margin-bottom:32px}
@media (max-width:820px){.sec-split{grid-template-columns:minmax(0,1fr)}}
.rule{border:0;border-top:1px solid var(--edge);margin:0}

/* cards */
.card{background:var(--white);border:1px solid var(--edge);border-radius:var(--r-card);box-shadow:var(--lift);padding:24px;display:grid;gap:12px;align-content:start;min-width:0}
a.card{text-decoration:none;color:inherit;transition:transform .15s,box-shadow .15s}
a.card:hover{transform:translateY(-2px);box-shadow:var(--lift-hover)}
.grid{display:grid;gap:16px}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:980px){.g4{grid-template-columns:repeat(2,minmax(0,1fr))}.g3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.g2,.g3,.g4{grid-template-columns:minmax(0,1fr)}}
.deep{background-color:var(--deep);background-image:radial-gradient(rgba(246,245,240,.11) 1px,transparent 1.2px);background-size:22px 22px;color:var(--canvas);border-radius:var(--r-panel);border:0}
.deep h1,.deep h2,.deep h3,.deep h4{color:var(--canvas)}
.deep .quiet,.deep .lead{color:var(--stage-muted)}
.deep .label{color:var(--gold)}
.chip{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;padding:4px 12px;border-radius:999px;background:var(--sage);color:var(--green);white-space:nowrap}
.chip.gold{background:var(--gold-tint);color:var(--gold-ink)}
.chip.clip{background:var(--kind-clip);color:var(--kind-clip-ink)}
.chip.article{background:var(--kind-article);color:var(--kind-article-ink)}
.chip.email{background:var(--wait-tint);color:var(--text2)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.ticks{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.ticks li{display:grid;grid-template-columns:22px minmax(0,1fr);gap:10px;align-items:start}
.ticks li::before{content:"";width:18px;height:18px;margin-top:3px;border-radius:6px;background:var(--sage) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-6.5' fill='none' stroke='%232E4636' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px no-repeat}
.deep .ticks li::before{background-color:rgba(246,245,240,.12);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-6.5' fill='none' stroke='%23E1B84B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.trust-strip{display:flex;flex-wrap:wrap;gap:10px 28px;padding-top:20px;border-top:1px solid var(--edge);font-size:15px;color:var(--text2)}
.trust-strip span{display:inline-flex;align-items:center;gap:8px}
.trust-strip span::before{content:"";width:7px;height:7px;border-radius:2px;background:var(--gold)}

/* hero */
.hero{padding-block:clamp(40px,6vw,80px) clamp(32px,5vw,56px)}
.hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:32px 48px;align-items:center;margin-top:28px}
@media (max-width:900px){.hero-grid{grid-template-columns:minmax(0,1fr)}}
.cta-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.flow{padding:28px;display:grid;grid-template-columns:auto auto auto auto auto;gap:14px;align-items:center;justify-content:space-between}
.flow .step{display:grid;justify-items:center;gap:12px;text-align:center}
.flow .step b{font-family:var(--display);font-size:17px;font-weight:600}
.flow .arrow{color:var(--gold);font-size:20px}
.mic{width:96px;height:96px;border-radius:50%;background:rgba(246,245,240,.06);display:grid;place-items:center}
.bars{display:flex;gap:4px;align-items:center;height:34px}
.bars i{width:4px;border-radius:2px;background:var(--gold)}
.outs{display:grid;grid-template-columns:repeat(2,auto);gap:8px}
.outs span{font-size:13px;font-weight:600;padding:7px 12px;border-radius:9px;background:var(--canvas);color:var(--deep)}
.outs span.g{background:var(--gold);color:var(--deep)}
.approved{display:inline-flex;align-items:center;gap:8px;border:1.5px solid var(--gold);color:var(--gold);border-radius:12px;padding:10px 14px;font-weight:700;font-size:14px;letter-spacing:.02em}
@media (max-width:560px){.flow{grid-template-columns:minmax(0,1fr);justify-items:center}.flow .arrow{transform:rotate(90deg)}}

/* doors */
.door{padding:28px;gap:16px}
.door .who{display:flex;align-items:center;gap:12px}
.avatars{display:flex}
.avatars span{width:36px;height:36px;border-radius:50%;border:2px solid var(--white);margin-left:-8px;display:grid;place-items:center;font-size:12px;font-weight:700;color:var(--deep)}
.avatars span:first-child{margin-left:0}
.price-line{display:flex;align-items:baseline;gap:8px}
.figure{font-family:var(--display);font-size:34px;font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums}

/* tables */
.tbox{background:var(--white);border:1px solid var(--edge);border-radius:var(--r-card);box-shadow:var(--lift);overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:15px}
th,td{text-align:left;padding:14px 18px;border-bottom:1px solid var(--edge);vertical-align:top}
thead th{font-size:13px;font-weight:600;color:var(--quiet);border-bottom:2px solid var(--green);background:var(--white)}
thead th.us{color:var(--green)}
tbody tr.group th{background:var(--canvas);font-family:var(--display);font-size:14px;font-weight:600;color:var(--ink);padding-block:10px}
td.us{background:#FAFBF8;font-weight:600;color:var(--ink)}
td .no{color:var(--quiet);font-weight:500}
tr:last-child td{border-bottom:0}
.tick-y{display:inline-flex;align-items:center;gap:8px}
.tick-y::before{content:"";width:16px;height:16px;flex:0 0 16px;border-radius:5px;background:var(--sage) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-6.5' fill='none' stroke='%232E4636' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat}

/* steps */
.steps{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;counter-reset:s}
@media (max-width:900px){.steps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.steps{grid-template-columns:minmax(0,1fr)}}
.step-card{padding:20px;gap:8px;border-top:3px solid var(--edge)}
.step-card.expert{border-top-color:var(--gold)}
.step-card .who{font-size:13px;font-weight:600;color:var(--quiet)}
.step-card.expert .who{color:var(--gold-ink)}

/* trace demo */
.trace{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:0;overflow:hidden;padding:0}
@media (max-width:820px){.trace{grid-template-columns:minmax(0,1fr)}}
.trace-copy{padding:28px;display:grid;gap:14px;align-content:start}
.trace-copy .post-head{display:flex;gap:12px;align-items:center}
.trace-copy .post-head img{width:44px;height:44px;border-radius:50%}
.sent{border-radius:6px;padding:1px 2px;cursor:pointer;transition:background .15s;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.sent:hover,.sent.on,.sent:focus-visible{background:var(--gold-tint)}
.trace-src{background:var(--deep);color:var(--canvas);padding:28px;display:grid;gap:16px;align-content:start;background-image:radial-gradient(rgba(246,245,240,.11) 1px,transparent 1.2px);background-size:22px 22px}
.wave{display:flex;gap:3px;align-items:center;height:56px}
.wave i{flex:1;border-radius:2px;background:rgba(246,245,240,.25);transition:background .15s}
.wave i.hit{background:var(--gold)}
.timeline{display:flex;justify-content:space-between;font-size:13px;color:var(--stage-muted);font-variant-numeric:tabular-nums}
.stamp{font-family:var(--display);font-size:28px;font-weight:700;color:var(--gold);font-variant-numeric:tabular-nums}
.said{font-size:15px;color:var(--canvas);min-height:3em}

/* faq */
details.faq{background:var(--white);border:1px solid var(--edge);border-radius:var(--r-control)}
details.faq+details.faq{margin-top:10px}
details.faq summary{cursor:pointer;list-style:none;padding:16px 20px;font-family:var(--display);font-weight:600;font-size:17px;display:flex;justify-content:space-between;gap:16px}
details.faq summary::-webkit-details-marker{display:none}
details.faq summary::after{content:"+";font-weight:400;color:var(--green)}
details.faq[open] summary::after{content:"–"}
details.faq p{padding:0 20px 18px;color:var(--text2);max-width:70ch}

/* final cta */
.final{padding:clamp(32px,5vw,56px);display:grid;grid-template-columns:minmax(0,1.3fr) auto;gap:24px;align-items:center}
@media (max-width:760px){.final{grid-template-columns:minmax(0,1fr)}}

/* footer */
.site-foot{border-top:1px solid var(--edge);background:var(--white);padding-block:40px 32px;margin-top:24px}
.foot-grid{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr));gap:24px}
@media (max-width:760px){.foot-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.foot-grid h4{font-family:var(--body);font-size:13px;font-weight:600;color:var(--quiet);margin-bottom:10px}
.foot-grid ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.foot-grid a{color:var(--text2);text-decoration:none;font-size:15px}
.foot-grid a:hover{color:var(--green)}

/* preview notes for James */
.note{display:block;margin:14px 0 0;border:1.5px dashed var(--clay);background:var(--clay-tint);color:var(--clay-ink);border-radius:var(--r-control);padding:10px 14px;font-size:14px;line-height:1.45;max-width:70ch}
.note b{font-weight:700}
.note::before{content:"Note for James · ";font-weight:700}
body.hide-notes .note{display:none}
.notes-toggle{position:fixed;right:max(16px,calc(env(safe-area-inset-right,0px) + 16px));bottom:max(16px,calc(env(safe-area-inset-bottom,0px) + 16px));z-index:40;background:var(--ink);color:var(--canvas);border:0;border-radius:999px;padding:10px 16px;font:600 14px var(--body);cursor:pointer;box-shadow:var(--lift-hover)}
.preview-bar{background:var(--deep);color:var(--canvas);font-size:14px}
.preview-bar .wrap{display:flex;flex-wrap:wrap;gap:6px 18px;align-items:center;padding-block:9px}
.preview-bar a{color:var(--gold);font-weight:600;text-decoration:none}
.preview-bar a:hover{text-decoration:underline}
.placeholder{border:1.5px dashed var(--field-edge);background:var(--white);border-radius:var(--r-card);padding:24px;display:grid;gap:8px;align-content:center;color:var(--quiet)}

/* forms (tool) */
.field{display:grid;gap:6px}
.field label{font-size:13px;font-weight:600;color:var(--ink)}
.field input,.field select{font:500 16px var(--body);color:var(--ink);background:var(--white);border:1px solid var(--field-edge);border-radius:var(--r-control);min-height:46px;padding:0 14px;width:100%}
.field input:focus,.field select:focus{border-color:var(--green);outline:2px solid var(--sage)}
.seg{display:flex;flex-wrap:wrap;gap:8px}
.seg button{font:600 14px var(--body);color:var(--text2);background:var(--white);border:1px solid var(--field-edge);border-radius:999px;padding:8px 14px;cursor:pointer;min-height:40px}
.seg button[aria-pressed="true"]{background:var(--sage);border-color:var(--green);color:var(--green)}
ol.qs{margin:0;padding:0;list-style:none;display:grid;gap:10px;counter-reset:q}
ol.qs li{counter-increment:q;display:grid;grid-template-columns:34px minmax(0,1fr) auto;gap:12px;align-items:start;background:var(--white);border:1px solid var(--edge);border-radius:var(--r-control);padding:14px 16px}
ol.qs li::before{content:counter(q);font-family:var(--display);font-weight:700;color:var(--green);font-size:18px}
ol.qs li.picked{border-color:var(--green);background:#FAFBF8}
.pixels{display:inline-grid;grid-template-columns:repeat(3,8px);gap:3px}
.pixels i{width:8px;height:8px;border-radius:2px;background:var(--edge)}
.pixels i.on{background:var(--gold)}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;scroll-behavior:auto!important}}

/* two-column blocks that stack on small screens */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr)}
.split-even{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.row-card{display:grid;grid-template-columns:minmax(0,1fr) auto}
@media (max-width:820px){.split,.split-even{grid-template-columns:minmax(0,1fr)}}
@media (max-width:640px){.row-card{grid-template-columns:minmax(0,1fr)}.row-card .btn{justify-self:start}}
.head-cta .menu-btn{display:none}
@media (max-width:960px){.head-cta .menu-btn{display:inline-flex}}
.trace-src .label{color:var(--gold)}

/* ===== v2 (2 Nov): applied impeccable + taste-skill rules inside the October look ===== */
::selection{background:var(--gold-tint);color:var(--ink)}
html{scrollbar-color:var(--field-edge) var(--canvas);caret-color:var(--green)}
a{text-underline-offset:3px;text-decoration-thickness:1.5px}
section{padding-block:clamp(64px,9vw,128px)}
section + section{padding-top:0}
.hero{padding-block:clamp(40px,6vw,88px) clamp(40px,6vw,72px)}
.hero-title{font-size:clamp(42px,6.8vw,84px)}
.ico{width:1.05em;height:1.05em;flex:0 0 auto;vertical-align:-.15em}
.sub{font-size:19px;line-height:1.5;color:var(--text2);max-width:58ch}
.h-stack{display:grid;gap:16px;margin-bottom:clamp(28px,4vw,44px);max-width:780px}
.h-row{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:20px 56px;align-items:end;margin-bottom:clamp(28px,4vw,44px)}
@media (max-width:860px){.h-row{grid-template-columns:minmax(0,1fr)}}

/* hero flow: one authored moment */
.flow .outs span{opacity:1}
@media (prefers-reduced-motion:no-preference){
  .flow .bars i{animation:talk 1.1s ease-in-out infinite alternate}
  .flow .bars i:nth-child(2n){animation-delay:-.4s}.flow .bars i:nth-child(3n){animation-delay:-.7s}
  .flow .outs span{animation:arrive 6s cubic-bezier(.16,1,.3,1) infinite}
  .flow .outs span:nth-child(2){animation-delay:.25s}.flow .outs span:nth-child(3){animation-delay:.5s}.flow .outs span:nth-child(4){animation-delay:.75s}
  .flow .approved{animation:stamp 6s cubic-bezier(.16,1,.3,1) infinite}
}
@keyframes talk{from{transform:scaleY(.45)}to{transform:scaleY(1)}}
@keyframes arrive{0%,8%{opacity:.25;transform:translateY(6px)}18%,100%{opacity:1;transform:none}}
@keyframes stamp{0%,30%{box-shadow:0 0 0 0 rgba(225,184,75,0)}38%{box-shadow:0 0 0 8px rgba(225,184,75,.25)}50%,100%{box-shadow:0 0 0 0 rgba(225,184,75,0)}}

/* just talk demo */
.talk{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0;padding:0;overflow:hidden}
@media (max-width:860px){.talk{grid-template-columns:minmax(0,1fr)}}
.talk-raw{padding:clamp(22px,3vw,32px);display:grid;gap:16px;align-content:start;background:var(--wait-tint)}
.talk-made{padding:clamp(22px,3vw,32px);display:grid;gap:14px;align-content:start;background:var(--white)}
.talk-head{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.talk-head b{font-family:var(--display);font-size:15px}
.transcript{font-size:17px;line-height:1.75;color:var(--ink)}
.transcript .um{color:var(--quiet);text-decoration:line-through;text-decoration-color:rgba(169,70,31,.55);text-decoration-thickness:1.5px;transition:opacity .3s,font-size .3s}
.talk.clean .transcript .um{opacity:0;font-size:0}
.transcript .keep{transition:background .3s}
.talk.clean .transcript .keep{background:var(--gold-tint);border-radius:4px}
.toggle{display:inline-flex;background:var(--white);border:1px solid var(--field-edge);border-radius:999px;padding:3px}
.toggle button{font:600 14px var(--body);border:0;background:transparent;color:var(--text2);border-radius:999px;padding:7px 14px;cursor:pointer;min-height:36px}
.toggle button[aria-pressed="true"]{background:var(--green);color:#fff}
.tags{display:flex;flex-wrap:wrap;gap:8px}
.reassure{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:28px}
@media (max-width:760px){.reassure{grid-template-columns:minmax(0,1fr)}}
.reassure p{font-size:16px;color:var(--text2)}
.reassure b{display:block;font-family:var(--display);font-size:18px;color:var(--ink);margin-bottom:4px}

/* outputs collage */
.outputs{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-auto-rows:minmax(0,auto);gap:16px}
.o{border-radius:var(--r-card);overflow:hidden;min-width:0}
.o-clip{grid-column:span 4;grid-row:span 2;position:relative;background:var(--deep)}
.o-clip video,.o-clip img{width:100%;height:100%;object-fit:cover;aspect-ratio:9/14}
.o-clip .cap{position:absolute;left:0;right:0;bottom:0;padding:18px;background:linear-gradient(transparent,rgba(20,37,28,.85));color:var(--canvas)}
.o-posts{grid-column:span 8;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px}
.o-post{background:var(--white);border:1px solid var(--edge);border-radius:var(--r-card);box-shadow:var(--lift);padding:20px;display:grid;gap:10px;align-content:start}
.o-post .who{display:flex;gap:10px;align-items:center}
.o-post .who img,.o-post .who .q{width:38px;height:38px;border-radius:50%}
.o-post .who .q{background:var(--deep);display:grid;place-items:center;border-radius:10px}
.o-post .who .q img{width:26px;height:auto;border-radius:0}
.o-post p{font-size:15px;line-height:1.55}
.o-post .kind{font-family:var(--display);font-size:15px;font-weight:600;margin-top:6px}
.o-article{grid-column:span 5;background:var(--white);border:1px solid var(--edge);box-shadow:var(--lift);padding:20px;display:grid;gap:8px;align-content:start}
.o-article .url{font-size:13px;color:var(--quiet)}
.o-article h3.serp,.o-article h4{color:#1a0dab;font-family:var(--body);font-weight:600;font-size:18px;letter-spacing:0}
.o-carousel{grid-column:span 3;background:var(--gold-tint);padding:16px;display:grid;align-content:center}
.o-carousel .stack{position:relative;height:170px}
.o-carousel .stack img{position:absolute;width:62%;border-radius:10px;box-shadow:var(--lift)}
.o-carousel .stack img:nth-child(1){left:2%;top:18px;transform:rotate(-7deg)}
.o-carousel .stack img:nth-child(2){left:20%;top:6px;transform:rotate(-1deg)}
.o-carousel .stack img:nth-child(3){left:36%;top:14px;transform:rotate(6deg)}
@media (max-width:980px){.o-clip{grid-column:span 12;grid-row:auto}.o-clip video,.o-clip img{aspect-ratio:4/5}.o-posts{grid-column:span 12}.o-article{grid-column:span 7}.o-carousel{grid-column:span 5}}
@media (max-width:640px){.o-posts{grid-template-columns:minmax(0,1fr)}.o-article,.o-carousel{grid-column:span 12}}
.o-email{grid-column:span 12;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);gap:24px;background:var(--white);border:1px solid var(--edge);box-shadow:var(--lift);padding:20px}
@media (max-width:760px){.o-email{grid-template-columns:minmax(0,1fr)}}
.o-email .meta{font-size:14px;color:var(--quiet);display:grid;gap:4px}
.merge{background:var(--sage);color:var(--green);border-radius:6px;padding:0 5px;font-weight:600}

/* how it works tabs */
.stepper{display:grid;gap:18px}
.tablist{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
@media (max-width:760px){.tablist{grid-template-columns:repeat(5,minmax(120px,1fr));overflow-x:auto;padding-bottom:6px}}
.tab{font:inherit;text-align:left;background:transparent;border:0;border-top:3px solid var(--edge);padding:14px 4px 6px;cursor:pointer;color:var(--quiet);display:grid;gap:2px}
.tab b{font-family:var(--display);font-size:18px;color:var(--text2);font-weight:600}
.tab span{font-size:14px}
.tab[aria-selected="true"]{border-top-color:var(--gold)}
.tab[aria-selected="true"] b{color:var(--ink);font-weight:700}
.tab .by{font-size:12px;font-weight:600;color:var(--green)}
.tab.you .by{color:var(--gold-ink)}
.panel{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);border-radius:var(--r-panel);overflow:hidden;border:1px solid var(--edge);box-shadow:var(--lift);background:var(--white)}
.panel[hidden]{display:none}
@media (max-width:860px){.panel{grid-template-columns:minmax(0,1fr)}}
.panel-copy{padding:clamp(24px,4vw,44px);display:grid;gap:14px;align-content:center}
.panel-copy .by{display:inline-flex;gap:8px;align-items:center;font-size:14px;color:var(--quiet)}
.panel-stage{background:var(--sage);padding:clamp(20px,3vw,40px);display:grid;place-items:center}
.panel-stage.gold{background:var(--gold-tint)}
.panel-stage.deep{border-radius:0}
.ui{background:var(--white);border:1px solid var(--edge);border-radius:var(--r-card);box-shadow:var(--lift-hover);width:100%;max-width:520px;overflow:hidden}
.ui-bar{display:flex;align-items:center;gap:8px;padding:12px 16px;border-bottom:1px solid var(--edge);font-size:14px}
.ui-bar i{width:9px;height:9px;border-radius:50%;background:var(--edge);display:inline-block}
.ui-body{padding:16px;display:grid;gap:10px}
.ui-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:center;border:1px solid var(--edge);border-radius:12px;padding:12px 14px}
.ui-row b{font-size:15px}
.ui-row .small{color:var(--quiet)}
.ui .opt{display:flex;flex-wrap:wrap;gap:6px}
.ui .opt span{font-size:13px;font-weight:600;border:1px solid var(--field-edge);border-radius:999px;padding:4px 10px;color:var(--text2)}
.ui .opt span.on{background:var(--sage);border-color:var(--green);color:var(--green)}
.phone{width:min(100%,290px);background:var(--deep);border-radius:34px;padding:12px;box-shadow:var(--lift-hover)}
.phone-in{background:var(--canvas);border-radius:24px;padding:22px 18px;display:grid;gap:14px;min-height:430px;align-content:start}
.rec{width:74px;height:74px;border-radius:50%;background:var(--clay);display:grid;place-items:center;margin:8px auto 0;box-shadow:0 0 0 8px var(--clay-tint)}
.rec span{width:22px;height:22px;border-radius:5px;background:#fff}
.cal{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
.cal div{border:1px solid var(--edge);border-radius:10px;padding:8px;min-height:86px;display:grid;gap:6px;align-content:start;font-size:12px;color:var(--quiet)}
.cal div b{font-size:12px;color:var(--ink)}
.cal .p{border-radius:6px;padding:4px 6px;font-size:11px;font-weight:600;color:var(--green);background:var(--sage)}
.cal .p.g{background:var(--gold-tint);color:var(--gold-ink)}
.cal .p.c{background:var(--kind-clip);color:var(--kind-clip-ink)}

/* principles: a list, not cards */
.principles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 48px;margin-top:28px}
@media (max-width:760px){.principles{grid-template-columns:minmax(0,1fr)}}
.principles div{display:grid;grid-template-columns:28px minmax(0,1fr);gap:12px}
.principles svg{color:var(--green);margin-top:3px}
.principles b{font-family:var(--display);font-size:18px;display:block;margin-bottom:2px}
.principles p{color:var(--text2)}

/* plans */
.plans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
@media (max-width:900px){.plans{grid-template-columns:minmax(0,1fr)}}
.plan{background:var(--white);border:1px solid var(--edge);border-radius:var(--r-card);box-shadow:var(--lift);padding:26px;display:grid;gap:14px;align-content:start}
.plan.hero-plan{border:2px solid var(--green)}
.plan .who{font-family:var(--display);font-size:22px;font-weight:700;letter-spacing:-.02em}
.plan ul{list-style:none;margin:0;padding:0;display:grid;gap:8px;font-size:15px;color:var(--text2)}
.plan ul li{display:flex;gap:10px;align-items:flex-start}
.plan ul svg{color:var(--green);margin-top:3px}
.plan-name{font-size:14px;font-weight:600;color:var(--green)}

/* footer close */
.close-name{font-family:var(--display);font-weight:700;letter-spacing:-.05em;line-height:.85;font-size:clamp(84px,21vw,300px);color:var(--deep);margin:24px 0 -6px;white-space:nowrap;overflow:hidden}
.foot-bottom{display:flex;flex-wrap:wrap;gap:8px 24px;justify-content:space-between;font-size:14px;color:var(--quiet);border-top:1px solid var(--edge);padding-top:18px;margin-top:8px}

/* compare page */
.picker{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.picker select{font:600 17px var(--body);color:var(--ink);background:var(--white);border:1px solid var(--field-edge);border-radius:var(--r-control);min-height:50px;padding:0 44px 0 16px;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='%232E4636' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;background-size:16px}
.cmp-block{display:grid;gap:18px}
.verdict-box{background:var(--white);border:1px solid var(--edge);border-radius:var(--r-card);padding:20px 24px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px 32px}
@media (max-width:760px){.verdict-box{grid-template-columns:minmax(0,1fr)}}
.verdict-box b{font-family:var(--display);font-size:17px;display:block;margin-bottom:4px}
pre.md{white-space:pre-wrap;word-break:break-word;font:13px/1.55 ui-monospace,SFMono-Regular,Menlo,monospace;background:var(--white);border:1px solid var(--edge);border-radius:var(--r-control);padding:18px;max-height:420px;overflow:auto;margin:0}

.made-post{display:grid;gap:10px}
.made-post .who{display:flex;gap:10px;align-items:center}
.made-post .who img{width:38px;height:38px;border-radius:50%}
.made-post p{font-size:16px;line-height:1.6}
.phone-in b{line-height:1.3!important}

[id]{scroll-margin-top:88px}

/* compare v3: at-a-glance grid */
table.mx td,table.mx th{padding:11px 18px;vertical-align:middle}
table.mx td.c,table.mx th.c{text-align:center;width:28%}
table.mx tbody tr:hover td{background:#FBFAF7}
table.mx tr.price td{font-size:14px;color:var(--text2)}
.mk{width:22px;height:22px;flex:0 0 22px}
.mk-cell{display:inline-flex;flex-direction:column;align-items:center;gap:3px}
.mk-note{font-size:12px;line-height:1.3;color:var(--quiet);max-width:22ch}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.legend-row{display:flex;flex-wrap:wrap;gap:8px 20px;font-size:14px;color:var(--text2)}
.legend-row span{display:inline-flex;align-items:center;gap:8px}
.ai-copy{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center;background:var(--white);border:1px solid var(--edge);border-radius:var(--r-control);padding:12px 16px}
.ai-copy .ai-details{flex-basis:100%}
.ai-copy .ai-details summary{cursor:pointer;color:var(--green);font-weight:600}
.ai-copy pre.md{max-height:260px;margin-top:10px}
.panel-stage .a-win,.panel-stage .a-card{max-width:560px}
.panel-stage .a-phone{max-width:260px}

[hidden]{display:none!important}

/* ===== round four (1 Nov): mobile and tablet, ripple ground, kind colours, icons ===== */
/* one extra accent: the app's blue-grey (clips), used alongside sage, gold and sand as the product-type colour coding */
:root{--slate:#24384A;--slate-tint:#E3E9EF}
.k-post{background:var(--sage);color:var(--deep)}
.k-article{background:var(--kind-article);color:var(--kind-article-ink)}
.k-email{background:var(--wait-tint);color:var(--text2)}
.k-graphic{background:var(--gold-tint);color:var(--gold-ink)}
.k-clip{background:var(--slate-tint);color:var(--slate)}
svg.lucide{width:1.1em;height:1.1em;stroke-width:1.75;flex:0 0 auto}
.ic-badge{width:40px;height:40px;border-radius:12px;display:inline-grid;place-items:center;margin-bottom:12px}
.ic-badge svg.lucide{width:20px;height:20px}
.ic-badge.sm{width:32px;height:32px;border-radius:10px;margin:0}
.ic-badge.sm svg.lucide{width:17px;height:17px}
.h-ic{display:flex;align-items:center;gap:10px;margin-bottom:6px}
.reassure p .ic-badge{display:grid}
.plan-top{display:flex;align-items:center;gap:10px}
.plan-ic{width:38px;height:38px;border-radius:12px;display:grid;place-items:center}
.plan-ic svg.lucide{width:20px;height:20px}
.trust-strip.ic span::before{display:none}
.trust-strip.ic svg.lucide{color:var(--green);width:17px;height:17px}

/* hero flow: kind-coloured outputs, and it stays one compact row at every size */
.outs{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;max-width:210px}
.outs span{display:inline-flex;align-items:center;gap:5px;background:var(--canvas)}
.outs span svg.lucide{width:13px;height:13px}
.outs span.k-post{background:var(--sage)}.outs span.k-article{background:var(--kind-article);color:var(--kind-article-ink)}
.outs span.k-email{background:#fff;color:var(--text2)}.outs span.k-graphic{background:var(--gold-tint);color:var(--gold-ink)}.outs span.k-clip{background:var(--slate-tint);color:var(--slate)}
@media (max-width:900px){.flow{padding:20px 24px;gap:12px}}
@media (max-width:560px){
  .flow{grid-template-columns:auto auto minmax(0,1fr) auto auto;justify-items:center;padding:16px 12px;gap:5px}
  .flow .arrow{transform:none;font-size:13px}
  .flow .step{gap:8px}
  .flow .step b{font-size:12px;white-space:nowrap}
  .mic{width:50px;height:50px}.bars{transform:scale(.6)}
  .outs{gap:4px;max-width:128px}.outs span{font-size:10.5px;padding:3px 6px;border-radius:6px}.outs span svg.lucide{display:none}
  .approved{font-size:11px;padding:6px 7px;gap:3px;border-radius:9px;letter-spacing:0}
}

/* preview bar: one swipeable row on phones */
@media (max-width:760px){.preview-bar .wrap{flex-wrap:nowrap;overflow-x:auto;white-space:nowrap;scrollbar-width:none;gap:16px}.preview-bar .wrap::-webkit-scrollbar{display:none}}

/* how it works: five compact tabs instead of a sideways scroll */
@media (max-width:760px){
  .tablist{grid-template-columns:repeat(5,minmax(0,1fr));overflow:visible;gap:6px;padding-bottom:0}
  .tab{padding:10px 0 4px}.tab span{display:none}.tab b{font-size:15px}
}

/* outputs collage on tablet and phone */
@media (max-width:980px){
  .o-clip{grid-column:span 5;grid-row:span 2}.o-clip video,.o-clip img{aspect-ratio:auto;height:100%}
  .o-posts{grid-column:span 7;grid-template-columns:minmax(0,1fr)}
  .o-article{grid-column:span 7}.o-carousel{grid-column:span 12}
}
@media (max-width:640px){
  .o-clip{grid-column:span 12;grid-row:auto}.o-clip video,.o-clip img{aspect-ratio:1/1;height:auto;object-position:50% 22%}
  .o-clip .cap{top:0;bottom:auto;background:linear-gradient(rgba(20,37,28,.85),transparent)}
  .o-posts,.o-article{grid-column:span 12}
}

/* general phone tightening */
@media (max-width:640px){
  .sub{font-size:17px}
  .hero-title{font-size:clamp(38px,11vw,52px)}
  .card,.plan{padding:20px}
  .panel-stage{padding:16px}
  .final{padding:24px}
  section{padding-block:56px}
  section + section{padding-top:0}
  .h-row,.h-stack{margin-bottom:24px}
  .trust-strip{gap:8px 18px;font-size:14px}
}
@media (min-width:641px) and (max-width:1024px){
  .h-row{gap:14px 32px}
}

/* the water ground: the app's ripple, under everything */
.water{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.water .lens{position:absolute;left:0;top:0;width:320px;height:320px;border-radius:50%;opacity:0;transition:opacity .5s;
  background-image:radial-gradient(rgb(46 70 54/60%) 1.6px,transparent 1.9px);background-size:22px 22px;
  -webkit-mask-image:radial-gradient(circle 160px at center,#000 0,rgba(0,0,0,.55) 45%,transparent 100%);mask-image:radial-gradient(circle 160px at center,#000 0,rgba(0,0,0,.55) 45%,transparent 100%)}
.water .lens.on{opacity:1}
.water .ring{position:absolute;width:260px;height:260px;margin:-130px 0 0 -130px;border-radius:50%;border:1px solid rgb(46 70 54/32%);animation:ring 1.6s cubic-bezier(.16,1,.3,1) forwards}
.water .ring.gold{border-color:rgb(225 184 75/55%)}
@keyframes ring{from{transform:scale(.15);opacity:1}to{transform:scale(1.25);opacity:0}}

/* graphics row: real renders from the new graphics engine */
.o-graphics{grid-column:span 12;background:var(--gold-tint);padding:clamp(16px,2.4vw,24px);display:grid;gap:16px}
.g-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:6px 20px}
.g-head b{font-family:var(--display);font-size:18px;display:inline-flex;gap:8px;align-items:center;color:var(--ink)}
.g-head b svg.lucide{color:var(--gold-ink)}
.g-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.g-row img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:10px;box-shadow:var(--lift)}
@media (min-width:981px){.o-article{grid-column:span 8}}
@media (max-width:640px){.g-row{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}}
@media (max-width:640px){.card.talk,.card.trace,.trace{padding:0}.o-clip .cap{background:linear-gradient(rgba(20,37,28,.92) 30%,transparent)}.o-clip .cap p{color:#DDE5DF!important}}

/* our approach */
.pillars{padding:clamp(22px,3vw,32px);display:grid;gap:20px}
.pillars>div{display:grid;grid-template-columns:40px minmax(0,1fr);gap:4px 14px;align-items:start}
.pillars .ic-badge{grid-row:span 2;margin:0}
.pillars b{font-family:var(--display);font-size:19px;color:var(--canvas)}
.pillars p{font-size:15px;color:var(--stage-muted)}
.th-ic{display:inline-flex;gap:8px;align-items:center}
.qa .card{gap:10px}.qa h3{font-size:19px}
.founder-row{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(20px,4vw,48px);align-items:center}
.founder-row img{border-radius:var(--r-card);width:100%;aspect-ratio:4/3;object-fit:cover}
@media (max-width:820px){.founder-row{grid-template-columns:minmax(0,1fr)}}
@media (min-width:641px){.g3{grid-template-columns:repeat(3,minmax(0,1fr))}}
.for-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;font-size:14px}
.for-row a{display:inline-flex;align-items:center;gap:7px;padding:6px 12px 6px 9px;border-radius:999px;background:var(--white);border:1px solid var(--edge);color:var(--ink);text-decoration:none;font-weight:600}
.for-row a:hover{border-color:var(--green);color:var(--green)}
.for-row a svg.lucide{color:var(--green);width:16px;height:16px}
.reassure b.h-ic{display:flex;margin-bottom:8px}
/* made-for row: one line on desktop */
@media (min-width:1200px){
  .for-row{flex-wrap:nowrap;white-space:nowrap;gap:6px;font-size:13px}
  .for-row a{padding:5px 10px 5px 8px;gap:6px}
  .for-row a svg.lucide{width:15px;height:15px}
}
@media (min-width:561px){.flow{grid-template-columns:auto auto minmax(0,190px) auto auto}.flow .outs{width:100%;max-width:190px}}
@media (max-width:1199px){.hero-grid.home-hero{grid-template-columns:minmax(0,1fr)}.home-hero .flow{max-width:760px}}

/* plan cards: sign-up button sits at the bottom */
.plans .plan{display:flex;flex-direction:column}
.plans .plan>.btn{margin-top:auto}
.plans .plan>ul{margin-bottom:6px}

/* sign-up page */
.su-steps{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px 22px;font-size:14px;font-weight:600;color:var(--quiet)}
.su-steps li{display:flex;align-items:center;gap:8px}
.su-steps span{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:var(--white);border:1px solid var(--edge);font-size:13px}
.su-steps li.on{color:var(--ink)}.su-steps li.on span{background:var(--green);border-color:var(--green);color:#fff}
.su-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.85fr);gap:clamp(20px,4vw,48px);align-items:start}
@media (max-width:860px){.su-grid{grid-template-columns:minmax(0,1fr)}}
.su-card{padding:clamp(20px,3vw,30px);gap:16px}
.su-plans{border:0;margin:0;padding:0;display:grid;gap:10px}
.su-plan{display:grid;grid-template-columns:38px minmax(0,1fr) auto;gap:12px;align-items:center;border:2px solid var(--edge);border-radius:14px;padding:12px 14px;cursor:pointer;transition:border-color .15s,background .15s}
.su-plan:hover{border-color:var(--field-edge)}
.su-plan:has(input:checked){border-color:var(--green);background:#FAFBF8}
.su-plan:has(input:focus-visible){outline:2px solid var(--green);outline-offset:2px}
.su-plan input{position:absolute;opacity:0;pointer-events:none}
.su-plan-txt{display:grid;gap:2px}.su-plan-txt b{font-family:var(--display);font-size:19px}
.su-price{text-align:right;display:grid}.su-price b{font-family:var(--display);font-size:22px}
@media (max-width:480px){.su-plan{grid-template-columns:38px minmax(0,1fr)}.su-price{grid-column:2;text-align:left;display:flex;gap:6px;align-items:baseline}}
.su-agree{display:flex;gap:10px;align-items:flex-start;border:1.5px solid var(--edge);border-radius:var(--r-control);padding:12px}
.su-agree input{width:18px;height:18px;margin-top:2px;accent-color:var(--green)}
.su-summary{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;background:var(--canvas);border-radius:var(--r-control);padding:12px 14px}
.su-stripe{border:1.5px dashed var(--field-edge);border-radius:var(--r-card);padding:28px 20px;display:grid;justify-items:center;text-align:center;gap:8px;background:var(--white)}
.su-stripe svg.lucide{width:24px;height:24px;color:var(--green)}
.btn-link{background:none;border:0;padding:0;color:var(--green);font:600 14px var(--body);cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.su-side{display:grid;gap:26px;padding-top:6px}
.su-next{list-style:none;margin:0;padding:0;display:grid;gap:14px;counter-reset:n}
.su-next li{counter-increment:n;display:grid;grid-template-columns:30px minmax(0,1fr);gap:2px 12px}
.su-next li::before{content:counter(n);grid-row:span 2;width:28px;height:28px;border-radius:50%;background:var(--sage);color:var(--green);display:grid;place-items:center;font:700 13px var(--display)}
.su-founder{display:flex;gap:12px;align-items:center;border-top:1px solid var(--edge);padding-top:18px}
.su-founder img{width:48px;height:48px;border-radius:50%;flex:0 0 48px}
.foot-bottom a{color:var(--quiet)}

/* blog */
.blog-cats{display:flex;flex-wrap:wrap;gap:8px}
.blog-cats a{display:inline-flex;gap:7px;align-items:center;padding:7px 14px 7px 11px;border-radius:999px;background:var(--white);border:1px solid var(--edge);color:var(--ink);text-decoration:none;font-weight:600;font-size:14px}
.blog-cats a:hover{border-color:var(--green);color:var(--green)}
.blog-cats svg.lucide{color:var(--green)}
.blog-feature{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);padding:0;overflow:hidden;gap:0}
@media (max-width:760px){.blog-feature{grid-template-columns:minmax(0,1fr)}}
.bf-art{border-radius:0;padding:clamp(24px,3vw,36px);display:grid;gap:14px;align-content:center;justify-items:start;min-height:240px}
.bf-quote{font-family:var(--display);font-weight:700;font-size:clamp(26px,3.2vw,40px);line-height:1.1;letter-spacing:-.03em;color:var(--canvas)}
.byline{display:flex;gap:10px;align-items:center}.byline img{width:32px;height:32px;border-radius:50%}
.prose .byline img{width:40px;height:40px}
.post-card{gap:10px;align-content:start;justify-items:start}
.post-card h3{font-size:20px}
.planned{font-weight:600;color:var(--quiet);border:1px dashed var(--field-edge);border-radius:999px;padding:2px 10px}
.chip svg.lucide{width:14px;height:14px}
.log{list-style:none;margin:0;padding:0;display:grid;gap:0;border-left:2px solid var(--edge);margin-left:6px}
.log li{display:grid;grid-template-columns:110px minmax(0,1fr);gap:8px 24px;padding:0 0 28px 24px;position:relative}
.log li::before{content:"";position:absolute;left:-7px;top:6px;width:12px;height:12px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 4px var(--canvas)}
.log time{font-weight:600;font-size:14px;color:var(--quiet);padding-top:2px}
.log li>div{display:grid;gap:8px;justify-items:start}.log h3{font-size:20px}
@media (max-width:560px){.log li{grid-template-columns:minmax(0,1fr)}}
.prose{display:grid;gap:18px}
.prose h2{font-size:clamp(24px,2.6vw,30px);margin-top:18px}
.prose>p,.prose li{font-size:18px;line-height:1.7;color:var(--text2)}
.prose .ticks li::before{margin-top:6px}
.pull{margin:10px 0;padding:6px 0 6px 22px;border-left:3px solid var(--gold);font-family:var(--display);font-size:clamp(21px,2.4vw,26px);line-height:1.3;letter-spacing:-.015em;color:var(--ink);display:grid;gap:8px}
.pull span{font-family:var(--body);font-size:14px;color:var(--quiet);letter-spacing:0}
.made-box{background:var(--sage);border-radius:var(--r-card);padding:20px 22px;display:grid;gap:10px;margin-top:12px}
.mb-head{display:flex;gap:8px;align-items:center;font-family:var(--display)}
.mb-head svg.lucide{color:var(--green)}
.made-box .chip{background:var(--white)}
.made-box .chip.gold{background:var(--gold-tint)}
/* agency brand switcher */
.a-brand{display:flex;align-items:center;gap:8px;padding:6px 7px;border-radius:8px;font-size:12px;font-weight:600;color:var(--a-quiet)}
.a-brand .sq{width:20px;height:20px;border-radius:6px;color:#fff;display:grid;place-items:center;font:700 10px Sora,sans-serif;flex:0 0 20px}
.a-brand.on{background:var(--a-sage);color:var(--a-deep)}.a-brand svg.lucide{margin-left:auto;width:14px;height:14px;color:var(--a-green)}
/* header: eight links need a little more room before the menu takes over */
@media (max-width:1140px){
  .site-nav{display:none;position:absolute;left:0;right:0;top:100%;background:var(--white);border-bottom:1px solid var(--edge);padding:8px max(16px,env(safe-area-inset-left,0px)) 14px;flex-direction:column}
  .site-nav.open{display:flex}
  .head-cta .menu-btn{display:inline-flex}
}

/* ===== round six: the workflow snapshots (capture, create, approve, publish) ===== */
.jn{display:grid;gap:18px}
.jn-track{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;position:relative}
.jn-track::before{content:"";position:absolute;left:0;right:0;top:15px;height:2px;background:var(--edge);border-radius:2px}
.jn-track::after{content:"";position:absolute;left:0;top:15px;height:2px;width:100%;background:var(--gold);border-radius:2px;transform-origin:left;transform:scaleX(1)}
.jn-stamp{position:relative;display:grid;gap:4px;justify-items:start}
.jn-stamp .jn-dot{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;box-shadow:0 0 0 4px var(--canvas)}
.jn-stamp .jn-dot svg.lucide{width:16px;height:16px}
.jn-stamp b{font-family:var(--display);font-size:17px}
.jn-stamp span{font-size:13px;font-weight:600;color:var(--quiet);font-variant-numeric:tabular-nums}
.jn-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;align-items:stretch}
.jn-step{display:grid;grid-template-rows:auto 1fr;gap:12px;margin:0;min-width:0}
.jn-step>p{font-size:14.5px;color:var(--text2);line-height:1.45}
.jn-ui{border-radius:16px;min-width:0}
.jn-ui.a-card{padding:12px;display:grid;gap:8px;align-content:start}
@media (max-width:1000px){.jn-track{display:none}.jn-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.jn-step::before{content:attr(data-when);font-size:13px;font-weight:700;color:var(--gold-ink);background:var(--gold-tint);border-radius:999px;padding:3px 10px;justify-self:start}.jn-step{grid-template-rows:auto auto 1fr}}
@media (max-width:600px){.jn-grid{grid-template-columns:minmax(0,1fr)}}
/* reveal as it scrolls into view */
@media (prefers-reduced-motion:no-preference){
  [data-journey] .jn-step{opacity:.25;transform:translateY(8px);transition:opacity .6s cubic-bezier(.16,1,.3,1),transform .6s cubic-bezier(.16,1,.3,1)}
  [data-journey] .jn-track::after{transform:scaleX(0);transition:transform 2.4s cubic-bezier(.4,0,.2,1)}
  [data-journey].go .jn-track::after{transform:scaleX(1)}
  [data-journey].go .jn-step{opacity:1;transform:none}
  [data-journey].go .jn-step:nth-child(2){transition-delay:.6s}[data-journey].go .jn-step:nth-child(3){transition-delay:1.2s}[data-journey].go .jn-step:nth-child(4){transition-delay:1.8s}
}
/* small app bits used inside the snapshots */
.a .jn-row{display:flex;justify-content:space-between;align-items:center;gap:8px;border-top:1px solid var(--a-edge);padding-top:7px;font-size:11.5px}
.a .jn-row:first-of-type{border-top:0;padding-top:0}
.a .jn-row span{color:var(--a-muted)}.a .jn-row b{font-size:12px;text-align:right}
.a .jn-makes{display:flex;flex-wrap:wrap;gap:4px}
.a .jn-seo{border:1px solid var(--a-edge);border-radius:10px;padding:8px 9px;display:grid;gap:3px;background:#fff}
.a .jn-seo small{font-size:11px;color:var(--a-muted)}.a .jn-seo .t{color:#1a0dab;font-size:12px;font-weight:600}
.a .jn-cal{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px}
.a .jn-cal div{border:1px solid var(--a-edge);border-radius:8px;padding:5px 4px;min-height:92px;display:grid;gap:4px;align-content:start;background:#fff}
.a .jn-cal div>b{font-size:11px;color:var(--a-muted);font-weight:600}
.a .jn-cal i{font-style:normal;display:block;border-radius:5px;padding:3px 4px;font-size:11px;font-weight:700;line-height:1.2}
.a .jn-cal i.w{background:var(--a-sage);color:var(--a-deep)}.a .jn-cal i.p{background:var(--a-sand);color:var(--a-sand-ink)}.a .jn-cal i.m{background:var(--a-wait);color:var(--a-quiet)}.a .jn-cal i.c{background:var(--a-gold-soft);color:var(--a-gold-ink)}.a .jn-cal i.v{background:var(--a-blue);color:var(--a-blue-ink)}
.a .jn-q{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:center;border:1px solid var(--a-edge);border-radius:10px;padding:8px 10px;background:#fff}
.a .jn-q b{font-size:12px;line-height:1.35}.a .jn-q small{display:block;font-size:11px;color:var(--a-muted);margin-top:2px}
.insp{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:clamp(20px,4vw,48px);align-items:center}
@media (max-width:900px){.insp{grid-template-columns:minmax(0,1fr)}}
.jn-stamp{z-index:1}
.jn-stamp .jn-dot{width:36px;height:36px;border:1px solid rgba(20,37,28,.12)}
.jn-stamp .jn-dot svg.lucide{width:18px;height:18px}
.jn-track::before,.jn-track::after{top:17px}

/* blog v2: read, watch, LinkedIn */
.blog-hero{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(24px,4vw,48px);align-items:end}
@media (max-width:900px){.blog-hero{grid-template-columns:minmax(0,1fr)}}
.blog-hero .blog-feature{grid-template-columns:minmax(0,1fr)}
.blog-hero .bf-art{min-height:170px}
.watch{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:16px}
@media (max-width:820px){.watch{grid-template-columns:minmax(0,1fr)}}
.vid{margin:0;position:relative;border-radius:var(--r-card);overflow:hidden;background:var(--deep);display:grid}
.vid video,.vid iframe,.yt-face{width:100%;aspect-ratio:16/9;object-fit:cover;object-position:50% 25%;border:0;display:block}
.vid-main video{aspect-ratio:16/10}
.vid figcaption{display:grid;gap:4px;justify-items:start;padding:14px 16px;background:var(--white);border:1px solid var(--edge);border-top:0;border-radius:0 0 var(--r-card) var(--r-card)}
.vid figcaption b{font-family:var(--display);font-size:17px}
.vid-play{position:absolute;left:50%;top:calc(50% - 40px);transform:translate(-50%,-50%);width:68px;height:68px;border-radius:50%;border:0;background:rgba(246,245,240,.92);color:var(--deep);display:grid;place-items:center;cursor:pointer;box-shadow:var(--lift-hover)}
.vid-play svg.lucide{width:26px;height:26px;margin-left:3px}
.vid.on .vid-play{display:none}
.vid-side{display:grid;gap:16px}
.yt-face{display:grid;place-items:center;align-content:center;gap:6px;color:var(--stage-muted);background:var(--deep) center/cover;cursor:pointer;background-image:radial-gradient(rgba(246,245,240,.1) 1px,transparent 1.2px);background-size:22px 22px}
.yt-face svg.lucide{width:34px;height:34px;color:var(--canvas)}
.li-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;align-items:start}
@media (max-width:900px){.li-grid{grid-template-columns:minmax(0,1fr)}}
.li-post{gap:12px}
.li-post p{font-size:16px;line-height:1.55}
.li-who{display:grid;grid-template-columns:40px minmax(0,1fr) auto;gap:10px;align-items:center}
.li-who img{width:40px;height:40px;border-radius:50%}
.li-who b{display:block;font-size:15px}
.li-logo{color:#0A66C2}
.li-q{width:40px;height:40px;border-radius:10px;background:var(--deep);display:grid;place-items:center}.li-q img{width:28px;height:auto;border-radius:0}
.li-img{padding:0;overflow:hidden}.li-img>img{width:100%;aspect-ratio:4/5;object-fit:cover}.li-img .li-who,.li-img .li-more{margin:0 20px}.li-img .li-more{margin-bottom:18px}
.li-more{font-weight:600}
.read-filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px}
.read-filters button{font:600 14px var(--body);border:1px solid var(--field-edge);background:var(--white);color:var(--text2);border-radius:999px;padding:7px 14px;cursor:pointer;min-height:38px}
.read-filters button[aria-pressed="true"]{background:var(--green);border-color:var(--green);color:#fff}
.posts a.post-card{text-decoration:none;color:inherit}
.pc-art{border-radius:12px;height:96px;display:flex;align-items:flex-end;justify-content:space-between;padding:12px 14px;align-self:stretch;width:100%}
.pc-art svg.lucide{width:28px;height:28px}
.pc-art span{font-family:var(--display);font-weight:700;font-size:18px;letter-spacing:-.02em}
.foot-grid{grid-template-columns:minmax(0,1.3fr) repeat(4,minmax(0,1fr))}
@media (max-width:900px){.foot-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.watch{align-items:start}.vid-main video{aspect-ratio:16/11}
@media (prefers-reduced-motion:no-preference){[data-journey] .jn-step{opacity:.45}[data-journey].go .jn-step{opacity:1}}

/* blog v3: read, watch, then a feed */
.read-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;margin:clamp(40px,5vw,64px) 0 18px}
.read-head .read-filters{margin:0}
.feed-wrap{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(24px,5vw,72px);align-items:start}
@media (max-width:860px){.feed-wrap{grid-template-columns:minmax(0,1fr)}}
.feed-side{display:grid;gap:16px;position:sticky;top:96px}
@media (max-width:860px){.feed-side{position:static}}
.feed-follow{display:grid;gap:10px;margin-top:6px}
.feed-acct{display:grid;grid-template-columns:40px minmax(0,1fr) auto;gap:12px;align-items:center;background:var(--white);border:1px solid var(--edge);border-radius:var(--r-card);padding:10px 12px;text-decoration:none;color:var(--ink)}
.feed-acct>img{width:40px;height:40px;border-radius:50%}
.feed-acct b{display:block;font-size:15px}
.feed-acct .btn svg.lucide{width:15px;height:15px}
.feed{display:grid;gap:12px;max-width:560px;width:100%;justify-self:center}
.fp{background:var(--white);border:1px solid var(--edge);border-radius:12px;display:grid;gap:10px;padding:14px 16px 4px;box-shadow:0 1px 2px rgba(26,22,19,.05)}
.fp header{display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:10px;align-items:start}
.fp header>img{width:44px;height:44px;border-radius:50%}
.fp header .li-q{width:44px;height:44px}
.fp header div{display:grid;line-height:1.3}
.fp header b{font-size:15px}
.fp header span{font-size:12.5px;color:var(--quiet);display:inline-flex;align-items:center;gap:4px}
.fp header span svg.lucide{width:12px;height:12px}
.fp p{font-size:15px;line-height:1.5;color:#191919}
.fp-more{color:var(--quiet);text-decoration:none;font-weight:600}
.fp-img{width:calc(100% + 32px);margin:2px -16px 0;max-width:none;aspect-ratio:4/5;object-fit:cover}
.fp footer{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--edge);margin:0 -16px;padding:4px 8px}
.fp footer span{display:flex;align-items:center;justify-content:center;gap:6px;font-size:13.5px;font-weight:600;color:var(--quiet);padding:10px 4px;border-radius:8px}
.fp footer svg.lucide{width:17px;height:17px}
@media (max-width:420px){.fp footer span{font-size:0;gap:0}.fp footer svg.lucide{width:19px;height:19px}}
.feed-all{justify-self:center;margin-top:6px}
.yt-btn{width:64px;height:64px;border-radius:50%;background:rgba(246,245,240,.92);display:grid;place-items:center;box-shadow:var(--lift-hover)}
.yt-btn svg.lucide{width:24px!important;height:24px!important;color:var(--deep)!important;margin-left:3px}
.yt-channel{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:14px;align-items:center;text-decoration:none;color:var(--ink);padding:18px 20px}
.yt-channel>svg.lucide{width:30px;height:30px;color:#C4302B}
.yt-channel b{display:block;font-family:var(--display);font-size:17px}

/* book a demo: the live site's booking flow */
.bk-dialog{border:0;border-radius:var(--r-panel);padding:0;width:min(560px,calc(100vw - 24px));max-height:calc(100dvh - 24px);box-shadow:0 30px 80px -20px rgba(20,37,28,.45);background:var(--white);color:var(--ink)}
.bk-dialog::backdrop{background:rgba(20,37,28,.45)}
.bk-head{display:flex;justify-content:space-between;gap:12px;align-items:start;padding:20px 22px 4px}
.bk-head h2{font-size:24px}
.bk-x{border:0;background:var(--canvas);width:36px;height:36px;border-radius:50%;font-size:22px;line-height:1;cursor:pointer;color:var(--ink);flex:0 0 36px}
.bk-body{padding:12px 22px 22px}
[data-booker]{background:var(--white);border:1px solid var(--edge);border-radius:var(--r-card);box-shadow:var(--lift);padding:20px 22px}
.bk-step{display:grid;gap:12px}
.bk-label{font-weight:700;font-size:14px}
.bk-bar{display:flex;align-items:center;justify-content:space-between}
.bk-month{font-family:var(--display);font-size:17px}
.bk-nav{width:36px;height:36px;border-radius:10px;border:1px solid var(--edge);background:var(--white);font-size:20px;cursor:pointer;color:var(--ink)}
.bk-nav:disabled{opacity:.35;cursor:default}
.bk-days{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px;text-align:center}
.bk-dh{font-size:12px;font-weight:600;color:var(--quiet);padding:4px 0}
.bk-day{aspect-ratio:1;border:1px solid var(--edge);border-radius:10px;background:var(--white);font:600 14px var(--body);cursor:pointer;color:var(--ink);min-height:36px}
.bk-day:hover:not(:disabled){border-color:var(--green);color:var(--green)}
.bk-day:disabled{background:transparent;border-color:transparent;color:var(--field-edge);cursor:default}
.bk-day.on{background:var(--green);border-color:var(--green);color:#fff}
.bk-times{display:grid;gap:10px}
.bk-slots{display:grid;grid-template-columns:repeat(auto-fill,minmax(72px,1fr));gap:6px}
.bk-slot{border:1px solid var(--field-edge);background:var(--white);border-radius:10px;min-height:40px;font:600 14px var(--body);cursor:pointer;color:var(--ink)}
.bk-slot:hover{border-color:var(--green);background:var(--green-hover);color:var(--green)}
.bk-summary{display:flex;justify-content:space-between;gap:10px;align-items:center;background:var(--sage);border-radius:var(--r-control);padding:10px 14px}
.bk-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.bk-grid .full{grid-column:1/-1}
.bk-grid textarea{font:500 15px var(--body);border:1px solid var(--field-edge);border-radius:var(--r-control);padding:10px 12px;width:100%;resize:vertical}
@media (max-width:520px){.bk-grid{grid-template-columns:1fr}}
.bk-err{color:var(--clay-ink)}
.bk-done{justify-items:start}
.bk-alt{margin-top:14px;border-top:1px solid var(--edge);padding-top:12px}

/* headings stay readable when the water ground darkens the dots behind them */
.water .lens{background-image:radial-gradient(rgb(46 70 54/48%) 1.6px,transparent 1.9px)}
main section>.wrap>h1,main section>.wrap>h2,.hero-title,h1.page,.h-row>h2,.h-stack>h1,.h-stack>h2,.h-row>.sub,.h-stack>.sub,.hero .sub,.sec-head h2,.insp h2,.feed-side h2{text-shadow:0 0 2px var(--canvas),0 0 10px var(--canvas),0 0 22px var(--canvas)}
.deep h1,.deep h2,.deep .sub,.card h2,.card h3{text-shadow:none}
.bk-day{aspect-ratio:auto;height:40px}

/* type weight: match the current quotem.ai, Sora Medium for headings (lighter than bold) */
h1,h2,h3,.hero-title,h1.page{font-weight:500}
h4,.tab b,.tab[aria-selected="true"] b,.plan .who,.su-plan-txt b,.su-price b,.figure,.stamp,.bf-quote,.pull,.g-head b,.jn-stamp b,.mb-head,.blog-cats a,.vid figcaption b,.yt-channel b,.bk-month,.reassure b,.principles b,.verdict-box b,.talk-head b,.made-post b,.o-post .kind,details.faq summary{font-weight:600}
.hero-title{letter-spacing:-.045em}
/* header: Sign in only (Sign up lives in each page's own calls to action), visible at every width */
.head-cta .signin{display:inline-flex}
@media (max-width:1140px){.head-cta .signin{display:inline-flex}}
.su-checkout{min-height:420px;border-radius:var(--r-card)}


/* ===== app UI kit ===== */
/* App UI kit: faithful, scaled-down copies of the real Quotem app components (from the Lovable source, 1 Nov 2026).
   Class names start with .a- so they never collide with the marketing styles. Icons are lucide at 1.75 stroke. */
.a{--a-ink:#1A1613;--a-quiet:#3F3A33;--a-muted:#5A5248;--a-edge:#E3E0D8;--a-input:#CFCAC0;--a-green:#2E4636;--a-deep:#14251C;--a-sec:#EEF3EE;--a-sage:#E4EAE3;
  --a-gold:#E1B84B;--a-gold-soft:#FBF0D6;--a-gold-ink:#5C430B;--a-clay:#A9461F;--a-clay-dot:#C2562F;--a-clay-soft:#F6E3DA;--a-clay-ink:#8A3A1E;--a-wait:#F1F0EB;--a-wait-ink:#5A5248;
  --a-sand:#EFE9DD;--a-sand-ink:#4A4033;--a-blue:#E3E9EF;--a-blue-ink:#24384A;--a-rail:#FBFAF7;--a-rail-edge:#EBE8E1;
  --a-lift:0 1px 2px rgb(26 22 19/5%),0 10px 28px -20px rgb(20 37 28/28%);
  font-family:Manrope,"Helvetica Neue",Arial,sans-serif;color:var(--a-ink);font-size:14px;line-height:1.45;text-align:left}
.a *{box-sizing:border-box}
.a svg.lucide{width:16px;height:16px;stroke-width:1.75;flex:0 0 auto}
.a .disp{font-family:Sora,"Avenir Next",sans-serif;font-weight:700;letter-spacing:-.035em}
.a .q{color:var(--a-quiet)} .a .m{color:var(--a-muted)}

/* window + rail */
.a-win{background:#F6F5F0;background-image:radial-gradient(circle at 1px 1px,rgb(26 22 19/13%) 1px,transparent 1.4px);background-size:22px 22px;border:1px solid var(--a-edge);border-radius:16px;box-shadow:0 2px 4px rgb(26 22 19/5%),0 24px 48px -24px rgb(20 37 28/28%);overflow:hidden;display:grid;grid-template-columns:auto minmax(0,1fr);width:100%}
.a-win.norail{grid-template-columns:minmax(0,1fr)}
.a-rail{background:var(--a-rail);border-right:1px solid var(--a-rail-edge);padding:14px 10px;display:flex;flex-direction:column;gap:12px;width:196px}
.a-rail.icons{width:58px;align-items:center}
.a-switch{display:flex;align-items:center;gap:8px;border:1px solid var(--a-edge);background:#fff;border-radius:10px;padding:6px 8px}
.a-switch .sq{width:26px;height:26px;border-radius:7px;background:var(--a-green);color:#fff;display:grid;place-items:center;font:700 12px Sora,sans-serif}
.a-switch b{font-size:12px;display:block;line-height:1.2}.a-switch span{font-size:11px;color:var(--a-muted);display:block}
.a-nav{display:grid;gap:2px}
.a-nav span{display:flex;align-items:center;gap:9px;min-height:30px;border-radius:8px;padding:0 9px;font-size:13px;font-weight:500;color:var(--a-quiet);white-space:nowrap}
.a-nav span.on{background:var(--a-sage);color:var(--a-deep);font-weight:700}
.a-rail.icons .a-nav span{padding:0;width:36px;justify-content:center}
.a-time{margin-top:auto;border:1px solid var(--a-edge);background:#fff;border-radius:10px;padding:10px;display:grid;gap:8px}
.a-time .row{display:flex;justify-content:space-between;font-size:11.5px;font-weight:700}.a-time .row span{font-weight:500;color:var(--a-quiet);font-variant-numeric:tabular-nums}
.a-main{padding:20px 22px;min-width:0;display:grid;gap:14px;align-content:start}
@media (max-width:700px){.a-rail{display:none}.a-win{grid-template-columns:minmax(0,1fr)}.a-main{padding:16px}}

/* pixel bits */
.a-pbar{display:grid;gap:3px}
.a-pbar i{height:6px;border-radius:1.5px;background:var(--a-edge);display:block}
.a-pbar i.on{background:var(--a-green)}
.a-pbar i.next{background:var(--a-gold);animation:a-pulse 1.6s ease-in-out infinite}
.a-dark .a-pbar i{background:rgb(255 255 255/16%)}.a-dark .a-pbar i.on{background:#F6F5F0}.a-dark .a-pbar i.next{background:var(--a-gold)}
@keyframes a-pulse{50%{opacity:.4}}
.a-sym{display:grid;grid-template-columns:repeat(9,5px);gap:2px}
.a-sym i{width:5px;height:5px;border-radius:1px;background:transparent;transition:background .28s steps(3)}
.a-sym i.x{background:var(--a-green)}.a-sym i.g{background:var(--a-gold)}

/* type + controls */
.a-h1{font-family:Sora,sans-serif;font-weight:700;letter-spacing:-.035em;font-size:26px;line-height:1.05}
.a-h2{font-family:Sora,sans-serif;font-weight:700;letter-spacing:-.03em;font-size:18px;line-height:1.15}
.a-hook{font-family:Sora,sans-serif;font-weight:700;letter-spacing:-.02em;font-size:15px;line-height:1.3}
.a-gold-u{background:linear-gradient(transparent 62%,var(--a-gold-soft) 62%)}
.a-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;border-radius:10px;font:600 12.5px Manrope,sans-serif;min-height:32px;padding:0 12px;border:1px solid transparent;white-space:nowrap}
.a-btn.p{background:var(--a-green);color:#fff}
.a-btn.o{background:#fff;border-color:var(--a-edge);color:var(--a-ink)}
.a-btn.lg{min-height:40px;font-size:13.5px;font-weight:700;width:100%}
.a-btn svg.lucide{width:14px;height:14px}
.a-card{background:#fff;border:1px solid var(--a-edge);border-radius:14px;box-shadow:var(--a-lift)}
.a-chip{display:inline-flex;align-items:center;gap:5px;border-radius:7px;padding:3px 8px;font-size:11.5px;font-weight:700;white-space:nowrap}
.a-chip .d{width:5px;height:5px;border-radius:50%;background:currentColor}
.a-chip.good{background:var(--a-sage);color:var(--a-deep)}
.a-chip.wait{background:var(--a-wait);color:var(--a-wait-ink)}
.a-chip.need{background:var(--a-clay-soft);color:var(--a-clay-ink)}.a-chip.need .d{background:var(--a-clay-dot)}
.a-kind{display:inline-flex;align-items:center;gap:5px;border-radius:7px;padding:3px 8px 3px 6px;font-size:11.5px;font-weight:700;white-space:nowrap}
.a-kind svg.lucide{width:13px;height:13px}
.a-kind.write{background:var(--a-sage);color:var(--a-deep)}.a-kind.creative{background:var(--a-gold-soft);color:var(--a-gold-ink)}
.a-kind.clip{background:var(--a-blue);color:var(--a-blue-ink)}.a-kind.past{background:var(--a-sand);color:var(--a-sand-ink)}.a-kind.mail{background:var(--a-wait);color:var(--a-quiet)}
.a-tag{border-radius:7px;padding:3px 8px;font-size:11.5px;font-weight:700}
.a-tag.rel{background:var(--a-sage);color:var(--a-deep)}.a-tag.use{background:var(--a-wait);color:var(--a-quiet)}.a-tag.pro{background:var(--a-sand);color:var(--a-sand-ink)}
.a-utabs{display:flex;gap:2px;border-bottom:1px solid var(--a-edge)}
.a-utabs span{padding:8px 11px;font-size:13px;font-weight:600;color:var(--a-quiet)}
.a-utabs span.on{color:var(--a-deep);font-weight:700;border-bottom:2.5px solid var(--a-green);margin-bottom:-1px}
.a-seg{display:inline-flex;gap:3px;padding:3px;border-radius:10px;background:var(--a-wait)}
.a-seg span{padding:5px 10px;border-radius:8px;font-size:12px;font-weight:600;color:var(--a-quiet)}
.a-seg span.on{background:#fff;color:var(--a-ink);font-weight:700;box-shadow:0 1px 2px rgb(26 22 19/10%)}

/* ideas card */
.a-idea{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 14px;align-items:center;padding:13px 34px 13px 14px}
.a-idea .tags{display:flex;gap:6px;align-items:center;font-size:11.5px;grid-column:1/-1}
.a-idea .x{position:absolute;right:8px;top:8px;color:var(--a-muted)}
.a-idea .acts{display:flex;gap:6px}
@media (max-width:560px){.a-idea{grid-template-columns:minmax(0,1fr)}}

/* new ask */
.a-steps{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:5px}
.a-steps div{display:grid;gap:4px;font-size:11px;color:var(--a-muted)}
.a-steps div i{height:6px;border-radius:1.5px;background:var(--a-edge);display:block}
.a-steps div.done i{background:var(--a-green)}.a-steps div.cur i{background:var(--a-gold)}.a-steps div.cur{color:var(--a-deep);font-weight:700}
.a-opts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
@media (max-width:560px){.a-opts{grid-template-columns:minmax(0,1fr)}}
.a-opt{border:1px solid var(--a-edge);background:#fff;border-radius:12px;padding:10px;display:grid;gap:6px}
.a-opt.on{border-color:var(--a-green);background:var(--a-sec);box-shadow:0 0 0 1px var(--a-green)}
.a-opt .ic{width:28px;height:28px;border-radius:8px;background:var(--a-wait);color:var(--a-deep);display:grid;place-items:center}
.a-opt.on .ic{background:var(--a-green);color:#fff}
.a-opt b{font-size:12.5px}.a-opt span{font-size:11px;color:var(--a-muted)}
.a-field{display:grid;gap:4px}.a-field label{font-size:11.5px;font-weight:600}
.a-field div{border:1px solid var(--a-input);border-radius:10px;min-height:32px;padding:7px 10px;font-size:12.5px;background:#fff}
.a-field small{font-size:11px;color:var(--a-muted)}

/* phones */
.a-phone{background:#221E1A;border-radius:30px;padding:8px;box-shadow:var(--a-lift);width:100%;max-width:250px}
.a-screen{border-radius:23px;min-height:430px;padding:18px 15px;display:flex;flex-direction:column;gap:10px;background:#F6F5F0;background-image:radial-gradient(circle at 1px 1px,rgb(26 22 19/13%) 1px,transparent 1.4px);background-size:22px 22px;overflow:hidden}
.a-screen.a-dark{background:var(--a-deep);background-image:none;color:#F6F5F0}
.a-co{display:flex;gap:8px;align-items:center}
.a-co .sq{width:28px;height:28px;border-radius:8px;background:var(--a-green);color:#fff;display:grid;place-items:center;font:700 12px Sora,sans-serif}
.a-dark .a-co .sq{background:#F6F5F0;color:var(--a-deep)}
.a-co b{font-size:12.5px;display:block;line-height:1.2}.a-co span{font-size:11px;color:var(--a-muted);display:block}
.a-dark .a-co span{color:#A8B8AD}
.a-echo{position:relative;width:100%;aspect-ratio:1;display:grid;place-items:center}
.a-echo canvas{position:absolute;inset:0;width:100%;height:100%}
.a-rec{position:relative;width:64px;height:64px;border-radius:50%;background:var(--a-clay);border:3px solid var(--a-clay-dot);color:#fff;font:700 12.5px Manrope,sans-serif;display:grid;place-items:center;box-shadow:0 0 0 6px rgb(169 70 31/.25)}
.a-ghost{border:1px solid rgb(255 255 255/.2);border-radius:9px;padding:6px 12px;font-size:11.5px;font-weight:600;color:#F6F5F0}
.a-check{display:flex;gap:7px;align-items:flex-start;font-size:11.5px;color:var(--a-muted)}
.a-check svg.lucide{color:var(--a-green);width:14px;height:14px;margin-top:1px;stroke-width:2.25}

/* approver page */
.a-prow{border:1px solid var(--a-edge);border-radius:12px;padding:9px 12px;display:flex;justify-content:space-between;gap:10px;align-items:center;background:#fff}
.a-prow.ok{background:var(--a-sage);border-color:transparent}
.a-prow small{display:block;font-size:11px;color:var(--a-muted)}.a-prow b{font-size:12.5px}
.a-feed{border:1px solid var(--a-edge);border-radius:10px;padding:10px;background:#fff;display:grid;gap:6px}
.a-feed .who{display:flex;gap:8px;align-items:center}
.a-feed .who img{width:30px;height:30px;border-radius:50%}
.a-feed .who b{font-size:12px;display:block}.a-feed .who span{font-size:11px;color:var(--a-muted)}
.a-feed p{font-size:12px;line-height:1.45;color:#191919}
.a-feed .acts{display:flex;justify-content:space-between;border-top:1px solid var(--a-edge);padding-top:6px;color:var(--a-muted);font-size:11px;font-weight:600}
.a-feed .acts span{display:inline-flex;gap:4px;align-items:center}.a-feed .acts svg.lucide{width:12px;height:12px}
.a-foot{border-top:1px solid var(--a-edge);background:rgb(255 255 255/.95);padding:10px 14px;display:grid;gap:8px}

/* post window */
.a-pill{display:inline-flex;align-items:center;min-height:30px;padding:0 12px;border-radius:999px;border:1px solid var(--a-edge);font-size:11.5px;font-weight:600;background:#fff}
.a-pill.on{background:var(--a-ink);border-color:var(--a-ink);color:#fff}

/* workroom piece cards */
.a-pieces{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,190px),1fr));gap:10px}
.a-piece{position:relative;display:flex;flex-direction:column;gap:8px;padding:12px 12px 44px;min-height:190px;transition:border-color .3s,box-shadow .3s}
.a-piece .top{display:flex;justify-content:space-between;gap:6px;flex-wrap:wrap;align-items:center}
.a-piece .hook{font-size:12.5px;font-weight:600;line-height:1.45}
.a-piece .rest{font-size:11.5px;color:var(--a-muted);line-height:1.45;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.a-piece .bot{position:absolute;left:10px;right:10px;bottom:8px;display:flex;justify-content:space-between;align-items:center;font-size:11px;color:var(--a-muted)}
.a-piece.new{border-color:var(--a-gold);box-shadow:0 0 0 2px rgb(225 184 75/.5)}
.a-new{border-radius:6px;background:var(--a-gold);padding:3px 6px;font-size:11px;font-weight:700;line-height:1}
.a-life{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.a-life div{display:grid;gap:5px;font-size:11.5px;color:var(--a-quiet)}.a-life b{color:var(--a-ink)}
@media (max-width:560px){.a-life{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* approvals list */
.a-stage{background:var(--a-deep);background-image:radial-gradient(circle at 1px 1px,rgb(255 255 255/9%) 1px,transparent 1.4px);background-size:22px 22px;border-radius:16px;padding:14px 18px;color:#F6F5F0;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.a-stage .n{font:700 38px/1 Sora,sans-serif;letter-spacing:-.04em;color:var(--a-gold);font-variant-numeric:tabular-nums}
.a-arow{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:12px;align-items:center;padding:11px 14px;border-top:1px solid var(--a-edge)}
.a-arow:first-child{border-top:0}
.a-arow b{font-size:12.5px;display:block}.a-arow small{font-size:11px;color:var(--a-muted)}
.a-ppl{display:flex;align-items:center;gap:8px;font-size:11.5px;color:var(--a-quiet);font-variant-numeric:tabular-nums}
.a-ppl .av{display:flex}
.a-ppl .av span{position:relative;width:28px;height:28px;border-radius:50%;border:2px solid var(--a-clay-dot);background:var(--a-sage);color:var(--a-deep);font-size:11px;font-weight:700;display:grid;place-items:center;margin-left:-5px;transition:border-color .4s}
.a-ppl .av span:first-child{margin-left:0}
.a-ppl .av span.ok{border-color:var(--a-gold)}
.a-ppl .av span.ok::after{content:"";position:absolute;right:-3px;bottom:-3px;width:11px;height:11px;border-radius:50%;background:var(--a-gold) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 6.2l2 2 4-4.4' fill='none' stroke='%235C430B' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/9px no-repeat;box-shadow:0 0 0 2px #fff}
@media (max-width:560px){.a-arow{grid-template-columns:minmax(0,1fr)}}

/* home composer */
.a-box{background:#fff;border:1px solid var(--a-edge);border-radius:14px;box-shadow:var(--a-lift);padding:10px;display:grid;gap:8px}
.a-box .ph{font-size:13.5px;color:var(--a-muted);min-height:38px}
.a-box .row{display:flex;align-items:center;gap:8px}
.a-box .att{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;color:var(--a-muted)}
.a-box .send{margin-left:auto;width:34px;height:34px;border-radius:10px;background:var(--a-green);color:#fff;display:grid;place-items:center}
.a-short{display:flex;flex-wrap:wrap;gap:6px}
.a-short span{display:inline-flex;align-items:center;gap:6px;min-height:32px;border:1px solid var(--a-edge);background:#fff;border-radius:10px;padding:0 11px;font-size:12.5px;font-weight:600}
.a-recent{display:grid;grid-template-columns:32px minmax(0,1fr) auto;gap:10px;align-items:center;padding:6px 4px}
.a-recent .av{width:32px;height:32px;border-radius:50%;background:var(--a-sage);color:var(--a-deep);display:grid;place-items:center;font-size:11px;font-weight:700}
.a-recent b{font-size:12.5px}.a-recent span{font-size:12px;color:var(--a-muted)}
.a-meter{display:grid;grid-template-columns:repeat(16,minmax(0,1fr));gap:4px;height:22px}
.a-meter i{border-radius:3px;background:var(--a-edge)}.a-meter i.on{background:var(--a-green)}

/* motion */
@media (prefers-reduced-motion:reduce){.a *{animation:none!important;transition:none!important}}