/* Storefront shell and pages. Mobile first; wider layouts are added at 640 / 900 / 1100 px. */

/* ------------------------------------------------------------------ boot */
.boot { min-height: 100dvh; display: grid; place-content: center; justify-items: center; gap: 14px; text-align: center; padding: 24px; color: var(--ink-2); font-family: var(--display); }
.boot__dot { width: 46px; height: 46px; border-radius: 12px; background: var(--orange); animation: boot 1s var(--ease) infinite alternate; }
@keyframes boot { to { transform: translateY(-14px) rotate(45deg); background: var(--blue); } }

/* ------------------------------------------------------------------ header */
.skip { position: fixed; left: 12px; top: -60px; z-index: 100; background: var(--ink); color: var(--bg); padding: 10px 16px; border-radius: 12px; font-weight: 700; transition: top .15s; }
.skip:focus { top: 12px; }
.announce { background: var(--band); color: #E9EEFF; font: 600 .84rem/1.3 var(--display); text-align: center; padding: 8px 0; }
.announce .wrap { display: flex; align-items: center; justify-content: center; gap: 8px; }
.announce .icon { color: var(--yellow); }
.site-header { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--bg) 86%, transparent); backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px); border-bottom: 1px solid var(--line); }
.site-header__in { display: flex; align-items: center; gap: 12px; height: var(--header-h); }
.site-header__actions { display: flex; align-items: center; gap: 2px; margin-left: auto; }
.nav { display: none; }
.cart-btn { display: none; }
.cart-count { position: absolute; top: 2px; right: 0; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: var(--orange); color: var(--navy); font: 700 .72rem/20px var(--display); text-align: center; box-shadow: 0 0 0 2px var(--bg); }
:root .theme-moon { display: none; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .theme-moon { display: block; } :root:not([data-theme="light"]) .theme-sun { display: none; } }
:root[data-theme="dark"] .theme-moon { display: block; }
:root[data-theme="dark"] .theme-sun { display: none; }
@media (max-width: 420px) { .site-header .logo-tag { display: none; } .site-header .logo-name { font-size: 1.24rem; } .site-header .logo-mark { width: 36px; height: 36px; } }

@media (min-width: 900px) {
  :root { --header-h: 76px; }
  .nav { display: flex; align-items: center; gap: 2px; margin-inline: auto; }
  .cart-btn { display: inline-grid; }
  .nav__link { display: inline-flex; align-items: center; gap: 5px; padding: 10px 14px; border-radius: 999px; font: 600 .98rem var(--display); color: var(--ink-2); transition: color .15s, background-color .15s; white-space: nowrap; }
  .nav__link:hover, .nav__link.is-active { color: var(--ink); background: var(--surface-2); }
  .nav__link.is-active { box-shadow: inset 0 -2px 0 var(--orange); border-radius: 12px 12px 4px 4px; }
  .nav__item { position: static; }
  .mega { position: absolute; left: 50%; top: calc(100% - 6px); translate: -50% 0; width: min(1060px, calc(100vw - 48px)); display: grid; grid-template-columns: 1fr 280px; gap: 20px;
    padding: 20px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-3);
    opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .18s, transform .22s var(--ease), visibility 0s .2s; }
  .has-menu:not(.is-suppressed):hover .mega, .has-menu:not(.is-suppressed):focus-within .mega { opacity: 1; visibility: visible; transform: none; transition-delay: .06s, .06s, 0s; }
  .mega__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
  .mega__item, .mega__cta { display: flex; align-items: center; gap: 12px; padding: 8px; border-radius: 14px; transition: background-color .15s; }
  .mega__item:hover, .mega__cta:hover { background: var(--surface-2); }
  .mega__art { width: 54px; border-radius: 12px; flex: none; }
  .mega b { display: block; font: 600 .98rem var(--display); }
  .mega small { color: var(--ink-3); line-height: 1.3; display: block; }
  .mega__side { display: grid; gap: 4px; align-content: start; padding-left: 20px; border-left: 1px solid var(--line); }
  .mega__cta .icon { width: 44px; height: 44px; padding: 11px; border-radius: 12px; background: var(--brand-soft); color: var(--brand-text); }
}
@media (max-width: 899px) { .mega-host { display: none; } }
@media (min-width: 900px) and (max-width: 1080px) { .site-header .logo-tag { display: none; } .nav__link { padding-inline: 10px; font-size: .92rem; } }

/* ------------------------------------------------------------------ mobile tab bar */
.tabbar { position: fixed; z-index: 60; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: repeat(5, 1fr); padding: 6px 8px calc(6px + env(safe-area-inset-bottom)); background: color-mix(in srgb, var(--surface) 92%, transparent); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-top: 1px solid var(--line); }
.tabbar > * { position: relative; display: grid; justify-items: center; gap: 2px; padding: 5px 2px; font: 600 .7rem/1.1 var(--display); color: var(--ink-3); border-radius: 12px; transition: color .15s; }
.tabbar > .is-active { color: var(--brand-text); }
.tabbar__main i { display: grid; place-items: center; width: 50px; height: 50px; margin-top: -24px; border-radius: 50%; background: var(--orange); color: var(--navy); box-shadow: 0 6px 16px rgb(255 107 26 / .45), 0 0 0 5px var(--bg); transition: transform .15s var(--ease); }
.tabbar__main:active i { transform: scale(.92); }
.tabbar .cart-count { top: 0; right: calc(50% - 24px); }
@media (max-width: 899px) { :root { --tabbar-h: 62px; } body { padding-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom)); } }
@media (min-width: 900px) { .tabbar { display: none; } }

#main { min-height: 62vh; outline: none; }

