/* Light comparison with restrained greens from pfp_black_mint.png. */
:root {
  color-scheme: light;
  --v2-black: #0a0a0b;
  --v2-white: #eef0ff;
  --v2-mint: #7ef0b4;
  --v2-green: #469671;
  --v2-deep-green: #0f3d2e;
  --v2-background: #f5f6f2;
  --v2-ink: #141815;
  --v2-accent-ink: #0f3d2e;
  --v2-panel: #fffefd;
  --v2-raised: #edf1eb;
  --v2-input: #ffffff;
  --v2-muted: #5e6962;
  --v2-border: #0f3d2e2e;
  --brand-forest: var(--v2-accent-ink);
  --brand-cream: var(--v2-background);
  --brand-green: var(--v2-green);
  --brand-accent: var(--v2-green);
  --brand-mint: var(--v2-mint);
  --background: var(--v2-background);
  --surface: var(--v2-panel);
  --text: var(--v2-ink);
  --muted: var(--v2-muted);
  --line: var(--v2-border);
  --accent: var(--v2-accent-ink);
}
html { background: var(--v2-background); }
body { background: var(--v2-background); color: var(--v2-ink); }
::selection { color: var(--v2-black); background: #dcebdc; }
.header { background: var(--v2-background); border-color: var(--v2-border); box-shadow: none; }
.brand { color: var(--v2-ink); }
.brand-mark { background: #0f3d2e; }
.brand-mark svg { color: var(--v2-white); }
.header-nav { color: #36453c; }
.header-nav a:hover, .header-nav [aria-current="page"] { color: var(--v2-accent-ink); }
.header-nav a[aria-current="page"]:not(.order-link),
.header-nav a[aria-current="page"]:not(.order-link):hover { color: var(--v2-accent-ink); }
.header-nav a:focus-visible, button:focus-visible, a:focus-visible { outline-color: var(--v2-accent-ink); }
.primary-link, .header-nav .order-link, .color-add {
  color: #fffefd; background: var(--v2-deep-green); border-color: var(--v2-deep-green); box-shadow: none;
}
.primary-link:hover, .header-nav .order-link:hover, .header-nav .order-link[aria-current="page"], .color-add:hover {
  color: #fffefd; background: #0b3024; border-color: #0b3024;
}
.header-nav .order-link[aria-current="page"] { box-shadow: none; }
.skip-link { color: #fffefd; background: var(--v2-deep-green); }
.order-count { color: var(--v2-deep-green); background: #d7e7da; border-color: var(--v2-background); }
.order-flying-dot { width: 20px; height: 20px; background: var(--v2-deep-green); box-shadow: none; border: 0; }
.order-flying-dot::after { display: none; }
h1, .how-copy h1, .how-copy h2, .purpose-intro h2, .detail-next h2, .home-section-intro h2, .steps h3, .purpose h3 { color: var(--v2-ink); }
h1 > span, .how-copy h1 em, .how-copy h2 em, .purpose-intro h2 em, .home-section-intro h2 > span { color: var(--v2-accent-ink); }
.intro-copy, .section-intro, .steps p, .purpose p { color: #414d45; }
.eyebrow, .control-label, .section-kicker, .studio-heading > span, .how-link { color: var(--v2-accent-ink); }
.eyebrow > span, .studio-heading i { background: var(--v2-green); }
.platform { color: #36453c; background: var(--v2-panel); border-color: var(--v2-border); box-shadow: none; }
.platform:hover { border-color: var(--v2-green); }
.platform[aria-pressed="true"] { color: var(--v2-accent-ink); background: #0f3d2e14; border-color: var(--v2-accent-ink); box-shadow: none; }
.finish::before { border-color: #0f3d2e40; box-shadow: none; }
.finish[aria-pressed="true"], .finish:hover { border-color: var(--v2-accent-ink); }
.product { background: #edf1eb; border-color: var(--v2-border); box-shadow: 0 12px 30px #263c2308; }
.studio::before { background-image: radial-gradient(#0f3d2e28 .7px, transparent .7px); }
.floor-ring { border-color: #0f3d2e1c; }
.card-shadow { background: #0f3d2e26; }
.arrow, .backing-action, .view-control, .download-design { color: var(--v2-accent-ink); background: var(--v2-raised); border-color: #0f3d2e45; }
.arrow:hover, .backing-action:hover, .view-control:hover, .download-design:hover { color: var(--v2-accent-ink); background: #e2ebe0; border-color: var(--v2-green); }
.card-price { color: var(--v2-ink); background: var(--v2-input); border-color: #0f3d2e59; box-shadow: none; }
.card-price .price-currency { color: var(--v2-accent-ink); }
.detail-next, .nfc-explainer { background: #edf2e9; border-color: var(--v2-border); }
.designer-tools, .order-form { background: var(--v2-panel); border-color: var(--v2-border); box-shadow: none; }
.setup-status { color: var(--v2-accent-ink); }
.step-icon, .purpose-icon { background: #0f3d2e0b; border-color: var(--v2-border); color: var(--v2-accent-ink); }
.purpose-instagram { color: #a24c76; }
.purpose .purpose-platform { color: var(--v2-accent-ink) !important; }
.purpose button { color: var(--v2-accent-ink); }
.how-menu-demo { background: var(--v2-panel); border-color: var(--v2-border); }
.how-menu-demo figcaption { color: var(--v2-muted); }
.how-menu-demo figcaption strong, .nfc-explainer h2 { color: var(--v2-ink); }
.footer > span:first-child, .footer > span:last-child, .noscript { color: var(--v2-muted); }
.footer svg { color: var(--v2-accent-ink); }
.footer .footer-logo { display: block; flex: 0 0 24px; width: 24px; height: 24px; border-radius: 6px; object-fit: contain; }
/* Contact, About Us, Pricing, and the complete order form. */
.contact-card-showcase > img { background: var(--v2-panel); box-shadow: 0 12px 30px #263c2310; }
.person-contact { background: var(--v2-panel); border-color: var(--v2-border); }
.person-initials { color: var(--v2-accent-ink); background: #0f3d2e12; }
.person-contact h2, .about-team .person-contact h3, .about-story-copy h2, .about-team > h2 { color: var(--v2-ink); }
.person-contact > a, .about-story-copy > p:not(.section-kicker) { color: #414d45; }
.person-contact > p { color: var(--v2-muted); }
.about-brand-card { padding: 0; overflow: hidden; border-radius: clamp(20px, 2.5vw, 30px); background: transparent; border: 0; box-shadow: none; }
.about-brand-card img { width: 100%; border-radius: inherit; }
.about-brand-card figcaption { color: var(--v2-muted); }
.pricing-option { background: var(--v2-panel); border-color: var(--v2-border); }
.pricing-option.is-custom { background: #edf2e9; border-color: var(--v2-deep-green); box-shadow: none; }
.pricing-option h2 { color: var(--v2-ink); }
.pricing-description, .pricing-option li { color: #414d45; }
.pricing-amount { color: var(--v2-accent-ink); }
.pricing-amount small { color: var(--v2-muted); }
.pricing-tiers { border-color: #0f3d2e3b; }
.pricing-tiers thead { color: var(--v2-accent-ink); background: #0f3d2e0b; }
.pricing-tiers tbody th { color: #36453c; }
.pricing-tiers tbody td { color: var(--v2-accent-ink); }
.order-field label, .order-item-quantity label { color: var(--v2-ink); }
.order-field label > span, .order-help, .order-item-backing, .order-facts dt,
.order-item-cost > span { color: var(--v2-muted); }
.order-field input, .order-field select, .order-field textarea, .order-item-quantity input { color: var(--v2-ink); background: var(--v2-input); border-color: #0f3d2e3b; }
.order-field input::placeholder, .order-field textarea::placeholder { color: #657167; }
.order-field input:focus, .order-field select:focus, .order-field textarea:focus { border-color: var(--v2-accent-ink); outline-color: var(--v2-accent-ink); }
.order-summary { background: #f0f3ed; border-color: var(--v2-border); }
.order-summary h2, .order-item h3, .order-empty h3 { color: var(--v2-ink); }
.order-item-image { border-color: #0f3d2e33; box-shadow: 0 10px 24px #263c2310; }
.order-item-remove { color: var(--v2-accent-ink); background: var(--v2-raised); }
.order-item-remove:hover { background: #e2ebe0; border-color: var(--v2-green); }
.order-facts .order-total { border-color: #0f3d2e59; }
.order-facts .order-total dt { color: var(--v2-ink); }
.order-facts .order-total dd { color: var(--v2-accent-ink); }
.order-items.is-compact { scrollbar-color: var(--v2-deep-green) transparent; }
/* Theme the editor controls; the customer's artwork and chosen colors remain literal. */
.tool-heading h2, .tool-section legend, .tool-label, .backing-option strong { color: var(--v2-ink); }
.tool-heading > a, .slider-label output, .upload-control > svg, .text-action, .reset-canvas,
.color-trigger, .color-panel-heading strong, .color-slider-label { color: var(--v2-accent-ink); }
.tool-section, .designer-actions, .color-custom-section { border-color: var(--v2-border); }
.tool-label > span, .tool-note, .color-description small, .color-custom-title, .color-panel-heading small, .color-hex-field label, .backing-option small, .designer-preview .view-label, .designer-help { color: var(--v2-muted); }
.tool-input, .color-hex { color: var(--v2-ink); background: var(--v2-input); border-color: #0f3d2e3b; }
.tool-input::placeholder { color: #657167; }
.tool-input:focus, .upload-control:focus-within { outline-color: var(--v2-accent-ink); }
.page-customize input[type="range"], .page-customize input[type="radio"] { accent-color: var(--v2-accent-ink); }
.upload-control { background: #0f3d2e07; border-color: #0f3d2e59; }
.color-chip, .color-preset { border-color: #0f3d2e40; }
.color-trigger-icon { color: var(--v2-accent-ink); border-color: #0f3d2e3b; }
.color-trigger:hover .color-trigger-icon, .color-trigger[aria-expanded="true"] .color-trigger-icon { color: var(--v2-black); background: #dcebdc; border-color: var(--v2-accent-ink); }
.color-preset[aria-pressed="true"] { outline-color: var(--v2-accent-ink); }
.color-panel { background: var(--v2-input); border-color: var(--v2-border); box-shadow: 0 8px 22px #263c230c; }
.color-dismiss { color: var(--v2-accent-ink); background: #0f3d2e14; }
.color-wheel::before { background: var(--v2-input); }
.color-wheel:focus-visible { outline-color: var(--v2-accent-ink); }
.color-slider::-webkit-slider-thumb { background: var(--v2-deep-green); border-color: var(--v2-input); box-shadow: 0 0 0 1px var(--v2-deep-green); }
.color-slider::-moz-range-thumb { background: var(--v2-deep-green); border-color: var(--v2-input); }
.color-error { color: #a1342b; }
.color-hex[aria-invalid="true"] { border-color: #a1342b; }
.shape-add { color: var(--v2-accent-ink); background: var(--v2-raised); border-color: var(--v2-border); }
.shape-add:hover { color: var(--v2-accent-ink); background: #e2ebe0; border-color: var(--v2-green); }
.backing-option { border-color: var(--v2-border); }
.backing-option:has(input:checked) { background: #0f3d2e0b; border-color: var(--v2-green); }
.reset-canvas { border-color: #0f3d2e3b; }
.bare-back > span { color: var(--v2-mint); }

/* Keep the preview footprint steady when its backing controls become visible. */
.product-controls .product-navigation { grid-template-rows: 46px 40px; }
.product-controls .backing-action { min-height: 40px; padding: 8px; font-size: 11px; white-space: nowrap; }
.card-view-toggle { display: grid; gap: 3px; min-width: 108px; padding: 0 0 0 8px; border: 0; background: transparent; color: var(--v2-accent-ink); text-align: right; line-height: 1.4; }
.card-view-toggle strong { font-size: 12px; font-weight: 800; }
.card-view-toggle > span { font-size: 10px; font-weight: 550; }
.card-view-toggle:hover > span { text-decoration: underline; text-underline-offset: 3px; }
.peel-corner-hint { position: absolute; top: 13px; right: 13px; z-index: 6; display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid #0f3d2e40; border-radius: 50%; background: #fffefd; color: #111513; box-shadow: 0 2px 7px #00000018; pointer-events: none; visibility: hidden; opacity: 0; transform: translateY(-2px) scale(.9); transition: opacity .18s ease, transform .18s ease, visibility .18s; }
.peel-corner-hint svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.5; }
@media (hover: hover) and (pointer: fine) {
  .card-slot.is-flipped:not(.is-backing-open):hover .peel-corner-hint { visibility: visible; opacity: 1; transform: none; }
}
.nav-toggle { display: none; }
@media (max-width: 800px) {
  html { scroll-padding-top: 96px; }
  .header.has-mobile-nav { min-height: 76px; height: 76px; flex-wrap: nowrap; justify-content: flex-start; gap: 10px; padding: 10px 0; }
  .has-mobile-nav .nav-toggle { display: block; position: relative; flex: 0 0 44px; width: 44px; height: 44px; padding: 0; border: 0; background: transparent; color: #101010; }
  .nav-toggle > span { position: absolute; left: 11px; width: 22px; height: 3px; border-radius: 2px; background: #101010; transform-origin: center; transition: transform .24s ease, opacity .18s ease; }
  .nav-toggle > span:nth-child(1) { top: 14px; }
  .nav-toggle > span:nth-child(2) { top: 21px; }
  .nav-toggle > span:nth-child(3) { top: 28px; }
  .nav-toggle[aria-expanded="true"] > span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] > span:nth-child(2) { opacity: 0; }
  .nav-toggle[aria-expanded="true"] > span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .has-mobile-nav .brand { margin: 0; }
  .has-mobile-nav .header-nav { position: absolute; left: 0; right: 0; top: 100%; display: flex; flex-direction: column; align-items: stretch; width: 100%; max-height: calc(100dvh - 86px); overflow-y: auto; margin: 0; padding: 10px 12px 16px; gap: 3px; border: 1px solid var(--line); border-top: 0; border-radius: 0 0 18px 18px; background: var(--v2-background); box-shadow: 0 12px 20px #0f3d2e0c; font-size: 14px; visibility: hidden; pointer-events: none; opacity: 0; transform: translateY(-8px); transition: opacity .22s ease, transform .22s ease, visibility .22s; }
  .has-mobile-nav.is-nav-open .header-nav { visibility: visible; pointer-events: auto; opacity: 1; transform: translateY(0); }
  .has-mobile-nav .header-nav a { flex: 0 0 auto; justify-content: flex-start; padding: 10px 12px; min-height: 42px; text-align: left; white-space: normal; }
  .has-mobile-nav .header-nav .order-link { justify-content: center; margin-top: 7px; }
}
@media (max-width: 520px) {
  .product-controls .product-navigation { grid-template-rows: 44px 40px; }
  .studio-heading > span { font-size: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .nav-toggle > span, .has-mobile-nav .header-nav, .peel-corner-hint { transition: none; }
}

/* Keep the homepage headline on the two chosen lines at every breakpoint. */
.page-home .showcase h1 > span { display: block; white-space: nowrap; }
.page-home .showcase h1 > .hero-lead { color: var(--v2-ink); }