@import url("styles.css");

html{overflow-x:hidden;scroll-behavior:smooth}
img{max-width:100%}
.wrap,.card,.split-body,.prose{min-width:0}

/* ── Layout ───────────────────────────────────────────────── */
.wrap{max-width:var(--width-content);margin:0 auto;padding:0 var(--gutter-page-lg)}
main{display:block}
section{display:block}
.stack{display:grid;gap:var(--space-5)}
.row{display:flex;gap:var(--space-4);align-items:center;flex-wrap:wrap}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-6)}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-5)}
.feed{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:var(--space-7);align-items:start}
.rail{display:grid;gap:var(--space-4);position:sticky;top:104px}
.prose{max-width:var(--measure-prose);display:grid;gap:var(--space-5)}
.prose>*{margin:0}
.prose p,.prose li{font:var(--type-body);color:var(--text-body);text-wrap:pretty}
.prose h2{font:var(--type-h2)}.prose h3{font:var(--type-h3)}.prose h4{font:var(--type-h4)}
.prose ul,.prose ol{display:grid;gap:var(--space-3);padding-left:1.15em}
.prose a{color:var(--pink-600);text-underline-offset:3px}
.prose a:hover{color:var(--pink-700)}
.prose img{width:100%;height:auto;border-radius:var(--radius-md)}
.prose blockquote{margin:0;padding-left:var(--space-5);border-left:3px solid var(--pink-300);font:var(--type-body-lg);color:var(--text-body)}
.prose hr{border:0;border-top:var(--rule-hairline)}
.prose strong{font-weight:600}
.pad-y{padding:var(--space-8) 0}
.pad-y-lg{padding:var(--section-y) 0}
@media (max-width:1080px){.feed{grid-template-columns:1fr}.rail{position:static}.grid-3{grid-template-columns:1fr 1fr}}
@media (max-width:760px){.wrap{padding:0 var(--gutter-page)}.grid-2,.grid-3{grid-template-columns:1fr}}

/* ── Wordmark ─────────────────────────────────────────────── */
.lockup{display:grid;line-height:1;text-decoration:none}
.lockup .s{font-family:var(--font-display);font-style:italic;font-weight:600;color:var(--pink-500);letter-spacing:-.01em}
.lockup .m{font-family:var(--font-display);font-weight:800;text-transform:uppercase;letter-spacing:var(--tracking-wordmark);color:var(--forest-600)}
.lockup.inverse .m{color:var(--bone-0)}

/* ── Header ───────────────────────────────────────────────── */
.site-head{position:sticky;top:0;z-index:40;background:var(--glass-white);backdrop-filter:var(--blur-glass);-webkit-backdrop-filter:var(--blur-glass);border-bottom:var(--rule-hairline)}
.site-head .bar{height:84px;display:flex;align-items:center;gap:var(--space-7)}
.site-head nav{display:flex;gap:var(--space-6);margin-left:auto}
.site-head nav a{white-space:nowrap;font:400 .9375rem/1 var(--font-body);color:var(--text-body);text-decoration:none;padding-bottom:3px;border-bottom:1.5px solid transparent}
.site-head nav a:hover{color:var(--text-heading)}
.site-head nav a[aria-current]{font-weight:500;color:var(--text-heading);border-bottom-color:var(--pink-500)}
.head-actions{display:flex;gap:var(--space-3);align-items:center}
@media (max-width:1000px){.site-head .bar{gap:var(--space-4)}.site-head nav{gap:var(--space-4);min-width:0;overflow-x:auto;scrollbar-width:none}.site-head nav::-webkit-scrollbar{display:none}.site-head nav a{font-size:.8125rem;flex-shrink:0}}