/* ------------------------------------------------------------------ footer */
.site-footer { margin-top: clamp(40px, 7vw, 90px); background: var(--surface-2); border-top: 1px solid var(--line); }
.services { border-bottom: 1px solid var(--line); background: var(--surface); }
.services__in { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px 10px; padding-block: 22px; }
.services__in > div { display: flex; align-items: center; gap: 10px; color: var(--ink); }
.services b { display: block; font: 600 .93rem/1.2 var(--display); }
.services small { color: var(--ink-3); }
.footer__in { display: grid; gap: 30px 24px; padding-block: 40px 26px; grid-template-columns: 1fr 1fr; }
.footer__brand { grid-column: 1 / -1; display: grid; gap: 14px; justify-items: start; }
.footer__col { display: grid; gap: 9px; align-content: start; font-size: .93rem; color: var(--ink-2); font-weight: 600; }
.footer__col h3 { font: 600 .82rem var(--display); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 4px; }
.footer__col a:hover { color: var(--brand-text); }
.footer__col span { display: flex; gap: 8px; align-items: center; overflow-wrap: anywhere; }
.footer__base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; padding-block: 18px 26px; border-top: 1px solid var(--line); color: var(--ink-3); font-size: .85rem; }
@media (min-width: 900px) { .footer__in { grid-template-columns: 1.5fr 1fr 1fr 1fr 1.2fr; } .footer__brand { grid-column: auto; } }

