/* ============================================================
   FRAMElogic MONTHLY FOR BUSINESS, the page stylesheet
   ------------------------------------------------------------
   The same tokens as framelogic.media and the proposals: paper,
   sage, green, gold and clay, 3px corners, Montserrat for anything
   structural, Inter to read, JetBrains Mono for the small labels
   with a gold line and dot. Light only, because the brand is light.

   Mobile first: most people open this from a QR code on a phone,
   so the phone layout is the real one. 16px side gutters, nothing
   ever scrolls sideways.
   ============================================================ */

:root{
  --green:#627C58; --green-deep:#42553B; --ink:#26301F;
  --sage:#E9EDE4; --sage-2:#DDE4D5;
  --paper:#FAFAF6; --white:#FFFFFF;
  --text:#232921; --mute:#5F665A;
  --line:rgba(38,48,31,.12); --line-2:rgba(38,48,31,.22);
  --gold:#C99A5B; --gold-deep:#A87735; --gold-ink:#8A6224;
  --gold-soft:#F5E6CE; --gold-wash:#FFFBF3; --gold-light:#E3C48F;
  --clay:#B4674A; --clay-soft:#F6E4DC;
  --red:#B03A2E; --red-soft:#FBEAE7;
  --r:3px;
  --shadow:0 24px 60px -24px rgba(38,48,31,.22);
  --display:'Montserrat',"Helvetica Neue",Arial,sans-serif;
  --body:'Inter',"Helvetica Neue",Arial,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,Menlo,monospace;
  --tick:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.4 6.6 11.4 12.6 4.8' fill='none' stroke='%2342553B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --tick-gold:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.4 6.6 11.4 12.6 4.8' fill='none' stroke='%23E3C48F' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  color-scheme:light;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:72px}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }
html,body{margin:0;padding:0}
body{
  min-height:100vh;
  background:
    radial-gradient(900px 420px at 10% -120px, rgba(245,230,206,.55), transparent 70%),
    radial-gradient(700px 520px at 100% 30%, rgba(233,237,228,.75), transparent 70%),
    var(--paper);
  background-repeat:no-repeat;
  color:var(--text);
  font:16px/1.6 var(--body);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3,p{margin:0}
a{color:inherit}
button{font:inherit;color:inherit;cursor:pointer}
[hidden]{display:none!important}
::selection{background:var(--gold);color:#fff}
:focus-visible{outline:2px solid var(--gold-deep);outline-offset:3px}
[tabindex="-1"]:focus{outline:none}
img,video{max-width:100%}

/* FRAMElogic is always written exactly so, even inside a capitals label */
.fl{text-transform:none;letter-spacing:inherit}

.skip{
  position:absolute;left:12px;top:-60px;z-index:100;padding:10px 14px;border-radius:var(--r);
  background:var(--ink);color:#fff;font:600 14px/1 var(--display);text-decoration:none;
}
.skip:focus{top:12px}

/* ---------------- top bar ---------------- */
.top{
  position:sticky;top:0;z-index:40;
  background:rgba(250,250,246,.9);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
  padding-top:env(safe-area-inset-top);
}
.top-in{
  max-width:980px;margin:0 auto;
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:12px 16px;
}
.logo{
  font:800 21px/1 var(--display);letter-spacing:-.022em;color:var(--ink);
  text-decoration:none;display:inline-block;white-space:nowrap;
}
.logo span{color:var(--green)}
.logo small{font:500 9px/1 var(--mono);letter-spacing:.2em;color:var(--gold-deep);margin-left:3px}
.logo-sm{font-size:18px}
.top-call{
  display:inline-flex;align-items:center;gap:7px;min-height:44px;padding:0 14px;border-radius:999px;
  border:1.5px solid var(--green-deep);color:var(--green-deep);text-decoration:none;
  font:700 14px/1 var(--display);
}
.top-call svg{width:17px;height:17px}
.top-call:hover{background:var(--green-deep);color:var(--paper)}

/* ---------------- page column ---------------- */
.wrap{
  max-width:980px;margin:0 auto;
  padding:18px 16px 56px;
  display:flex;flex-direction:column;gap:64px;
}
@media (min-width:760px){ .wrap{padding:32px 28px 80px;gap:96px} }

/* labels with the gold line and dot */
.eyebrow,.k,.hud{font-family:var(--mono);font-weight:500;text-transform:uppercase}
.eyebrow{
  display:flex;align-items:center;gap:10px;
  font-size:12px;line-height:1.3;letter-spacing:.16em;color:var(--green-deep);
}
.eyebrow::before{content:"";flex:0 0 22px;height:1.5px;background:var(--gold)}
.eyebrow::after{content:"";flex:0 0 5px;width:5px;height:5px;border-radius:50%;background:var(--gold)}
.k{font-size:12px;line-height:1.3;letter-spacing:.14em;color:var(--gold-ink)}

.gold{
  background:linear-gradient(100deg,var(--green-deep) 0%,var(--gold-deep) 30%,var(--gold) 62%,var(--gold-light) 95%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  -webkit-box-decoration-break:clone;box-decoration-break:clone;
}

/* ticks */
.ticks{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.ticks li{position:relative;padding-left:28px;line-height:1.5}
.ticks li::before{
  content:"";position:absolute;left:0;top:.12em;width:19px;height:19px;border-radius:50%;
  background:var(--sage) var(--tick) center/13px no-repeat;
}

/* ---------------- the frame (hero and the form) ---------------- */
.frame{
  position:relative;padding:2px;border-radius:14px;
  background:linear-gradient(125deg,var(--green-deep) 0%,var(--green) 45%,var(--gold) 100%);
  box-shadow:var(--shadow);
}
.frame-in{
  position:relative;background:var(--paper);border-radius:12px;
  padding:26px 20px 24px;overflow:hidden;
}
.frame-in::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(560px 280px at 0% 0%, var(--gold-wash), transparent 70%),
    radial-gradient(480px 300px at 100% 100%, var(--sage), transparent 70%);
}
.frame-in > *{position:relative}
.frame-in > .corner{position:absolute;width:16px;height:16px;border:2px solid var(--gold);opacity:.85;pointer-events:none}
.corner.tl{top:10px;left:10px;border-right:0;border-bottom:0}
.corner.tr{top:10px;right:10px;border-left:0;border-bottom:0}
.corner.bl{bottom:10px;left:10px;border-right:0;border-top:0}
.corner.br{bottom:10px;right:10px;border-left:0;border-top:0}
@media (min-width:760px){
  .frame-in{padding:46px 48px 40px}
  .frame-in > .corner{width:22px;height:22px}
  .corner.tl{top:16px;left:16px}.corner.tr{top:16px;right:16px}
  .corner.bl{bottom:16px;left:16px}.corner.br{bottom:16px;right:16px}
}

/* ---------------- hero ---------------- */
.hud{
  display:flex;justify-content:space-between;align-items:center;gap:8px 14px;flex-wrap:wrap;
  margin-bottom:18px;font-size:12px;line-height:1.3;letter-spacing:.14em;color:var(--mute);
}
.rec{display:inline-flex;align-items:center;gap:8px;color:var(--green-deep)}
.rec .dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--clay);animation:blink 1.6s ease-in-out infinite}
@keyframes blink{50%{opacity:.25}}
@media (prefers-reduced-motion:reduce){ .rec .dot{animation:none} }
.hero h1{
  margin-top:12px;
  font:800 clamp(33px,9.4vw,62px)/1.04 var(--display);letter-spacing:-.03em;color:var(--ink);
  text-wrap:balance;
}
.lede{font-size:16.5px;line-height:1.6;margin-top:14px;max-width:58ch}
.hero-ticks{margin-top:18px}
@media (min-width:600px){ .hero-ticks{display:grid;grid-template-columns:1fr 1fr;gap:10px 18px} }
@media (min-width:760px){ .lede{font-size:18.5px;margin-top:18px} .hero-ticks{margin-top:24px} }

.actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  min-height:52px;padding:0 24px;border-radius:999px;border:0;
  font:700 16px/1.1 var(--display);letter-spacing:.005em;text-decoration:none;white-space:nowrap;
  transition:transform .16s ease, box-shadow .2s ease, background .2s, color .2s;
  -webkit-tap-highlight-color:transparent;
}
.btn svg{width:20px;height:20px;flex:none}
.btn:active{transform:scale(.97)}
.btn-primary{
  color:var(--paper);
  background:linear-gradient(120deg,var(--green-deep) 0%,var(--green) 62%,#7E9671 100%);
  box-shadow:inset 0 0 0 1.5px rgba(240,220,180,.55),0 18px 36px -18px rgba(38,48,31,.6),0 0 0 5px rgba(201,154,91,.12);
}
.btn-primary svg{color:var(--gold-light)}
.btn-primary:hover{box-shadow:inset 0 0 0 1.5px rgba(240,220,180,.75),0 22px 40px -18px rgba(38,48,31,.65),0 0 0 6px rgba(201,154,91,.2)}
.btn-ghost{background:transparent;color:var(--green-deep);box-shadow:inset 0 0 0 1.5px var(--green-deep)}
.btn-ghost:hover{background:var(--green-deep);color:var(--paper)}
.actions .btn{flex:1 1 140px;padding:0 16px}
@media (min-width:600px){ .actions .btn{flex:0 0 auto;min-width:190px;padding:0 24px} }
.btn-wide{width:100%}
.btn[disabled]{opacity:.7;cursor:default}

.sure{display:flex;align-items:center;gap:9px;margin-top:16px;font-size:14.5px;color:var(--green-deep);font-weight:500}
.sure i{flex:0 0 18px;width:18px;height:18px;border-radius:50%;background:var(--gold-soft) var(--tick) center/12px no-repeat}
.sure-link{color:var(--ink);font-weight:700;text-decoration:underline;text-decoration-color:var(--gold);text-decoration-thickness:2px;text-underline-offset:4px;padding:10px 0}
.sure-link:hover{color:var(--gold-ink)}

/* ---------------- sections ---------------- */
.sec{display:flex;flex-direction:column;gap:24px;min-width:0}
.sec-head{display:flex;flex-direction:column;gap:12px}
.sec-head h2,.talk h2,.done h2{
  font:800 clamp(27px,7.4vw,42px)/1.1 var(--display);letter-spacing:-.024em;color:var(--ink);text-wrap:balance;
}
.sec-head > p:not(.eyebrow){color:var(--mute);font-size:16.5px;line-height:1.6;max-width:62ch}

/* cards */
.cards{display:grid;gap:12px}
@media (min-width:640px){ .cards4{grid-template-columns:1fr 1fr} }
.card{
  background:var(--white);border:1px solid var(--line);border-radius:10px;
  padding:20px 18px 20px;display:flex;flex-direction:column;gap:8px;position:relative;overflow:hidden;
}
.card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:linear-gradient(180deg,var(--gold),var(--clay))}
.card h3,.type h3,.kind h3,.plan h3{font:700 18.5px/1.25 var(--display);color:var(--ink);letter-spacing:-.01em}
.card p,.type p{color:var(--mute);font-size:15.5px;line-height:1.55}
.ico{
  display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;
  width:42px;height:42px;border-radius:10px;background:var(--sage);color:var(--green-deep);
}
.ico svg{width:23px;height:23px}

.note{
  display:flex;gap:14px;align-items:flex-start;
  background:var(--gold-wash);border:1px solid rgba(201,154,91,.35);border-radius:10px;padding:16px 16px;
}
.note p{font-size:15.5px;line-height:1.55}
.note b{color:var(--ink)}
.note-ico{flex:0 0 auto;color:var(--gold-deep);width:26px;height:26px;margin-top:1px}
.note-ico svg{width:26px;height:26px}
.note-part{background:var(--sage);border-color:var(--sage-2)}
.note-part .note-ico{color:var(--green-deep)}

/* ---------------- who it is for ---------------- */
.kind-chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
.kind-chip{
  min-height:44px;padding:9px 15px;border-radius:999px;
  border:1.5px solid var(--line-2);background:var(--white);color:var(--ink);
  font:600 14.5px/1.2 var(--display);text-align:left;
  transition:background .2s,border-color .2s,color .2s;
}
.kind-chip:hover{border-color:var(--green)}
.kind-chip[aria-pressed="true"]{background:var(--green-deep);border-color:var(--green-deep);color:var(--paper)}
.kind-panels{display:grid;gap:12px}
/* without the script every kind shows, as a plain list */
.js .kind-panels{display:block}
.js .kind{display:none}
.js .kind.on{display:flex;animation:rise .35s ease both}
@keyframes rise{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){ .js .kind.on{animation:none} }
.kind{
  background:var(--white);border:1px solid var(--line);border-radius:12px;padding:20px 18px;
  display:flex;flex-direction:column;gap:12px;box-shadow:0 18px 40px -30px rgba(38,48,31,.35);
}
.kind h3{display:flex;align-items:center;gap:12px}
.kind-ico{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;background:var(--gold-soft);color:var(--gold-ink);flex:0 0 auto}
.kind-ico svg{width:22px;height:22px}
.kind-lead{font:500 12px/1.3 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--gold-ink)}
@media (min-width:640px){ .kind .ticks{display:grid;grid-template-columns:1fr 1fr;gap:10px 22px} }

