/* MINTMARBLES - site components · v6 "Mint & Marble" (fully responsive) */

/* ============================ NAV ============================ */
.nav{position:sticky;top:0;z-index:60;display:flex;align-items:center;height:var(--nav-h);
  background:color-mix(in srgb,var(--bg) 72%,transparent);-webkit-backdrop-filter:blur(16px) saturate(1.4);backdrop-filter:blur(16px) saturate(1.4);
  border-bottom:1px solid transparent;transition:border-color var(--dur),background var(--dur),box-shadow var(--dur)}
.nav.is-stuck{border-color:var(--line);box-shadow:0 6px 24px rgba(20,18,43,.06);background:color-mix(in srgb,var(--bg) 86%,transparent)}
.nav .wrap{display:flex;align-items:center;gap:var(--s-5);width:100%}
.brand{display:flex;align-items:center;gap:.62rem;font-family:var(--f-disp);font-weight:700;font-size:1.18rem;color:var(--ink);letter-spacing:-.03em}
.brand__mark{position:relative;width:34px;height:34px;border-radius:50%;background:var(--marble-duo);
  box-shadow:var(--sh-marble);display:grid;place-items:center;flex:none}
.brand__mark::before{content:"";position:absolute;top:14%;left:18%;width:32%;height:24%;border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.95),transparent 70%)}
.brand__mark svg{display:none}
.brand em{font-style:normal;color:var(--brand)}
.nav__links{display:flex;gap:.2rem;margin-left:.4rem}
.nav__links a{position:relative;padding:.5rem .85rem;border-radius:var(--r-pill);font-size:.93rem;font-weight:400;color:var(--ink-soft);transition:color var(--dur),background var(--dur)}
.nav__links a:hover{color:var(--ink);background:var(--bg-2)}
.nav__links a.is-active{color:var(--brand);background:var(--brand-050)}
.nav__actions{display:flex;align-items:center;gap:.7rem}
.nav__ghost{font-size:.92rem;font-weight:600;color:var(--ink-2);padding:.45rem .5rem;display:inline-flex;align-items:center;gap:.35rem}
.nav__ghost svg{width:15px;height:15px;color:var(--ink-faint)}
.nav__ghost:hover{color:var(--brand)}.nav__ghost:hover svg{color:var(--brand)}
.nav__toggle{display:none;width:44px;height:44px;border-radius:12px;color:var(--ink);align-items:center;justify-content:center;border:1px solid var(--line-2);background:var(--surface)}
.nav__toggle svg{width:22px;height:22px}
.nav__drawer{display:grid;grid-template-rows:0fr;overflow:hidden;position:absolute;inset:var(--nav-h) 0 auto 0;
  background:var(--surface);border-bottom:1px solid transparent;transition:grid-template-rows .34s var(--ease-out),border-color .34s;z-index:59}
.nav__drawer>div{min-height:0;overflow:hidden}
.nav.drawer-open .nav__drawer{grid-template-rows:1fr;border-color:var(--line);box-shadow:var(--sh-3)}
.nav__drawer .pad{padding:var(--s-4) clamp(18px,4vw,40px) var(--s-5);display:grid;gap:.15rem}
.nav__drawer a{padding:.9rem .5rem;border-radius:12px;font-weight:400;color:var(--ink-2);font-size:1.04rem;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:.5rem}
.nav__drawer a:last-of-type{border-bottom:none}
.nav__drawer .btn{margin-top:.9rem}
@media(max-width:940px){.nav__links{display:none}.nav__ghost{display:none}.nav__toggle{display:inline-flex}}
@media(max-width:520px){.nav__actions .btn span:not(.arrow){display:none}}