/* ------------------------------------------------------------------ search & more sheets */
.searchbox { display: flex; align-items: center; gap: 10px; padding: 0 16px; border-radius: 16px; border: 2px solid var(--ink); background: var(--surface); }
.searchbox input { flex: 1; min-width: 0; border: 0; background: none; height: 54px; font: 600 1.08rem var(--display); outline: none; }
.search-results { display: grid; gap: 6px; margin-top: 16px; }
.search-hit { display: flex; align-items: center; gap: 12px; padding: 8px; border-radius: 14px; }
.search-hit:hover, .search-hit:focus-visible { background: var(--surface-2); }
.search-hit__art { width: 56px; border-radius: 12px; flex: none; }
.search-hit > span:nth-child(2) { flex: 1; min-width: 0; display: grid; }
.search-hit b { font: 600 1rem var(--display); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.search-hit small { color: var(--ink-3); }
.search-none { text-align: center; padding: 20px 0; display: grid; gap: 8px; justify-items: center; }
.more { display: grid; gap: 18px; }
.more__cats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px 8px; }
.more__cats a { display: grid; gap: 6px; justify-items: center; text-align: center; font: 600 .76rem/1.2 var(--display); color: var(--ink-2); }
.more__art { width: 100%; border-radius: 18px; }
.more__links { display: grid; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.more__links a { display: flex; align-items: center; gap: 12px; padding: 13px 14px; border-bottom: 1px solid var(--line); }
.more__links a:last-child { border: 0; }
.more__links a > span { flex: 1; display: grid; }
.more__links b { font: 600 .98rem var(--display); }
.more__links small { color: var(--ink-3); }
.more__links a > .icon:first-child { color: var(--brand-text); }
@media (max-width: 380px) { .more__cats { grid-template-columns: repeat(3, 1fr); } }

/* ------------------------------------------------------------------ hero */
.hero { position: relative; overflow: hidden; padding-block: clamp(22px, 4vw, 56px) clamp(12px, 3vw, 40px); }
.hero__glow { position: absolute; inset: 0; pointer-events: none; background:
  radial-gradient(46% 60% at 86% 30%, color-mix(in srgb, var(--orange) 20%, transparent), transparent 70%),
  radial-gradient(40% 50% at 8% 4%, color-mix(in srgb, var(--sky) 22%, transparent), transparent 70%),
  radial-gradient(30% 40% at 60% 96%, color-mix(in srgb, var(--yellow) 18%, transparent), transparent 70%); }
.hero__in { position: relative; display: grid; gap: 20px; align-items: center; }
.hero__copy { display: grid; gap: 16px; justify-items: start; }
.hero__kicker { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); font: 600 .84rem var(--display); color: var(--ink-2); box-shadow: var(--shadow-1); }
.dot { width: 9px; height: 9px; border-radius: 50%; background: #22C55E; box-shadow: 0 0 0 4px rgb(34 197 94 / .22); animation: pulse 2s infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 0 8px rgb(34 197 94 / 0); } }
.hero__title { position: relative; font: 700 clamp(2.75rem, 1.2rem + 8.2vw, 5.9rem)/.95 var(--display); letter-spacing: -.025em; }
@media (min-width: 720px) { .hero__title { font-size: clamp(2.7rem, 5.7vw, 5rem); white-space: nowrap; } }
.hero__title em { display: inline-block; transform: rotate(-2deg); transform-origin: left bottom; }
.hero__from { font-size: .62em; font-weight: 600; }
.swoosh { position: absolute; left: 22%; bottom: -.24em; width: 62%; height: .2em; color: var(--amber); overflow: visible; }
.swoosh path { stroke-dasharray: 320; stroke-dashoffset: 320; animation: draw 1s .5s var(--ease) forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.hero__strip { margin-top: 10px; }
.marker { display: inline-block; padding: 6px 22px; font: 700 clamp(1.5rem, 1.2rem + 1.8vw, 2.3rem)/1.1 var(--hand); color: var(--ink); background: var(--marker); border-radius: 60px 22px 54px 18px / 20px 50px 24px 46px; transform: rotate(-1.6deg); }
.hero__lead { font-size: clamp(1.02rem, .95rem + .45vw, 1.2rem); color: var(--ink-2); max-width: 46ch; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 12px; }
.hero__points { display: flex; flex-wrap: wrap; gap: 6px 0; font: 600 1rem var(--display); color: var(--ink-2); }
.hero__points li:not(:last-child)::after { content: '•'; color: var(--orange); margin-inline: 12px; }
.hero__scene { position: relative; max-width: 620px; width: 100%; margin-inline: auto; }
.hero__note { position: absolute; z-index: 1; left: -1%; top: -2%; font-size: clamp(1.1rem, .9rem + 1.3vw, 1.7rem); line-height: 1.02; transform: rotate(-8deg); color: var(--ink); }
.hero__note svg { width: 2em; margin: 2px 0 0 3.4em; }
.scene { width: 100%; height: auto; overflow: visible; }
.scene__ground { fill: var(--ink); opacity: .07; }
.scene__rise { animation: scene-rise 9s linear infinite; }
.scene__print { animation: scene-fade 9s linear infinite; }
.scene__head { animation: scene-sweep .85s ease-in-out infinite alternate; }
.scene__spool { transform-origin: 330px 64px; animation: spin 14s linear infinite; }
.scene__piece { overflow: visible; }
.scene__piece.f1 { animation: bob 5s ease-in-out infinite; }
.scene__piece.f2 { animation: bob 6s -2s ease-in-out infinite; }
.scene__piece.f3 { animation: bob 7s -4s ease-in-out infinite; }
@keyframes scene-rise { 0%, 3% { transform: translateY(0); } 72%, 94% { transform: translateY(-96px); } 100% { transform: translateY(0); } }
@keyframes scene-fade { 0%, 90% { opacity: 1; } 95%, 100% { opacity: 0; } }
@keyframes scene-sweep { from { transform: translateX(-44px); } to { transform: translateX(44px); } }
@keyframes bob { 50% { transform: translateY(-5px); } }
@media (max-width: 420px) { .hero__cta .btn { width: 100%; } .hero__note { font-size: 1rem; } }
@media (min-width: 720px) { .hero__in { grid-template-columns: 1.05fr 1fr; gap: 28px; } .hero__scene { max-width: none; } }

/* ------------------------------------------------------------------ audience strip */
.audience { display: grid; gap: 4px; grid-template-columns: 1fr; margin-top: 8px; padding: 10px; border-radius: var(--r-lg); background: var(--blue-soft); width: calc(100% - 2 * var(--gutter)); }
.audience__item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--r); transition: background-color .2s, transform .2s var(--ease); }
.audience__item:hover { background: var(--surface); transform: translateY(-2px); }
.audience__icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: var(--surface); color: var(--ink); flex: none; box-shadow: var(--shadow-1); }
.audience__item:nth-child(2) .audience__icon, .audience__item:nth-child(3) .audience__icon { color: var(--brand-text); }
.audience b { display: block; font: 600 1rem/1.2 var(--display); }
.audience small { color: var(--ink-2); line-height: 1.3; display: block; }
@media (min-width: 560px) { .audience { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .audience { grid-template-columns: repeat(5, 1fr); } .audience__item { flex-direction: column; align-items: flex-start; } }

/* ------------------------------------------------------------------ category cards */
.catgrid { display: grid; gap: 12px; grid-template-columns: repeat(2, 1fr); }
.catcard { --art: #FF6B1A; position: relative; display: flex; flex-direction: column-reverse; gap: 8px; padding: 12px; border-radius: var(--r-lg); overflow: hidden; min-width: 0;
  background: color-mix(in oklab, var(--art) 9%, var(--surface)); border: 1px solid color-mix(in oklab, var(--art) 22%, var(--line)); transition: transform .25s var(--ease), box-shadow .25s; }
.catcard:hover { transform: translateY(-4px); box-shadow: var(--shadow-2); }
.catcard__text { display: grid; gap: 4px; min-width: 0; }
.catcard h3 { font: 600 1.06rem/1.15 var(--display); }
.catcard p { font-size: .83rem; line-height: 1.3; color: var(--ink-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.catcard__count { display: inline-flex; align-items: center; gap: 5px; margin-top: 4px; font: 600 .8rem var(--display); color: var(--ink-2); }
.catcard__art { width: 100%; aspect-ratio: 1.25; background: none; }
.catcard__art > svg { width: auto; height: 100%; transition: transform .35s var(--ease); }
.catcard:hover .catcard__art > svg { transform: scale(1.08) rotate(-3deg); }
@media (min-width: 640px) { .catgrid { grid-template-columns: repeat(3, 1fr); gap: 16px; } .catcard { padding: 18px; } }
@media (min-width: 1000px) { .catgrid { grid-template-columns: repeat(4, 1fr); } .catgrid--3 { grid-template-columns: repeat(3, 1fr); }
  .catgrid--3 .catcard { flex-direction: row; align-items: center; } .catgrid--3 .catcard__art { width: 42%; flex: none; aspect-ratio: 1; } .catgrid--3 .catcard__text { flex: 1; } }

/* ------------------------------------------------------------------ product cards & grids */
.pgrid { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 640px) { .pgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; } }
@media (min-width: 1000px) { .pgrid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; } }
.pcard { display: flex; flex-direction: column; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); overflow: hidden; min-width: 0; transition: transform .25s var(--ease), box-shadow .25s, border-color .25s; }
.pcard:hover { transform: translateY(-4px); box-shadow: var(--shadow-2); border-color: var(--line-strong); }
.pcard__art { border-radius: 0; }
.pcard__art > svg { transition: transform .4s var(--ease); }
.pcard:hover .pcard__art > svg { transform: scale(1.07) rotate(-2deg); }
.pcard:hover .pcard__art > img { transform: scale(1.04); }
.pcard__art > img { transition: transform .4s var(--ease); }
.pcard__body { display: grid; gap: 4px; padding: 12px 12px 14px; flex: 1; align-content: start; }
.pcard__cat { font: 600 .7rem var(--display); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.pcard__name { font: 600 1.02rem/1.2 var(--display); }
.pcard__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px; margin-top: 6px; }
.flag { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 999px; background: var(--brand-soft); color: var(--brand-text); font: 600 .72rem/1.3 var(--display); white-space: nowrap; }
.flag--muted { background: var(--surface-2); color: var(--ink-3); }
.flag--warn { background: var(--warn-soft); color: var(--warn); }
.flag--sale { background: var(--ok-soft); color: var(--ok); }
.pcard.is-out .pcard__art { filter: grayscale(.8); opacity: .7; }
.pcard--cta { justify-content: center; gap: 8px; padding: 18px; background: var(--band); color: #fff; border: 0; }
.pcard--cta h3 { font: 600 1.25rem/1.15 var(--display); }
.pcard--cta p { font-size: .9rem; color: #C9D3F2; line-height: 1.35; }
.pcard--cta .link-arrow { color: var(--amber); white-space: normal; margin-top: 4px; }
.pcard--cta__icon { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; background: var(--yellow); color: var(--navy); }
@media (min-width: 640px) { .pcard__body { padding: 14px 16px 16px; } .pcard__name { font-size: 1.1rem; } }

.rail { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 6px var(--gutter) 22px; scrollbar-width: none; scroll-padding-inline: var(--gutter); }
.rail::-webkit-scrollbar { display: none; }
.rail > * { flex: 0 0 clamp(170px, 44vw, 260px); scroll-snap-align: start; }
.rail-nav { display: none; gap: 8px; }
@media (min-width: 900px) { .rail-nav { display: flex; } }
@media (min-width: 1240px) { .rail { padding-inline: calc((100vw - 1240px) / 2 + var(--gutter)); scroll-padding-inline: calc((100vw - 1240px) / 2 + var(--gutter)); } }

/* ------------------------------------------------------------------ "make it yours" */
.make { display: grid; gap: 26px; align-items: center; }
.make__copy { display: grid; gap: 14px; }
.make__demo { display: grid; gap: 16px; padding: clamp(16px, 3vw, 26px); border-radius: var(--r-xl); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-2); }
.make__stage { --kc: #FF6B1A; --kc-text: #fff; --kc-ring: #9AA3BC; border-radius: var(--r-lg); background: var(--surface-2); padding: 12px; }
.kc { width: 100%; height: auto; }
.kc__tag { fill: var(--kc); transition: fill .25s; }
.kc__text { font: 700 54px var(--display); fill: var(--kc-text); transition: fill .25s; }
@media (min-width: 900px) { .make { grid-template-columns: 1fr 1fr; gap: 56px; } }

/* ------------------------------------------------------------------ quote band */
.quoteband { position: relative; display: grid; gap: 28px; padding: clamp(24px, 5vw, 56px); border-radius: var(--r-xl); background: var(--band); color: #fff; overflow: hidden; }
.quoteband::before { content: ''; position: absolute; inset: 0; background: radial-gradient(50% 80% at 90% 10%, rgb(255 107 26 / .34), transparent 70%), radial-gradient(40% 60% at 0% 100%, rgb(17 115 212 / .5), transparent 70%); pointer-events: none; }
.quoteband > * { position: relative; }
.quoteband__copy { display: grid; gap: 16px; align-content: center; }
.quoteband .h2 em { color: var(--amber); }
.quoteband .lead { color: #D2DAF5; }
.qmock { max-width: 360px; margin-inline: auto; padding: 16px; border-radius: var(--r-lg); background: var(--surface); color: var(--ink); box-shadow: var(--shadow-3); display: grid; gap: 12px; transform: rotate(2deg); }
.qmock__file { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: .92rem; }
.qmock__file i { margin-left: auto; font: 600 .68rem var(--display); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); border: 1px solid var(--line-strong); padding: 2px 8px; border-radius: 99px; }
.qmock__view { border-radius: var(--r); background: var(--surface-2); padding: 10px; display: grid; place-items: center; }
.qmock__view svg { width: 60%; }
.qmock__stats { display: flex; flex-wrap: wrap; gap: 6px; }
.qmock__stats span { display: inline-flex; gap: 5px; align-items: center; padding: 5px 10px; border-radius: 99px; background: var(--surface-2); font: 600 .8rem var(--display); }
.qmock__price { display: flex; align-items: baseline; justify-content: space-between; border-top: 1.5px dashed var(--line-strong); padding-top: 10px; font-weight: 700; color: var(--ink-2); }
.qmock__price b { font: 600 1.9rem var(--display); color: var(--ink); }
@media (min-width: 900px) { .quoteband { grid-template-columns: 1.3fr 1fr; } }

/* ------------------------------------------------------------------ steps / why / idea band */
.steps { display: grid; gap: 14px; counter-reset: step; }
.step { position: relative; display: grid; gap: 8px; padding: 20px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); }
.step__num { position: absolute; top: 14px; right: 18px; font: 700 2.6rem/1 var(--display); color: var(--surface-3); }
.step__icon { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 16px; background: var(--brand-soft); color: var(--brand-text); }
.step:nth-child(even) .step__icon { background: var(--blue-soft); color: var(--link); }
.step h3 { font: 600 1.14rem var(--display); }
.step p { color: var(--ink-2); font-size: .95rem; }
@media (min-width: 640px) { .steps { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .steps { grid-template-columns: repeat(4, 1fr); } }
.why { display: grid; gap: 6px; padding: 12px; border-radius: var(--r-lg); background: color-mix(in oklab, var(--yellow) 16%, var(--surface)); border: 1px solid color-mix(in oklab, var(--yellow) 34%, var(--line)); }
.why__item { display: flex; gap: 14px; align-items: flex-start; padding: 12px; }
.why__icon { display: grid; place-items: center; width: 50px; height: 50px; border-radius: 50%; background: var(--amber); color: var(--navy); flex: none; }
.why h3 { font: 600 1.1rem var(--display); }
.why p { color: var(--ink-2); font-size: .93rem; }
@media (min-width: 640px) { .why { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .why:not(.why--2) { grid-template-columns: repeat(4, 1fr); } }
.ideaband { position: relative; margin-top: clamp(30px, 6vw, 70px); margin-bottom: calc(-1 * clamp(40px, 7vw, 90px)); background: var(--band); color: #fff; padding-block: clamp(30px, 5vw, 60px) clamp(40px, 6vw, 72px); }
.ideaband__wave { position: absolute; left: 0; right: 0; bottom: 100%; width: 100%; height: clamp(28px, 5vw, 70px); margin-bottom: -1px; fill: var(--band); }
.ideaband__in { display: grid; gap: 26px; align-items: center; }
.ideaband__in > div:first-child { display: grid; gap: 14px; }
.ideaband__title { font-size: clamp(2.4rem, 1.6rem + 3.6vw, 4rem); line-height: 1; transform: rotate(-2deg); transform-origin: left; }
.ideaband .lead { color: #D2DAF5; }
.ideaband__actions { display: grid; gap: 10px; }
@media (min-width: 900px) { .ideaband__in { grid-template-columns: 1.5fr 1fr; gap: 60px; } }

/* ------------------------------------------------------------------ shop */
.shop { display: grid; gap: 16px; }
.chips--scroll { flex-wrap: nowrap; overflow-x: auto; margin-inline: calc(-1 * var(--gutter)); padding: 2px var(--gutter) 6px; scrollbar-width: none; }
.chips--scroll::-webkit-scrollbar { display: none; }
.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.searchfield { flex: 1 1 220px; display: flex; align-items: center; gap: 8px; padding: 0 14px; border-radius: 999px; border: 1.5px solid var(--line-strong); background: var(--surface); color: var(--ink-3); }
.searchfield:focus-within { border-color: var(--blue); box-shadow: 0 0 0 4px color-mix(in srgb, var(--blue) 18%, transparent); }
.searchfield input { flex: 1; min-width: 0; height: 42px; border: 0; background: none; outline: none; font-weight: 600; color: var(--ink); }
.toolbar__count { font-weight: 700; font-size: .9rem; }
.sortfield { margin-left: auto; }

/* ------------------------------------------------------------------ product */
.product { padding-top: clamp(14px, 3vw, 28px); display: grid; gap: 22px; }
.product__grid { display: grid; gap: 22px; }
.product__media { min-width: 0; }
.gallery { display: grid; gap: 10px; }
.gallery__main { border-radius: var(--r-xl); width: 100%; }
.gallery__main > svg { width: 74%; height: 74%; animation: float-in .5s var(--ease); }
@keyframes float-in { from { transform: scale(.9) rotate(-4deg); } }
.gallery__thumbs { display: flex; gap: 8px; overflow-x: auto; }
.gallery__thumbs button { width: 68px; height: 68px; border-radius: 14px; overflow: hidden; border: 2px solid transparent; flex: none; }
.gallery__thumbs button.is-active { border-color: var(--orange); }
.gallery__thumbs img { width: 100%; height: 100%; object-fit: cover; }
.product__artnote { display: flex; gap: 6px; align-items: center; font-size: .82rem; margin-top: 8px; }
.product__info { display: grid; gap: 16px; align-content: start; min-width: 0; }
.product__name { font-size: clamp(1.7rem, 1.3rem + 2vw, 2.6rem); }
.product__price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px; }
.product__options { display: grid; gap: 18px; padding-block: 16px; border-block: 1px solid var(--line); }
.textopt { position: relative; }
.textopt .input { padding-right: 62px; }
.textopt__count { position: absolute; right: 12px; top: 50%; translate: 0 -50%; font-size: .78rem; font-weight: 700; color: var(--ink-3); }
.sizeopt { display: flex; align-items: center; gap: 12px; }
.sizeopt__num { display: flex; align-items: center; gap: 6px; flex: none; font-weight: 700; color: var(--ink-3); }
.sizeopt__num .input { width: 86px; text-align: center; padding-inline: 6px; }
.opt--size.is-custom .sizeopt__num .input { border-color: var(--orange); background: var(--brand-soft); }
.opt--size.is-custom .opt__value { color: var(--brand-text); }
.breakdown { border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); }
.breakdown summary { padding: 11px 14px; font: 600 .92rem var(--display); cursor: pointer; color: var(--ink-2); list-style-position: inside; }
.breakdown dl, .pricecard__lines { display: grid; gap: 7px; padding: 0 14px 12px; font-size: .9rem; }
.breakdown dl > div, .pricecard__lines > div { display: flex; justify-content: space-between; gap: 12px; color: var(--ink-2); }
.breakdown dd, .pricecard__lines dd { font-weight: 700; color: var(--ink); white-space: nowrap; }
.breakdown .is-total { border-top: 1px dashed var(--line-strong); padding-top: 8px; font-weight: 700; color: var(--ink); }
.buybar { display: flex; align-items: center; gap: 12px; }
.buybar__price { display: none; }
.buybar__add { flex: 1; }
@media (max-width: 899px) {
  .buybar { position: sticky; z-index: 40; bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom)); margin-inline: calc(-1 * var(--gutter)); padding: 10px var(--gutter); background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-top: 1px solid var(--line); }
  .buybar__price { display: grid; line-height: 1.1; font-size: .78rem; }
  .buybar__price b { font: 600 1.25rem var(--display); }
  .buybar .stepper button { width: 34px; }
}
@media (max-width: 380px) { .buybar__price { display: none; } }
.facts { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); padding: 14px; border-radius: var(--r); background: var(--surface-2); }
.facts li { display: flex; gap: 10px; align-items: flex-start; font-size: .9rem; color: var(--ink-2); }
.facts .icon { color: var(--ink-3); margin-top: 2px; }
.facts b { display: block; font: 600 .78rem var(--display); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.helpcard { display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: var(--r); border: 1.5px solid var(--line); background: var(--surface); transition: border-color .2s, transform .2s var(--ease); }
.helpcard:hover { border-color: var(--blue); transform: translateX(3px); }
.helpcard > span { flex: 1; display: grid; min-width: 0; }
.helpcard b { font: 600 1rem var(--display); overflow-wrap: anywhere; }
.helpcard small { color: var(--ink-3); line-height: 1.35; }
.helpcard > .icon:first-child { color: var(--link); }
.helpcard--brand { background: var(--brand-soft); border-color: transparent; }
.helpcard--brand > .icon:first-child { color: var(--brand-text); }
.product__desc { display: grid; gap: 10px; max-width: 760px; color: var(--ink-2); padding-top: 8px; }
.product__desc h2 { color: var(--ink); }
@media (min-width: 720px) {
  .product__grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(22px, 4vw, 60px); align-items: start; }
  .product__media { position: sticky; top: calc(var(--header-h) + 20px); }
}
/* tablets and unfolded foldables: two columns, with the buy bar pinned inside the details column */
@media (min-width: 720px) and (max-width: 899px) { .buybar { margin-inline: -10px; padding-inline: 10px; border-radius: 16px 16px 0 0; border: 1px solid var(--line); border-bottom: 0; } }

/* ------------------------------------------------------------------ quote */
.quote { display: grid; gap: 20px; padding-bottom: 20px; }
.quote__stage { display: grid; gap: 12px; align-content: start; min-width: 0; }
.dropzone { display: grid; place-items: center; align-content: center; gap: 8px; text-align: center; min-height: clamp(240px, 46vw, 420px); padding: 24px; border-radius: var(--r-xl); border: 2.5px dashed var(--line-strong); background: var(--surface); cursor: pointer; transition: all .2s var(--ease); color: var(--ink-2); }
.dropzone:hover, .is-drag .dropzone { border-color: var(--orange); background: var(--brand-soft); }
.is-drag .dropzone { transform: scale(1.01); }
.dropzone strong { font: 600 1.4rem var(--display); color: var(--ink); }
.dropzone__icon { display: grid; place-items: center; width: 76px; height: 76px; border-radius: 24px; background: var(--orange); color: var(--navy); box-shadow: 0 10px 26px rgb(255 107 26 / .4); margin-bottom: 6px; animation: bob 3s ease-in-out infinite; }
.dropzone__row { margin-top: 8px; }
.viewerbox { position: relative; border-radius: var(--r-xl); overflow: hidden; background: radial-gradient(90% 80% at 50% 20%, var(--surface), var(--surface-2)); border: 1px solid var(--line); aspect-ratio: 4 / 3; }
.viewerbox__canvas, .viewer3d { position: absolute; inset: 0; }
.viewer3d canvas { display: block; touch-action: none; }
.viewerbox__busy { position: absolute; inset: auto 0 14px 0; margin-inline: auto; width: max-content; max-width: 90%; display: flex; gap: 10px; align-items: center; padding: 9px 16px; border-radius: 999px; background: var(--ink); color: var(--bg); font: 600 .9rem var(--display); box-shadow: var(--shadow-2); }
.viewerbox__tabs { position: absolute; top: 10px; left: 10px; display: flex; gap: 6px; flex-wrap: wrap; }
.viewerbox__tools { position: absolute; top: 10px; right: 10px; display: flex; gap: 6px; }
.filebar { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--r); background: var(--surface); border: 1px solid var(--line); flex-wrap: wrap; }
.filebar__icon { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: var(--blue-soft); color: var(--link); flex: none; }
.filebar__meta { flex: 1 1 140px; min-width: 0; display: grid; }
.filebar__meta b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 600 .98rem var(--display); }
.filebar__meta small { color: var(--ink-3); }
.filebar__ok { color: var(--ok); font-weight: 700; font-size: .86rem; display: inline-flex; gap: 4px; align-items: center; }
.filebar__bad { color: var(--bad); font-weight: 700; font-size: .86rem; display: inline-flex; gap: 4px; align-items: center; }
.quote__hints { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.quote__hints li { display: flex; gap: 10px; font-size: .88rem; color: var(--ink-2); padding: 12px; border-radius: var(--r); background: var(--surface-2); }
.quote__hints b { display: block; font: 600 .93rem var(--display); color: var(--ink); }
.quote__hints a { color: var(--link); font-weight: 700; text-decoration: underline; }
.quote__hints .icon { color: var(--brand-text); margin-top: 2px; }
.quote__panel { display: grid; gap: 18px; align-content: start; min-width: 0; }
.dims { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.dims label { position: relative; display: grid; gap: 4px; font: 600 .76rem var(--display); color: var(--ink-3); text-transform: uppercase; letter-spacing: .06em; min-width: 0; }
.dims .input { padding: 8px 30px 8px 10px; min-height: 44px; font-size: .95rem; min-width: 0; }
.dims em { position: absolute; right: 9px; bottom: 13px; font: 600 .74rem var(--font); color: var(--ink-3); text-transform: none; letter-spacing: 0; }
.pricecard { position: sticky; z-index: 5; bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom) + 10px); display: grid; gap: 12px; padding: 16px; border-radius: var(--r-lg); background: var(--surface); border: 1.5px solid var(--line); box-shadow: var(--shadow-2); transition: opacity .2s; }
.pricecard.is-busy [data-priced] { opacity: .45; }
.pricecard__empty { display: flex; gap: 10px; align-items: center; justify-content: center; padding: 14px; color: var(--ink-3); font-weight: 700; }
.pricecard__stats { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.pricecard__stats span { display: inline-flex; gap: 6px; align-items: center; padding: 6px 11px; border-radius: 99px; background: var(--surface-2); font-size: .86rem; color: var(--ink-2); }
.pricecard__stats b { font: 600 .9rem var(--display); color: var(--ink); }
.pricecard__lines { padding: 8px 0 4px; }
.pricecard__details summary { cursor: pointer; font: 600 .86rem var(--display); color: var(--ink-3); }
.pricecard__stats { margin-bottom: 8px; }
@media (max-width: 899px) { .pricecard__fine { display: none; } .pricecard { box-shadow: var(--shadow-3); } }
.pricecard__lines .is-note { font-size: .82rem; color: var(--ink-3); }
.pricecard__total { display: flex; align-items: end; justify-content: space-between; gap: 12px; border-top: 1.5px dashed var(--line-strong); padding-top: 12px; margin-top: 8px; }
.pricecard__total > div:first-child { display: grid; gap: 4px; font-size: .86rem; font-weight: 700; }
.pricecard__save { font-size: .86rem; font-weight: 700; color: var(--ok); margin-top: 8px; }
.pricecard__fine, .summary__fine { display: flex; gap: 7px; font-size: .82rem; color: var(--ink-3); line-height: 1.35; }
.pricecard__fine .icon, .summary__fine .icon { margin-top: 1px; }
.summary__fine a { text-decoration: underline; }
@media (min-width: 900px) {
  .quote { grid-template-columns: minmax(0, 1.25fr) minmax(340px, 1fr); gap: 32px; align-items: start; }
  .quote__stage { position: sticky; top: calc(var(--header-h) + 20px); }
}

/* ------------------------------------------------------------------ cart & checkout */
.cartpage, .checkout, .orderpage, .contact { display: grid; gap: 20px; align-items: start; }
.lines { display: grid; gap: 12px; }
.line { display: flex; gap: 14px; padding: 12px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); transition: opacity .16s, transform .16s; }
.line.is-removing { opacity: 0; transform: translateX(-16px); }
.line__art { width: clamp(76px, 22vw, 116px); flex: none; align-self: flex-start; }
.line__art .art { border-radius: 14px; }
.line__main { flex: 1; min-width: 0; display: grid; gap: 5px; align-content: start; }
.line__name { font: 600 1.05rem/1.2 var(--display); overflow-wrap: anywhere; }
a.line__name:hover { color: var(--brand-text); }
.line__opts { display: flex; flex-wrap: wrap; gap: 3px 12px; font-size: .84rem; color: var(--ink-2); overflow-wrap: anywhere; }
.line__opts i { font-style: normal; color: var(--ink-3); }
.line__note { font-size: .84rem; color: var(--ink-2); background: var(--surface-2); padding: 5px 10px; border-radius: 8px; overflow-wrap: anywhere; }
.line__note .icon { display: inline; vertical-align: -2px; }
.line__custom { display: flex; gap: 6px; align-items: flex-start; font-size: .82rem; font-weight: 700; color: var(--brand-text); }
.line__custom .icon { margin-top: 2px; }
.line__foot { display: flex; align-items: center; gap: 10px; margin-top: 6px; }
.line__price { margin-left: auto; text-align: right; display: grid; line-height: 1.15; }
.line__price b { font: 600 1.12rem var(--display); }
.line__price small { color: var(--ink-3); }
.lines--compact { gap: 0; }
.lines--compact .line { border: 0; border-bottom: 1px solid var(--line); border-radius: 0; padding: 12px 0; background: none; }
.lines--compact .line:first-child { padding-top: 0; }
.lines--compact .line__art { width: 60px; }
.lines--compact .line__name { font-size: .96rem; }
.summary { display: grid; gap: 14px; padding: clamp(16px, 3vw, 24px); border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-1); min-width: 0; }
.summary__addr { font-size: .92rem; color: var(--ink-2); display: grid; gap: 4px; padding-top: 12px; border-top: 1px solid var(--line); }
.summary__addr h3 { font: 600 .8rem var(--display); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.freebar { display: grid; gap: 6px; font-size: .84rem; font-weight: 700; color: var(--ink-2); }
.freebar__track { height: 8px; border-radius: 99px; background: var(--surface-3); overflow: hidden; }
.freebar__track i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--amber), var(--orange)); transition: width .4s var(--ease); }
.checkout__main, .orderpage__main { display: grid; gap: 16px; min-width: 0; }
@media (min-width: 900px) {
  .cartpage, .checkout, .orderpage { grid-template-columns: minmax(0, 1.5fr) minmax(320px, 1fr); gap: 28px; }
  .summary, .summary--sticky { position: sticky; top: calc(var(--header-h) + 20px); }
  .contact { grid-template-columns: minmax(0, 1.5fr) minmax(300px, 1fr); gap: 28px; }
}