/* ---------------- post types ---------------- */
.types{display:grid;gap:10px}
@media (min-width:640px){ .types{grid-template-columns:1fr 1fr} }
@media (min-width:900px){ .types{grid-template-columns:1fr 1fr 1fr} }
.type{
  display:flex;gap:14px;align-items:flex-start;
  background:var(--white);border:1px solid var(--line);border-radius:10px;padding:16px;
}
.type h3{font-size:17px}
.type p{font-size:15px;margin-top:3px}

/* ---------------- our work: three phones ---------------- */
.phones{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;max-width:720px;width:100%;margin:0 auto}
.phone{margin:0;display:flex;flex-direction:column;align-items:center;gap:9px;min-width:0}
.phone-shell{
  position:relative;width:100%;aspect-ratio:9/16;border-radius:18px;overflow:hidden;
  background:var(--ink);padding:4px;
  box-shadow:0 0 0 1.5px rgba(201,154,91,.65),0 22px 40px -22px rgba(38,48,31,.7);
}
.phone-vid{display:block;width:100%;height:100%;object-fit:cover;border-radius:14px;background:#1b2216}
.phone figcaption{font:500 12px/1.3 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--mute);text-align:center}
@media (min-width:640px){
  .phones{gap:22px}
  .phone-shell{border-radius:26px;padding:6px}
  .phone-vid{border-radius:20px}
  .phone figcaption{font-size:12.5px;letter-spacing:.1em}
}