/* ============================ HERO ============================ */
.hero{position:relative;isolation:isolate;overflow:clip;padding-block:clamp(3.2rem,2rem + 6vw,6rem) clamp(3.5rem,2rem + 7vw,7.5rem)}
.hero__bg{position:absolute;inset:0;z-index:-3;pointer-events:none;background:var(--mesh);opacity:.9}
.hero__grid-lines{position:absolute;inset:0;z-index:-2;pointer-events:none;
  background-image:linear-gradient(var(--grid-line) 1px,transparent 1px),linear-gradient(90deg,var(--grid-line) 1px,transparent 1px);
  background-size:var(--grid) var(--grid);
  -webkit-mask-image:radial-gradient(130% 90% at 50% 0,#000,transparent 72%);mask-image:radial-gradient(130% 90% at 50% 0,#000,transparent 72%)}
.hero__marbles{position:absolute;inset:0;z-index:-1;pointer-events:none}
.hero .marble--h1{width:120px;height:120px;top:12%;left:4%;background:var(--marble-violet)}
.hero .marble--h2{width:78px;height:78px;top:60%;left:9%;background:var(--marble-mint)}
.hero .marble--h3{width:54px;height:54px;top:20%;right:40%;background:var(--marble-glass);
  box-shadow:0 12px 24px rgba(20,18,43,.12),inset 0 -3px 10px rgba(58,39,198,.18),inset 0 5px 10px rgba(255,255,255,.7)}
.hero .marble--h4{width:150px;height:150px;bottom:-4%;right:3%;background:var(--marble-duo);opacity:.96}
.hero__grid{display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(2rem,1rem + 4vw,4.5rem);align-items:center}
.hero__eyebrow{margin-bottom:var(--s-5)}
.hero__title{font-size:var(--fs-display);letter-spacing:-.045em;line-height:1.03;margin-bottom:var(--s-5)}
.hero__lead{font-size:var(--fs-lead);color:var(--ink-soft);max-width:50ch;margin-bottom:var(--s-6)}
.hero__cta{display:flex;flex-wrap:wrap;gap:.8rem;margin-bottom:var(--s-6)}
.hero__trust{display:flex;flex-wrap:wrap;gap:.6rem 1.3rem}
.hero__trust .t{display:flex;align-items:center;gap:.5rem;font-size:.9rem;font-weight:600;color:var(--ink-2)}
.hero__trust .t svg{width:19px;height:19px;color:var(--mint-600)}
.hero__visual{position:relative;perspective:1400px}
.hero__stage{position:relative;transform-style:preserve-3d;transition:transform .4s var(--ease-out)}
.hero__visual .app{box-shadow:var(--sh-window);transform:rotateY(-7deg) rotateX(3deg);transition:transform .5s var(--ease-out)}
.hero__visual:hover .app{transform:rotateY(-3deg) rotateX(1.5deg)}
.hero .marble--v1{width:64px;height:64px;top:-34px;right:12%;background:var(--marble-mint);z-index:3}
.hero .marble--v2{width:40px;height:40px;bottom:8%;right:-18px;background:var(--marble-orange);z-index:3}
.floatcard{position:absolute;z-index:4;display:flex;align-items:center;gap:.7rem;background:color-mix(in srgb,var(--surface) 92%,transparent);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid var(--line);
  border-radius:var(--r-md);padding:.72rem .95rem;box-shadow:var(--sh-3);font-size:.84rem;font-weight:700;color:var(--ink)}
.floatcard .sub{display:block;font-weight:400;color:var(--ink-faint);font-size:.74rem;margin-top:1px}
.floatcard .fic{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;color:#fff;flex:none}
.floatcard .fic svg{width:18px;height:18px}
.floatcard--a{bottom:15%;left:-32px;animation:floaty 5.5s var(--ease) infinite}
.floatcard--b{bottom:-22px;right:12%;animation:floaty 6.5s var(--ease) infinite reverse}
.floatcard--c{top:-22px;right:16%;animation:floaty 7.5s var(--ease) .5s infinite}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-11px)}}
@media(max-width:900px){
  .hero__grid{grid-template-columns:1fr;gap:2.4rem}
  .floatcard--c{display:none}
  .hero__visual .app{transform:none}
}
@media(max-width:560px){.floatcard--a,.floatcard--b{position:static;animation:none;margin:.5rem .5rem 0 0;display:none}}
@media(max-width:640px){.hero__marbles{display:none}.page-hero .marble,.pd-hero .marble{opacity:.5}}

/* ==================== TRUST MARQUEE ==================== */
.trust{border-block:1px solid var(--line);background:var(--surface);overflow:hidden}
.trust__row{display:flex;align-items:center;gap:1.2rem;padding-block:1.15rem;flex-wrap:wrap;justify-content:center}
.trust__lead{font-size:.86rem;font-weight:600;color:var(--ink-soft);display:inline-flex;align-items:center;gap:.5rem;white-space:nowrap}
.stars{display:inline-flex;gap:2px;color:var(--etsy)}
.stars svg{width:15px;height:15px;fill:currentColor;stroke:none}
.marquee{position:relative;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);padding-block:.9rem}
.marquee__track{display:flex;gap:2.6rem;width:max-content;animation:scroll-x 34s linear infinite}
.marquee:hover .marquee__track{animation-play-state:paused}
.marquee__item{display:inline-flex;align-items:center;gap:.55rem;font-family:var(--f-disp);font-weight:600;font-size:1.02rem;color:var(--ink-faint);white-space:nowrap;letter-spacing:-.01em}
.marquee__item svg{width:20px;height:20px;color:var(--brand);opacity:.55}
.marquee__item .dot{width:5px;height:5px;border-radius:50%;background:var(--line-3)}
@keyframes scroll-x{from{transform:translateX(0)}to{transform:translateX(calc(-50% - 1.3rem))}}
@media (prefers-reduced-motion:reduce){.marquee__track{animation:none;flex-wrap:wrap}}

/* ==================== STATS BAND ==================== */
.stats{position:relative;isolation:isolate;overflow:clip}
.statgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,1.6vw,24px)}
.stat{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:clamp(1.4rem,1rem + 1.4vw,2.1rem);box-shadow:var(--sh-1);overflow:hidden;transition:transform var(--dur) var(--ease),box-shadow var(--dur),border-color var(--dur)}
.stat:hover{transform:translateY(-4px);box-shadow:var(--sh-3);border-color:var(--line-2)}
.stat::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--grad-duo);transform:scaleX(0);transform-origin:left;transition:transform .6s var(--ease-out)}
.stat.in::before{transform:scaleX(1)}
.stat__num{font-family:var(--f-disp);font-weight:700;font-size:clamp(2.3rem,1.6rem + 2.4vw,3.4rem);letter-spacing:-.04em;line-height:1;
  background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent}