/* ------------------------------------------------------------------ order page */
.track { display: grid; gap: 16px; max-width: 760px; }
.track .btn { justify-self: start; }
.orderlist li a { display: flex; align-items: center; gap: 12px; padding: 12px 4px; border-bottom: 1px solid var(--line); font-weight: 700; }
.orderlist li:last-child a { border: 0; }
.orderlist .muted { margin-left: auto; font-size: .88rem; }
.thanks { display: flex; gap: 16px; align-items: flex-start; }
.thanks__check { display: grid; place-items: center; width: 60px; height: 60px; border-radius: 50%; background: #1E9E63; color: #fff; flex: none; animation: pop-in .5s var(--ease); box-shadow: 0 0 0 8px rgb(30 158 99 / .16); }
.thanks > div { display: grid; gap: 8px; }
@keyframes pop-in { from { transform: scale(0); } 60% { transform: scale(1.15); } }
.orderhead { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.orderhead .btn { margin-left: auto; }
.orderhead__track { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 14px; border-radius: var(--r-sm); background: var(--blue-soft); font-size: .93rem; }
.progress { display: grid; grid-template-columns: repeat(5, 1fr); margin-top: 6px; }
.progress li { position: relative; display: grid; justify-items: center; gap: 7px; text-align: center; }
.progress li::before { content: ''; position: absolute; top: 13px; right: 50%; width: 100%; height: 3px; background: var(--surface-3); }
.progress li:first-child::before { display: none; }
.progress li.is-done::before, .progress li.is-current::before { background: var(--orange); }
.progress__dot { position: relative; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--surface-3); color: var(--navy); border: 3px solid var(--surface); }
.is-done .progress__dot { background: var(--orange); }
.is-current .progress__dot { background: var(--surface); border-color: var(--orange); box-shadow: 0 0 0 5px color-mix(in srgb, var(--orange) 22%, transparent); animation: pulse-o 1.8s infinite; }
@keyframes pulse-o { 50% { box-shadow: 0 0 0 9px color-mix(in srgb, var(--orange) 0%, transparent); } }
.progress__label { font: 600 .74rem/1.2 var(--display); color: var(--ink-3); }
.is-done .progress__label, .is-current .progress__label { color: var(--ink); }
.pay .h3 { display: flex; gap: 10px; align-items: center; }
.pay--done { grid-template-columns: auto 1fr; align-items: center; background: var(--ok-soft); border-color: transparent; }
.pay--done > .icon { color: var(--ok); }
.pay--review { background: var(--brand-soft); border-color: transparent; }
.pay--review .btn { justify-self: start; }
.pay__upi { display: grid; gap: 16px; justify-items: center; }
.pay__qr { padding: 10px; border-radius: var(--r); background: #fff; border: 1px solid var(--line); }
.pay__qr img { width: 180px; height: 180px; }
.pay__how { display: grid; gap: 10px; width: 100%; }
.copyline { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 14px; border-radius: var(--r-sm); background: var(--surface-2); font-weight: 700; text-align: left; overflow-wrap: anywhere; }
.copyline small { display: block; font: 600 .7rem var(--display); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.pay__claim { display: grid; gap: 10px; padding-top: 14px; border-top: 1px dashed var(--line-strong); }
.pay__or { display: flex; align-items: center; gap: 12px; color: var(--ink-3); font-size: .84rem; font-weight: 700; }
.pay__or::before, .pay__or::after { content: ''; flex: 1; height: 1px; background: var(--line-strong); }
.pay__switch { justify-self: center; font-size: .9rem; }
@media (min-width: 560px) { .pay__upi { grid-template-columns: auto 1fr; justify-items: stretch; align-items: center; } }
@media (hover: hover) and (pointer: fine) { .pay__app { display: none; } }
.timeline { display: grid; gap: 0; }
.timeline li { position: relative; display: flex; gap: 12px; padding-bottom: 16px; }
.timeline li:last-child { padding-bottom: 0; }
.timeline li:not(:last-child)::before { content: ''; position: absolute; left: 5px; top: 14px; bottom: -4px; width: 2px; background: var(--line); }
.timeline__dot { width: 12px; height: 12px; border-radius: 50%; background: var(--line-strong); margin-top: 6px; flex: none; }
.timeline li:first-child .timeline__dot { background: var(--orange); box-shadow: 0 0 0 4px color-mix(in srgb, var(--orange) 22%, transparent); }
.timeline time { font-size: .82rem; }

/* ------------------------------------------------------------------ contact */
.contact__form { gap: 16px; }
.contact__form > .btn { justify-self: start; }
.contact__ref { display: flex; gap: 8px; align-items: center; padding: 10px 14px; border-radius: var(--r-sm); background: var(--blue-soft); font-size: .92rem; }
.contact__side { display: grid; gap: 16px; }
.nextsteps { counter-reset: n; display: grid; gap: 14px; }
.nextsteps li { counter-increment: n; position: relative; padding-left: 40px; display: grid; font-size: .93rem; color: var(--ink-2); }
.nextsteps li::before { content: counter(n); position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--brand-soft); color: var(--brand-text); font: 600 .9rem var(--display); }
.nextsteps b { font: 600 1rem var(--display); color: var(--ink); }
.sent { display: grid; gap: 14px; justify-items: center; text-align: center; padding: 30px 0; }

/* ------------------------------------------------------------------ foldables: when the page spans two screens, keep content off the hinge */
@media (horizontal-viewport-segments: 2) {
  .product__grid, .quote, .cartpage, .checkout, .orderpage, .contact, .hero__in, .make {
    grid-template-columns: calc(env(viewport-segment-width 0 0) - var(--gutter)) calc(env(viewport-segment-width 1 0) - var(--gutter));
    gap: calc(env(viewport-segment-left 1 0) - env(viewport-segment-right 0 0));
  }
  .wrap { max-width: none; }
}

/* phones: keep the sticky price card compact so the options above it stay reachable */
@media (max-width: 899px) {
  .pricecard { padding: 12px 14px; gap: 8px; }
  .pricecard .pricecard__fine { display: none; }
  .pricecard .btn--lg { min-height: 48px; }
  .pricecard .price--xl { font-size: 1.7rem; }
}

/* ------------------------------------------------------------------ FAQ, guides and long-form text */
.faq { gap: 0; }
.faq__item { padding-block: 20px; border-bottom: 1px solid var(--line); display: grid; gap: 8px; }
.faq__item:first-child { padding-top: 0; }
.faq__item h2 { margin-top: 0; font-size: 1.2rem; }
.faq > .row { padding-top: 24px; }
.tablewrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); }
.ptable { width: 100%; border-collapse: collapse; font-size: .95rem; min-width: 420px; }
.ptable th, .ptable td { padding: 11px 14px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); color: var(--ink-2); }
.ptable thead th { font: 600 .8rem var(--display); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); background: var(--surface-2); }
.ptable tbody th { font: 600 .95rem var(--display); color: var(--ink); white-space: nowrap; }
.ptable tbody tr:last-child > * { border-bottom: 0; }
.guides { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); padding-bottom: 24px; }
.guidecard { display: grid; gap: 8px; align-content: start; padding: 22px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); transition: transform .25s var(--ease), box-shadow .25s, border-color .25s; }
.guidecard:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); border-color: var(--line-strong); }
.guidecard h2 { font: 600 1.2rem/1.25 var(--display); }
.guidecard p { color: var(--ink-2); font-size: .95rem; }
.noscript { margin: 0; padding: 12px var(--gutter); background: var(--warn-soft); color: var(--warn); font-weight: 700; text-align: center; }