/* ---------------- plans ---------------- */
.plans{display:grid;gap:12px}
@media (min-width:820px){ .plans{grid-template-columns:repeat(3,1fr)} }
.plan{
  background:var(--white);border:1px solid var(--line);border-radius:12px;padding:20px 18px 18px;
  display:flex;flex-direction:column;gap:12px;position:relative;
  transition:border-color .25s, box-shadow .25s;
}
.plan.on{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold),0 20px 44px -28px rgba(168,119,53,.6)}
.plan-top{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
@media (min-width:820px){ .plan-top{flex-direction:column;align-items:flex-start;gap:10px} }
.price{font:800 30px/1 var(--display);color:var(--ink);letter-spacing:-.02em;white-space:nowrap}
.price .cur{font-size:.62em;vertical-align:.42em;margin-right:1px;color:var(--gold-deep)}
.price .per{font:500 13px/1 var(--body);letter-spacing:0;color:var(--mute)}
.plan h3{font-size:19px}
.plan .ticks{flex:1}
.plan-see{
  align-self:flex-start;min-height:40px;padding:0 2px;border:0;background:none;
  font:600 14px/1 var(--display);color:var(--green-deep);text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--gold);
}
.plan-see:hover{color:var(--gold-ink)}

/* the month */
.month{
  background:var(--white);border:1px solid var(--line);border-radius:12px;padding:18px 14px 16px;
  display:flex;flex-direction:column;gap:14px;
}
@media (min-width:640px){ .month{padding:24px} }
.month-head{display:flex;flex-direction:column;gap:12px}
@media (min-width:700px){ .month-head{flex-direction:row;align-items:flex-end;justify-content:space-between} }
.month-title{font:700 17px/1.3 var(--display);color:var(--ink);margin-top:6px}
.seg{display:grid;grid-template-columns:repeat(3,auto);background:var(--sage);border-radius:999px;padding:4px;gap:2px;justify-self:start;align-self:flex-start;max-width:100%}
.seg button{
  min-height:44px;padding:0 14px;border:0;border-radius:999px;background:transparent;
  font:600 13.5px/1 var(--display);color:var(--green-deep);white-space:nowrap;
}
.seg button[aria-pressed="true"]{background:var(--green-deep);color:var(--paper);box-shadow:0 6px 14px -8px rgba(38,48,31,.7)}
@media (max-width:359px){ .seg button{padding:0 9px;font-size:12.5px} }
.cal{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px}
.cal .dow{font:500 10px/1 var(--mono);letter-spacing:.1em;color:var(--mute);text-align:center;padding:2px 0 4px}
.cal .d{
  position:relative;aspect-ratio:1/1;border-radius:7px;background:var(--paper);border:1px solid var(--line);
  display:flex;flex-direction:column;justify-content:space-between;padding:4px 4px 5px;min-width:0;
}
.cal .d.blank{background:transparent;border-color:transparent}
.cal .n{font:500 10px/1 var(--mono);color:var(--mute)}
.cal .dots{display:flex;gap:3px;justify-content:center;min-height:8px}
.cal .dots i{width:8px;height:8px;border-radius:50%;background:var(--gold);transform:scale(0);transition:transform .35s cubic-bezier(.2,.8,.3,1.3)}
.cal .dots i.on{transform:scale(1)}
.cal .d.shoot{border:2px solid var(--clay);background:var(--clay-soft)}
.cal .d.shoot .n{color:var(--clay);font-weight:700}
@media (min-width:640px){
  .cal{gap:6px}
  .cal .d{border-radius:9px;padding:6px 7px 8px;aspect-ratio:auto;min-height:64px}
  .cal .n{font-size:11.5px}
  .cal .dots i{width:10px;height:10px}
}
@media (prefers-reduced-motion:reduce){ .cal .dots i{transition:none} }
.legend{display:flex;flex-wrap:wrap;gap:8px 18px;align-items:center;font-size:13.5px;color:var(--mute)}
.legend span{display:inline-flex;align-items:center;gap:7px}
.lg-post{width:9px;height:9px;border-radius:50%;background:var(--gold)}
.lg-day{width:14px;height:14px;border-radius:4px;border:2px solid var(--clay);background:var(--clay-soft)}
.legend-count{margin-left:auto;font:700 14px/1 var(--display);color:var(--ink)}

