/* WebPies — shared components & chrome (compiled from scss/components.scss) */
:root{
  --cream:#f5f1ea;
  --cream-2:#ece6db;
  --ink:#0d0f12;
  --ink-2:#1a1d22;
  --muted:#6b6b66;
  --line:rgba(13,15,18,.12);
  --lime:#c8f25c;
  --lime-deep:#9fd031;
}
html,body{background:var(--cream);color:var(--ink);font-family:'Geist',ui-sans-serif,system-ui,sans-serif;-webkit-font-smoothing:antialiased;}
.font-serif{font-family:'Instrument Serif',ui-serif,Georgia,Cambria,"Times New Roman",Times,serif;font-weight:400;letter-spacing:-0.01em;}
.font-mono{font-family:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,'Liberation Mono','Courier New',monospace;}
.ink{color:var(--ink);} .muted{color:var(--muted);}
.bg-ink{background:var(--ink);color:var(--cream);}
.bg-cream-2{background:var(--cream-2);}
.bg-lime{background:var(--lime);} .text-lime{color:var(--lime);}
.border-line{border-color:var(--line);}
.ring-line{box-shadow:inset 0 0 0 1px var(--line);}
.ring-ink{box-shadow:inset 0 0 0 1px var(--ink);}
.grain{background-image:radial-gradient(rgba(0,0,0,.035) 1px, transparent 1px);background-size:3px 3px;}
.hairline{height:1px;background:var(--line);}
.num-mono{font-variant-numeric:tabular-nums;font-family:'JetBrains Mono',monospace;}
.scrolled{background:rgba(245,241,234,.85);backdrop-filter:saturate(140%) blur(12px);border-bottom:1px solid var(--line);}
.btn-ink{background:var(--ink);color:var(--cream);transition:transform .18s ease, background .2s, box-shadow .25s ease;}
.btn-ink:hover{background:#000;transform:translateY(-2px);box-shadow:0 12px 26px -10px rgba(13,15,18,.55);}
.btn-lime{background:var(--lime);color:var(--ink);transition:transform .18s ease, background .2s, box-shadow .25s ease;}
.btn-lime:hover{background:var(--lime-deep);transform:translateY(-2px);box-shadow:0 12px 26px -10px rgba(159,208,49,.6);}
.btn-ink:active,.btn-lime:active{transform:translateY(0);transition-duration:.05s;}
/* shine sweep across primary buttons on hover */
.btn-ink,.btn-lime{position:relative;overflow:hidden;isolation:isolate;}
.btn-ink::before,.btn-lime::before{
  content:"";position:absolute;top:0;bottom:0;left:0;width:60%;z-index:-1;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.45),transparent);
  transform:translateX(-180%) skewX(-12deg);
}
.btn-ink:hover::before,.btn-lime:hover::before{animation:btnShine .7s ease;}
@keyframes btnShine{to{transform:translateX(280%) skewX(-12deg);}}
@media (prefers-reduced-motion: reduce){
  .btn-ink:hover,.btn-lime:hover{transform:none;}
  .btn-ink:hover::before,.btn-lime:hover::before{animation:none;}
}
/* readable native dropdowns regardless of OS theme (fixes invisible option text) */
select.input option{background:#14171c;color:#f5f1ea;}
select.input{cursor:pointer;}
/* smooth reveal for the "Custom…" budget/timeline inputs */
.custom-wrap{display:grid;grid-template-rows:0fr;opacity:0;overflow:hidden;margin-top:0;transition:grid-template-rows .35s cubic-bezier(.5,0,.2,1), opacity .3s ease, margin-top .3s ease;}
.custom-wrap > *{min-height:0;}
.custom-wrap.show{grid-template-rows:1fr;opacity:1;margin-top:2px;}
.underline-grow{position:relative;}
.underline-grow::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .35s ease;}
.underline-grow:hover::after,.underline-grow.active::after{transform:scaleX(1);}
details summary{list-style:none;cursor:pointer;}
details summary::-webkit-details-marker{display:none;}
details[open] .faq-plus{transform:rotate(45deg);}
.faq-plus{transition:transform .3s ease;}
.input{width:100%;background:transparent;border:0;border-bottom:1px solid var(--line);padding:14px 0;outline:none;transition:border-color .2s;font-size:15px;color:inherit;}
.input:focus{border-color:currentColor;}
.input::placeholder{color:#9c9a93;}
.field-err{color:#a83b18;font-family:'JetBrains Mono',monospace;font-size:11px;margin-top:6px;display:none;}
.field.error .input{border-color:#a83b18;}
.field.error .field-err{display:block;}
.chip{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border:1px solid var(--line);border-radius:999px;font-family:'JetBrains Mono',monospace;font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--ink);background:rgba(255,255,255,.4);}
.dot{width:6px;height:6px;border-radius:999px;background:var(--lime-deep);box-shadow:0 0 0 3px rgba(159,208,49,.25);}
.blink{animation:blink 1.1s steps(2,start) infinite;}
@keyframes blink{to{visibility:hidden}}
.ph{background:
    repeating-linear-gradient(135deg, rgba(13,15,18,.05) 0 1px, transparent 1px 10px),
    var(--cream-2);
  color:#6b6b66;display:flex;align-items:center;justify-content:center;font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.06em;text-transform:uppercase;}
.ph-dark{background:
    repeating-linear-gradient(135deg, rgba(255,255,255,.04) 0 1px, transparent 1px 10px),
    #1a1d22;
  color:rgba(245,241,234,.55);display:flex;align-items:center;justify-content:center;font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.06em;text-transform:uppercase;}
.mobile-menu{transform:translateY(-110%);transition:transform .4s cubic-bezier(.7,.0,.2,1);}
.mobile-menu.open{transform:translateY(0);}
.section-num{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);}
.no-balance{text-wrap:pretty;}
.codewin{background:var(--ink);color:#e8e6e0;border-radius:14px;font-family:'JetBrains Mono',monospace;font-size:12.5px;line-height:1.7;}
.tok-k{color:#c8f25c;} .tok-s{color:#f3c98b;} .tok-c{color:#7a7a72;font-style:italic;} .tok-p{color:#9ec5ff;} .tok-n{color:#e8e6e0;}
.badge-deal{background:var(--lime);color:var(--ink);font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.1em;text-transform:uppercase;padding:4px 8px;border-radius:4px;}
.marquee{display:flex;gap:4rem;animation:scroll 40s linear infinite;}
@keyframes scroll{from{transform:translateX(0)} to{transform:translateX(-50%)}}
.seg{display:inline-flex;padding:3px;border:1px solid var(--line);border-radius:999px;background:rgba(255,255,255,.5);}
.seg button{padding:7px 14px;border-radius:999px;font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);transition:all .2s;}
.seg button.active{background:var(--ink);color:var(--cream);}
.h-clip{overflow:hidden;}
.tag{display:inline-flex;align-items:center;padding:3px 9px;border-radius:999px;background:var(--cream-2);font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink);}
.post-card{transition:transform .25s ease;}
.post-card:hover{transform:translateY(-3px);}
.post-card:hover .ph{filter:brightness(0.97);}

/* ---- Smooth accordion (JS-driven height animation) ---- */
.acc-trigger{appearance:none;-webkit-appearance:none;background:none;border:0;cursor:pointer;color:inherit;font:inherit;width:100%;text-align:left;}
.acc-panel{overflow:hidden;height:0;transition:height .44s cubic-bezier(.7,0,.2,1);}
.acc-inner{opacity:0;transform:translateY(-4px);transition:opacity .35s ease, transform .4s cubic-bezier(.7,0,.2,1);}
.accordion.open > .acc-panel > .acc-inner{opacity:1;transform:translateY(0);}
.acc-icon{transition:transform .4s cubic-bezier(.7,0,.2,1);will-change:transform;}
.accordion.open .acc-icon{transform:rotate(45deg);}
.accordion.open .acc-icon.is-chev{transform:rotate(90deg);}

/* ---- Responsive: stop 12-col grid gutters from forcing horizontal overflow on small screens.
   A 12-track grid keeps 11 column-gaps even when every child is col-span-12, so a large gap
   (e.g. gap-10 = 40px → 440px) overflows narrow viewports. Cap the column gap on mobile. */
@media (max-width: 767px){
  .grid.grid-cols-12{ column-gap: 1.25rem !important; }
}
/* ---- Mobile rhythm: tighten oversized section padding, big grid gaps, and the
   largest display headings so phones don't feel sparse. Desktop unaffected. */
@media (max-width: 640px){
  .py-24{ padding-top:3.25rem !important; padding-bottom:3.25rem !important; }
  .py-20{ padding-top:3rem !important; padding-bottom:3rem !important; }
  .py-16{ padding-top:2.75rem !important; padding-bottom:2.75rem !important; }
  .py-14{ padding-top:2.5rem !important; padding-bottom:2.5rem !important; }
  .py-12{ padding-top:2.25rem !important; padding-bottom:2.25rem !important; }
  .pt-14{ padding-top:2.25rem !important; }
  .pb-28{ padding-bottom:3.25rem !important; }
  .pb-24{ padding-bottom:3.25rem !important; }
  .pb-20{ padding-bottom:3rem !important; }
  .pb-10{ padding-bottom:1.75rem !important; }
  .pt-8{ padding-top:1.5rem !important; }
  .gap-10{ gap:1.75rem !important; }
  .gap-8{ gap:1.5rem !important; }
  .text-\[64px\]{ font-size:3.15rem !important; line-height:1.02 !important; }
  .text-\[56px\]{ font-size:2.85rem !important; line-height:1.02 !important; }
  .text-\[44px\]{ font-size:2.35rem !important; }
}
/* Belt-and-suspenders: never allow the document to scroll sideways. */
html, body{ max-width: 100%; overflow-x: hidden; }

/* shared pagination (shop + journal) */
.prod-pager{ display:flex; justify-content:center; align-items:center; gap:8px; margin-top:48px; flex-wrap:wrap; }
.pg-btn{ min-width:42px; height:42px; padding:0 12px; display:inline-flex; align-items:center; justify-content:center; border:1px solid var(--line); background:transparent; color:var(--ink); border-radius:999px; font-family:'JetBrains Mono',monospace; font-size:13px; cursor:pointer; transition:background .2s ease, color .2s ease, border-color .2s ease, transform .15s ease; }
.pg-btn:hover:not(:disabled):not(.active){ background:var(--cream-2); }
html.theme-dark .pg-btn:hover:not(:disabled):not(.active){ background:rgba(245,241,234,.06); }
.pg-btn.active{ background:var(--ink); color:var(--cream); border-color:var(--ink); }
html.theme-dark .pg-btn.active{ background:var(--lime); color:#0d0f12; border-color:var(--lime); }
.pg-btn:disabled{ opacity:.4; cursor:default; }
.pg-btn:active:not(:disabled){ transform:scale(.94); }