.stat__num .suf{-webkit-text-fill-color:var(--mint-600);color:var(--mint-600)}
.stat__label{margin-top:.5rem;color:var(--ink-2);font-weight:600;font-size:.98rem}
.stat__sub{color:var(--ink-faint);font-size:.85rem;margin-top:.15rem}
@media(max-width:760px){.statgrid{grid-template-columns:repeat(2,1fr)}}

/* ==================== SECTION SCAFFOLD ==================== */
.section{padding-block:clamp(3.6rem,2rem + 6vw,7.5rem);position:relative}
.section-sm{padding-block:clamp(2.5rem,1.5rem + 4vw,4.5rem)}
.section-tint{background:
  radial-gradient(60% 60% at 50% -10%, color-mix(in srgb,var(--brand) 5%,transparent), transparent 70%),
  var(--bg-2)}
.section-mint{background:radial-gradient(70% 60% at 50% 0,var(--mint-tint),var(--bg) 72%)}
.section-head{max-width:64ch;margin-bottom:clamp(2.2rem,1rem + 2.4vw,3.4rem)}
.section-head.center{margin-inline:auto;text-align:center}
.section-head .eyebrow{margin-bottom:1rem}
.section-head h2{margin-bottom:.85rem}
.section-head .lead{margin:0}.section-head.center .lead{margin-inline:auto}

/* ==================== BENTO (rich, with mini-visuals) ==================== */
.bento{display:grid;grid-template-columns:repeat(6,1fr);grid-auto-rows:1fr;gap:clamp(14px,1.4vw,20px)}
.bento__item{position:relative;grid-column:span 2;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:clamp(1.4rem,1rem + 1vw,1.9rem);box-shadow:var(--sh-1);overflow:hidden;
  transition:transform var(--dur) var(--ease),box-shadow var(--dur),border-color var(--dur)}