.includes{
  background:linear-gradient(140deg,var(--ink) 0%,#2F3B27 55%,#3B4630 100%);color:var(--paper);
  border-radius:12px;padding:22px 18px;display:flex;flex-direction:column;gap:14px;position:relative;overflow:hidden;
}
.includes::after{content:"";position:absolute;right:-80px;top:-80px;width:220px;height:220px;border-radius:50%;background:radial-gradient(circle,rgba(201,154,91,.28),transparent 70%);pointer-events:none}
.includes .k{color:var(--gold-light)}
.includes .ticks li::before{background-color:rgba(255,255,255,.1);background-image:var(--tick-gold)}
.includes .ticks li{color:rgba(250,250,246,.92)}
@media (min-width:640px){ .includes{padding:26px} .ticks.two{display:grid;grid-template-columns:1fr 1fr;gap:10px 24px} }

.terms{display:flex;flex-direction:column;gap:10px;padding:2px 2px 0}
.terms p{font-size:15.5px;line-height:1.55;color:var(--mute);padding-left:14px;border-left:2px solid var(--gold)}
.terms b{color:var(--ink)}

/* ---------------- questions ---------------- */
.faq{display:flex;flex-direction:column;gap:8px}
.faq details{background:var(--white);border:1px solid var(--line);border-radius:10px;overflow:hidden}
.faq summary{
  list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:16px 16px;min-height:56px;font:700 16.5px/1.3 var(--display);color:var(--ink);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";flex:0 0 22px;width:22px;height:22px;border-radius:50%;
  background:var(--sage) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 3.6v8.8M3.6 8h8.8' fill='none' stroke='%2342553B' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center/12px no-repeat;
  transition:transform .25s ease;
}
.faq details[open] summary::after{transform:rotate(45deg);background-color:var(--gold-soft)}
.faq details p{padding:0 16px 18px;color:var(--mute);font-size:15.5px;line-height:1.6}

/* ---------------- let's talk ---------------- */
.talk .frame-in{padding-top:28px}
.talk h2{margin-top:12px}
.talk-lede{color:var(--mute);margin-top:10px;font-size:16px;max-width:52ch}
form{margin-top:20px;display:flex;flex-direction:column;gap:16px}
.field{display:flex;flex-direction:column;gap:7px;border:0;margin:0;padding:0;min-width:0}
.field label,.field legend{font:700 14.5px/1.3 var(--display);color:var(--ink);padding:0}
.field legend{margin-bottom:8px}
input[type=text],textarea{
  width:100%;min-height:52px;padding:13px 14px;border-radius:8px;
  border:1.5px solid var(--line-2);background:var(--white);color:var(--text);
  font:16px/1.4 var(--body);-webkit-appearance:none;appearance:none;
  transition:border-color .2s, box-shadow .2s;
}
textarea{resize:vertical;min-height:92px}
input[type=text]:focus,textarea:focus{outline:none;border-color:var(--green);box-shadow:0 0 0 3px rgba(98,124,88,.2)}
input[aria-invalid="true"],textarea[aria-invalid="true"]{border-color:var(--red);box-shadow:0 0 0 3px rgba(176,58,46,.12)}
::placeholder{color:#8B9185}
.hint{font-size:13.5px;color:var(--mute)}
.err{font-size:14px;color:var(--red);font-weight:500}
.times{display:flex;flex-wrap:wrap;gap:8px}
.time{position:relative;display:inline-flex}
.time input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.time span{
  display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border-radius:999px;
  border:1.5px solid var(--line-2);background:var(--white);font:600 14.5px/1 var(--display);color:var(--ink);
  transition:background .2s,border-color .2s,color .2s;
}
.time input:checked + span{background:var(--green-deep);border-color:var(--green-deep);color:var(--paper)}
.time input:focus-visible + span{outline:2px solid var(--gold-deep);outline-offset:3px}
.kinds-pick .time span{padding:0 15px}
fieldset[aria-invalid="true"] .time span{border-color:var(--red)}
.opt{font:500 13.5px/1 var(--body);color:var(--mute)}
.trap{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-err{background:var(--red-soft);color:var(--red);border-radius:8px;padding:12px 14px;font-size:15px;font-weight:500}
.talk-or{text-align:center;font-size:15px;color:var(--mute)}
.talk-or-q{display:block}
.talk-or a{display:inline-flex;align-items:center;min-height:44px;padding:0 3px;color:var(--green-deep);font-weight:600;text-decoration-color:var(--gold);text-underline-offset:3px}
#send.busy .send-label::after{content:"";display:inline-block;width:14px;height:14px;margin-left:10px;vertical-align:-2px;border-radius:50%;border:2px solid rgba(250,250,246,.4);border-top-color:var(--paper);animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

.done{display:flex;flex-direction:column;align-items:flex-start;gap:12px;padding:6px 0}
.done-mark{width:58px;height:58px;color:var(--green-deep)}
.done-mark svg{width:58px;height:58px}
.done-tick{stroke-dasharray:40;stroke-dashoffset:40;animation:draw .7s .15s ease forwards;color:var(--gold-deep);stroke:var(--gold-deep)}
@keyframes draw{to{stroke-dashoffset:0}}
@media (prefers-reduced-motion:reduce){ .done-tick{animation:none;stroke-dashoffset:0} }
.done p{color:var(--mute);font-size:16.5px;max-width:52ch}
.done .btn{margin-top:6px}

/* ---------------- footer ---------------- */
.foot{border-top:1px solid var(--line);background:var(--white)}
.foot-in{max-width:980px;margin:0 auto;padding:28px 16px calc(32px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:8px}
.foot p{color:var(--mute);font-size:14.5px}
.foot p a{display:inline-flex;align-items:center;min-height:44px;padding:0 3px;color:var(--green-deep);text-decoration-color:var(--gold);text-underline-offset:3px}

/* ---------------- the phone dock ---------------- */
.dock{
  position:fixed;left:0;right:0;bottom:0;z-index:50;
  display:flex;gap:8px;padding:10px 16px calc(10px + env(safe-area-inset-bottom));
  background:rgba(250,250,246,.94);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  border-top:1px solid var(--line);
  transform:translateY(110%);transition:transform .3s ease;
}
.dock.show{transform:none}
.dock .btn{min-height:48px}
.dock .btn-primary{flex:1}
.dock-call{flex:0 0 auto;padding:0 18px}
@media (min-width:760px){ .dock{display:none!important} }
body.has-dock .foot-in{padding-bottom:calc(96px + env(safe-area-inset-bottom))}
@media (min-width:760px){ body.has-dock .foot-in{padding-bottom:32px} }

/* ---------------- reveal on scroll ---------------- */
.js .rv{opacity:0;transform:translateY(14px);transition:opacity .6s ease, transform .6s ease}
.js .rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){ .js .rv{opacity:1;transform:none;transition:none} }

/* the chips only work with the script; without it every kind shows */
.kind-chips{display:none}
.js .kind-chips{display:flex}