/* ── Footer ───────────────────────────────────────────────── */
.site-foot{background:var(--forest-600);color:#E3EAE4;padding:var(--space-9) 0 var(--space-6)}
.site-foot a{color:#E3EAE4;text-decoration:none;font:var(--type-body-sm)}
.site-foot a:hover{color:var(--pink-300)}
.foot-cols{display:grid;grid-template-columns:1.5fr repeat(3,1fr);gap:var(--space-8)}
.foot-col{display:grid;gap:var(--space-3);align-content:start}
.foot-bottom{margin-top:var(--space-8);padding-top:var(--space-5);border-top:1px solid rgba(255,255,255,.14);display:flex;justify-content:space-between;gap:var(--space-5);flex-wrap:wrap;font:var(--type-caption);color:var(--forest-200)}
@media (max-width:900px){.foot-cols{grid-template-columns:1fr 1fr}}

/* ── Buttons ──────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);height:var(--control-h);padding:0 var(--control-pad-x);border-radius:var(--radius-pill);border:1px solid transparent;font:500 .9375rem/1 var(--font-body);letter-spacing:.01em;white-space:nowrap;cursor:pointer;text-decoration:none;transition:var(--transition-control)}
.btn:active{transform:var(--press-scale)}
.btn-primary{background:var(--action-primary-bg);color:var(--action-primary-fg);box-shadow:var(--shadow-soft)}
.btn-primary:hover{background:var(--action-primary-bg-hover);box-shadow:var(--shadow-lift);color:var(--action-primary-fg)}
.btn-pink{background:var(--pink-500);color:var(--forest-600)}
.btn-pink:hover{background:var(--pink-400);box-shadow:var(--shadow-blush);color:var(--forest-600)}
.btn-secondary{background:var(--pink-200);color:var(--forest-600)}
.btn-secondary:hover{background:var(--pink-300);color:var(--forest-600)}
.btn-outline{background:transparent;color:var(--forest-600);border-color:var(--forest-600)}
.btn-outline:hover{background:var(--surface-accent);border-color:var(--pink-500);color:var(--forest-600)}
.btn-ghost{background:transparent;color:var(--forest-600);padding-left:0}
.btn-ghost:hover{color:var(--pink-600)}
.btn-sm{height:var(--control-h-sm);padding:0 18px;font-size:.8125rem}
.btn-lg{height:var(--control-h-lg);padding:0 34px;font-size:1rem;font-weight:600}
.btn-block{display:flex;width:100%}
.btn[aria-disabled="true"]{background:var(--action-disabled-bg);color:var(--action-disabled-fg);border-color:transparent;box-shadow:none;cursor:not-allowed;pointer-events:none}
.pcm-dark .btn-outline{color:var(--bone-0);border-color:rgba(255,255,255,.4)}
.pcm-dark .btn-outline:hover{background:rgba(255,255,255,.1);color:var(--bone-0)}

/* ── Cards ────────────────────────────────────────────────── */
.card{background:var(--surface-card);border:var(--rule-hairline);border-radius:var(--radius-md);box-shadow:var(--shadow-soft);padding:var(--space-5)}
.card-lg{padding:var(--space-6)}
.card-flat{box-shadow:none}
.card-blush{background:var(--pink-100);border:var(--rule-soft);box-shadow:none}
.card-green{background:var(--forest-600);border-color:transparent;color:#E3EAE4}
.card-green h2,.card-green h3,.card-green h4{color:var(--bone-0)}
.card-gold{background:var(--gold-50);border:1px solid var(--gold-200);box-shadow:none}
a.card{display:block;text-decoration:none;color:inherit}
a.card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lift)}
.card,a.card{transition:transform var(--dur-base) var(--ease-glide),box-shadow var(--dur-base) var(--ease-out)}

/* ── Badges & tags ────────────────────────────────────────── */
.badge{display:inline-flex;align-items:center;gap:5px;width:fit-content;white-space:nowrap;padding:5px 12px;border-radius:var(--radius-pill);font:var(--type-eyebrow);letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;background:var(--surface-sunken);color:var(--text-body)}
.badge-blush{background:var(--pink-200);color:var(--forest-600)}
.badge-pink{background:var(--pink-500);color:var(--forest-600)}
.badge-green{background:var(--forest-600);color:var(--bone-0)}
.badge-gold{background:var(--status-note-bg);color:var(--status-note-fg)}
.tag{display:inline-flex;align-items:center;height:34px;padding:0 15px;border-radius:var(--radius-pill);border:1px solid var(--border-hairline);font:var(--type-caption);color:var(--text-body);background:transparent;cursor:pointer;text-decoration:none;transition:var(--transition-control)}
.tag:hover{border-color:var(--pink-500);color:var(--text-body)}
.tag[aria-pressed="true"]{background:var(--forest-600);color:var(--bone-0);border-color:transparent}

/* ── Forms ────────────────────────────────────────────────── */
.field{display:grid;gap:var(--space-2)}
.field > label{font:var(--type-label);color:var(--text-heading)}
.input,.select{height:var(--control-h);padding:0 18px;border-radius:var(--radius-pill);border:1px solid var(--border-hairline);background:var(--surface-card);font:var(--type-body-sm);color:var(--text-body);width:100%;transition:var(--transition-control)}
.select{appearance:none;padding-right:44px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%234A524B' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 17px center}
textarea.input{height:auto;padding:14px 18px;border-radius:var(--radius-md);resize:vertical;min-height:110px;font-family:var(--font-body)}
.input:hover,.select:hover{border-color:var(--pink-300)}
.input:focus,.select:focus{outline:none;border-color:var(--pink-500);box-shadow:0 0 0 4px var(--pink-100)}
.hint{font:var(--type-caption);color:var(--text-muted)}
.check{display:grid;grid-template-columns:22px 1fr;gap:var(--space-3);align-items:start;cursor:pointer;font:var(--type-body-sm)}
.check input{width:22px;height:22px;accent-color:var(--forest-600);margin:0}

/* ── Article bits ─────────────────────────────────────────── */
.eyebrow{font:var(--type-eyebrow);letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;color:var(--text-muted)}
.meta{font:var(--type-caption);color:var(--text-muted)}
.h-ed{font:var(--type-editorial-1);color:var(--text-heading);letter-spacing:var(--tracking-tight)}
.h-ed-2{font:var(--type-editorial-2);color:var(--text-heading)}
.h-disp{font:var(--type-display-2);letter-spacing:var(--tracking-display);color:var(--text-heading)}
.h-disp-3{font:var(--type-display-3);letter-spacing:var(--tracking-display);color:var(--text-heading)}
.lede{font:var(--type-body-lg);color:var(--text-body)}
.pull{font:var(--type-quote);color:var(--text-heading)}
.numeral{font:var(--type-numeral);font-variant-numeric:tabular-nums;color:var(--text-heading)}
.money{color:var(--text-money)}
.wash{background:var(--wash-blush)}
.on-white{background:var(--bone-0)}
.divider{border:0;border-top:var(--rule-hairline);margin:0}

/* photo placeholders — replace with <img> when real images arrive */
.ph{background:repeating-linear-gradient(135deg,var(--pink-100) 0 16px,var(--bone-0) 16px 32px);display:grid;place-items:center;border-radius:var(--radius-md);overflow:hidden}
.ph.gold{background:repeating-linear-gradient(135deg,var(--gold-50) 0 16px,var(--bone-0) 16px 32px)}
.ph.warm{background:repeating-linear-gradient(135deg,var(--surface-sunken) 0 16px,var(--bone-0) 16px 32px)}
.ph span{font:var(--type-eyebrow);letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;color:var(--ink-600);background:rgba(255,255,255,.82);padding:5px 10px;border-radius:var(--radius-pill);text-align:center}
.ph img{width:100%;height:100%;object-fit:cover;display:block}
.proof-image{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:var(--radius-md);display:block}

/* photo band — the brand's hero device */
.band-wrap{position:relative;overflow:hidden;display:flex;align-items:center}
.band-wrap > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.band{position:relative;width:100%;background:var(--surface-band);backdrop-filter:var(--blur-glass);-webkit-backdrop-filter:var(--blur-glass);padding:var(--band-pad-y) 0}
.band-lower{align-items:flex-end}

/* editor note — delete these blocks before launch */
.note{display:flex;gap:var(--space-3);align-items:flex-start;background:var(--pink-100);border:var(--rule-soft);border-radius:var(--radius-md);padding:var(--space-4);font:var(--type-body-sm);color:var(--text-body)}
.note strong{color:var(--text-heading)}

/* split cards: image beside copy, stacking on small screens */
.split{display:grid;grid-template-columns:1.15fr 1fr;padding:0;overflow:hidden}
.split-narrow{display:grid;grid-template-columns:220px 1fr;padding:0;overflow:hidden}
.split-body{padding:var(--space-7);display:grid;gap:var(--space-4);align-content:center}
.split-narrow .split-body{padding:var(--space-5);gap:var(--space-3)}
.list-row{display:grid;grid-template-columns:auto 1fr auto auto;gap:var(--space-5);align-items:center}
@media (max-width:900px){.split,.split-narrow{grid-template-columns:1fr}.split-body{padding:var(--space-5)}.list-row{grid-template-columns:1fr;gap:var(--space-3)}}
.fin-row{display:grid;grid-template-columns:1fr auto;gap:var(--space-5);align-items:center}
.two-col{display:grid;grid-template-columns:1fr 1.1fr;gap:var(--space-6);align-items:start}
@media (max-width:980px){.fin-row{grid-template-columns:1fr}.two-col{grid-template-columns:1fr}}

@media (max-width:760px){
  .site-head .bar{height:auto;min-height:72px;gap:var(--space-3);padding-top:var(--space-3);padding-bottom:var(--space-3);flex-wrap:wrap}
  .site-head .lockup{flex-shrink:0}
  .head-actions{margin-left:auto}
  .head-actions>a{display:none}
  .site-head nav{order:3;flex-basis:100%;width:100%;margin-left:0;gap:var(--space-5);padding-bottom:2px}
  .wrap{padding-left:var(--gutter-page);padding-right:var(--gutter-page)}
  .pad-y-lg{padding-top:var(--space-8);padding-bottom:var(--space-8)}
  .band-wrap{height:auto!important;min-height:480px}
  .band{padding:var(--space-6) 0}
  .h-disp,.h-disp-3{max-width:100%;overflow-wrap:anywhere}
  .row[data-form],form.row{align-items:stretch}
  form.row .input,form.row .btn{width:100%!important;flex-basis:100%}
  .fin-row{align-items:stretch}
  .fin-row>div:last-child{justify-items:stretch!important;width:100%}
  .fin-row .btn{width:100%}
  .foot-cols{grid-template-columns:1fr;gap:var(--space-6)}
  .foot-bottom{align-items:flex-start;flex-direction:column;gap:var(--space-3)}
  .foot-bottom>span:last-child{flex-wrap:wrap}
  .card{padding:var(--space-4)}
  .card-lg{padding:var(--space-5)}
  .split-body{padding:var(--space-5) var(--space-4)}
  .prose{width:100%}
}

/* QR campaign landing page */
.qr-landing{background:var(--forest-600);color:var(--bone-0)}
.qr-wrap{width:min(var(--width-content),calc(100% - 48px));margin:0 auto}
.qr-head{background:var(--bone-0);color:var(--forest-600);border-bottom:1px solid rgba(11,59,29,.12)}
.qr-head .qr-wrap{min-height:82px;display:flex;align-items:center;justify-content:space-between;gap:var(--space-5)}
.qr-head .lockup{font-size:1.45rem}
.qr-head .lockup .s{font-size:1.05rem}.qr-head .lockup .m{font-size:1.35rem}
.qr-head-note{font:var(--type-body-sm);color:var(--text-muted)}
.qr-hero{background:linear-gradient(135deg,#fff4f7 0%,#f9dce7 52%,#f4bfd2 100%);color:var(--forest-600);padding:clamp(56px,8vw,112px) 0}
.qr-hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(360px,480px);gap:clamp(40px,7vw,96px);align-items:center}
.qr-hero-copy{display:grid;gap:var(--space-5)}
.qr-hero-copy h1{max-width:700px}
.qr-proof-row{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-4);padding-top:var(--space-3)}
.qr-proof-row div{display:grid;gap:5px;border-top:2px solid var(--pink-500);padding-top:var(--space-3)}
.qr-proof-row strong{font:var(--type-h4);color:var(--forest-600)}.qr-proof-row span{font:var(--type-caption);color:var(--text-muted)}
.qr-form-card{background:var(--bone-0);border:1px solid rgba(11,59,29,.12);border-radius:var(--radius-lg);box-shadow:0 24px 70px rgba(11,59,29,.18);overflow:hidden;color:var(--text-body)}
.qr-form-art{height:210px;position:relative;overflow:hidden}.qr-form-art img{width:100%;height:100%;object-fit:cover;object-position:center 38%}.qr-sticker{position:absolute;right:18px;bottom:18px;background:var(--pink-500);color:var(--forest-600);font:var(--type-eyebrow);letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;padding:9px 12px;border-radius:var(--radius-pill);transform:rotate(-3deg)}
.qr-form-body{padding:var(--space-6);display:grid;gap:var(--space-3)}.qr-form-body h2{font:var(--type-h2)}.qr-form-body>p{font:var(--type-body-sm);color:var(--text-muted)}
.qr-form .input{background:#fff}.qr-form .check{color:var(--text-body)}
.qr-progress{display:flex;justify-content:space-between;align-items:center;gap:var(--space-3);font:var(--type-caption);color:var(--text-muted);border-bottom:var(--rule-hairline);padding-bottom:var(--space-3)}.qr-progress strong{font:var(--type-eyebrow);color:var(--forest-600)}.qr-step{display:grid;gap:var(--space-3)}.qr-step[hidden]{display:none}.qr-skip{border:0;background:none;color:var(--text-muted);font:var(--type-caption);cursor:pointer;padding:4px}.qr-success{display:grid;gap:var(--space-3)}.qr-success h3{font:var(--type-h3)}
.qr-questions{background:var(--bone-0);color:var(--text-body);padding:clamp(72px,9vw,128px) 0}.qr-section-intro{max-width:720px;display:grid;gap:var(--space-4);margin-bottom:var(--space-7)}.qr-question-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-4)}
.qr-question-card{background:var(--surface-card);border:var(--rule-hairline);border-radius:var(--radius-md);padding:var(--space-5);display:grid;gap:var(--space-3);box-shadow:var(--shadow-soft)}.qr-question-number{font:var(--type-numeral);font-size:1.5rem;color:var(--pink-500)}.qr-question-card h3{font:var(--type-h3)}.qr-question-card p{font:var(--type-body-sm);color:var(--text-muted)}
.qr-ask-panel{margin-top:clamp(40px,6vw,72px);padding:clamp(24px,5vw,56px);background:var(--forest-600);border-radius:var(--radius-lg);color:var(--bone-0);display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,480px);gap:clamp(32px,7vw,96px);align-items:start;box-shadow:var(--shadow-lift)}.qr-ask-copy{display:grid;gap:var(--space-4);position:sticky;top:24px}.qr-ask-copy h3{font:var(--type-h2)}.qr-ask-copy p{font:var(--type-body);color:var(--forest-100)}.qr-ask-form{background:var(--bone-0);color:var(--text-body);padding:var(--space-5);border-radius:var(--radius-md);gap:var(--space-3)}.qr-ask-form .input{background:#fff}.qr-ask-form textarea{min-height:130px;resize:vertical}.qr-ask-form .btn{justify-self:start}
.qr-podcast{background:var(--pink-100);color:var(--forest-600);padding:clamp(72px,9vw,128px) 0}.qr-podcast-grid{display:grid;grid-template-columns:minmax(260px,420px) minmax(0,1fr);gap:clamp(40px,8vw,112px);align-items:center}.qr-podcast-art{position:relative;border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-lift)}.qr-podcast-art img{display:block;width:100%;aspect-ratio:1;object-fit:cover}.qr-sticker-dark{background:var(--forest-600);color:var(--bone-0);top:18px;right:18px;bottom:auto}
.qr-final{background:var(--gold-50);color:var(--forest-600);padding:clamp(72px,10vw,144px) 0;text-align:center}.qr-final .qr-wrap{display:grid;justify-items:center;gap:var(--space-5)}.qr-final h2{max-width:850px}.qr-foot{background:var(--forest-600);color:var(--forest-200);padding:var(--space-5) 0}.qr-foot .qr-wrap{display:flex;justify-content:space-between;gap:var(--space-4);font:var(--type-caption)}
@media (max-width:900px){.qr-hero-grid,.qr-podcast-grid,.qr-ask-panel{grid-template-columns:1fr}.qr-hero-copy h1{max-width:620px}.qr-question-grid{grid-template-columns:1fr 1fr}.qr-podcast-art{max-width:420px}.qr-ask-copy{position:static}.qr-ask-form{max-width:560px}}
@media (max-width:600px){.qr-wrap{width:min(100% - 32px,var(--width-content))}.qr-head .qr-wrap{min-height:72px;align-items:flex-start;flex-direction:column;justify-content:center;gap:4px}.qr-head-note{font-size:.75rem}.qr-hero{padding:48px 0}.qr-hero-copy h1{font-size:clamp(2.7rem,14vw,4.5rem);line-height:.95}.qr-proof-row{grid-template-columns:1fr;gap:var(--space-3)}.qr-proof-row div{display:flex;justify-content:space-between;gap:var(--space-3)}.qr-form-body{padding:var(--space-5)}.qr-question-grid{grid-template-columns:1fr}.qr-ask-panel{padding:var(--space-5);border-radius:var(--radius-md)}.qr-ask-form{padding:0;background:transparent;color:var(--bone-0)}.qr-ask-form .input{background:var(--bone-0)}.qr-ask-form .btn{width:100%}.qr-foot .qr-wrap{flex-direction:column}}