.bento__item:hover{transform:translateY(-5px);box-shadow:var(--sh-3);border-color:var(--line-2)}
.bento__item.lg{grid-column:span 3}
.bento__item.tall{grid-row:span 2}
.bento__ic{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;color:#fff;background:var(--grad-brand);box-shadow:var(--sh-1);margin-bottom:1.1rem}
.bento__ic svg{width:23px;height:23px}
.bento__item h3{font-size:1.22rem;margin-bottom:.5rem;letter-spacing:-.02em}
.bento__item p{color:var(--ink-soft);font-size:.95rem;line-height:1.55}
.bento__item--dark{background:linear-gradient(155deg,var(--ink-bg-2),var(--ink-bg));border-color:transparent;color:#fff}
.bento__item--dark h3{color:#fff}.bento__item--dark p{color:rgba(255,255,255,.72)}
.bento__item--dark .bento__ic{background:rgba(255,255,255,.1);border:1px solid var(--ink-line)}
.bento__item--dark .marble{width:120px;height:120px;bottom:-38px;right:-30px}
/* mini-visual: offline signal */
.viz{margin-top:1.1rem;display:flex;align-items:flex-end;gap:.4rem;height:56px}
.viz .bar{flex:1;border-radius:6px 6px 0 0;background:var(--grad-mint);opacity:.85}
.viz .bar:nth-child(1){height:40%}.viz .bar:nth-child(2){height:66%}.viz .bar:nth-child(3){height:52%}
.viz .bar:nth-child(4){height:86%}.viz .bar:nth-child(5){height:70%}.viz .bar:nth-child(6){height:100%}
/* mini-visual: price tag */
.viz-tag{margin-top:1.1rem;display:inline-flex;align-items:baseline;gap:.5rem;padding:.6rem 1rem;border-radius:var(--r-md);
  background:var(--surface-tint);border:1px dashed var(--brand-200)}
.viz-tag b{font-family:var(--f-disp);font-weight:700;font-size:1.6rem;color:var(--brand);letter-spacing:-.03em}
.viz-tag s{color:var(--ink-faint);font-weight:400;font-size:.85rem}
.viz-tag span{font-size:.78rem;color:var(--ink-soft);font-weight:600}
/* mini-visual: chips */
.viz-chips{margin-top:1.1rem;display:flex;flex-wrap:wrap;gap:.4rem}
.viz-chips span{font-size:.72rem;font-weight:600;padding:.32rem .6rem;border-radius:var(--r-pill);background:var(--mint-050);color:var(--mint-700)}
/* mini-visual: lock/private */
.viz-lock{margin-top:auto;padding-top:1.1rem;display:flex;align-items:center;gap:.6rem;color:rgba(255,255,255,.85);font-size:.82rem;font-weight:600}
.viz-lock .d{width:8px;height:8px;border-radius:50%;background:var(--mint);box-shadow:0 0 0 4px var(--mint-weak)}
@media(max-width:900px){.bento{grid-template-columns:repeat(2,1fr)}.bento__item,.bento__item.lg{grid-column:span 1}.bento__item.tall{grid-row:auto}}
@media(max-width:560px){.bento{grid-template-columns:1fr}}

/* ==================== FEATURE SPLIT ROWS ==================== */
.feat{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,1rem + 4vw,4.8rem);align-items:center;padding-block:clamp(1.5rem,1rem + 3vw,3rem)}
.feat.rev .feat__media{order:2}
.feat__copy .eyebrow{margin-bottom:1rem}
.feat__copy h3{font-size:clamp(1.6rem,1.2rem + 1.4vw,2.3rem);margin-bottom:.9rem;letter-spacing:-.03em}
.feat__copy p{color:var(--ink-soft);font-size:1.04rem;margin-bottom:1.3rem;max-width:46ch}
.feat__list{display:grid;gap:.8rem;margin-bottom:1.6rem}
.feat__list li{display:flex;gap:.65rem;align-items:flex-start;color:var(--ink-2);font-size:.98rem;font-weight:400}
.feat__list li svg{width:20px;height:20px;color:var(--mint-600);flex:none;margin-top:1px}
.feat__media{position:relative}
.feat__media .app{box-shadow:var(--sh-3)}
.feat__media .marble{width:56px;height:56px}
.feat .marble--f1{top:-26px;left:-22px;background:var(--marble-mint);z-index:3}
.feat .marble--f2{bottom:-20px;right:-16px;width:40px;height:40px;background:var(--marble-violet);z-index:3}
.feat__chip{position:absolute;z-index:4;display:flex;align-items:center;gap:.55rem;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-md);padding:.6rem .85rem;box-shadow:var(--sh-3);font-size:.8rem;font-weight:700;color:var(--ink)}
.feat__chip .sub{display:block;font-weight:400;color:var(--ink-faint);font-size:.72rem}
.feat__chip .fic{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;color:#fff;flex:none}
.feat__chip .fic svg{width:16px;height:16px}
.feat__chip--tr{top:-18px;right:-16px;animation:floaty 6s var(--ease) infinite}
.feat__chip--bl{bottom:-14px;left:-14px;animation:floaty 7s var(--ease) reverse infinite}

@media(max-width:820px){.feat{grid-template-columns:1fr;gap:2.4rem}.feat.rev .feat__media{order:0}.feat__chip{display:none}}

/* ==================== PRODUCT CARD GRID ==================== .product-card__media{position:relative;aspect-ratio:16/10;overflow:hidden;border-bottom:1px solid var(--line)}*/
.product-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:clamp(16px,1.6vw,26px)}
.product-card{position:relative;display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  overflow:hidden;box-shadow:var(--sh-1);transition:transform var(--dur) var(--ease),box-shadow var(--dur),border-color var(--dur)}
.product-card:hover{transform:translateY(-6px);box-shadow:var(--sh-4);border-color:var(--brand-200)}

.product-card__media{position:relative;overflow:hidden;border-bottom:1px solid var(--line)}
.product-card__media svg,.product-card__media img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease-out)}
.product-card:hover .product-card__media svg{transform:scale(1.03)}
.product-card__flags{position:absolute;top:.8rem;left:.8rem;display:flex;gap:.4rem;z-index:2}
.product-card__body{padding:var(--s-5);display:flex;flex-direction:column;gap:.5rem;flex:1}
.product-card__meta{display:flex;gap:.5rem;font-size:.72rem;color:var(--ink-faint);font-family:var(--f-mono);text-transform:uppercase;letter-spacing:.06em}
.product-card__title{font-family:var(--f-disp);font-weight:600;font-size:1.24rem;color:var(--ink);letter-spacing:-.02em}
.product-card:hover .product-card__title{color:var(--brand)}
.product-card__desc{color:var(--ink-soft);font-size:.92rem;flex:1;line-height:1.5}
.product-card__foot{display:flex;align-items:center;justify-content:space-between;margin-top:.4rem;padding-top:1rem;border-top:1px solid var(--line)}
.product-card__foot .price{font-size:1.32rem}

