/* ===== STACKING / Z-INDEX MAP (keep in sync when adding overlays) =====
   2    body::before backdrop
   20   tooltips (.wf-tip, .scroll-tip)
   45   (reserved)
   50   .filters (sticky)
   60   .site-header (sticky)
   200  (reserved)
   300  .kebab-menu, .cart-backdrop
   320  .search-overlay
   330  .settings-overlay
   340  .srf-overlay (service request form)
   400  .scroll-top-btn
   480  .cookie-banner
   600  .app-error-banner
   650  .limit-backdrop (modal — highest, sits above all panels)
   ===================================================================== */
/* ===== THEME TOKENS (light defaults preserve current look) ===== */
:root{
  color-scheme: light;
  --surface:#fff;
  --header-bg:hsla(42,40%,96%,0.92);
  --on-primary:#fff;
  --shadow:rgba(0,0,0,0.06);
  --shadow-strong:rgba(0,0,0,0.18);
}
/* FORCED LIGHT-MODE GUARANTEE — explicit so a stale/odd cascade can never
   leave page chrome dark when the user has chosen (or resolved to) light. */
:root[data-theme="light"]{ background:#fff !important; }
[data-theme="light"] body{ background:#fff !important; }
[data-theme="light"] body::before{ content:""; position:fixed; inset:0; background:var(--bg); z-index:-1; pointer-events:none; }
[data-theme="light"] .site-footer,
[data-theme="light"] .footer-cta-strip{ background:hsl(42,40%,96%) !important; }
[data-theme="light"] .footer-main,
[data-theme="light"] .footer-bottom-bar{ background:hsl(42,40%,96%) !important; }
[data-theme="light"] .sections,
[data-theme="light"] .wf-group-sec{ background:#fff !important; }
/* ===== DARK THEME — warm charcoal (~#211f1c), gold-led ===== */
:root[data-theme="dark"] {
  color-scheme: dark;
  --primary:hsl(211,42%,56%);
  --primary-hover:hsl(211,42%,64%);
  --primary-soft:hsla(211,42%,56%,0.12);
  --ink:hsl(40,14%,92%); --ink-2:hsl(40,9%,78%); --ink-3:hsl(40,7%,62%); --ink-4:hsl(40,5%,50%);
  --line:hsl(38,6%,26%); --line-2:hsl(38,6%,20%);
  --bg:hsl(38,8%,12%);
  --surface:hsl(38,7%,16%);
  --header-bg:hsla(38,9%,13%,0.92);
  --on-primary:hsl(38,12%,10%);
  --shadow:rgba(0,0,0,0.45); --shadow-strong:rgba(0,0,0,0.62);
  --blue:var(--primary); --blue-soft:var(--primary-soft);
  --ok-bg:hsla(142,38%,40%,0.16); --ok-fg:hsl(142,45%,68%);
  --warn-bg:hsla(38,70%,50%,0.18); --warn-fg:hsl(38,80%,72%);
  --stop-bg:hsla(0,55%,50%,0.16); --stop-fg:hsl(0,70%,72%);
  --danger:hsl(0,60%,55%); --danger-hover:hsl(0,60%,62%); --danger-border:hsla(0,55%,55%,0.5); --danger-tint:hsla(0,55%,50%,0.12);
  --gold:hsl(38,66%,64%); --gold-soft:hsla(38,58%,56%,0.55); --cream:hsl(38,9%,14%); --gold-tint:hsla(38,60%,56%,0.14);
  --p-green:hsl(146,38%,56%); --p-rust:hsl(8,58%,62%);
}
/* page background + iOS overscroll flash */
html[data-theme="dark"]{ background-color:var(--bg) !important; overscroll-behavior:none; }
html[data-theme="dark"] body{ min-height:100dvh; background-color:var(--bg) !important; }
/* Fixed dark layer behind all content — guarantees no white substrate flashes
   through during fast/momentum scrolling, regardless of which element repaints. */
html[data-theme="dark"] body::before{
  content:""; position:fixed; inset:0; background:var(--bg); z-index:-1; pointer-events:none;
}
[data-theme="dark"] .sections,
[data-theme="dark"] .wf-group-sec{ background:var(--bg) !important; }
/* sticky chrome */
[data-theme="dark"] .site-header,
[data-theme="dark"] .filters{ background:var(--header-bg) !important; }
[data-theme="dark"] .stage-anchor{ background:var(--header-bg) !important; }
/* surfaces (cards, sheets, inputs, menus, panels) */
[data-theme="dark"] .wf-card,
[data-theme="dark"] .wf-cart,
[data-theme="dark"] .home-search-bar,
[data-theme="dark"] .cat-select,
[data-theme="dark"] .sec-more,
[data-theme="dark"] .auth-input,
[data-theme="dark"] .auth-tab,
[data-theme="dark"] .otp-box,
[data-theme="dark"] .set-input,
[data-theme="dark"] .srf-input,
[data-theme="dark"] .bug-textarea,
[data-theme="dark"] .bug-input,
[data-theme="dark"] .bug-select,
[data-theme="dark"] .kebab-menu,
[data-theme="dark"] .cs-row-menu,
[data-theme="dark"] .limit-modal,
[data-theme="dark"] .bill-manage,
[data-theme="dark"] .bug-card,
[data-theme="dark"] .cookie-banner{ background:var(--surface) !important; }
/* full-screen overlays use the page bg, not the raised surface */
[data-theme="dark"] .settings-panel,
[data-theme="dark"] .srf-panel,
[data-theme="dark"] .search-panel,
[data-theme="dark"] .cart-backdrop{ background:var(--bg) !important; }
/* hero + story band */
[data-theme="dark"] .hero-centered,
[data-theme="dark"] .story-band{ background:var(--bg) !important; }
/* MISSED-SURFACE SWEEP — light-tinted panels that the first pass left bright */
[data-theme="dark"] .track-breather,
[data-theme="dark"] .bill-current,
[data-theme="dark"] .plan-card{ background:var(--surface) !important; }
[data-theme="dark"] .footer-cta-strip,
[data-theme="dark"] .site-footer{ background:var(--bg) !important; }
/* status / error chips — translucent tints so they read on dark */
[data-theme="dark"] .cs-item-status.requested,
[data-theme="dark"] .bill-current-status{ background:var(--ok-bg) !important; color:var(--ok-fg) !important; }
[data-theme="dark"] .cs-item-status.pending{ background:var(--warn-bg) !important; color:var(--warn-fg) !important; }
[data-theme="dark"] .bill-current-status.past_due,
[data-theme="dark"] .bill-current-status.canceled{ background:var(--stop-bg) !important; color:var(--stop-fg) !important; }
[data-theme="dark"] .auth-error,
[data-theme="dark"] .danger-row,
[data-theme="dark"] .danger-confirm{ background:var(--stop-bg) !important; border-color:hsla(0,55%,50%,0.4) !important; }
/* readonly input distinct from editable */
[data-theme="dark"] .set-input[readonly]{ background:var(--line-2) !important; }
/* buttons whose bg is --ink (light token in dark) need bg-colored label */
[data-theme="dark"] .auth-btn,
[data-theme="dark"] .cookie-btn-accept,
[data-theme="dark"] .set-update,
[data-theme="dark"] .plan-cta,
[data-theme="dark"] .srf-submit,
[data-theme="dark"] .limit-cta,
[data-theme="dark"] .cs-checkout-btn,
[data-theme="dark"] .bug-submit,
[data-theme="dark"] .auth-tab.active{ color:var(--on-primary) !important; background:var(--ink) !important; border-color:var(--ink) !important; }
[data-theme="dark"] .plan-cta:disabled{ color:var(--ink-4) !important; background:var(--line-2) !important; }
/* tooltip: --ink bg becomes light in dark; flip to dark bubble */
[data-theme="dark"] .wf-tip{ background:hsl(38,7%,24%) !important; color:var(--ink) !important; }
[data-theme="dark"] .wf-tip::after{ border-bottom-color:hsl(38,7%,24%) !important; }
/* bonus badge text legible on dark cream */
[data-theme="dark"] .wf-bonus{ color:var(--gold) !important; }
/* search highlight a touch stronger on dark */
[data-theme="dark"] .search-hl{ background:hsla(38,75%,58%,0.4) !important; color:var(--ink) !important; }
/* provider tag tints */
[data-theme="dark"] .wf-provider-internal{ background:hsla(211,40%,50%,0.18) !important; color:hsl(211,45%,72%) !important; }
[data-theme="dark"] .wf-provider-legal{ background:hsla(245,30%,55%,0.18) !important; color:hsl(245,40%,76%) !important; }
[data-theme="dark"] .wf-provider-nonlegal{ background:hsla(140,30%,45%,0.18) !important; color:hsl(140,40%,70%) !important; }


:root {
  /* Theme tokens — EstateCircle /home */
  --primary:hsl(211,50%,34%);        /* portal navy */
  --primary-hover:hsl(211,50%,28%);  /* portal navy hover */
  --primary-soft:hsl(211,50%,34%,0.08);
  --ink:hsl(0,0%,10%); --ink-2:hsl(0,0%,25%); --ink-3:hsl(0,0%,40%); --ink-4:hsl(0,0%,53%);
  --line:hsl(35,10%,88%); --line-2:hsl(40,10%,92%);
  --bg:hsl(0,0%,100%);
  /* legacy accent names now mapped to portal navy so existing rules stay consistent */
  --blue:var(--primary); --blue-soft:var(--primary-soft);
  /* status semantics from the portal */
  --ok-bg:hsl(142,50%,92%); --ok-fg:hsl(142,60%,25%);
  --warn-bg:hsl(38,90%,93%); --warn-fg:hsl(32,90%,30%);
  --stop-bg:hsl(0,70%,94%); --stop-fg:#b91c1c;
  --danger:#b91c1c; --danger-hover:#991010; --danger-border:#e0a3a3; --danger-tint:#fdf6f6;
  --radius:0.5rem; --maxw-lg:1600px;
  --gold:hsl(38,55%,52%); --gold-soft:hsl(38,50%,70%); --cream:hsl(42,40%,96%); --gold-tint:hsla(38,55%,52%,0.1);
  --p-green:hsl(146,32%,45%); --p-rust:hsl(8,55%,52%); /* story-band line-art accents */
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;background:var(--bg);overflow-x:clip;overflow-anchor:none;}
body{font-family:"IBM Plex Sans",system-ui,sans-serif;color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased;line-height:1.5;overflow-x:visible;min-height:100dvh;}
a{text-decoration:none;color:inherit;}
button{cursor:pointer;border:none;background:none;font:inherit;color:inherit;}
.wrap{max-width:560px;margin:0 auto;padding:0 1.25rem;}

/* HEADER */
.site-header{position:sticky;top:0;z-index:60;background:hsla(42,40%,96%,0.92);backdrop-filter:saturate(180%) blur(10px);border-bottom:1px solid var(--line);padding-top:env(safe-area-inset-top,0px);}
.header-inner{max-width:560px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;padding:0.625rem 1.25rem;height:58px;}
.logo-wordmark{display:flex;flex-direction:row;align-items:center;gap:0.55rem;line-height:1.12;}
.logo-text-col{display:flex;flex-direction:column;line-height:1.12;}
.logo-mark{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;flex-shrink:0;}
.logo-mark svg{width:32px;height:32px;display:block;}
.logo-name{font-family:"Lora",Georgia,serif;font-weight:600;font-size:1rem;letter-spacing:-0.01em;color:var(--ink);}
.logo-beta{display:inline-block;vertical-align:middle;font-family:"IBM Plex Mono",monospace;font-size:0.5rem;font-weight:700;letter-spacing:0.08em;line-height:1;padding:0.16rem 0.32rem;margin-left:0.18rem;border-radius:4px;background:var(--primary,#1B2A4A);color:#fff;transform:translateY(-1px);}
.logo-sub{font-size:0.6rem;color:var(--ink-4);letter-spacing:0.01em;}
.header-right{display:flex;align-items:center;gap:0.55rem;}
.header-cart{position:relative;display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border:none;border-radius:8px;color:var(--ink-2);background:transparent;transition:all 0.16s ease;}
.header-icon-btn{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border:none;border-radius:8px;color:var(--ink-2);background:transparent;transition:all 0.16s ease;cursor:pointer;}
.header-icon-btn svg{width:17px;height:17px;}
@media (hover:hover){.header-icon-btn:hover{border-color:var(--primary);color:var(--primary);}}
.header-cart svg{width:17px;height:17px;}
.header-cart:active{transform:scale(0.95);}
@media (hover:hover){.header-cart:hover{border-color:var(--blue);color:var(--blue);}}
.cart-badge{position:absolute;top:-6px;right:-6px;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--blue);color:#fff;font-family:"IBM Plex Mono",monospace;font-size:0.62rem;font-weight:500;display:none;align-items:center;justify-content:center;line-height:1;}
.cart-badge.show{display:inline-flex;}
.header-cta{font-family:"IBM Plex Mono",monospace;font-size:0.7rem;font-weight:500;letter-spacing:0.04em;text-transform:uppercase;color:var(--ink);padding:0.45rem 0.7rem;border:1px solid var(--ink);border-radius:6px;transition:all 0.18s ease;}
.header-cta:active{background:var(--ink);color:#fff;}
@media (hover:hover){.header-cta:hover{background:var(--ink);color:#fff;}}

/* INTRO */
.page-intro{padding:3rem 0 1rem;text-align:left;min-height:calc(100vh - var(--header-h,58px));min-height:calc(100svh - var(--header-h,58px));display:flex;flex-direction:column;justify-content:center;}@media (min-width:600px){.page-intro{text-align:center;}}
.eyebrow{font-family:"IBM Plex Mono",monospace;font-size:0.68rem;font-weight:500;letter-spacing:0.16em;text-transform:uppercase;color:var(--ink-3);margin-bottom:1.5rem;}
.page-intro h1{font-family:"Lora",Georgia,serif;font-weight:600;font-size:clamp(2.1rem,7.5vw,2.8rem);line-height:1.18;letter-spacing:-0.025em;margin-bottom:1.6rem;color:var(--ink);max-width:none;}
.page-intro .tagline{font-family:"Lora",Georgia,serif;font-style:italic;font-size:1.02rem;color:var(--ink);margin-bottom:0.7rem;}
.page-intro p{font-size:1rem;color:var(--ink-2);max-width:34rem;margin:0;line-height:1.6;}@media (min-width:600px){.page-intro p{margin:0 auto;}}

/* FILTERS */
.filters{position:-webkit-sticky;position:sticky;top:var(--header-h,58px);z-index:50;background:hsla(42,40%,96%,0.92);backdrop-filter:saturate(180%) blur(10px);padding:0.85rem 1.25rem;border-bottom:1px solid var(--line-2);overflow-anchor:none;contain:layout;scroll-margin-top:var(--header-h,58px);}

/* Track selector — segmented toggle */
.track-wrap{display:flex;flex-direction:column;align-items:center;gap:0.45rem;}
.segmented{display:inline-flex;border:1px solid var(--line);border-radius:12px;background:var(--line-2);padding:3px;gap:2px;}
.seg-btn{font-family:"IBM Plex Mono",monospace;font-size:0.7rem;font-weight:500;letter-spacing:0.02em;padding:0.5rem 1.1rem;border-radius:9px;color:var(--ink-3);background:transparent;white-space:nowrap;transition:color 0.16s ease,background 0.16s ease;}
.seg-btn .seg-count{font-size:0.62rem;opacity:0.65;margin-left:0.35rem;}
.seg-btn.active{background:var(--primary);color:#fff;box-shadow:0 1px 2px rgba(0,0,0,0.12);}
.seg-btn.active .seg-count{opacity:0.8;}
@media (hover:hover){.seg-btn:not(.active):hover{color:var(--ink);}}

/* Category refinement — quiet secondary row */
.cat-row{display:none;gap:0.4rem;justify-content:center;flex-wrap:wrap;margin-top:0.7rem;padding-top:0.7rem;border-top:1px solid var(--line-2);}

/* Mobile category dropdown — replaces pill row on small screens */
.cat-select{display:block;width:100%;margin-top:0.7rem;padding:0.7rem 2.25rem 0.7rem 0.85rem;font-family:"IBM Plex Mono",monospace;font-size:0.8rem;font-weight:500;color:var(--ink);background:#fff;border:1px solid var(--line);border-radius:0.5rem;-webkit-appearance:none;appearance:none;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='%235a5a5a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 0.85rem center;}

/* SECTIONS */
.sections{padding:1rem 0 1rem;min-height:60vh;background:var(--bg);overflow-anchor:none;}
.wf-group-sec{padding:1.5rem 0 0.5rem;}
.sec-head{display:flex;align-items:baseline;justify-content:space-between;gap:0.75rem;margin-bottom:1rem;padding-bottom:0.6rem;border-bottom:1px solid var(--line);}
.sec-title-wrap{min-width:0;}
.sec-track{font-family:"IBM Plex Mono",monospace;font-size:0.6rem;font-weight:500;text-transform:uppercase;letter-spacing:0.08em;color:var(--ink-4);display:block;margin-bottom:0.2rem;}
.sec-title{font-family:"Lora",Georgia,serif;font-weight:600;font-size:1.3rem;line-height:1.2;color:var(--ink);letter-spacing:-0.01em;}
.sec-count{font-family:"IBM Plex Mono",monospace;font-size:0.7rem;color:var(--ink-4);white-space:nowrap;flex-shrink:0;}

/* GRID + tiles */
.wf-grid{display:grid;grid-template-columns:1fr;gap:1rem;}
.wf-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:1.4rem 1.4rem 1.1rem;width:100%;min-height:200px;text-align:left;position:relative;transition:border-color 0.18s ease,background 0.18s ease,transform 0.18s ease,box-shadow 0.18s ease;animation:fadeIn 0.35s ease backwards;}
.wf-card.card-leaving{animation:cardLeave 0.45s cubic-bezier(0.4,0,0.2,1) forwards;pointer-events:none;}
@keyframes cardLeave{0%{opacity:1;transform:scale(1);}35%{opacity:1;transform:scale(1.01);}100%{opacity:0;transform:scale(0.92) translateY(-6px);}}
.sec-all-added{display:flex;align-items:center;justify-content:center;gap:0.5rem;padding:1.75rem 1rem;border:1px dashed var(--line);border-radius:var(--radius);color:var(--ink-3);font-family:"IBM Plex Sans",system-ui,sans-serif;font-size:0.85rem;}
.sec-all-added svg{width:18px;height:18px;color:#3a6b3a;flex-shrink:0;}
.sec-all-added-link{background:none;border:none;padding:0;color:var(--primary);font-family:inherit;font-size:inherit;cursor:pointer;text-decoration:underline;}
@media (hover:hover){
  .wf-card:hover{transform:translateY(-2px);box-shadow:0 6px 18px rgba(0,0,0,0.06);}
}
/* single-tap reaction on touch devices (visual only) */
.wf-card.card-react{transform:translateY(-2px);box-shadow:0 6px 18px rgba(0,0,0,0.06);}
.wf-card::before{content:"";position:absolute;left:0;top:0;right:0;height:3px;background:var(--blue);border-radius:var(--radius) var(--radius) 0 0;transform:scaleX(0);transform-origin:left;transition:transform 0.25s ease;}
.wf-card:active{transform:scale(0.995);}
.wf-top{display:flex;align-items:center;justify-content:space-between;gap:0.5rem;margin-bottom:0.9rem;}
.wf-track{font-family:"IBM Plex Mono",monospace;font-size:0.6rem;font-weight:500;text-transform:uppercase;letter-spacing:0.05em;padding:0.22rem 0.5rem;border-radius:5px;white-space:nowrap;color:var(--ink-3);background:var(--line-2);border:1px solid var(--line);}
.wf-name{font-family:"Lora",Georgia,serif;font-weight:600;font-size:1.15rem;line-height:1.25;color:var(--ink);margin-bottom:0.5rem;}
.wf-desc{font-size:0.86rem;color:var(--ink-3);line-height:1.5;margin-bottom:1rem;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;}
.wf-desc{font-size:0.86rem;color:var(--ink-3);line-height:1.5;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;flex:1;margin-bottom:0.5rem;}

/* Trust Verification icon + tooltip */
.wf-trust{position:relative;display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;flex-shrink:0;cursor:help;background:none;border:none;padding:0;}
.wf-trust svg{width:16px;height:16px;display:block;}
.wf-trust .trust-badge{transition:transform 0.16s ease;}
@media (hover:hover){.wf-trust:hover .trust-badge{transform:scale(1.12);}}
/* tooltip opens downward-left from upper-right corner */
.wf-tip{position:absolute;top:calc(100% + 8px);right:0;left:auto;width:auto;white-space:nowrap;background:var(--ink);color:#fff;font-family:"IBM Plex Sans",sans-serif;font-size:0.7rem;font-weight:400;line-height:1.4;letter-spacing:0;text-transform:none;padding:0.4rem 0.55rem;border-radius:0.45rem;box-shadow:0 8px 24px rgba(0,0,0,0.18);opacity:0;visibility:hidden;transform:translateY(4px);transition:opacity 0.16s ease,transform 0.16s ease,visibility 0.16s;z-index:20;pointer-events:none;}
.wf-tip strong{font-weight:600;}
.wf-tip::after{content:"";position:absolute;bottom:100%;right:10px;left:auto;border:5px solid transparent;border-bottom-color:var(--ink);}
.wf-trust:hover .wf-tip,.wf-trust:focus-visible .wf-tip,.wf-trust:focus .wf-tip{opacity:1;visibility:visible;transform:translateY(0);}


.wf-actions{display:flex;align-items:center;flex-shrink:0;}
.wf-card-actions{position:static;padding-top:0.4rem;display:flex;justify-content:center;align-items:center;z-index:2;gap:0.5rem;}
.wf-cart{display:inline-flex;align-items:center;justify-content:center;gap:0.45rem;width:170px;height:38px;padding:0;border:1px solid var(--line);border-radius:8px;color:var(--ink-2);background:#fff;font-family:"IBM Plex Mono",monospace;font-size:0.7rem;font-weight:500;letter-spacing:0.02em;white-space:nowrap;transition:all 0.16s ease;z-index:2;}
.wf-cart svg{width:16px;height:16px;flex-shrink:0;}
.wf-cart .wf-cart-label{line-height:1;}
/* Label text is driven by CSS so it can differ by viewport. Desktop: full phrase. */
.wf-cart .wf-cart-label::after{content:"Add to My Workflows";}
.wf-cart.added .wf-cart-label::after{content:"Added to My Workflows";}
.wf-cart:active{transform:scale(0.97);}
@media (hover:hover){.wf-cart:hover{border-color:var(--blue);color:var(--blue);background:var(--blue-soft);}}
.wf-cart.added{border-color:var(--blue);color:#fff;background:var(--blue);}

/* show all per section */
.sec-more-wrap{text-align:center;padding:1.1rem 0 0.25rem;}
.sec-more{font-family:"IBM Plex Mono",monospace;font-size:0.72rem;font-weight:500;letter-spacing:0.03em;color:var(--ink);padding:0.55rem 1.25rem;border:1px solid var(--line);border-radius:10px;background:#fff;transition:all 0.16s ease;}
@media (hover:hover){.sec-more:hover{border-color:var(--blue);color:var(--blue);}}

/* FOOTER */

/* Portal footer logic: long on desktop, short on mobile */






@keyframes fadeIn{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:translateY(0);}}

/* ── Nudge toast (complimentary bundle + Trust Verification) ── */

/* Cookie consent banner */
.cookie-banner{position:fixed;bottom:calc(env(safe-area-inset-bottom,0px) + 1rem);left:1rem;right:auto;z-index:250;margin:0;width:calc(100vw - 2rem);max-width:340px;background:#fff;border:1px solid var(--line);border-radius:0.75rem;box-shadow:0 8px 32px rgba(0,0,0,0.12),0 2px 8px rgba(0,0,0,0.06);padding:0.8rem 0.85rem;display:flex;flex-direction:column;gap:0.6rem;opacity:0;pointer-events:none;transform:translateY(20px);transition:opacity 0.25s ease,transform 0.3s cubic-bezier(0.34,1.56,0.64,1);}
.cookie-banner.visible{opacity:1;pointer-events:auto;transform:translateY(0);}
.cookie-text{font-family:"IBM Plex Sans",system-ui,sans-serif;font-size:0.78rem;color:var(--ink-2);line-height:1.45;text-align:left;}
.cookie-link{color:var(--primary);text-decoration:underline;}
@media (hover:hover){.cookie-link:hover{color:var(--primary-hover);}}
.cookie-actions{display:flex;justify-content:flex-start;}
.cookie-btn-accept{padding:0.5rem 1.1rem;border-radius:0.5rem;background:var(--ink);color:#fff;font-family:"IBM Plex Mono",monospace;font-size:0.74rem;font-weight:500;letter-spacing:0.03em;text-transform:uppercase;border:none;cursor:pointer;transition:opacity 0.15s;}
@media (hover:hover){.cookie-btn-accept:hover{opacity:0.9;}}

/* Global error notice — non-blocking, top-of-page */
.app-error-banner{position:fixed;top:0;left:0;right:0;z-index:600;background:#7a1f1f;color:#fff;font-family:"IBM Plex Sans",system-ui,sans-serif;font-size:0.82rem;line-height:1.4;padding:calc(env(safe-area-inset-top,0px) + 0.7rem) 1rem 0.7rem;text-align:center;display:none;}
.app-error-banner.visible{display:block;}

/* Scroll to top — floating button, continuous-scroll mode only */
.scroll-top-btn{position:fixed;right:1.1rem;bottom:calc(env(safe-area-inset-bottom,0px) + 1.1rem);z-index:400;width:44px;height:44px;border-radius:50%;border:none;background:var(--primary);color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 14px rgba(20,28,40,0.28);cursor:pointer;opacity:0;transform:translateY(10px) scale(0.9);pointer-events:none;transition:opacity 0.2s ease,transform 0.2s ease,background 0.15s ease;}
.scroll-top-btn.visible{opacity:1;transform:none;pointer-events:auto;}
.scroll-top-btn svg{width:20px;height:20px;}
@media (hover:hover){.scroll-top-btn:hover{background:var(--primary-hover);}}

/* Plan-limit / tier-lock prompt */
.limit-backdrop{position:fixed;inset:0;z-index:650;background:rgba(20,28,40,0.55);display:none;align-items:center;justify-content:center;padding:1.5rem;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);}
.limit-backdrop.open{display:flex;}
.limit-modal{background:#fff;border-radius:0.9rem;max-width:380px;width:100%;padding:1.75rem 1.5rem 1.4rem;text-align:center;box-shadow:0 12px 40px rgba(0,0,0,0.22);animation:limitIn 0.25s cubic-bezier(0.22,0.61,0.36,1);}
@keyframes limitIn{from{opacity:0;transform:translateY(12px) scale(0.98);}to{opacity:1;transform:none;}}
.limit-title{font-family:"Lora",Georgia,serif;font-weight:600;font-size:1.3rem;line-height:1.25;color:var(--ink);margin:0 0 0.6rem;}
.limit-body{font-family:"IBM Plex Sans",system-ui,sans-serif;font-size:0.88rem;line-height:1.55;color:var(--ink-2);margin:0 0 1.3rem;}
.limit-cta{width:100%;font-family:"IBM Plex Mono",monospace;font-size:0.76rem;font-weight:500;letter-spacing:0.04em;text-transform:uppercase;color:#fff;background:var(--ink);border:none;border-radius:0.55rem;padding:0.8rem;cursor:pointer;transition:opacity 0.15s;}
@media (hover:hover){.limit-cta:hover{opacity:0.88;}}
.limit-dismiss{margin-top:0.6rem;background:none;border:none;font-family:"IBM Plex Mono",monospace;font-size:0.68rem;font-weight:500;letter-spacing:0.04em;text-transform:uppercase;color:var(--ink-4);cursor:pointer;padding:0.4rem;}
@media (hover:hover){.limit-dismiss:hover{color:var(--ink-2);}}

/* Header kebab (⋮) dropdown menu */
.header-kebab-wrap{position:relative;display:inline-flex;}
.kebab-menu{position:absolute;top:calc(100% + 0.4rem);right:0;z-index:300;min-width:172px;background:#fff;border:1px solid var(--line);border-radius:0.6rem;box-shadow:0 8px 28px rgba(0,0,0,0.12),0 2px 6px rgba(0,0,0,0.05);padding:0.3rem;display:none;flex-direction:column;gap:0.1rem;}
.kebab-menu.open{display:flex;}
.kebab-item{display:flex;align-items:center;gap:0.6rem;width:100%;padding:0.6rem 0.7rem;border:none;background:none;cursor:pointer;border-radius:0.45rem;font-family:"IBM Plex Sans",system-ui,sans-serif;font-size:0.88rem;color:var(--ink);text-align:left;transition:background 0.13s;}
.kebab-item svg{width:17px;height:17px;color:var(--ink-3);flex-shrink:0;}
@media (hover:hover){.kebab-item:hover{background:var(--line-2);}}
.header-icon-btn[aria-expanded="true"]{color:var(--primary);}
.welcome-strip{display:none;align-items:baseline;gap:0.6rem;flex-wrap:wrap;padding:0.6rem 0 0;}.welcome-text{font-family:"Lora",Georgia,serif;font-weight:600;font-size:1.5rem;letter-spacing:-0.02em;color:var(--ink);}
.welcome-hint{font-family:"IBM Plex Sans",system-ui,sans-serif;font-size:0.85rem;color:var(--ink-3);}
body.authed-hero-collapsed .page-intro{display:none;}
body.authed-hero-collapsed .welcome-strip{display:flex;}
/* Signed-in quick search (now inside the filters bar). Hidden unless authed. */
.home-search{display:none;}
.home-search{display:block;margin-top:0.7rem;}
.home-search-bar{display:flex;align-items:center;gap:0.6rem;width:100%;padding:0.7rem 0.9rem;border:1px solid var(--line);border-radius:10px;background:#fff;cursor:pointer;text-align:left;transition:border-color 0.16s ease,background 0.16s ease;}
.home-search-bar svg{width:18px;height:18px;color:var(--ink-3);flex-shrink:0;}
.home-search-placeholder{font-family:"IBM Plex Sans",system-ui,sans-serif;font-size:0.92rem;color:var(--ink-3);}
@media (hover:hover){.home-search-bar:hover{border-color:var(--ink-4);background:var(--cream);}}
body.authed-hero-collapsed .story-band,
body.authed-hero-collapsed .hero-chevron-wrap{display:none;}

/* ── STORY BAND (distressed → circle → protected) ── */
.story-band{padding:0.5rem 0 1.5rem;display:flex;justify-content:center;background:#fff;}
.story-svg{width:100%;max-width:960px;height:auto;}
/* all line-art strokes use the hero gold (overrides inline navy/green/rust strokes) */
.story-svg [stroke]{stroke:var(--gold) !important;}
.story-svg .st-label{font-family:"IBM Plex Mono",monospace;font-size:22px;font-weight:600;letter-spacing:0.02em;text-anchor:middle;}
/* draw-on: stroked paths start hidden, fill in via dashoffset */
.story-svg .st-draw,.story-svg .st-ring,.story-svg .st-arrow,.story-svg .st-loop,.story-svg .st-check{stroke-dasharray:900;stroke-dashoffset:900;}
.story-svg .st-pop{opacity:0;transform:scale(0.9);transform-origin:center;transform-box:fill-box;}
.story-animate .st-draw{animation:storyDraw 0.7s ease forwards;}
.story-animate .st-ring{animation:storyDraw 0.9s ease forwards;}
.story-animate .st-arrow{animation:storyDraw 0.5s ease forwards;}
.story-animate .st-loop{animation:storyDraw 0.8s ease forwards;}
.story-animate .st-check{animation:storyDraw 0.4s ease forwards;}
.story-animate .st-pop{animation:storyPop 0.5s cubic-bezier(0.34,1.56,0.64,1) forwards;}
@keyframes storyDraw{to{stroke-dashoffset:0;}}
@keyframes storyPop{to{opacity:1;transform:scale(1);}}
/* sequencing by stage */
.story-animate .st-1.st-stage .d0{animation-delay:0.05s;} .story-animate .st-1.st-stage .d1{animation-delay:0.15s;} .story-animate .st-1.st-stage .d2{animation-delay:0.3s;} .story-animate .st-1.st-stage .d3{animation-delay:0.4s;}
.story-animate .a1{animation-delay:0.75s;}
.story-animate .r2{animation-delay:0.85s;} .story-animate .heart2{animation-delay:1.6s;}
.story-animate .p1{animation-delay:0.95s;} .story-animate .p2{animation-delay:1.05s;} .story-animate .doc2{animation-delay:1.15s;} .story-animate .p3{animation-delay:1.25s;} .story-animate .p4{animation-delay:1.35s;}
.story-animate .a2{animation-delay:1.45s;}
.story-animate .st-3.st-stage .e0{animation-delay:1.55s;} .story-animate .st-3.st-stage .e1{animation-delay:1.65s;} .story-animate .st-3.st-stage .e2{animation-delay:1.8s;} .story-animate .st-3.st-stage .e3{animation-delay:1.95s;}
.story-animate .shield3{animation-delay:2.1s;}
.story-animate .lp2{animation-delay:2.2s;} .story-animate .cyc{animation-delay:2.5s;} .story-animate .base{animation-delay:2.4s;} .story-animate .heartb{animation-delay:2.7s;}
@media (prefers-reduced-motion:reduce){
  .story-svg .st-draw,.story-svg .st-ring,.story-svg .st-arrow,.story-svg .st-loop,.story-svg .st-check{stroke-dashoffset:0;animation:none;}
  .story-svg .st-pop{opacity:1;transform:none;animation:none;}
}

/* ── MOBILE (≤599px) ── */
@media (max-width:599px){
  /* tighter intro */
  .page-intro{padding:2.5rem 0 0.6rem;margin-top:1.25rem;min-height:calc(100vh - var(--header-h,58px) - 1.25rem);min-height:calc(100svh - var(--header-h,58px) - 1.25rem);}
  .eyebrow{margin-bottom:1rem;}
  .page-intro h1{font-size:clamp(1.4rem,7vw,1.8rem);line-height:1.2;margin-bottom:1.1rem;}
  .page-intro .tagline{font-size:0.9rem;margin-bottom:0.4rem;}
  .page-intro p{font-size:0.84rem;}

  /* compact filter bar */
  .filters{padding:0.6rem 0.75rem;}
  .track-wrap{width:100%;gap:0;}
  .segmented{display:flex;width:100%;}
  .seg-btn{flex:1;padding:0.55rem 0.4rem;text-align:center;font-size:0.66rem;min-height:44px;}
  .seg-btn .seg-count{display:none;}

  /* swap pill row for native dropdown */
  .cat-row{display:none;}
  .cat-select{display:block;}

  /* denser sections */
  .wf-group-sec{padding:0.9rem 0 0.25rem;}
  .sec-head{margin-bottom:0.65rem;}
  .sec-title{font-size:1.1rem;}
  .sec-count{font-size:0.65rem;}
  .wrap{padding:0 0.75rem;}

  /* 2-column grid */
  .wf-grid{grid-template-columns:1fr 1fr;gap:0.5rem;}

  /* card: tight padding + smaller type for narrow columns */
  .wf-card{padding:0.85rem 0.85rem 0.75rem;min-height:0;}
  .wf-top{margin-bottom:0.55rem;}
  .wf-track{font-size:0.55rem;padding:0.15rem 0.38rem;}
  .wf-name{font-size:0.96rem;line-height:1.22;margin-bottom:0.35rem;}
  .wf-desc{font-size:0.78rem;line-height:1.45;margin-bottom:0.6rem;}
  .wf-card-actions{padding-top:0.8rem;}
  .wf-cart{width:auto;flex:1;max-width:200px;min-height:36px;height:auto;padding:0.5rem 0.9rem;gap:0.4rem;}
  .wf-cart-label{display:inline;font-size:0.62rem;}
  /* Mobile: short labels so two columns fit without overflow */
  .wf-cart .wf-cart-label::after{content:"Add";}
  .wf-cart.added .wf-cart-label::after{content:"Added";}

  /* trust badge */
  .wf-trust{width:18px;height:18px;cursor:pointer;}
  .wf-trust svg{width:16px;height:16px;}

  /* tooltip */
  .wf-tip{width:auto;max-width:min(72vw,240px);white-space:nowrap;}
  .wf-trust .wf-tip{opacity:0;visibility:hidden;}
  .wf-trust.show .wf-tip{opacity:1;visibility:visible;transform:translateY(0);}
}

@media (min-width:600px){ .wf-grid{grid-template-columns:1fr 1fr;gap:1.25rem;} }
@media (min-width:900px){
  .wrap,.header-inner{max-width:var(--maxw-lg);}
  .header-inner{padding:0.9rem 2.5rem;height:72px;}
  .filters{top:var(--header-h,72px);}
  .wrap{padding:0 2.5rem;}
  .logo-name{font-size:1.1rem;} .logo-sub{font-size:0.66rem;}
  .header-cta{font-size:0.74rem;padding:0.55rem 0.9rem;}
  .page-intro{padding:3.5rem 0 1.5rem;}
  .page-intro h1{font-size:clamp(2.2rem,3vw,2.7rem);}
  .page-intro .tagline{font-size:1.15rem;}
  .page-intro p{font-size:1rem;}
  .sec-title{font-size:1.5rem;}
  .wf-grid{grid-template-columns:1fr 1fr 1fr;gap:1.25rem;}
  .wf-card{min-height:220px;}
  .wf-name{font-size:1.2rem;}
}
@media (min-width:1300px){ .wf-grid{grid-template-columns:repeat(4,1fr);} }
@media (min-width:1700px){ .wf-grid{grid-template-columns:repeat(5,1fr);} }
@media (prefers-reduced-motion:reduce){.wf-card{animation:none;}.wf-card:hover,.wf-card.card-react{transform:none;}}

/* ── CART SHEET ──────────────────────────────────────────────────── */
.cart-backdrop{position:fixed;inset:0;z-index:300;background:var(--surface);display:none;flex-direction:column;overflow:hidden;}
.cart-backdrop.open{display:flex;}
.cs-modal{flex:1;display:flex;flex-direction:column;overflow:hidden;padding:0;}
.cs-page-header{display:flex;align-items:center;justify-content:space-between;gap:0.75rem;padding:calc(env(safe-area-inset-top,0px) + 1.1rem) 1.25rem 0.5rem;flex-shrink:0;}
.cs-close{width:36px;height:36px;display:inline-flex;align-items:center;justify-content:center;border:none;background:transparent;color:var(--ink-3);cursor:pointer;border-radius:8px;flex-shrink:0;}
.cs-close svg{width:22px;height:22px;}
@media (hover:hover){.cs-close:hover{background:var(--line-2);color:var(--ink);}}
.cs-page-title-wrap{flex:1;display:flex;align-items:center;justify-content:space-between;gap:0.5rem;min-width:0;}
.cs-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:0.875rem;}
.cs-title{font-family:"Lora",Georgia,serif;font-weight:600;font-size:1.9rem;letter-spacing:-0.02em;color:var(--ink);}
.cs-count{font-family:"IBM Plex Mono",monospace;font-size:0.72rem;color:var(--ink-4);}
.cs-items{flex:1;overflow-y:auto;min-height:0;-webkit-overflow-scrolling:touch;padding:0 1.25rem;}
.cs-item{display:flex;align-items:flex-start;justify-content:space-between;gap:0.75rem;padding:0.625rem 0;border-bottom:1px solid var(--line);}
.cs-item-status{display:inline-block;margin-top:0.3rem;font-family:"IBM Plex Mono",monospace;font-size:0.58rem;font-weight:500;letter-spacing:0.05em;text-transform:uppercase;padding:0.15rem 0.4rem;border-radius:4px;}
.cs-item-status.requested{background:var(--ok-bg);color:var(--ok-fg);}
.cs-item-status.pending{background:var(--warn-bg);color:var(--warn-fg);}
.cs-item-ctrls{display:flex;flex-direction:column;align-items:flex-end;gap:0.4rem;flex-shrink:0;}
.cs-checkout-note{display:none;font-family:"IBM Plex Sans",system-ui,sans-serif;font-size:0.75rem;color:#8a6d1f;line-height:1.4;margin-bottom:0.6rem;text-align:center;}
.cs-checkout-note.show{display:block;}
.cs-checkout-btn.disabled{opacity:0.45;pointer-events:auto;cursor:not-allowed;}
.cs-item-name{font-size:0.8rem;font-weight:600;color:var(--ink);margin-bottom:0.1rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:220px;}
.cs-item-sub{font-size:0.68rem;color:var(--ink-4);}
.cs-row-kebab-wrap{position:relative;flex-shrink:0;}
.cs-row-kebab{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border:none;background:transparent;color:var(--ink-3);cursor:pointer;border-radius:7px;transition:background 0.13s;}
.cs-row-kebab svg{width:18px;height:18px;}
@media (hover:hover){.cs-row-kebab:hover{background:var(--line-2);color:var(--ink);}}
.cs-row-menu{position:absolute;top:calc(100% + 0.3rem);right:0;z-index:50;min-width:164px;background:#fff;border:1px solid var(--line);border-radius:0.55rem;box-shadow:0 8px 24px rgba(0,0,0,0.13),0 2px 6px rgba(0,0,0,0.05);padding:0.3rem;display:none;flex-direction:column;gap:0.1rem;}
.cs-row-menu.open{display:flex;}
.cs-row-menu-item{display:block;width:100%;text-align:left;padding:0.55rem 0.7rem;border:none;background:none;cursor:pointer;border-radius:0.4rem;font-family:"IBM Plex Sans",system-ui,sans-serif;font-size:0.85rem;color:var(--ink);transition:background 0.12s;}
.cs-row-menu-item.danger{color:var(--danger);}
@media (hover:hover){.cs-row-menu-item:hover{background:var(--line-2);}}
.cs-empty{text-align:center;padding:2rem 1.25rem;}
.cs-empty svg{margin:0 auto 0.625rem;display:block;}
/* Checkout */
.cs-checkout-btn{display:flex;align-items:center;justify-content:center;gap:0.45rem;width:100%;padding:0.875rem;border-radius:0.5rem;background:var(--ink);color:#fff;font-family:"IBM Plex Mono",monospace;font-size:0.78rem;font-weight:500;letter-spacing:0.04em;text-transform:uppercase;border:none;cursor:pointer;text-decoration:none;box-sizing:border-box;transition:opacity 0.15s;margin-top:0.875rem;flex-shrink:0;}
.cs-checkout-btn:hover{opacity:0.88;}
.cs-checkout-btn svg{width:15px;height:15px;}

@media (max-width:599px){
  }


/* ── HERO TRUST BAR ─────────────────────────────────────────────── */
.trust-bar{display:flex;align-items:center;justify-content:center;gap:0;margin:1.75rem 0 0;opacity:0.9;}
.trust-badge-img{display:flex;align-items:center;justify-content:center;padding:0 1.1rem;}
.trust-badge-img img{display:block;height:30px;width:auto;object-fit:contain;opacity:0.6;transition:opacity 0.25s ease;}
@media (hover:hover){.trust-badge-img img:hover{opacity:0.9;}}
.trust-divider{width:1px;height:24px;background:var(--line);flex-shrink:0;}
@media (max-width:599px){
  .trust-badge-img{padding:0 0.85rem;}
  .trust-badge-img img{height:26px;}
  .trust-divider{height:20px;}
}

/* ── HEADER USER MENU ────────────────────────────────────────────── */
.user-menu-wrap{position:relative;display:inline-flex;align-items:center;gap:0.3rem;cursor:pointer;font-family:"IBM Plex Mono",monospace;font-size:0.7rem;font-weight:500;color:var(--ink);padding:0.45rem 0.7rem;border:1px solid var(--line);border-radius:6px;transition:all 0.16s ease;white-space:nowrap;}
@media (hover:hover){.user-menu-wrap:hover{background:var(--line-2);}}
.user-chevron{width:12px;height:12px;transition:transform 0.18s ease;}
.user-dropdown{position:absolute;top:calc(100% + 6px);right:0;background:#fff;border:1px solid var(--line);border-radius:8px;box-shadow:0 8px 24px rgba(0,0,0,0.1);min-width:140px;z-index:200;display:none;}
.user-dropdown-item{display:flex;align-items:center;gap:0.5rem;padding:0.75rem 1rem;font-size:0.82rem;font-weight:500;cursor:pointer;color:var(--danger);border-radius:8px;}
@media (hover:hover){.user-dropdown-item:hover{background:var(--danger-tint);}}
.user-dropdown-item svg{width:15px;height:15px;flex-shrink:0;}

/* ── AUTH VIEW INSIDE CART SHEET ─────────────────────────────────── */
.auth-view{display:none;flex-direction:column;flex:1;min-height:0;overflow-y:auto;padding:2rem 1.25rem calc(2rem + env(safe-area-inset-bottom,0px));align-items:center;}
.auth-view.active{display:flex;}
.auth-screen{display:none;flex-direction:column;gap:0.875rem;width:100%;max-width:420px;}
.auth-screen.active{display:flex;}
.auth-back{display:block;width:100%;text-align:center;margin-top:0.75rem;font-family:"IBM Plex Mono",monospace;font-size:0.72rem;color:var(--ink-4);cursor:pointer;background:none;border:none;padding:0;text-decoration:underline;}
@media (hover:hover){.auth-back:hover{color:var(--ink);}}
.auth-heading{font-family:"Lora",Georgia,serif;font-weight:600;font-size:1.9rem;letter-spacing:-0.02em;color:var(--ink);}
.auth-sub{font-family:"IBM Plex Sans",system-ui,sans-serif;font-size:0.85rem;color:var(--ink-2);line-height:1.5;}
.auth-tabs{display:flex;gap:0.375rem;}
.auth-tab{flex:1;padding:0.5rem;font-family:"IBM Plex Mono",monospace;font-size:0.7rem;font-weight:500;border:1px solid var(--line);border-radius:7px;color:var(--ink-3);background:#fff;cursor:pointer;transition:all 0.15s;}
.auth-tab.active{background:var(--ink);color:#fff;border-color:var(--ink);}
.auth-field label{display:block;font-family:"IBM Plex Mono",monospace;font-size:0.68rem;font-weight:500;text-transform:uppercase;color:var(--ink-3);margin-bottom:0.35rem;letter-spacing:0.03em;}
.auth-input{width:100%;padding:0.7rem 0.85rem;font-family:"IBM Plex Sans",sans-serif;font-size:1rem;border:1px solid var(--line);border-radius:8px;color:var(--ink);background:#fff;outline:none;box-sizing:border-box;transition:border-color 0.15s;-webkit-appearance:none;}
.auth-input::placeholder{color:var(--ink-4);opacity:1;}
.auth-input:focus{border-color:var(--primary);}
.auth-error{font-size:0.75rem;color:var(--stop-fg);background:var(--stop-bg);border:1px solid var(--danger-border);border-radius:6px;padding:0.5rem 0.7rem;display:none;}
.auth-error.show{display:block;}
.auth-btn{display:flex;align-items:center;justify-content:center;gap:0.45rem;width:100%;padding:0.875rem;border-radius:0.5rem;background:var(--ink);color:#fff;font-family:"IBM Plex Mono",monospace;font-size:0.78rem;font-weight:500;letter-spacing:0.04em;text-transform:uppercase;border:none;cursor:pointer;transition:opacity 0.15s;}
.auth-btn:disabled{opacity:0.55;cursor:not-allowed;}
@media (hover:hover){.auth-btn:not(:disabled):hover{opacity:0.9;}}
.auth-btn svg{width:15px;height:15px;}
.otp-wrap{display:flex;gap:0.5rem;justify-content:center;}
.otp-box{width:42px;height:52px;border:1.5px solid var(--line);border-radius:9px;font-size:1.5rem;font-weight:700;text-align:center;color:var(--ink);background:#fff;outline:none;transition:border-color 0.15s;-webkit-appearance:none;font-family:"IBM Plex Mono",monospace;}
.otp-box.filled{border-color:var(--primary);}
.otp-box:focus{border-color:var(--primary);box-shadow:0 0 0 3px hsl(211,50%,34%,0.12);}
.otp-hint{font-family:"IBM Plex Mono",monospace;font-size:0.68rem;color:var(--ink-4);text-align:center;}
.auth-countdown{font-family:"IBM Plex Mono",monospace;font-size:0.72rem;color:var(--ink-4);text-align:center;}
.auth-resend{font-family:"IBM Plex Mono",monospace;font-size:0.72rem;color:var(--ink-2);text-align:center;cursor:pointer;background:none;border:none;padding:0;display:none;text-decoration:underline;}
@media (hover:hover){.auth-resend:hover{text-decoration:underline;}}
.auth-sent-msg{font-size:0.78rem;color:var(--ink-3);text-align:center;font-style:italic;}
.spinner{display:inline-block;width:14px;height:14px;border:2px solid rgba(255,255,255,0.35);border-top-color:#fff;border-radius:50%;animation:spin 0.7s linear infinite;flex-shrink:0;}
@keyframes spin{to{transform:rotate(360deg);}}

/* ── CIRCLE GUARANTEE ───────────────────────────────────────────── */

/* ── CIRCLE GUARANTEE BAR (page footer) ─────────────────────────── */


.cg-bar-label{font-family:"IBM Plex Mono",monospace;font-size:0.72rem;font-weight:700;color:var(--primary);letter-spacing:0.03em;display:inline-flex;align-items:center;gap:0.35rem;vertical-align:middle;}.cg-bar-label::before{content:"";display:inline-block;width:10px;height:10px;border-radius:50%;border:2px solid var(--primary);flex-shrink:0;}



#cart-sheet-footer{padding:0 1.25rem calc(1.25rem + env(safe-area-inset-bottom,0px));}
#auth-view{padding:0 1.25rem calc(1.25rem + env(safe-area-inset-bottom,0px));}

/* ── PROVIDER TYPE TAG ───────────────────────────────────────────── */
.wf-provider{font-family:"IBM Plex Mono",monospace;font-size:0.58rem;font-weight:500;letter-spacing:0.06em;text-transform:uppercase;padding:0.18rem 0.45rem;border-radius:4px;display:inline-flex;align-items:center;gap:0.25rem;white-space:nowrap;}
.wf-bonus{font-family:"IBM Plex Mono",monospace;font-size:0.58rem;font-weight:600;letter-spacing:0.06em;text-transform:uppercase;padding:0.18rem 0.45rem;border-radius:4px;background:var(--cream,#f7f3ea);border:1px solid var(--gold-soft);color:#8a6d1f;white-space:nowrap;margin-right:auto;margin-left:0.4rem;}
.wf-provider-internal{background:#f0f4f8;color:#4a6380;}
.wf-provider-legal{background:#f0f0f8;color:#4a4a80;}
.wf-provider-nonlegal{background:#f0f6f0;color:#3a6040;}

/* ── REQUEST A WORKFLOW CARD ────────────────────────────────────── */


/* Desktop: two-col layout — text left, CTA right, vertically centered */
@media (min-width:700px){
  .request-inner{flex-direction:row;align-items:center;justify-content:space-between;gap:2rem;}
  .request-text{flex:1;}
  .request-card{padding:2.5rem 2rem;}
}




/* Custom Request zone */









/* Circle Guarantee zone */






/* Legal zone */




/* Desktop: Custom Request + Guarantee side by side */
@media (min-width:600px){
  .footer-req-text{flex:1;}
  .footer-guarantee-inner{justify-content:center;}
}


/* ── FOOTER (Groupvestors-style dark) ───────────────────────────── */
.site-footer{background:var(--cream);color:var(--ink);}

/* CTA strip */
.footer-cta-strip{padding:2.75rem 1.5rem 2rem;margin-top:2.5rem;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--cream);}
.footer-cta-inner{max-width:860px;margin:0 auto;display:flex;flex-direction:column;gap:1.1rem;align-items:flex-start;}
.footer-cta-heading{font-family:"Lora",Georgia,serif;font-weight:600;font-size:1.2rem;color:var(--ink);line-height:1.25;}
.footer-cta-sub{font-size:0.84rem;color:var(--ink);line-height:1.5;max-width:32rem;}
.footer-cta-btn{display:inline-flex;align-items:center;gap:0.45rem;font-family:"IBM Plex Mono",monospace;font-size:0.75rem;font-weight:600;color:#fff;background:var(--primary);border:none;border-radius:6px;padding:0.65rem 1.25rem;text-decoration:none;transition:all 0.15s;white-space:nowrap;}
.footer-cta-btn svg{width:13px;height:13px;flex-shrink:0;}
@media (hover:hover){.footer-cta-btn:hover{background:var(--primary-hover);}}

/* Main cols */
.footer-main{padding:2.5rem 1.5rem 2rem;min-height:1px;}
.footer-main-inner{display:grid;grid-template-columns:1fr;gap:2rem;max-width:860px;margin:0 auto;}

/* Brand col */
.footer-brand-logo{font-family:"Lora",Georgia,serif;font-weight:600;font-size:1.05rem;color:var(--ink);margin-bottom:0.15rem;}
.footer-brand-by{font-size:0.65rem;color:var(--ink);letter-spacing:0.03em;margin-bottom:0.75rem;}
.footer-social{display:flex;gap:8px;margin-top:0.5rem;}
.footer-social-btn{width:36px;height:36px;border:1px solid var(--line);border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--ink-3);text-decoration:none;transition:border-color 0.2s,color 0.2s;flex-shrink:0;}
.footer-social-btn svg{width:15px;height:15px;}
.footer-social-btn:hover{border-color:var(--gold);color:var(--gold);}
.footer-brand-desc{font-size:0.78rem;color:var(--ink);line-height:1.6;max-width:22rem;margin-bottom:0.875rem;}



/* Nav col */
.footer-col-label{font-family:"IBM Plex Mono",monospace;font-size:0.62rem;font-weight:600;letter-spacing:0.1em;text-transform:uppercase;color:var(--ink);margin-bottom:0.75rem;}
.footer-nav-list{list-style:none;display:flex;flex-direction:column;gap:0.5rem;}
.footer-nav-list a{font-size:0.82rem;color:var(--ink);text-decoration:none;transition:color 0.15s;}
@media (hover:hover){.footer-nav-list a:hover{color:var(--ink);}}

/* Contact col */
.footer-contact-item{margin-bottom:0.875rem;}
.footer-contact-item:last-child{margin-bottom:0;}
.footer-contact-label{font-family:"IBM Plex Mono",monospace;font-size:0.62rem;color:var(--ink);letter-spacing:0.05em;text-transform:uppercase;margin-bottom:0.2rem;}
.footer-contact-link,.footer-contact-text{font-size:0.82rem;color:var(--ink);text-decoration:none;transition:color 0.15s;display:block;}
@media (hover:hover){.footer-contact-link:hover{color:var(--ink);}}

/* Guarantee col */
.footer-guar-title{font-family:"IBM Plex Mono",monospace;font-size:0.68rem;font-weight:700;color:var(--primary);display:flex;align-items:center;gap:0.4rem;margin-bottom:0.6rem;}
.footer-guar-title::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;border:1.5px solid var(--primary);flex-shrink:0;}
.footer-guar-items{display:flex;flex-direction:column;gap:0.4rem;}
.footer-guar-item{font-size:0.75rem;color:var(--ink);line-height:1.45;}

/* Bottom bar */
.footer-bottom-bar{padding:1.25rem 1.5rem calc(1.25rem + env(safe-area-inset-bottom,0px));border-top:1px solid var(--line);}
.footer-bottom-inner{max-width:860px;margin:0 auto;display:flex;flex-direction:column;gap:0.875rem;}
.footer-copy{font-family:"IBM Plex Mono",monospace;font-size:0.62rem;letter-spacing:0.04em;color:var(--ink);}
.footer-legal-links{display:flex;gap:1.25rem;}
.footer-legal-links a{font-family:"IBM Plex Mono",monospace;font-size:0.62rem;color:var(--ink);text-decoration:none;transition:color 0.15s;}
@media (hover:hover){.footer-legal-links a:hover{color:var(--primary-hover);}}
.footer-disclaimer{font-size:0.65rem;color:var(--ink);line-height:1.65;max-width:860px;}

/* Desktop layout */
@media (min-width:700px){
  .footer-cta-inner{flex-direction:row;align-items:center;justify-content:space-between;}
  .footer-cta-sub{max-width:none;}
  .footer-main-inner{grid-template-columns:1.8fr 1fr 1fr 1.2fr;}
  .footer-bottom-inner{flex-direction:row;justify-content:center;align-items:center;}
  .footer-copy{text-align:center;}
  .footer-disclaimer{margin-left:auto;margin-right:auto;text-align:center;}
}

/* ── HERO COLLAPSE ───────────────────────────────────────────── */
.page-intro{position:relative;}
.hero-body{opacity:1;}
.hero-chevron-wrap{display:flex;justify-content:center;padding:0.25rem 0 1.25rem;}
.hero-chevron{background:none;border:none;cursor:pointer;color:var(--ink-4);padding:0.1rem 0.4rem 0;line-height:0;transition:color 0.15s;}
.hero-chevron svg{width:22px;height:22px;display:block;animation:chevBounce 2s ease-in-out infinite;}
@keyframes chevBounce{0%,100%{transform:translateY(0);}50%{transform:translateY(4px);}}
@media (prefers-reduced-motion:reduce){.hero-chevron svg{animation:none;}}
@media (hover:hover){.hero-chevron:hover{color:var(--primary);}}

/* ── Continuous-scroll toggle + sticky stage anchor ─────────────────── */
.cat-bar{display:flex;align-items:center;gap:0.6rem;}
.cat-bar .cat-row{flex:1 1 auto;margin-top:0;padding-top:0;border-top:none;overflow-x:auto;-webkit-overflow-scrolling:touch;justify-content:flex-start;scrollbar-width:none;}
.cat-bar .cat-row::-webkit-scrollbar{display:none;}
.cat-bar .cat-select{flex:1 1 auto;margin-top:0;}
/* keep the original top divider on the whole bar instead of just the pills */
.filters .cat-bar{margin-top:0.7rem;padding-top:0.7rem;border-top:1px solid var(--line-2);}

.scroll-toggle{display:inline-flex;align-items:center;gap:0.4rem;flex-shrink:0;cursor:pointer;user-select:none;position:relative;}
.scroll-tip{display:none;position:absolute;top:calc(100% + 8px);right:0;white-space:nowrap;background:var(--ink);color:#fff;font-family:"IBM Plex Sans",sans-serif;font-size:0.7rem;font-weight:400;letter-spacing:0;text-transform:none;padding:0.4rem 0.55rem;border-radius:0.45rem;box-shadow:0 8px 24px var(--shadow-strong);opacity:0;visibility:hidden;transform:translateY(4px);transition:opacity 0.16s ease,transform 0.16s ease,visibility 0.16s;z-index:20;pointer-events:none;}
[data-theme="dark"] .scroll-tip{background:hsl(38,7%,24%);color:var(--ink);}
.scroll-toggle-label{font-family:"IBM Plex Mono",monospace;font-size:0.6rem;font-weight:500;letter-spacing:0.06em;text-transform:uppercase;color:var(--ink-4);}
.scroll-switch{position:relative;display:inline-block;width:34px;height:20px;flex-shrink:0;}
.scroll-switch input{position:absolute;opacity:0;width:0;height:0;}
.scroll-knob{position:absolute;inset:0;border-radius:50px;background:var(--line);border:1px solid var(--line);transition:background 0.18s ease;}
.scroll-knob::before{content:"";position:absolute;width:14px;height:14px;left:3px;top:50%;transform:translateY(-50%);border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,0.2);transition:transform 0.18s ease;}
.scroll-switch input:checked + .scroll-knob{background:var(--primary);border-color:var(--primary);}
.scroll-switch input:checked + .scroll-knob::before{transform:translate(14px,-50%);}

/* Sticky anchor that shows the current stage as you scroll */
.stage-anchor{position:sticky;z-index:45;top:var(--anchor-top,118px);display:none;align-items:baseline;gap:0.55rem;padding:0.5rem 1.25rem;background:var(--header-bg);backdrop-filter:saturate(180%) blur(10px);border-bottom:1px solid var(--line);box-shadow:0 2px 8px var(--shadow);}
body.scroll-mode .stage-anchor.visible{display:flex;}
.stage-anchor-track{font-family:"IBM Plex Mono",monospace;font-size:0.58rem;font-weight:500;letter-spacing:0.08em;text-transform:uppercase;color:var(--ink-4);flex-shrink:0;}
.stage-anchor-name{font-family:"Lora",Georgia,serif;font-weight:600;font-size:0.95rem;letter-spacing:-0.01em;color:var(--ink);}
.stage-anchor-count{margin-left:auto;font-family:"IBM Plex Mono",monospace;font-size:0.6rem;font-weight:500;letter-spacing:0.03em;color:var(--ink-3);flex-shrink:0;}
.stage-anchor.pulse .stage-anchor-name{animation:stagePulse 0.45s ease;}
@keyframes stagePulse{0%{opacity:0.35;transform:translateY(2px);}100%{opacity:1;transform:translateY(0);}}

/* In scroll mode, give each stage scroll-margin so it lands below the sticky bars */
body.scroll-mode .wf-group-sec{scroll-margin-top:calc(var(--sticky-stack,150px) + 12px);}
body.scroll-mode .wf-group-sec{padding-top:0.5rem;}

@media (max-width:999px){
  .cat-bar .cat-row{display:none;}      /* uses the dropdown below desktop-row width */
  .cat-bar .cat-select{display:block;flex:1 1 auto;margin-top:0;}
  .cat-bar{margin-top:0;padding-top:0;}
  /* Row 1: paths (full width, divider below). Row 2: [dropdown] [search icon] [auto-scroll],
     kept on ONE line — the dropdown shrinks to make room so the toggle never wraps. */
  .filters{display:flex;flex-wrap:wrap;align-items:center;gap:0.6rem;}
  .filters .track-wrap{order:1;flex:1 1 100%;padding-bottom:0.6rem;border-bottom:1px solid var(--line-2);}
  .filters .cat-bar{order:2;flex:1 1 0;min-width:0;display:flex;align-items:center;margin-top:0;padding-top:0;border-top:none;}
  .filters .cat-bar .cat-select{width:100%;min-width:0;}
  /* search collapses to just the magnifier icon, on the same row as the dropdown */
  .filters .home-search{order:3;flex:0 0 auto;margin-top:0;padding-top:0;border-top:none;}
  .filters .home-search-bar{justify-content:center;padding:0.6rem;width:auto;}
  .filters .home-search-placeholder{display:none;}
  .filters .scroll-toggle{order:4;flex:0 0 auto;margin-top:0;align-self:center;gap:0;position:relative;}
  .filters .scroll-toggle-label{display:none;}  /* toggle only — name via tooltip */
  .filters .scroll-toggle:hover .scroll-tip,
  .filters .scroll-toggle:focus-within .scroll-tip{display:block;opacity:1;visibility:visible;transform:translateY(0);}
}

/* Mid-page breather section at the family→probate crossover (scroll mode) */
.track-breather{margin:4rem 0;padding:4rem 1.25rem;background:var(--cream);text-align:center;scroll-margin-top:calc(var(--sticky-stack,150px) + 12px);position:relative;left:50%;transform:translateX(-50%);width:100vw;max-width:100vw;}
.breather-inner{max-width:560px;margin:0 auto;display:flex;flex-direction:column;align-items:center;padding:0 1.25rem;}
.breather-eyebrow{font-family:"IBM Plex Mono",monospace;font-size:0.62rem;font-weight:500;letter-spacing:0.16em;text-transform:uppercase;color:var(--gold);margin-bottom:0.7rem;}
.breather-title{font-family:"Lora",Georgia,serif;font-weight:600;font-size:clamp(1.6rem,5vw,2.2rem);line-height:1.12;letter-spacing:-0.02em;color:var(--primary);margin-bottom:0.9rem;}
.breather-uline-wrap{position:relative;white-space:nowrap;}
.breather-uline{position:absolute;left:0;right:0;bottom:-0.28em;width:100%;height:0.42em;color:var(--gold);overflow:visible;stroke-dasharray:420;stroke-dashoffset:420;}
.track-breather.breather-seen .breather-uline{animation:sketchDraw 0.9s ease 0.15s forwards;}
.breather-sub{font-size:0.95rem;color:var(--ink-2);line-height:1.6;max-width:30rem;}
@media (prefers-reduced-motion:reduce){.breather-uline,.track-breather.breather-seen .breather-uline{animation:none;stroke-dashoffset:0;}}




/* ── CENTERED HERO (Typeform-style) ─────────────────────────────────── */
.hero-centered{text-align:center;align-items:center;background:#fff;}
.hero-centered .hero-body{display:flex;flex-direction:column;align-items:center;}
.hero-centered .eyebrow{color:var(--ink-3);}
.hero-centered h1{max-width:18ch;}
.hero-centered p{margin:0 auto;}

/* Explore CTA */
.hero-cta-explore{margin-top:1.75rem;display:inline-flex;align-items:center;justify-content:center;font-family:"IBM Plex Mono",monospace;font-size:0.8rem;font-weight:500;letter-spacing:0.06em;text-transform:uppercase;color:#fff;background:var(--primary);border:none;border-radius:12px;padding:0.85rem 2.5rem;cursor:pointer;transition:background 0.18s ease,transform 0.18s ease;}
.hero-cta-explore:active{transform:translateY(1px);}
@media (hover:hover){.hero-cta-explore:hover{background:var(--primary-hover);}}

/* Three pillars */
.hero-pillars{display:flex;justify-content:center;gap:1.25rem;margin-top:2.75rem;width:100%;max-width:56rem;}
.hero-pillar{flex:1 1 0;display:flex;flex-direction:column;align-items:center;text-align:center;padding:0 0.5rem;position:relative;}
.hero-pillar + .hero-pillar::before{content:"";position:absolute;left:0;top:0.2rem;bottom:0.2rem;width:1px;background:var(--line);transform:translateX(-0.625rem);}
.hero-pillar-label{font-family:"IBM Plex Mono",monospace;font-size:0.6rem;font-weight:500;letter-spacing:0.14em;text-transform:uppercase;color:var(--gold,hsl(38,55%,52%));margin-bottom:0.45rem;}
.hero-pillar-title{font-family:"Lora",Georgia,serif;font-weight:600;font-size:1.05rem;letter-spacing:-0.01em;color:var(--ink);margin-bottom:0.35rem;line-height:1.2;}
.hero-pillar-desc{font-size:0.8rem;color:var(--ink-3);line-height:1.45;max-width:22ch;}

@media (max-width:640px){
  .hero-pillars{flex-direction:column;gap:1.5rem;margin-top:2rem;max-width:22rem;}
  .hero-pillar{padding:0;}
  .hero-pillar + .hero-pillar::before{left:50%;right:auto;top:-0.75rem;bottom:auto;width:32px;height:1px;transform:translateX(-50%);}
  .hero-cta-explore{margin-top:1.5rem;}
}

/* ── HAND-DRAWN SKETCH ACCENTS (gold, thin & delicate) ──────────────── */
.sketch-underline-wrap{position:relative;white-space:nowrap;}
.sketch-underline{position:absolute;left:0;right:0;bottom:-0.32em;width:100%;height:0.42em;color:var(--gold);overflow:visible;
  stroke-dasharray:480;stroke-dashoffset:480;}
.hero-animate .sketch-underline{animation:sketchDraw 0.9s ease 0.35s forwards;}
@keyframes sketchDraw{to{stroke-dashoffset:0;}}

.hero-cta-row{position:relative;display:inline-flex;align-items:center;margin-top:1.75rem;}
.sketch-arrow{position:absolute;right:calc(100% - 6px);bottom:-2px;width:64px;height:50px;color:var(--gold);opacity:0;pointer-events:none;}
.hero-animate .sketch-arrow{animation:sketchFade 0.5s ease 1.1s forwards;}
@keyframes sketchFade{to{opacity:0.85;}}
.hero-cta-row .hero-cta-explore{margin-top:0;}

.sketch-icon{width:34px;height:34px;color:var(--gold);margin-bottom:0.6rem;opacity:0.9;}

@media (prefers-reduced-motion:reduce){
  .sketch-underline,.hero-animate .sketch-underline{animation:none;stroke-dashoffset:0;}
  .sketch-arrow,.hero-animate .sketch-arrow{animation:none;opacity:0.85;}
}
@media (max-width:640px){
  .sketch-arrow{display:none;}            /* avoid clutter on narrow screens */
  .sketch-icon{width:30px;height:30px;margin-bottom:0.5rem;}
}

/* ── MORE SKETCH ACCENTS (tasteful, gold, CTA path kept clean) ──────── */
/* Eyebrow spark doodles */
.sketch-spark{display:inline-block;width:0.85em;height:0.85em;color:var(--gold);vertical-align:middle;opacity:0;}
.hero-animate .sketch-spark{animation:sketchFade 0.4s ease 0.6s forwards;}
.sketch-spark:first-child{margin-right:0.5rem;}
.sketch-spark:last-child{margin-left:0.5rem;}

/* Hand-drawn ring around the Explore CTA (drawn around, not over the label) */
.hero-cta-explore{position:relative;overflow:visible;}
.sketch-ring{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:128%;height:185%;color:var(--gold);pointer-events:none;
  stroke-dasharray:560;stroke-dashoffset:560;}
.hero-animate .sketch-ring{animation:sketchDraw 1s ease 1.2s forwards;}

/* Small underline scribble under each pillar title */
.pill-title-wrap{position:relative;display:inline-block;}
.sketch-uline-sm{position:absolute;left:0;right:0;bottom:-0.28em;width:100%;height:0.4em;color:var(--gold);overflow:visible;opacity:0.8;
  stroke-dasharray:340;stroke-dashoffset:340;}
.hero-animate .sketch-uline-sm{animation:sketchDraw 0.8s ease 1.4s forwards;}

@media (prefers-reduced-motion:reduce){
  .sketch-spark,.hero-animate .sketch-spark{animation:none;opacity:0.85;}
  .sketch-ring,.sketch-uline-sm,.hero-animate .sketch-ring,.hero-animate .sketch-uline-sm{animation:none;stroke-dashoffset:0;}
}

/* ── SEARCH OVERLAY (full-screen; bottom tracks keyboard via --kb) ───── */
.search-overlay{position:fixed;inset:0;z-index:320;display:none;}
.search-overlay.open{display:block;}
.search-backdrop{display:none;}
/* Full-screen white panel. Bottom inset = keyboard height so results never hide behind the keyboard. No open/close transition. */
.search-panel{position:fixed;left:0;right:0;top:0;bottom:var(--kb,0px);background:var(--surface);display:flex;flex-direction:column;overflow:hidden;}
.search-field-row{display:flex;align-items:center;gap:0.6rem;padding:calc(env(safe-area-inset-top,0px) + 0.9rem) 1rem 0.9rem;border-bottom:1px solid var(--line);flex-shrink:0;}
.search-field-icon{width:18px;height:18px;color:var(--ink-4);flex-shrink:0;}
.search-input{flex:1;border:none;outline:none;background:transparent;font-family:"IBM Plex Sans",system-ui,sans-serif;font-size:16px;color:var(--ink);}  /* 16px prevents iOS zoom */
.search-input::placeholder{color:var(--ink-4);}
.search-close{flex-shrink:0;width:28px;height:28px;display:inline-flex;align-items:center;justify-content:center;border:none;background:transparent;color:var(--ink-3);cursor:pointer;border-radius:6px;}
.search-close svg{width:18px;height:18px;}
@media (hover:hover){.search-close:hover{background:var(--line-2);color:var(--ink);}}

.search-results{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:0.5rem 0 0.75rem;min-height:0;}
.search-group-label{font-family:"IBM Plex Mono",monospace;font-size:0.6rem;font-weight:500;letter-spacing:0.1em;text-transform:uppercase;color:var(--ink-4);padding:0.7rem 1rem 0.35rem;}
.search-item{display:flex;align-items:center;gap:0.7rem;width:100%;text-align:left;padding:0.7rem 1rem;border:none;background:transparent;cursor:pointer;transition:background 0.12s ease;}
@media (hover:hover){.search-item:hover{background:var(--cream);}}
.search-item:active{background:var(--cream);}
.search-item-ic{width:18px;height:18px;color:var(--ink-3);flex-shrink:0;}
.search-item-body{flex:1;min-width:0;}
.search-item-name{font-size:0.9rem;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.search-item-meta{font-size:0.7rem;color:var(--ink-4);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.search-item-add{flex:0 0 auto;display:inline-flex;align-items:center;gap:0.3rem;padding:0.35rem 0.6rem;border:1px solid var(--line);border-radius:999px;background:var(--surface);color:var(--ink-2);font-family:"IBM Plex Mono",monospace;font-size:0.66rem;font-weight:500;text-transform:uppercase;letter-spacing:0.04em;cursor:pointer;transition:background 0.14s ease,border-color 0.14s ease,color 0.14s ease;}
.search-item-add svg{width:13px;height:13px;}
@media (hover:hover){.search-item-add:hover{border-color:var(--blue);color:#fff;background:var(--blue);}}
.search-item-add:active{transform:scale(0.97);}
.search-item-add.added{border-color:var(--p-green,#2e7d52);color:var(--p-green,#2e7d52);background:transparent;}
.search-item-leaving{opacity:0;transform:translateX(8px);transition:opacity 0.35s ease,transform 0.35s ease;}
.search-empty{padding:2rem 1rem;text-align:center;color:var(--ink-4);font-size:0.85rem;}
.search-hl{background:hsla(38,80%,60%,0.28);border-radius:2px;}

/* ── SETTINGS OVERLAY (full-screen, instant, no transition) ─────────── */
.settings-overlay{position:fixed;inset:0;z-index:330;display:none;}
.settings-overlay.open{display:block;}
.settings-panel{position:fixed;inset:0;background:var(--surface);display:flex;flex-direction:column;overflow:hidden;}
.settings-head{display:flex;align-items:center;justify-content:space-between;padding:calc(env(safe-area-inset-top,0px) + 1.1rem) 1.25rem 0.5rem;}
.settings-title{font-family:"Lora",Georgia,serif;font-weight:600;font-size:1.9rem;letter-spacing:-0.02em;color:var(--ink);}
.settings-close{width:36px;height:36px;display:inline-flex;align-items:center;justify-content:center;border:none;background:transparent;color:var(--ink-3);cursor:pointer;border-radius:8px;}
.settings-close svg{width:22px;height:22px;}
@media (hover:hover){.settings-close:hover{background:var(--line-2);color:var(--ink);}}

.settings-tabs{display:flex;gap:1.5rem;padding:0.5rem 1.25rem 0;border-bottom:1px solid var(--line);overflow-x:auto;scrollbar-width:none;}
.settings-tabs::-webkit-scrollbar{display:none;}
.settings-tab{position:relative;background:none;border:none;padding:0.6rem 0 0.85rem;font-family:"IBM Plex Mono",monospace;font-size:0.72rem;font-weight:500;letter-spacing:0.04em;text-transform:uppercase;color:var(--ink-4);cursor:pointer;white-space:nowrap;transition:color 0.15s ease;}
.settings-tab.active{color:var(--ink);}
.settings-tab.active::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--ink);border-radius:2px;}

.settings-body{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:1.5rem 1.25rem calc(2rem + env(safe-area-inset-bottom,0px));}
.settings-tabpane{display:none;}
.settings-tabpane.active{display:block;}

.set-field{margin-bottom:1.5rem;}
.set-label{display:block;font-family:"IBM Plex Mono",monospace;font-size:0.68rem;font-weight:500;letter-spacing:0.03em;text-transform:uppercase;color:var(--ink-3);margin-bottom:0.45rem;}
.set-avatar{width:84px;height:84px;border-radius:50%;background:var(--primary);color:#fff;display:flex;align-items:center;justify-content:center;font-family:"Lora",Georgia,serif;font-size:2.4rem;font-weight:600;}
.set-input{width:100%;font-family:"IBM Plex Sans",system-ui,sans-serif;font-size:16px;color:var(--ink);background:#fff;border:1px solid var(--line);border-radius:0.6rem;padding:0.85rem 0.95rem;outline:none;transition:border-color 0.15s ease;}
.set-input:focus{border-color:var(--primary);}
.set-input[readonly]{color:var(--ink-4);background:var(--line-2);}
.set-input-row{position:relative;display:flex;align-items:center;}
.set-input-row .set-input{padding-right:8rem;}
.set-inline-action{position:absolute;right:0.6rem;background:none;border:none;font-family:"IBM Plex Mono",monospace;font-size:0.68rem;font-weight:500;letter-spacing:0.02em;color:var(--ink-2);cursor:pointer;padding:0.3rem;}
@media (hover:hover){.set-inline-action:hover{color:var(--primary);}}
.set-error{font-family:"IBM Plex Sans",system-ui,sans-serif;font-size:0.8rem;color:var(--stop-fg);margin-bottom:0.75rem;min-height:1px;display:none;}
.set-error.show{display:block;}
.set-update{display:inline-flex;align-items:center;justify-content:center;font-family:"IBM Plex Mono",monospace;font-size:0.74rem;font-weight:500;letter-spacing:0.04em;text-transform:uppercase;color:#fff;background:var(--ink);border:none;border-radius:0.6rem;padding:0.7rem 1.4rem;cursor:pointer;transition:opacity 0.15s ease;}
.set-update:disabled{opacity:0.55;cursor:default;}
.set-saved{display:none;margin-top:0.7rem;font-family:"IBM Plex Sans",system-ui,sans-serif;font-size:0.85rem;color:var(--ok-fg);}
.set-saved.show{display:block;}
.set-empty{padding:3rem 0;text-align:center;font-family:"IBM Plex Sans",system-ui,sans-serif;color:var(--ink-4);font-size:0.9rem;}

/* Billing tab: current plan + usage + plan cards */
.bill-current{border:1px solid var(--line);border-radius:0.7rem;padding:1rem;margin-bottom:1.5rem;background:var(--cream,#faf7f0);}
.bill-current-row{display:flex;align-items:flex-start;justify-content:space-between;gap:0.75rem;}
.bill-current-label{font-family:"IBM Plex Mono",monospace;font-size:0.62rem;font-weight:500;letter-spacing:0.07em;text-transform:uppercase;color:var(--ink-4);margin-bottom:0.2rem;}
.bill-current-tier{font-family:"Lora",Georgia,serif;font-weight:600;font-size:1.25rem;color:var(--ink);text-transform:capitalize;}
.bill-current-status{font-family:"IBM Plex Mono",monospace;font-size:0.6rem;font-weight:500;letter-spacing:0.05em;text-transform:uppercase;padding:0.25rem 0.5rem;border-radius:6px;background:var(--ok-bg);color:var(--ok-fg);white-space:nowrap;}
.bill-current-status.past_due,.bill-current-status.canceled{background:var(--stop-bg);color:var(--stop-fg);}
.bill-renewal{font-family:"IBM Plex Sans",system-ui,sans-serif;font-size:0.78rem;color:var(--ink-3);margin-top:0.5rem;}
.bill-usage{margin-top:0.75rem;display:flex;flex-direction:column;gap:0.5rem;}
.bill-usage-row{font-family:"IBM Plex Sans",system-ui,sans-serif;font-size:0.78rem;color:var(--ink-2);}
.bill-usage-bar{height:6px;border-radius:50px;background:var(--line-2);margin-top:0.25rem;overflow:hidden;}
.bill-usage-fill{height:100%;background:var(--primary);border-radius:50px;}
.bill-manage{margin-top:0.85rem;font-family:"IBM Plex Mono",monospace;font-size:0.7rem;font-weight:500;letter-spacing:0.04em;text-transform:uppercase;color:var(--ink-2);background:#fff;border:1px solid var(--line);border-radius:0.5rem;padding:0.55rem 0.9rem;cursor:pointer;transition:all 0.15s;}
@media (hover:hover){.bill-manage:hover{background:var(--line-2);}}
.bill-plans-label{font-family:"IBM Plex Mono",monospace;font-size:0.62rem;font-weight:500;letter-spacing:0.08em;text-transform:uppercase;color:var(--ink-4);margin-bottom:0.75rem;}
.plan-card{border:1px solid var(--line);border-radius:0.7rem;padding:1rem;margin-bottom:0.85rem;}
.plan-card.current{border-color:var(--primary);box-shadow:0 0 0 1px var(--primary);}
.plan-head{display:flex;align-items:baseline;justify-content:space-between;gap:0.5rem;}
.plan-name{font-family:"Lora",Georgia,serif;font-weight:600;font-size:0.98rem;color:var(--ink);line-height:1.25;}
.plan-price{white-space:nowrap;}
.plan-price-amt{font-family:"Lora",Georgia,serif;font-weight:600;font-size:1.15rem;color:var(--ink);}
.plan-price-per{font-family:"IBM Plex Sans",system-ui,sans-serif;font-size:0.72rem;color:var(--ink-4);}
.plan-tagline{font-family:"IBM Plex Sans",system-ui,sans-serif;font-size:0.78rem;color:var(--ink-3);margin-top:0.35rem;line-height:1.4;}
.plan-summary{font-family:"IBM Plex Sans",system-ui,sans-serif;font-size:0.8rem;color:var(--ink-2);margin-top:0.6rem;line-height:1.5;}
.plan-expand{margin-top:0.5rem;font-family:"IBM Plex Mono",monospace;font-size:0.66rem;font-weight:500;letter-spacing:0.03em;text-transform:uppercase;color:var(--primary);background:none;border:none;padding:0;cursor:pointer;}
.plan-bullets{display:none;margin:0.6rem 0 0;padding-left:1.1rem;}
.plan-bullets.open{display:block;}
.plan-bullets li{font-family:"IBM Plex Sans",system-ui,sans-serif;font-size:0.8rem;color:var(--ink-2);line-height:1.5;margin-bottom:0.3rem;}
.plan-cta{margin-top:0.85rem;width:100%;font-family:"IBM Plex Mono",monospace;font-size:0.74rem;font-weight:500;letter-spacing:0.04em;text-transform:uppercase;color:#fff;background:var(--ink);border:none;border-radius:0.55rem;padding:0.7rem;cursor:pointer;transition:opacity 0.15s;}
@media (hover:hover){.plan-cta:not(:disabled):hover{opacity:0.9;}}
.plan-cta:disabled{background:var(--line-2);color:var(--ink-4);cursor:default;}
.bill-fineprint{font-family:"IBM Plex Sans",system-ui,sans-serif;font-size:0.7rem;color:var(--ink-4);line-height:1.5;margin-top:1rem;padding-top:1rem;border-top:1px solid var(--line);}

/* Header: Log in / Sign up button (signed-out) */
.header-login{display:inline-flex;align-items:center;justify-content:center;height:32px;padding:0 0.4rem;border:none;background:transparent;color:var(--ink);font-family:"IBM Plex Mono",monospace;font-size:0.7rem;font-weight:500;letter-spacing:0.04em;text-transform:uppercase;white-space:nowrap;cursor:pointer;transition:color 0.16s ease;}
/* Free Notary — minimal outlined pill (quiet accent, not a filled CTA) */
.header-notary{display:inline-flex;align-items:center;height:30px;padding:0 0.7rem;margin-right:0.1rem;border:1px solid var(--line);border-radius:9px;background:transparent;color:var(--ink-2);font-family:"IBM Plex Mono",monospace;font-size:0.66rem;font-weight:500;letter-spacing:0.03em;text-transform:uppercase;white-space:nowrap;cursor:pointer;transition:border-color 0.16s ease,color 0.16s ease;}
@media (hover:hover){.header-notary:hover{border-color:var(--gold-soft);color:var(--ink);}}
.header-notary:active{transform:scale(0.98);}
/* kebab menu item visibility by auth state */
.kebab-authed{display:none;}
body.is-authed .kebab-authed{display:flex;}
/* Greeting row at the top of the kebab menu (authed only) */
.kebab-greeting{align-items:center;padding:0.6rem 0.85rem;font-family:"Lora",Georgia,serif;font-size:0.9rem;font-weight:600;color:var(--ink);border-bottom:1px solid var(--line);margin-bottom:0.25rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
/* Header greeting, left of Claim a Free Notary — desktop only, authed only */
.header-greeting{display:none;font-family:"Lora",Georgia,serif;font-size:0.9rem;font-weight:600;color:var(--ink-2);margin-right:0.5rem;white-space:nowrap;}
body.is-authed .header-greeting{display:none;}
@media (min-width:900px){
  body.is-authed .header-greeting{display:inline-block;}
  /* On desktop the greeting lives in the header, so hide the kebab copy.
     Needs body.is-authed prefix to beat `body.is-authed .kebab-authed{display:flex}`. */
  body.is-authed .kebab-greeting{display:none;}
}
body.is-authed .kebab-guest{display:none;}
@media (hover:hover){.header-login:hover{color:var(--primary);}}
@media (hover:hover){.header-login:hover{opacity:0.9;}}

/* Settings: Sign out */
.set-signout{margin-top:1.5rem;display:inline-flex;align-items:center;justify-content:center;font-family:"IBM Plex Mono",monospace;font-size:0.72rem;font-weight:500;letter-spacing:0.04em;text-transform:uppercase;color:var(--ink-2);background:transparent;border:1px solid var(--line);border-radius:0.6rem;padding:0.65rem 1.2rem;cursor:pointer;transition:all 0.15s ease;}
@media (hover:hover){.set-signout:hover{border-color:var(--danger);color:var(--danger);}}

/* Settings: Danger zone */
.danger-zone{margin-top:2.5rem;padding-top:1.25rem;border-top:1px solid var(--line);}
.danger-title{font-family:"IBM Plex Mono",monospace;font-size:0.66rem;font-weight:500;letter-spacing:0.08em;text-transform:uppercase;color:var(--danger);margin-bottom:0.85rem;}
.danger-row{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;border:1px solid var(--danger-border);border-radius:0.6rem;padding:0.9rem 1rem;background:var(--danger-tint);}
.danger-row-text{flex:1;min-width:0;}
.danger-row-title{font-family:"IBM Plex Sans",system-ui,sans-serif;font-size:0.9rem;font-weight:600;color:var(--ink);margin-bottom:0.2rem;}
.danger-row-desc{font-family:"IBM Plex Sans",system-ui,sans-serif;font-size:0.78rem;color:var(--ink-3);line-height:1.45;}
.danger-btn{flex-shrink:0;font-family:"IBM Plex Mono",monospace;font-size:0.68rem;font-weight:500;letter-spacing:0.04em;text-transform:uppercase;color:var(--danger);background:var(--surface);border:1px solid var(--danger-border);border-radius:0.5rem;padding:0.55rem 0.9rem;cursor:pointer;transition:all 0.15s ease;}
@media (hover:hover){.danger-btn:hover{background:var(--danger);color:#fff;border-color:var(--danger);}}
.danger-confirm{display:none;margin-top:0.85rem;border:1px solid var(--danger-border);border-radius:0.6rem;padding:1rem;background:var(--danger-tint);}
.danger-confirm.open{display:block;}
.danger-confirm-warn{font-family:"IBM Plex Sans",system-ui,sans-serif;font-size:0.8rem;color:var(--ink-2);line-height:1.5;margin-bottom:0.75rem;}
.danger-confirm-warn strong{color:var(--danger);font-weight:700;letter-spacing:0.05em;}
.danger-input{letter-spacing:0.1em;text-transform:uppercase;}
.danger-confirm-actions{display:flex;gap:0.6rem;justify-content:flex-end;margin-top:0.75rem;}
.danger-cancel{font-family:"IBM Plex Mono",monospace;font-size:0.68rem;font-weight:500;letter-spacing:0.04em;text-transform:uppercase;color:var(--ink-2);background:transparent;border:1px solid var(--line);border-radius:0.5rem;padding:0.55rem 0.9rem;cursor:pointer;transition:all 0.15s ease;}
@media (hover:hover){.danger-cancel:hover{background:var(--line-2);}}
.danger-btn-final{background:var(--danger);color:#fff;border-color:var(--danger);}
.danger-btn-final:disabled{opacity:0.45;cursor:not-allowed;}
@media (hover:hover){.danger-btn-final:not(:disabled):hover{background:var(--danger-hover);}}

/* Settings: Notifications */
.set-notif-row{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;padding:0.25rem 0;}
.set-notif-text{flex:1;min-width:0;}
.set-notif-title{font-family:"IBM Plex Mono",monospace;font-size:0.68rem;font-weight:500;letter-spacing:0.03em;text-transform:uppercase;color:var(--ink-3);margin-bottom:0.4rem;}
.set-notif-desc{font-family:"IBM Plex Sans",system-ui,sans-serif;font-size:0.88rem;color:var(--ink-2);line-height:1.5;}
.set-toggle{flex-shrink:0;width:46px;height:28px;border-radius:999px;border:none;background:var(--line);position:relative;cursor:pointer;transition:background 0.18s ease;padding:0;margin-top:0.15rem;}
.set-toggle[aria-checked="true"]{background:var(--primary);}
.set-toggle-knob{position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,0.25);transition:transform 0.18s ease;}
.set-toggle[aria-checked="true"] .set-toggle-knob{transform:translateX(18px);}
.set-toggle:disabled{opacity:0.6;cursor:default;}

/* Card "learn more" info icon removed */


/* ── SERVICE REQUEST FORM OVERLAY (Step 2) ─────────────────────────── */
.srf-overlay{position:fixed;inset:0;z-index:340;display:none;}
.srf-overlay.open{display:block;}
.srf-panel{position:fixed;inset:0;background:var(--surface);display:flex;flex-direction:column;overflow:hidden;}
.srf-head{display:flex;align-items:center;justify-content:space-between;padding:calc(env(safe-area-inset-top,0px) + 1.1rem) 1.25rem 0.5rem;flex-shrink:0;}
.srf-title{flex:1;font-family:"Lora",Georgia,serif;font-weight:600;font-size:1.9rem;letter-spacing:-0.02em;color:var(--ink);}
.srf-close{width:36px;height:36px;display:inline-flex;align-items:center;justify-content:center;border:none;background:transparent;color:var(--ink-3);cursor:pointer;border-radius:8px;flex-shrink:0;}
.srf-close svg{width:22px;height:22px;}
@media (hover:hover){.srf-close:hover{background:var(--line-2);color:var(--ink);}}

.srf-body{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:1.25rem 1.25rem calc(2rem + env(safe-area-inset-bottom,0px));max-width:560px;margin:0 auto;width:100%;}
.srf-wf{margin-bottom:1.25rem;}
.srf-wf-label{font-family:"IBM Plex Mono",monospace;font-size:0.66rem;font-weight:500;letter-spacing:0.08em;text-transform:uppercase;color:var(--ink-4);margin-bottom:0.25rem;}
.srf-wf-name{font-family:"Lora",Georgia,serif;font-weight:600;font-size:1.05rem;color:var(--ink);line-height:1.2;}

.srf-section{font-family:"IBM Plex Mono",monospace;font-size:0.66rem;font-weight:500;letter-spacing:0.08em;text-transform:uppercase;color:var(--ink-4);margin:1rem 0 0.6rem;padding-bottom:0.35rem;border-bottom:1px solid var(--line);}
.srf-section:first-of-type{margin-top:0;}
.srf-field{margin-bottom:0.75rem;}
.srf-flabel{display:block;font-family:"IBM Plex Mono",monospace;font-size:0.68rem;font-weight:500;letter-spacing:0.03em;text-transform:uppercase;color:var(--ink-3);margin-bottom:0.3rem;}
.srf-opt{text-transform:none;letter-spacing:0;color:var(--ink-4);}
.srf-input{width:100%;font-family:"IBM Plex Sans",system-ui,sans-serif;font-size:16px;color:var(--ink);background:#fff;border:1px solid var(--line);border-radius:0.6rem;padding:0.7rem 0.85rem;outline:none;transition:border-color 0.15s ease;box-sizing:border-box;}
.srf-input:focus{border-color:var(--primary);}
.srf-textarea{resize:vertical;min-height:72px;line-height:1.45;}

.srf-opt{text-transform:none;letter-spacing:0;color:var(--ink-4);}

.srf-consent{display:flex;align-items:flex-start;gap:0.6rem;margin-top:1.25rem;cursor:pointer;}
.srf-consent input[type="checkbox"]{margin-top:0.15rem;width:18px;height:18px;flex-shrink:0;accent-color:var(--ink);cursor:pointer;}
.srf-consent-text{font-family:"IBM Plex Sans",system-ui,sans-serif;font-size:0.76rem;color:var(--ink-2);line-height:1.5;}
.srf-submit{margin-top:1.25rem;width:100%;display:inline-flex;align-items:center;justify-content:center;gap:0.45rem;font-family:"IBM Plex Mono",monospace;font-size:0.78rem;font-weight:500;letter-spacing:0.04em;text-transform:uppercase;color:#fff;background:var(--ink);border:none;border-radius:0.6rem;padding:0.85rem;cursor:pointer;transition:opacity 0.15s ease;}
.srf-submit:hover{opacity:0.9;}
.srf-submit:disabled{opacity:0.6;cursor:default;}


/* ========================================================================
   THEME CONSOLIDATION LAYER (cascade-winning)
   Tokenizes the scattered hard-coded backgrounds so theme switching is
   robust without per-rule edits. Backgrounds map to --bg/--surface/--header-bg;
   shadows/overlays use tokens. Filled-button TEXT is handled in the dark layer
   above (only --ink-bg buttons flip), so we DON'T touch button text here.
   ===================================================================== */
:root{ --overlay:rgba(20,28,40,0.55); }
:root[data-theme="dark"]{ --overlay:rgba(0,0,0,0.66); }

/* page-level surfaces */
html, body{ background:var(--bg); }
.sections, .wf-group-sec,
.settings-panel, .srf-panel, .search-panel, .cart-backdrop,
.story-band, .hero-centered{ background:var(--bg); }

/* sticky chrome */
.site-header, .filters{ background:var(--header-bg); }
.stage-anchor{ background:var(--header-bg); }

/* raised surfaces (cards, panels, menus, inputs) */
.wf-card, .wf-cart, .sec-more, .cat-select,
.cookie-banner, .limit-modal, .kebab-menu, .cs-row-menu, .user-dropdown,
.home-search-bar, .auth-tab, .auth-input, .otp-box, .set-input, .srf-input,
.bill-manage, .plan-card, .bill-current{ background:var(--surface); }

/* modal/overlay scrims use the overlay token */
.limit-backdrop{ background:var(--overlay); }

/* shadows → tokens (so they deepen appropriately in dark) */
.kebab-menu, .cs-row-menu, .user-dropdown{ box-shadow:0 8px 28px var(--shadow), 0 2px 6px var(--shadow); }
.cookie-banner{ box-shadow:0 8px 32px var(--shadow), 0 2px 8px var(--shadow); }
.limit-modal{ box-shadow:0 12px 40px var(--shadow-strong); }


/* ── SERVICE-FORM WALK-THROUGH PROGRESS (below the CTA) ─────────────── */
.srf-progress{display:flex;align-items:center;gap:0.7rem;margin-top:0.9rem;}
.srf-progress-track{flex:1;height:5px;border-radius:999px;background:var(--line-2,var(--line));overflow:hidden;}
.srf-progress-fill{height:100%;width:0;border-radius:999px;background:var(--gold);transition:width 0.45s cubic-bezier(.4,0,.2,1);}
.srf-progress-count{font-family:"IBM Plex Mono",monospace;font-size:0.66rem;font-weight:600;letter-spacing:0.04em;color:var(--ink-3);white-space:nowrap;}

/* ── PLANNER INLINE SUCCESS ─────────────────────────────────────────── */
.cs-success{display:flex;align-items:flex-start;gap:0.6rem;padding:0.85rem 1rem;margin-bottom:0.9rem;border-radius:0.7rem;background:var(--ok-bg);border:1px solid hsla(142,40%,45%,0.3);}
.cs-success svg{width:20px;height:20px;flex-shrink:0;color:var(--ok-fg);margin-top:1px;}
.cs-success-text{font-family:"IBM Plex Sans",system-ui,sans-serif;font-size:0.85rem;line-height:1.5;color:var(--ok-fg);margin:0;}


/* ── DESKTOP: paths + category + search + auto-scroll on ONE row ─────── */
@media (min-width:1000px){
  .filters{display:flex;align-items:center;gap:0.85rem;flex-wrap:nowrap;}
  /* order: paths → category → search → auto-scroll */
  .filters .track-wrap{order:1;flex:0 0 auto;flex-direction:row;margin:0;}
  /* Category dropdown: wide enough to show the longest category name in full. */
  .filters .cat-bar{order:2;flex:0 1 auto;margin:0 0 0 0.85rem;padding-top:0;border-top:none;min-width:0;}
  .filters .cat-row{display:none;}
  .filters .cat-select{display:block;flex:0 0 auto;margin-top:0;width:auto;min-width:230px;max-width:320px;}
  /* Search: flush right; shrink to icon-only when space is tight. */
  .filters .home-search{order:3;display:block;flex:0 1 auto;margin-top:0;margin-left:auto;width:220px;min-width:48px;}
  .filters .home-search-bar{padding:0.55rem 0.8rem;}
  .filters .home-search-bar .home-search-placeholder{font-size:0.85rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  /* Auto-scroll: toggle only (label hidden), name shown via hover tooltip. */
  .filters .scroll-toggle{order:4;flex:0 0 auto;gap:0;}
  .filters .scroll-toggle-label{display:none;}
  .filters .scroll-toggle:hover .scroll-tip,
  .filters .scroll-toggle:focus-within .scroll-tip{display:block;opacity:1;visibility:visible;transform:translateY(0);}
}
/* When the row gets tight, collapse the search to just its magnifier icon. */
@media (min-width:1000px) and (max-width:1140px){
  .filters .home-search{width:46px;flex:0 0 auto;}
  .filters .home-search-bar .home-search-placeholder{display:none;}
  .filters .home-search-bar{justify-content:center;padding:0.55rem;}
}


/* Short / landscape viewports: don't let the full-height hero eat the screen
   and push the filters + workflow cards below the fold. */
@media (max-height:560px){
  .page-intro{min-height:0 !important;justify-content:flex-start;padding-top:1.25rem;margin-top:0;}
}


/* Soft landing cue for instant track/category jumps — the destination section
   gently fades + rises so the jump reads as navigation, not a jarring teleport,
   without any scroll animation (which caused the scroll-spy tremble). */
@keyframes jumpLand{from{opacity:0.3;transform:translateY(12px);}to{opacity:1;transform:translateY(0);}}
.wf-group-sec.jump-land{animation:jumpLand 0.5s cubic-bezier(.22,.61,.36,1);}
@media (prefers-reduced-motion:reduce){.wf-group-sec.jump-land{animation:none;}}


/* ── MY REQUESTS TAB (Settings) ───────────────────────────────────────── */
.set-pane-intro{font-size:0.9rem;color:var(--ink-3);margin:0 0 1rem;line-height:1.5;}
.myreq-list{display:flex;flex-direction:column;gap:0.6rem;}
.myreq-loading{font-size:0.9rem;color:var(--ink-3);padding:1rem 0;text-align:center;}
.myreq-empty{text-align:center;padding:2rem 1rem;}
.myreq-empty-title{font-family:"Lora",Georgia,serif;font-size:1.05rem;color:var(--ink);margin:0 0 0.35rem;}
.myreq-empty-sub{font-size:0.88rem;color:var(--ink-3);margin:0;}
.myreq-item{border:1px solid var(--line);border-radius:12px;background:var(--surface);overflow:hidden;}
.myreq-row{width:100%;display:flex;align-items:center;gap:0.75rem;padding:0.85rem 1rem;background:transparent;border:none;cursor:pointer;text-align:left;color:inherit;}
.myreq-row-main{display:flex;flex-direction:column;gap:0.15rem;min-width:0;flex:1;}
.myreq-name{font-family:"Lora",Georgia,serif;font-size:0.98rem;color:var(--ink);line-height:1.3;}
.myreq-sub{font-size:0.78rem;color:var(--ink-3);font-family:"IBM Plex Mono",monospace;letter-spacing:0.01em;}
.myreq-status{flex:0 0 auto;font-family:"IBM Plex Mono",monospace;font-size:0.6rem;font-weight:600;text-transform:uppercase;letter-spacing:0.04em;padding:0.25rem 0.5rem;border-radius:6px;background:var(--primary-soft);color:var(--primary);white-space:nowrap;}
.myreq-chev{width:18px;height:18px;flex:0 0 auto;color:var(--ink-3);transition:transform 0.2s ease;}
.myreq-row[aria-expanded="true"] .myreq-chev{transform:rotate(180deg);}
.myreq-detail{max-height:0;overflow:hidden;transition:max-height 0.25s ease;padding:0 1rem;}
.myreq-detail.open{max-height:1200px;padding:0 1rem 0.95rem;}
.myreq-detail-line{font-size:0.86rem;color:var(--ink);line-height:1.55;margin:0.5rem 0 0;white-space:pre-wrap;word-break:break-word;}
.myreq-detail-label{display:block;font-family:"IBM Plex Mono",monospace;font-size:0.6rem;font-weight:600;text-transform:uppercase;letter-spacing:0.04em;color:var(--ink-3);margin-bottom:0.2rem;}


/* ── FEATURED WORKFLOWS CAROUSEL (guests only) ────────────────────────── */
.featured{padding:1.5rem 0 0.5rem;}
body.is-authed .featured{display:none;}            /* signed-in users skip straight to their workflows */
.featured-head{text-align:center;margin-bottom:1.4rem;}
.featured-eyebrow{display:inline-block;font-family:"IBM Plex Mono",monospace;font-size:0.62rem;font-weight:600;text-transform:uppercase;letter-spacing:0.14em;color:var(--gold);margin-bottom:0.5rem;}
.featured-title{font-family:"Lora",Georgia,serif;font-size:1.7rem;font-weight:600;color:var(--ink);margin:0 0 0.4rem;line-height:1.15;}
.featured-trust{font-size:0.85rem;color:var(--ink-3);margin:0.7rem 0 0;line-height:1.5;font-family:"IBM Plex Mono",monospace;letter-spacing:0.01em;}

/* Horizontal-scroll rail with snap + a peek of the next card to cue swiping. */
.featured-rail{display:flex;gap:1.1rem;overflow-x:auto;scroll-snap-type:x proximity;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding:0.5rem 0 1rem;scroll-padding-left:0;}
.featured-rail::-webkit-scrollbar{display:none;}
.fcard{scroll-snap-align:start;flex:0 0 auto;width:clamp(300px,38%,400px);display:flex;flex-direction:column;text-align:left;padding:0;background:var(--surface);border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow);cursor:pointer;overflow:hidden;transition:transform 0.18s ease,box-shadow 0.18s ease;color:inherit;font:inherit;}
.fcard:hover{transform:translateY(-3px);box-shadow:var(--shadow-strong);}
.fcard:focus-visible{outline:2px solid var(--primary);outline-offset:2px;}
.fcard-hero{border-color:var(--primary);border-width:2px;}

/* Media block — gradient + on-brand sketch icon (no stock photos). */
.fcard-media{position:relative;display:flex;align-items:center;justify-content:center;height:160px;}
.fcard-media-photo{background-size:cover;background-position:center;background-repeat:no-repeat;}
.fcard-media-scrim{position:absolute;inset:0;background:linear-gradient(to bottom,rgba(0,0,0,0.18) 0%,rgba(0,0,0,0) 38%,rgba(0,0,0,0) 55%,rgba(0,0,0,0.42) 100%);pointer-events:none;}
.fcard-media-gold{background:linear-gradient(135deg,hsl(38,72%,72%),hsl(42,80%,86%));}
.fcard-media-navy{background:linear-gradient(135deg,hsl(211,42%,58%),hsl(205,46%,74%));}
.fcard-media-sage{background:linear-gradient(135deg,hsl(150,28%,62%),hsl(120,30%,80%));}
.fcard-icon{width:64px;height:64px;color:#2a2114;opacity:0.85;}
.fcard-media-navy .fcard-icon,.fcard-media-sage .fcard-icon{color:#1c2a33;}
.fcard-badge{position:absolute;z-index:2;top:0.9rem;right:0.9rem;font-family:"IBM Plex Mono",monospace;font-size:0.58rem;font-weight:700;text-transform:uppercase;letter-spacing:0.06em;padding:0.24rem 0.55rem;border-radius:6px;background:var(--ink);color:var(--surface);}
.fcard-media-tag{position:absolute;z-index:2;left:0;bottom:0;width:100%;text-align:center;font-family:"IBM Plex Mono",monospace;font-size:0.58rem;font-weight:700;text-transform:uppercase;letter-spacing:0.06em;padding:0.4rem;background:var(--primary);color:#fff;}

.fcard-body{display:flex;flex-direction:column;gap:0.4rem;padding:1.2rem 1.2rem 1.3rem;flex:1;}
.fcard-eyebrow{font-family:"IBM Plex Mono",monospace;font-size:0.6rem;font-weight:600;text-transform:uppercase;letter-spacing:0.1em;color:var(--ink-3);}
.fcard-name{font-family:"Lora",Georgia,serif;font-size:1.32rem;font-weight:600;color:var(--ink);line-height:1.22;}
.fcard-desc{font-size:0.9rem;color:var(--ink-2,var(--ink-3));line-height:1.5;flex:1;margin:0.1rem 0 0.9rem;}
.fcard-cta{display:block;width:100%;text-align:center;font-family:"IBM Plex Mono",monospace;font-size:0.74rem;font-weight:600;text-transform:uppercase;letter-spacing:0.05em;color:#fff;background:var(--primary);padding:0.85rem 1rem;border-radius:11px;transition:background 0.16s ease;}
.fcard:hover .fcard-cta{background:var(--primary-hover,var(--primary));}

@media (max-width:849px){
  .featured-title{font-size:1.5rem;}
  .fcard{width:min(300px,82vw);}
  .fcard-name{font-size:1.22rem;}
}


/* ── PLANS CAROUSEL (public, guests only) ─────────────────────────────── */
.plans-pub{padding:2rem 0 1rem;}
body.is-authed .plans-pub{display:none;}
.plans-pub-head{text-align:center;margin-bottom:1.5rem;}
.plans-pub-eyebrow{display:inline-block;font-family:"IBM Plex Mono",monospace;font-size:0.62rem;font-weight:600;text-transform:uppercase;letter-spacing:0.14em;color:var(--gold);margin-bottom:0.5rem;}
.plans-pub-title{font-family:"Lora",Georgia,serif;font-size:1.7rem;font-weight:600;color:var(--ink);margin:0 0 0.4rem;line-height:1.15;}
.plans-pub-sub{font-size:0.95rem;color:var(--ink-3);margin:0.5rem 0 0;line-height:1.5;}
.plans-pub-foot{text-align:center;font-size:0.78rem;color:var(--ink-3);margin:1.2rem auto 0;max-width:640px;line-height:1.5;font-family:"IBM Plex Mono",monospace;letter-spacing:0.01em;}

.plans-rail{display:flex;gap:1.1rem;overflow-x:auto;scroll-snap-type:x proximity;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding:0.7rem 0 1rem;}
.plans-rail::-webkit-scrollbar{display:none;}
.pcard{scroll-snap-align:start;flex:0 0 auto;width:clamp(300px,40%,400px);display:flex;flex-direction:column;text-align:left;padding:1.6rem 1.5rem 1.5rem;background:var(--surface);border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow);position:relative;}
.pcard-rec{border-color:var(--primary);border-width:2px;box-shadow:var(--shadow-strong);}
.pcard-rec-ribbon{position:absolute;top:-0.7rem;left:1.5rem;font-family:"IBM Plex Mono",monospace;font-size:0.58rem;font-weight:700;text-transform:uppercase;letter-spacing:0.06em;padding:0.28rem 0.6rem;border-radius:7px;background:var(--primary);color:#fff;box-shadow:var(--shadow);}
.pcard-name{font-family:"Lora",Georgia,serif;font-size:1.5rem;font-weight:600;color:var(--ink);line-height:1.1;}
.pcard-price{margin:0.5rem 0 0.6rem;display:flex;align-items:baseline;gap:0.25rem;}
.pcard-amt{font-family:"Lora",Georgia,serif;font-size:2rem;font-weight:600;color:var(--ink);}
.pcard-per{font-size:0.85rem;color:var(--ink-3);font-family:"IBM Plex Mono",monospace;}
.pcard-for{font-size:0.85rem;color:var(--ink-3);line-height:1.45;}
.pcard-blurb{font-size:0.92rem;color:var(--ink-2,var(--ink-3));line-height:1.5;margin:0.8rem 0 0;}
.pcard-divider{height:1px;background:var(--line);margin:1.2rem 0;}
.pcard-includes{font-family:"IBM Plex Mono",monospace;font-size:0.66rem;font-weight:600;text-transform:uppercase;letter-spacing:0.06em;color:var(--ink-3);margin-bottom:0.9rem;}
.pcard-feats{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:0.85rem;flex:1;}
.pcard-feats li{display:flex;align-items:flex-start;gap:0.65rem;font-size:0.9rem;color:var(--ink);line-height:1.45;}
.pcard-feats strong{font-weight:600;color:var(--ink);}
.pcard-check{width:18px;height:18px;flex:0 0 auto;color:var(--primary);margin-top:0.1rem;}
.pcard-cta{display:block;width:100%;text-align:center;font-family:"IBM Plex Mono",monospace;font-size:0.74rem;font-weight:600;text-transform:uppercase;letter-spacing:0.05em;padding:0.9rem 1rem;border-radius:11px;margin-top:1.4rem;cursor:pointer;transition:background 0.16s ease,border-color 0.16s ease,color 0.16s ease;}
.pcard-cta-outline{background:transparent;border:1.5px solid var(--primary);color:var(--primary);}
.pcard-cta-outline:hover{background:var(--primary-soft);}
.pcard-cta-solid{background:var(--primary);border:1.5px solid var(--primary);color:#fff;}
.pcard-cta-solid:hover{background:var(--primary-hover,var(--primary));}
@media (max-width:849px){
  .plans-pub-title{font-size:1.5rem;}
  .plans-rail{padding-left:1rem;padding-right:1rem;margin-left:-1rem;margin-right:-1rem;scroll-padding-left:1rem;}
  .pcard{width:min(292px,76vw);padding:1.4rem 1.3rem;}
}


/* ── HOW IT WORKS — numbered steps + counters ─────────────────────────── */
.hiw{padding:2.5rem 0 1.5rem;}
body.is-authed .hiw{display:none;}                 /* guests-only, like featured + plans */
.hiw-head{text-align:center;margin-bottom:2rem;}
.hiw-eyebrow{display:inline-block;font-family:"IBM Plex Mono",monospace;font-size:0.62rem;font-weight:600;text-transform:uppercase;letter-spacing:0.14em;color:var(--gold);margin-bottom:0.5rem;}
.hiw-title{font-family:"Lora",Georgia,serif;font-size:1.7rem;font-weight:600;color:var(--ink);margin:0 0 0.4rem;line-height:1.15;}
.hiw-sub{font-size:0.95rem;color:var(--ink-3);margin:0.5rem 0 0;line-height:1.5;}
.hiw-steps{list-style:none;margin:0 auto;padding:0;max-width:720px;display:flex;flex-direction:column;gap:1.6rem;}
.hiw-step{display:flex;align-items:flex-start;gap:1.2rem;opacity:0;transform:translateY(18px);}
.hiw-animate .hiw-step{animation:hiwReveal 0.6s cubic-bezier(.22,.61,.36,1) forwards;}
.hiw-animate .hiw-step:nth-child(1){animation-delay:0.05s;}
.hiw-animate .hiw-step:nth-child(2){animation-delay:0.22s;}
.hiw-animate .hiw-step:nth-child(3){animation-delay:0.39s;}
@keyframes hiwReveal{to{opacity:1;transform:translateY(0);}}
.hiw-num{font-family:"Lora",Georgia,serif;font-size:2.4rem;font-weight:600;line-height:1;color:var(--gold);flex:0 0 auto;min-width:2.4rem;opacity:0.85;}
.hiw-step-title{font-family:"Lora",Georgia,serif;font-size:1.22rem;font-weight:600;color:var(--ink);margin:0.2rem 0 0.35rem;line-height:1.25;}
.hiw-step-desc{font-size:0.94rem;color:var(--ink-2,var(--ink-3));line-height:1.55;margin:0;}
/* Stats row */
.hiw-stats{display:flex;justify-content:center;gap:2.5rem;flex-wrap:wrap;margin:2.6rem auto 0;padding:1.8rem 1rem;border-top:1px solid var(--line);border-bottom:1px solid var(--line);max-width:720px;}
.hiw-stat{text-align:center;}
.hiw-stat-num{display:block;font-family:"Lora",Georgia,serif;font-size:2.2rem;font-weight:600;color:var(--primary);line-height:1;}
.hiw-stat-label{display:block;margin-top:0.4rem;font-family:"IBM Plex Mono",monospace;font-size:0.66rem;font-weight:600;text-transform:uppercase;letter-spacing:0.06em;color:var(--ink-3);}
/* Guarantee badge */
.hiw-guarantee{display:flex;align-items:flex-start;gap:0.85rem;max-width:600px;margin:1.8rem auto 0;padding:1.1rem 1.3rem;background:var(--primary-soft);border-radius:14px;}
.hiw-guarantee-icon{width:26px;height:26px;flex:0 0 auto;color:var(--primary);margin-top:0.1rem;}
.hiw-guarantee-text{font-size:0.86rem;color:var(--ink);line-height:1.5;margin:0;}
.hiw-guarantee-text strong{color:var(--ink);font-weight:600;}
@media (prefers-reduced-motion:reduce){.hiw-step{opacity:1;transform:none;animation:none !important;}}
@media (max-width:849px){
  .hiw-title{font-size:1.5rem;}
  .hiw-num{font-size:2rem;min-width:2rem;}
  .hiw-stats{gap:1.6rem;}
  .hiw-stat-num{font-size:1.8rem;}
}


/* ── GRAY + GOLD RECOLOR for How it works / Plans / Featured ──────────────
   Replaces the navy (--primary) accents in these three sections with a light
   gray + gold palette, and converts their CTAs to the outlined "Add to My
   Workflows" button format (gold hover). Placed last to win the cascade. */

/* Shared CTA = .wf-cart format: outlined, light, gold hover/active. */
.pcard-cta, .fcard-cta{
  display:inline-flex;align-items:center;justify-content:center;gap:0.45rem;
  width:100%;min-height:38px;padding:0.7rem 1rem;border:1px solid var(--line);
  border-radius:8px;color:var(--ink-2);background:var(--surface);
  font-family:"IBM Plex Mono",monospace;font-size:0.72rem;font-weight:500;
  letter-spacing:0.02em;white-space:nowrap;text-transform:uppercase;
  transition:all 0.16s ease;cursor:pointer;margin-top:1.4rem;
}
.pcard-cta:active, .fcard-cta:active{transform:scale(0.98);}
@media (hover:hover){
  .pcard-cta:hover, .fcard-cta:hover,
  .fcard:hover .fcard-cta{border-color:var(--blue);color:#fff;background:var(--blue);}
}
/* Any filled highlight state on these buttons (hover, active, or the older
   rules) uses a blue fill with white text for legibility. */
.pcard-cta:hover, .pcard-cta:active, .pcard-cta:focus-visible,
.fcard-cta:hover, .fcard-cta:active, .fcard-cta:focus-visible,
.fcard:hover .fcard-cta,
.pcard-cta-outline:hover, .pcard-cta-solid:hover{
  color:#fff !important;
  background:var(--blue) !important;
  border-color:var(--blue) !important;
}
/* Drop the old solid/outline variants' fills so all CTAs share one look. */
.pcard-cta-solid, .pcard-cta-outline, .fcard-cta{background:var(--surface);border-color:var(--line);color:var(--ink-2);}

/* HOW IT WORKS */
.hiw-stat-num{color:var(--gold);}
.hiw-guarantee{background:var(--cream);}
.hiw-guarantee-icon{color:var(--gold);}

/* PLANS — recommended tier + checks go gray/gold instead of navy. */
.pcard-rec{border-color:var(--gold);}
.pcard-rec-ribbon{background:var(--gold);color:#3a2c08;}
.pcard-check{color:var(--gold);}

/* FEATURED — hero border, ribbon, and the navy media tile go gold/gray. */
.fcard-hero{border-color:var(--gold);}
.fcard-media-tag{background:var(--gold);color:#3a2c08;}
.fcard-media-navy{background:linear-gradient(135deg,hsl(38,30%,82%),hsl(40,24%,90%));} /* was navy → warm gray */
.fcard-media-sage{background:linear-gradient(135deg,hsl(40,22%,80%),hsl(40,18%,90%));}   /* was sage → warm gray */
.fcard-media-navy .fcard-icon,.fcard-media-sage .fcard-icon{color:#6b5a3a;}              /* gold-brown icon on gray */
.fcard-badge{background:var(--ink);color:var(--surface);}


/* ── DESKTOP: carousels become a centered, non-scrolling full-width row ──
   On non-mobile, show all cards at once (no horizontal scroll / peek). The
   rail fills the available width and centers the cards; each card flexes to
   share the row evenly. Mobile keeps the swipe carousel. */
@media (min-width:850px){
  .featured-rail, .plans-rail{
    overflow-x:visible;
    scroll-snap-type:none;
    justify-content:center;
    flex-wrap:nowrap;
    width:100%;
  }
  .featured-rail .fcard, .plans-rail .pcard{
    flex:1 1 0;
    width:auto;
    min-width:0;
    max-width:none;
  }
}


/* ===== GLOBAL REDUCED-MOTION (catch-all) =====================================
   Per-section rules above set tasteful end-states for specific animations; this
   final override neutralizes every other transition/animation for users who ask
   for reduced motion. Placed last to win the cascade. ====================== */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}


/* ── TRUSTED BY strip (guests only) ───────────────────────────────────── */
.trustedby{padding:1.6rem 1.25rem;text-align:center;background:var(--surface);border-block:1px solid var(--line);margin:0.5rem 0 1.5rem;}
body.is-authed .trustedby{display:none;}
.trustedby-inner{max-width:560px;margin:0 auto;}
.trustedby-label{font-family:"IBM Plex Mono",monospace;font-size:0.66rem;font-weight:600;text-transform:uppercase;letter-spacing:0.12em;color:var(--ink-3);margin:0 0 0.9rem;}
.trustedby-list{list-style:none;margin:0;padding:0;display:flex;justify-content:center;flex-wrap:wrap;gap:0.7rem 2rem;}
.trustedby-item{display:inline-flex;align-items:center;gap:0.5rem;font-family:"Lora",Georgia,serif;font-size:1.1rem;font-weight:600;color:var(--ink);}
.trustedby-check{width:18px;height:18px;flex:0 0 auto;color:var(--gold);}
@media (max-width:849px){
  .trustedby-list{flex-direction:column;align-items:center;gap:0.6rem;}
  .trustedby-item{font-size:1rem;}
}




/* ── Report-a-bug footer link + overlay ───────────────────────────────── */
.footer-bug-link{background:none;border:none;padding:0;margin:0;font:inherit;color:inherit;text-decoration:underline;text-underline-offset:2px;cursor:pointer;opacity:0.85;}
@media (hover:hover){.footer-bug-link:hover{opacity:1;}}
.bug-overlay{position:fixed;inset:0;z-index:660;display:none;}
.bug-overlay.open{display:block;}
.bug-card{position:fixed;inset:0;width:100%;background:var(--surface);display:flex;flex-direction:column;overflow:auto;padding:1.5rem 1.4rem 1.4rem;}
.bug-close{position:absolute;top:0.7rem;right:0.85rem;background:none;border:none;font-size:1.5rem;line-height:1;color:var(--ink-3);cursor:pointer;padding:0.2rem;}
@media (hover:hover){.bug-close:hover{color:var(--ink);}}
.bug-title{font-family:"Lora",Georgia,serif;font-size:1.3rem;font-weight:600;color:var(--ink);margin:0 0 0.4rem;}
.bug-sub{font-size:0.85rem;color:var(--ink-3);line-height:1.5;margin:0 0 1.1rem;}
.bug-label{display:block;font-family:"IBM Plex Mono",monospace;font-size:0.66rem;font-weight:500;text-transform:uppercase;letter-spacing:0.08em;color:var(--ink-2);margin:0 0 0.4rem;}
.bug-optional{text-transform:none;letter-spacing:0;color:var(--ink-3);font-weight:400;}
.bug-textarea,.bug-input{width:100%;box-sizing:border-box;background:#fff;border:1px solid var(--line);border-radius:0.5rem;padding:0.65rem 0.7rem;font-family:"IBM Plex Sans",system-ui,sans-serif;font-size:16px;color:var(--ink);margin-bottom:1rem;resize:vertical;}
.bug-select{width:100%;box-sizing:border-box;background:#fff;border:1px solid var(--line);border-radius:0.5rem;padding:0.65rem 0.7rem;font-family:"IBM Plex Sans",system-ui,sans-serif;font-size:16px;color:var(--ink);margin-bottom:1rem;-webkit-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 0.7rem center;padding-right:2rem;cursor:pointer;}
.bug-select:focus{outline:none;border-color:var(--primary);}
.bug-textarea:focus,.bug-input:focus{outline:none;border-color:var(--primary);}
.bug-msg{font-size:0.82rem;line-height:1.4;margin-bottom:0.7rem;min-height:1.1rem;}
.bug-msg-err{color:var(--danger,#b3261e);}
.bug-msg-ok{color:var(--p-green,#2e7d52);}
.bug-submit{width:100%;background:var(--ink);color:#fff;border:none;border-radius:0.5rem;padding:0.75rem 1rem;font-family:"IBM Plex Mono",monospace;font-size:0.78rem;font-weight:500;text-transform:uppercase;letter-spacing:0.03em;cursor:pointer;transition:opacity 0.15s ease;}
.bug-submit:disabled{opacity:0.55;cursor:default;}
@media (hover:hover){.bug-submit:not(:disabled):hover{opacity:0.9;}}


/* ── DESKTOP: full-screen overlays become centered modals ──────────────────
   On non-mobile, the cart, search, settings, and service-request panels stop
   taking over the whole viewport and instead sit as a centered, contained card
   over a dimmed backdrop. Mobile keeps the full-screen treatment (untouched).
   Panels stay opaque (var(--surface), theme-appropriate). */
@media (min-width:850px){
  /* Wrappers → dimmed, centered backdrops. */
  .search-overlay.open,
  .settings-overlay.open,
  .srf-overlay.open,
  .bug-overlay.open{
    display:flex; align-items:center; justify-content:center;
    padding:2rem; background:rgba(20,28,40,0.55);
    -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px);
  }
  /* The cart wrapper IS the panel container; dim it and center its inner modal. */
  .cart-backdrop.open{
    background:rgba(20,28,40,0.55) !important;
    -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px);
    align-items:center; justify-content:center; padding:2rem;
  }
  /* Panels → contained centered cards. */
  .search-panel, .settings-panel, .srf-panel, .bug-card{
    position:relative; inset:auto; left:auto; right:auto; top:auto; bottom:auto;
    width:100%; max-height:86vh; border-radius:0.9rem;
    box-shadow:0 16px 48px rgba(0,0,0,0.28);
    border:1px solid var(--line); overflow:hidden;
  }
  .search-panel{ max-width:560px; }
  .srf-panel{ max-width:560px; }
  .bug-card{ max-width:560px; overflow:auto; }
  .settings-panel{ max-width:640px; }   /* wider — holds Billing / My Requests tabs */
  .cs-modal{
    width:100%; max-width:560px; max-height:86vh;
    background:var(--surface); border:1px solid var(--line);
    border-radius:0.9rem; box-shadow:0 16px 48px rgba(0,0,0,0.28);
    overflow:auto;
  }
}


/* ── Carousel card entry animation (slide in from right) + hover pop-out ──────
   Cards start shifted right and transparent; when the section scrolls into view
   its rail gets .reveal-in, and each card eases into place with a staggered
   delay (--i set per card inline). Slower, gentle ease. Fires once.
   Scroll-snap is suppressed until the reveal finishes (.reveal-done) so the
   transform animation doesn't fight the snap and cause a secondary jump.
   Honors reduced-motion. */
.reveal-card{opacity:0;transform:translateX(44px);transition:opacity 0.9s cubic-bezier(0.16,1,0.3,1),transform 1s cubic-bezier(0.16,1,0.3,1);transition-delay:calc(var(--i,0) * 160ms);will-change:opacity,transform;}
.reveal-in .reveal-card{opacity:1;transform:translateX(0);}
/* Suppress snap during the entry animation; restore once settled. */
.featured-rail:not(.reveal-done),.plans-rail:not(.reveal-done){scroll-snap-type:none;}
.featured-rail:not(.reveal-done) .fcard,.plans-rail:not(.reveal-done) .pcard{scroll-snap-align:none;}
/* Desktop hover pop-out — a touch more lift + slight scale than the mobile tap. */
@media (min-width:850px) and (hover:hover){
  .featured-rail .fcard{transition:transform 0.2s ease,box-shadow 0.2s ease;}
  .featured-rail .fcard:hover{transform:translateY(-6px) scale(1.02);box-shadow:var(--shadow-strong);}
  .plans-rail .pcard{transition:transform 0.2s ease,box-shadow 0.2s ease;}
  .plans-rail .pcard:hover{transform:translateY(-6px) scale(1.02);box-shadow:var(--shadow-strong);}
}
@media (prefers-reduced-motion:reduce){
  .reveal-card{opacity:1 !important;transform:none !important;transition:none !important;}
  .featured-rail,.plans-rail{scroll-snap-type:x proximity !important;}
  .featured-rail .fcard,.plans-rail .pcard{scroll-snap-align:start !important;}
  .featured-rail .fcard:hover,.plans-rail .pcard:hover{transform:none;}
}

/* View-article icon button on each workflow card (right of the CTA) */
.wf-card-actions{gap:0.5rem;}
.wf-view{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;color:var(--ink-3);background:none;border:none;transition:color 0.16s ease,transform 0.16s ease;text-decoration:none;}
.wf-view svg{width:17px;height:17px;}
.wf-view:hover{color:var(--primary);}
.wf-view:active{transform:scale(0.94);}

/* Floating Feedback button — vertical tab on the right edge, opens bug modal */
.feedback-fab{
  position:fixed;
  right:0;
  top:50%;
  transform:translateY(-50%) rotate(180deg);
  writing-mode:vertical-rl;
  z-index:470;
  background:var(--blue);
  color:#fff;
  border:none;
  border-radius:0 8px 8px 0;
  padding:0.85rem 0.5rem;
  font-family:"IBM Plex Mono",monospace;
  font-size:0.72rem;
  font-weight:600;
  letter-spacing:0.08em;
  text-transform:uppercase;
  cursor:pointer;
  box-shadow:-2px 2px 10px rgba(0,0,0,0.18);
  transition:background 0.15s ease,padding 0.15s ease;
}
.feedback-fab:hover{background:var(--primary-hover,var(--blue));padding-right:0.7rem;}
.feedback-fab:active{transform:translateY(-50%) rotate(180deg) scale(0.97);}
@media (max-width:599px){
  .feedback-fab{font-size:0.66rem;padding:0.7rem 0.42rem;}
}

/* Billing verification toast — top banner shown while polling for the upgraded tier */
.billing-status{position:fixed;top:0;left:0;right:0;z-index:600;display:none;align-items:center;justify-content:center;gap:0.55rem;color:#fff;font-family:"IBM Plex Sans",system-ui,sans-serif;font-size:0.84rem;font-weight:500;line-height:1.4;padding:calc(env(safe-area-inset-top,0px) + 0.7rem) 1rem 0.7rem;text-align:center;}
.billing-status.visible{display:flex;}
.billing-status-verifying{background:var(--primary);}
.billing-status-done{background:#2e7d52;}
.billing-status-slow{background:var(--ink);}
.billing-status-spinner{width:15px;height:15px;border:2px solid rgba(255,255,255,0.4);border-top-color:#fff;border-radius:50%;display:inline-block;animation:billingSpin 0.7s linear infinite;flex-shrink:0;}
@keyframes billingSpin{to{transform:rotate(360deg);}}
@media (prefers-reduced-motion:reduce){.billing-status-spinner{animation:none;}}