/* ==================== product_window (.app) ==================== */
.app{background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r-lg);overflow:hidden;position:relative;z-index:1}
.app__bar{display:flex;align-items:center;gap:.7rem;padding:.72rem 1rem;background:var(--surface-2);border-bottom:1px solid var(--line)}
.app__dots{display:flex;gap:.4rem}.app__dots i{width:11px;height:11px;border-radius:50%;background:var(--line-3)}
.app__dots i:nth-child(1){background:#FF6058}.app__dots i:nth-child(2){background:#FEBC2E}.app__dots i:nth-child(3){background:#28C840}
.app__addr{flex:1;text-align:center;font-family:var(--f-mono);font-size:.72rem;color:var(--ink-faint);display:inline-flex;align-items:center;justify-content:center;gap:.4rem}
.app__addr::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--mint);box-shadow:0 0 0 3px var(--mint-weak)}
.app__body{display:grid;grid-template-columns:172px 1fr;min-height:344px}
.app__side{background:var(--surface-2);border-right:1px solid var(--line);padding:.9rem;display:flex;flex-direction:column;gap:.2rem}
.app__brand{display:flex;align-items:center;gap:.5rem;font-family:var(--f-disp);font-weight:600;font-size:.92rem;color:var(--ink);padding:.2rem .3rem .8rem}
.app__brand .m{width:26px;height:26px;border-radius:8px;display:grid;place-items:center;color:#fff}.app__brand .m svg{width:15px;height:15px}
.app__nav{display:flex;align-items:center;gap:.55rem;padding:.52rem .55rem;border-radius:10px;font-size:.82rem;font-weight:400;color:var(--ink-soft)}
.app__nav svg{width:16px;height:16px;color:var(--ink-faint)}
.app__nav.is-active{background:var(--brand-050);color:var(--brand-700);font-weight:600}.app__nav.is-active svg{color:var(--brand)}
.app__main{padding:1.1rem 1.2rem;min-width:0}
.app__head{display:flex;align-items:center;justify-content:space-between;margin-bottom:1rem}
.app__head h4{font-size:1.1rem}
.app__mini{display:flex;align-items:center;gap:.5rem}
.app__chip{font-family:var(--f-mono);font-size:.68rem;color:var(--ink-faint);background:var(--bg-2);padding:.26rem .5rem;border-radius:6px}
.app__btn{font-size:.72rem;font-weight:600;color:#fff;background:var(--brand);padding:.36rem .72rem;border-radius:var(--r-pill)}
.app__kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem;margin-bottom:1rem}
.app__kpis .kpi{background:var(--surface-2);border:1px solid var(--line);border-radius:12px;padding:.7rem .8rem}
.app__kpis .kpi .l{font-family:var(--f-mono);font-size:.6rem;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-faint)}
.app__kpis .kpi .v{font-family:var(--f-disp);font-weight:700;font-size:1.16rem;color:var(--ink);margin-top:.2rem;display:flex;align-items:baseline;gap:.3rem}
.app__kpis .kpi .up{font-family:var(--f-body);font-size:.62rem;font-weight:700;color:var(--ok)}
.app__kpis .kpi.spark{position:relative}
.app__kpis .kpi .bar{height:5px;border-radius:3px;margin-top:.5rem;background:var(--grad-mint);width:64%;animation:barGrow 1.4s var(--ease-out) both}
@keyframes barGrow{from{width:0}}
.app__table{position:relative;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.app__table .scanline{position:absolute;inset:0;background:linear-gradient(180deg,transparent,color-mix(in srgb,var(--brand) 9%,transparent),transparent);height:40%;animation:scan 3.4s var(--ease) infinite;pointer-events:none}
@keyframes scan{0%{transform:translateY(-100%)}100%{transform:translateY(280%)}}
.trow{display:grid;grid-template-columns:1.2fr 2fr 1.3fr 1fr;gap:.6rem;align-items:center;padding:.56rem .8rem;font-size:.78rem;border-bottom:1px solid var(--line)}
.trow.head{background:var(--surface-2);font-family:var(--f-mono);font-size:.62rem;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-faint)}
.trow:last-child{border-bottom:none}
.trow:not(.head){animation:rowIn .5s var(--ease-out) both}
.trow:nth-child(2){animation-delay:.05s}.trow:nth-child(3){animation-delay:.1s}.trow:nth-child(4){animation-delay:.15s}.trow:nth-child(5){animation-delay:.2s}.trow:nth-child(6){animation-delay:.25s}
@keyframes rowIn{from{opacity:0;transform:translateX(-8px)}to{opacity:1;transform:none}}
.c-name{display:flex;align-items:center;gap:.5rem;font-weight:600;color:var(--ink);min-width:0}
.c-name .av{width:22px;height:22px;border-radius:6px;display:grid;place-items:center;color:#fff;font-size:.6rem;font-weight:700;flex:none}
.c-amt{text-align:right;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
.pill{display:inline-flex;align-items:center;gap:.3rem;font-size:.68rem;font-weight:600;padding:.16rem .5rem;border-radius:var(--r-pill)}
.pill .dot{width:5px;height:5px;border-radius:50%;background:currentColor}
.pill-green{background:var(--ok-w);color:#0C7A3D}.pill-amber{background:var(--warn-w);color:#8A5807}
.pill-cyan{background:#E1F2FA;color:#065F80}.pill-violet{background:var(--brand-050);color:var(--brand-700)}
@media(max-width:520px){.app__body{grid-template-columns:1fr}.app__side{display:none}}

/* ==================== REVIEWS (Etsy-style) ==================== */
.reviews{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,1.6vw,24px)}
.review{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(1.5rem,1rem + 1vw,2rem);
  box-shadow:var(--sh-1);transition:transform var(--dur) var(--ease),box-shadow var(--dur),border-color var(--dur);display:flex;flex-direction:column}
.review:hover{transform:translateY(-4px);box-shadow:var(--sh-3);border-color:var(--line-2)}
.review__stars{display:inline-flex;gap:2px;color:var(--etsy);margin-bottom:.9rem}
.review__stars svg{width:17px;height:17px;fill:currentColor;stroke:none}
.review__quote{font-family:var(--f-disp);font-size:1.05rem;line-height:1.5;color:var(--ink);letter-spacing:-.01em;flex:1;margin-bottom:1.3rem}
.review__who{display:flex;align-items:center;gap:.7rem}
.review__av{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;color:#fff;font-family:var(--f-disp);font-weight:700;font-size:1rem;flex:none;box-shadow:var(--sh-1)}
.review__name{font-weight:700;color:var(--ink);font-size:.94rem}
.review__role{color:var(--ink-faint);font-size:.82rem}
.review__badge{margin-left:auto;display:inline-flex;align-items:center;gap:.35rem;font-size:.72rem;font-weight:600;color:var(--mint-700);
  background:var(--mint-050);padding:.28rem .55rem;border-radius:var(--r-pill)}
.review__badge svg{width:12px;height:12px}
@media(max-width:900px){.reviews{grid-template-columns:1fr}}

/* ==================== STEPS ==================== */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,28px);counter-reset:step;position:relative}
.step{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(1.6rem,1rem + 1.4vw,2.2rem);box-shadow:var(--sh-1);
  transition:transform var(--dur) var(--ease),box-shadow var(--dur),border-color var(--dur)}
.step:hover{transform:translateY(-4px);box-shadow:var(--sh-3);border-color:var(--line-2)}
.step::before{counter-increment:step;content:counter(step,decimal-leading-zero);display:inline-grid;place-items:center;width:46px;height:46px;border-radius:14px;
  background:var(--grad-brand);color:#fff;font-family:var(--f-disp);font-weight:700;font-size:1.05rem;margin-bottom:1.1rem;box-shadow:var(--sh-brand)}
.step:nth-child(2)::before{background:var(--grad-etsy);box-shadow:var(--sh-etsy)}
.step:nth-child(3)::before{background:var(--grad-mint);box-shadow:var(--sh-mint)}
.step h3{font-size:1.22rem;margin-bottom:.5rem}.step p{color:var(--ink-soft);font-size:.95rem;line-height:1.55}
@media(max-width:820px){.steps{grid-template-columns:1fr}}

/* ==================== FAQ ACCORDION ==================== */
.faq-list{display:grid;gap:.8rem;max-width:860px;margin:0 auto}
.faq{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;box-shadow:var(--sh-1);transition:border-color var(--dur),box-shadow var(--dur)}
.faq[open]{border-color:var(--brand-200);box-shadow:var(--sh-2)}
.faq summary{cursor:pointer;list-style:none;padding:1.2rem 1.5rem;font-family:var(--f-disp);font-weight:600;font-size:1.06rem;color:var(--ink);
  display:flex;justify-content:space-between;gap:1rem;align-items:center;transition:color var(--dur)}
.faq summary:hover{color:var(--brand)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";width:26px;height:26px;flex:none;border-radius:8px;background:var(--bg-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235B45FF' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center/16px no-repeat;transition:transform var(--dur),background var(--dur)}
.faq[open] summary::after{transform:rotate(180deg);background-color:var(--brand-050)}
.faq__body{padding:0 1.5rem 1.4rem;color:var(--ink-soft);line-height:1.6}
.faq__body a{color:var(--brand);font-weight:600}

/* ==================== CTA BAND ==================== */
.band{position:relative;isolation:isolate;overflow:hidden;background:linear-gradient(150deg,var(--ink-bg-2),var(--ink-bg) 65%);color:#fff;border-radius:var(--r-3xl);
  padding:clamp(2.8rem,1.5rem + 5vw,5.5rem) clamp(1.6rem,1rem + 4vw,4rem);text-align:center}
.band__glow{position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(50% 60% at 22% 0,color-mix(in srgb,var(--brand) 60%,transparent),transparent 68%),
    radial-gradient(46% 60% at 82% 110%,color-mix(in srgb,var(--mint) 42%,transparent),transparent 66%)}
.band .marble--c1{width:110px;height:110px;top:-30px;left:8%;background:var(--marble-violet)}
.band .marble--c2{width:70px;height:70px;bottom:-20px;right:12%;background:var(--marble-mint)}
.band .marble--c3{width:44px;height:44px;top:30%;right:6%;background:var(--marble-orange);opacity:.9}
.band h2{color:#fff;margin-bottom:1rem;font-size:clamp(2rem,1.4rem + 2.6vw,3.4rem)}
.band p{color:rgba(255,255,255,.76);max-width:52ch;margin:0 auto 2rem;font-size:var(--fs-lead)}
.band .cluster{position:relative;z-index:2;display:block}
.on-ink h1,.on-ink h2,.on-ink h3{color:#fff}

/* ==================== PRODUCT DETAIL ==================== */
.pd-hero{position:relative;isolation:isolate;overflow:clip;padding-block:clamp(2rem,1rem + 3vw,3.5rem) clamp(3rem,2rem + 4vw,5.5rem)}
.pd-hero__bg{position:absolute;inset:0;z-index:-2;pointer-events:none;
  background:radial-gradient(50% 60% at 82% 6%, color-mix(in srgb,var(--pd-accent,var(--brand)) 20%,transparent), transparent 60%),
             radial-gradient(46% 50% at 6% 30%, color-mix(in srgb,var(--mint) 16%,transparent), transparent 60%)}
.pd-hero .marble--p1{width:64px;height:64px;top:-30px;right:16%;z-index:3;background:var(--marble-mint)}
.pd-hero .marble--p2{width:44px;height:44px;bottom:6%;right:-16px;z-index:3;background:var(--marble-orange)}
.pd-hero__grid{display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(2rem,1rem + 4vw,4rem);align-items:center}
.pd-hero__intro h1{font-size:clamp(2.3rem,1.6rem + 2.8vw,3.6rem);letter-spacing:-.035em;margin:1rem 0}
.pd-hero__intro .lead{margin-bottom:1.5rem}
.hl{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1.8rem}
.hl .hlp{display:inline-flex;align-items:center;gap:.45rem;padding:.44rem .82rem;border-radius:var(--r-pill);
  border:1px solid var(--line);background:var(--surface);font-size:.82rem;color:var(--ink-2);font-weight:600;box-shadow:var(--sh-1)}
.hl .hlp svg{width:14px;height:14px;color:var(--mint-600)}
.pd-buy-row{display:flex;align-items:center;gap:1.5rem;flex-wrap:wrap;margin-bottom:1.5rem}
.pd-buy-row .price{font-size:2.3rem}
.pd-buy-actions{display:flex;gap:.6rem;flex-wrap:wrap}
.pd-hero__trust{display:flex;gap:1.3rem;flex-wrap:wrap}
.pd-hero__trust .t{display:flex;align-items:center;gap:.45rem;color:var(--ink-2);font-size:.88rem;font-weight:600}
.pd-hero__trust .t svg{width:16px;height:16px;color:var(--mint-600)}
.pd-hero__visual{position:relative}
.pd-hero__visual .app{box-shadow:var(--sh-window)}
@media(max-width:900px){.pd-hero__grid{grid-template-columns:1fr}}
.feature-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:clamp(14px,1.4vw,20px)}
.feature-grid .f{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:var(--s-5);box-shadow:var(--sh-1);
  transition:transform var(--dur) var(--ease),box-shadow var(--dur),border-color var(--dur);overflow:hidden}
.feature-grid .f::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--grad-duo);transform:scaleY(0);transform-origin:top;transition:transform .4s var(--ease-out)}
.feature-grid .f:hover{transform:translateY(-3px);box-shadow:var(--sh-2);border-color:var(--line-2)}
.feature-grid .f:hover::before{transform:scaleY(1)}
.feature-grid .f h4{font-size:1.06rem;margin-bottom:.4rem}.feature-grid .f p{color:var(--ink-soft);font-size:.92rem;line-height:1.5}
.doc-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px}
.doc-card{display:flex;align-items:center;gap:.8rem;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:1rem 1.1rem;box-shadow:var(--sh-1);
  transition:transform var(--dur) var(--ease),box-shadow var(--dur),border-color var(--dur)}
.doc-card:hover{transform:translateY(-3px);box-shadow:var(--sh-2);border-color:var(--brand-200)}
.doc-card .ic{width:40px;height:40px;border-radius:11px;background:var(--mint-050);color:var(--mint-700);display:grid;place-items:center;flex:none}
.doc-card .ic svg{width:19px;height:19px}
.doc-card b{display:block;font-size:.95rem;color:var(--ink)}.doc-card span{font-size:.8rem;color:var(--ink-faint)}

/* ==================== BUY BAR ==================== */
.buybar{position:fixed;left:0;right:0;bottom:0;z-index:70;transform:translateY(130%);transition:transform var(--dur-slow) var(--ease);pointer-events:none}
.buybar.is-in{transform:translateY(0);pointer-events:auto}
.buybar__inner{max-width:var(--wrap);margin:0 auto var(--s-4);display:flex;align-items:center;gap:var(--s-4);
  padding:.7rem .8rem .7rem 1.5rem;background:color-mix(in srgb,var(--surface) 90%,transparent);
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border:1px solid var(--line-2);border-radius:var(--r-pill);box-shadow:var(--sh-3)}
.buybar__meta{display:flex;align-items:baseline;gap:.7rem;min-width:0}
.buybar__meta b{font-family:var(--f-disp);font-weight:700;color:var(--ink);white-space:nowrap}
.buybar__meta .price{font-size:1.2rem}.buybar__meta .price small{display:none}
.buybar__inner .btn{margin-left:auto;flex:none}
@media(max-width:560px){.buybar__inner{margin-inline:12px}.buybar__meta b{display:none}}

/* ==================== PAGE HERO (secondary) ==================== */
.page-hero,.pagehead{position:relative;isolation:isolate;overflow:clip;padding-block:clamp(3.2rem,2rem + 4vw,5.5rem) clamp(1.5rem,1rem + 2vw,2.5rem)}
.page-hero__bg{position:absolute;inset:0;z-index:-2;pointer-events:none;background:var(--mesh);opacity:.7;
  -webkit-mask-image:radial-gradient(120% 100% at 50% 0,#000,transparent 80%);mask-image:radial-gradient(120% 100% at 50% 0,#000,transparent 80%)}
.page-hero .marble--pg1{width:90px;height:90px;top:16%;right:8%;background:var(--marble-mint)}
.page-hero .marble--pg2{width:56px;height:56px;bottom:-10%;left:5%;background:var(--marble-violet)}
.page-hero h1,.pagehead h1{font-size:clamp(2.3rem,1.6rem + 2.8vw,3.6rem);letter-spacing:-.035em;margin:1rem 0}
.page-hero .lead,.pagehead .lead{font-size:var(--fs-lead)}
.pagehead .eyebrow{margin-bottom:.5rem}

/* ==================== FOOTER ==================== */
.footer{position:relative;isolation:isolate;overflow:clip;background:linear-gradient(180deg,var(--ink-bg-2),var(--ink-bg));color:rgba(255,255,255,.7);padding-block:clamp(3.2rem,2rem + 3vw,5rem) 2rem}
.footer__glow{position:absolute;inset:0 0 auto 0;height:60%;z-index:-1;pointer-events:none;
  background:radial-gradient(50% 100% at 20% 0,color-mix(in srgb,var(--brand) 30%,transparent),transparent 70%),radial-gradient(40% 100% at 88% 0,color-mix(in srgb,var(--mint) 20%,transparent),transparent 70%)}
.footer .marble--fo{width:80px;height:80px;top:-20px;right:6%;background:var(--marble-duo);opacity:.5}
.footer__top{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:2rem}
.footer__brand .brand{color:#fff;margin-bottom:1rem}
.footer__brand .brand em{color:var(--mint-200)}
.footer__brand p{color:rgba(255,255,255,.6);max-width:36ch;font-size:.92rem;line-height:1.6}
.footer__col h4{color:#fff;font-size:.78rem;text-transform:uppercase;letter-spacing:.1em;font-family:var(--f-mono);font-weight:400;margin-bottom:1rem}
.footer__col a{display:block;padding:.35rem 0;color:rgba(255,255,255,.66);font-size:.92rem;transition:color var(--dur),transform var(--dur)}
.footer__col a:hover{color:#fff;transform:translateX(3px)}
.footer__etsy{display:inline-flex;align-items:center;gap:.5rem;margin-top:1.2rem;color:#fff;font-weight:600;font-size:.92rem;
  background:var(--etsy);padding:.6rem 1.05rem;border-radius:var(--r-pill);transition:filter var(--dur),transform .16s,box-shadow var(--dur)}
.footer__etsy svg{width:16px;height:16px}
.footer__etsy:hover{filter:brightness(1.06);transform:translateY(-2px);box-shadow:var(--sh-etsy)}
.footer__bar{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-top:3rem;padding-top:1.5rem;border-top:1px solid rgba(255,255,255,.1);font-size:.85rem;color:rgba(255,255,255,.5)}
.footer__bar a:hover{color:#fff}
@media(max-width:820px){.footer__top{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.footer__top{grid-template-columns:1fr}}

/* ==================== legacy page classes ==================== */
.section-tint .card,.section-mint .card{background:var(--surface)}
.card-hover{transition:transform var(--dur) var(--ease),box-shadow var(--dur),border-color var(--dur)}
.card-hover:hover{transform:translateY(-4px);box-shadow:var(--sh-3);border-color:var(--brand-200)}
.cards-3{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.4vw,22px)}
@media(max-width:820px){.cards-3{grid-template-columns:1fr}}
.bi{width:46px;height:46px;border-radius:13px;display:grid;place-items:center;background:var(--mint-050);color:var(--mint-700);border:1px solid var(--mint-100);margin-bottom:var(--s-4)}
.bi svg{width:22px;height:22px}
.callout,.tip{background:var(--surface-tint);border:1px solid var(--line);border-left:3px solid var(--brand);border-radius:var(--r-md);padding:1.1rem 1.3rem;color:var(--ink-2);margin:1.4rem 0}
.tip{background:var(--mint-050);border-left-color:var(--mint-600)}
.callout a,.tip a{color:var(--brand);font-weight:600}
/* about-page bento (legacy .b) */
.bento .b{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(1.5rem,1rem + 1vw,2rem);box-shadow:var(--sh-1);
  grid-column:span 2;overflow:hidden;transition:transform var(--dur) var(--ease),box-shadow var(--dur),border-color var(--dur)}
.bento .b:hover{transform:translateY(-5px);box-shadow:var(--sh-3);border-color:var(--line-2)}
.bento .b.wide{grid-column:span 3}
.bento .b h4{font-size:1.18rem;margin-bottom:.5rem}.bento .b p{color:var(--ink-soft);font-size:.95rem;line-height:1.55}
@media(max-width:900px){.bento .b,.bento .b.wide{grid-column:span 1}}
@media(max-width:560px){.bento .b{grid-column:1}}
/* legal doc layout */
.doc-shell{display:grid;grid-template-columns:210px 1fr;gap:clamp(2rem,1rem + 4vw,4rem);align-items:start}
.doc-nav{position:sticky;top:calc(var(--nav-h) + 20px);display:grid;gap:.15rem}
.doc-nav a{padding:.5rem .7rem;border-radius:10px;font-size:.9rem;font-weight:400;color:var(--ink-soft);transition:background var(--dur),color var(--dur)}
.doc-nav a:hover{background:var(--bg-2);color:var(--ink)}
@media(max-width:820px){.doc-shell{grid-template-columns:1fr}.doc-nav{position:static;display:flex;flex-wrap:wrap;gap:.4rem;padding-bottom:1rem;border-bottom:1px solid var(--line);margin-bottom:1.5rem}.doc-nav a{background:var(--bg-2)}}