/* ================================================================
   S3XY CARDS — site-v2.css
   The storefront stylesheet: home, /business-cards/, /tesla-key-card/,
   /video/, /terms/, /privacy/ and 404. The announce bar, header, menu
   sheet and footer are in chrome.css.
   Never load it on /create/ or /order/: those pages give .btn,
   .container, .section, .chip and .timeline other rules.
   ------------------------------------------------------------
   ORDER
   1. Tokens
   2. Reset / base
   3. Layout (container, sections, section heads, eyebrow)
   4. Components (buttons, links, form fields, engraved card, FAQ,
      share button)
   5. Storefront components (badge, dot grid, pager, photo card, gallery,
      buy box, trust band, price lines, compare, option card, quantity
      stepper, color swatches, reviews)
   6. Inner pages (page hero, trust strip, timeline, legal text,
      video frame, designs rail, 3D card, final CTA, 404)
   7. Homepage (hero box, features, how it works, NFC, business, CTA banner)
   8. Sticky phone CTA
   9. Utilities, press feedback, reveal on scroll, reduced motion
   ================================================================ */

/* ============================================================
   1. TOKENS
   ============================================================ */
:root{
  /* surfaces, lines and text */
  --bg:#141416; --bg-elev:#19191C; --surface:#1F1F23; --surface-2:#27272C;
  --line:rgba(255,255,255,.08); --line-strong:rgba(255,255,255,.18);
  --line-control:rgba(255,255,255,.36);   /* the edge of a field or an outline button: 3:1 on every surface */
  --text:#F5F5F7; --text-2:#A1A1A6;
  --text-3:#8E8E93;                       /* 4.56:1 on --surface-2, the darkest it may be */
  --silver:#D9D9DE;

  /* The accent: S3XY crimson. It marks the active dot of a pager or step indicator and
     progress, and colors eyebrow labels and small icons. It is never used for selection,
     focus, prices, buttons or washes of color.
     --accent-strong is a fill that carries --on-accent text (4.68:1); --accent-text is the tint
     for small text (5.0:1 on --surface-2).
     To go back to amber, replace these five values with the ones in the comment
     (chrome.css, create-v2.css and app-v2.css hold the same block). */
  --accent:#FF2D55; --accent-strong:#E80038; --on-accent:#FFFFFF;
  --accent-text:#FF5C7A; --accent-glow:rgba(255,45,85,.35);
  /* amber:
  --accent:#FFB547; --accent-strong:#FFB547; --on-accent:#09090B;
  --accent-text:#FFB547; --accent-glow:rgba(255,181,71,.35); */

  /* never the accent: the focus ring, errors, warnings, success */
  --focus:#F5F5F7; --err:#FF6B6B; --warn:#FBBF24; --ok:#4ADE80;
  --ring:#F5F5F7;                         /* the 2px edge of a chosen option card or color swatch */
  --halo:rgba(217,217,222,.22);           /* the soft light behind a card */

  /* type: the system face, one scale. No web font is named here: a page that loads one for
     its card canvas (/business-cards/) must still set its text in the same face as the rest. */
  --font-display:-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",system-ui,sans-serif;
  --font-body:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",system-ui,sans-serif;
  --font-mono:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",system-ui,sans-serif;  /* small labels; the same face as the body text */
  --fs-h1:clamp(2.4rem,3.4vw + 1.1rem,4rem); --fs-h2:clamp(1.8rem,2.2vw + 1rem,2.8rem);
  --fs-h3:clamp(1.15rem,.4vw + 1.05rem,1.3rem); --fs-small:.875rem;
  --fs-label:1rem;                        /* the title of one item in a row of items (icon, title, sentence): a label, not a section heading */

  --radius-sm:12px; --radius:18px; --radius-lg:28px; --radius-pill:999px;
  --maxw:1200px; --gutter:clamp(16px,4vw,32px); --section-y:clamp(64px,8vw,112px);
  --control-h:52px;                       /* a button or a field */
  --shadow:0 10px 30px -14px rgba(0,0,0,.7), 0 1px 0 rgba(255,255,255,.04) inset;
  --ease-out:cubic-bezier(.2,.7,.2,1);
  --header-h:64px;                        /* the sticky header; chrome.css keeps --chrome-header-h equal to it */
}
@media (min-width:960px){
  :root{ --header-h:76px; }
}

/* ============================================================
   2. RESET / BASE
   ============================================================ */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; color-scheme:dark; } /* dark only: the browser's scrollbars and pickers follow */
@media (prefers-reduced-motion:no-preference){
  html{ scroll-behavior:smooth; }
}
body{
  margin:0; min-height:100svh;
  background-color:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  font-size:1rem;
  line-height:1.6;
  letter-spacing:-.003em;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
/* the page's ground: black running into graphite from the top left to the bottom right, with a
   soft light at the top right and a faint crimson glow at the bottom left. It is fixed to the
   screen (a layer behind everything, not background-attachment, which stutters on phones), so
   the same gradient is behind every part of the page as it scrolls. */
body::before{
  content:""; position:fixed; top:0; left:0; right:0; bottom:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(70vw 60vh at 92% -8%, rgba(255,255,255,.09), transparent 62%),
    radial-gradient(60vw 55vh at -6% 104%, rgba(255,45,85,.08), transparent 62%),
    linear-gradient(155deg, #050506 0%, #121214 38%, #24242B 100%);
}
@media print{ body::before{ display:none; } }
img,svg,video{ max-width:100%; display:block; }
img{ height:auto; }
main,section,article,aside,nav,header,footer,figure{ display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; }
ul,ol{ margin:0; padding:0; list-style:none; }
p{ margin:0; }
h1,h2,h3,h4{ margin:0; font-family:var(--font-display); color:var(--text); }
table{ border-collapse:collapse; width:100%; }
fieldset{ border:0; margin:0; padding:0; }
::selection{ background:var(--silver); color:#141416; }

/* large, tight, semibold: the cards are the loud part */
h1{ font-size:var(--fs-h1); line-height:1.05; letter-spacing:-.032em; font-weight:600; }
h2{ font-size:var(--fs-h2); line-height:1.08; letter-spacing:-.028em; font-weight:600; }
h3{ font-size:var(--fs-h3); line-height:1.25; letter-spacing:-.018em; font-weight:600; }
.lead{ font-size:clamp(1.05rem,.35vw + .95rem,1.22rem); line-height:1.55; letter-spacing:-.012em; color:var(--text-2); max-width:62ch; }

/* no orphan words in headings and lead copy; ignored where unsupported */
h1,h2,h3{ text-wrap:balance; }
p,.lead{ text-wrap:pretty; }

/* one focus ring everywhere; a control that sits in a clipping parent turns it inward */
:focus-visible{ outline:2px solid var(--focus); outline-offset:3px; border-radius:4px; }
:focus:not(:focus-visible){ outline:none; }

/* ============================================================
   3. LAYOUT
   ============================================================ */
.container{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); }
.section{ padding-block:var(--section-y); position:relative; }
.section-elev{ background-color:rgba(255,255,255,.035); border-top:1px solid transparent; border-bottom:1px solid transparent; } /* a see-through band: the page's gradient runs on behind it */
.section-elev + .section-elev{ border-top:0; }
.section-tight{ padding-block:clamp(40px,6vw,72px); }
section[id]{ scroll-margin-top:calc(var(--header-h) + 16px); }

/* the head of a section: an optional eyebrow, the h2, an optional lead. Left-aligned;
   .center centers it. (.section-head-row is the same block under its older name.) */
.section-head,.section-head-row{ max-width:640px; margin-bottom:clamp(28px,4vw,44px); }
.section-head.center{ margin-inline:auto; text-align:center; }
.section-head .lead{ margin-top:14px; }
.section-head.center .lead{ margin-inline:auto; }
/* button row under a section */
.section-cta{ margin-top:32px; display:flex; flex-wrap:wrap; gap:20px; align-items:center; }

.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-mono); font-size:.8125rem; font-weight:600; line-height:1.4;
  letter-spacing:.08em; text-transform:uppercase; color:var(--accent-text);
  margin:0 0 14px;
}
.eyebrow-dot{ display:none; }

/* ============================================================
   4. COMPONENTS
   ============================================================ */

/* ---- Buttons: pills that press in ----
   .btn plus one look: .btn-primary (the white pill), .btn-outline (the secondary) or
   .btn-ghost (a quiet third). Sizes: .btn-lg, .btn-sm, .btn-block.
   States: hover (pointer devices only), keyboard focus, press, disabled and .is-loading. */
.btn{
  position:relative; display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:var(--control-h); padding:0 26px; border-radius:var(--radius-pill);
  font-family:var(--font-body); font-weight:500; font-size:16px; line-height:1; letter-spacing:-.012em;
  white-space:nowrap; cursor:pointer; border:1.5px solid transparent; -webkit-tap-highlight-color:transparent;
  transition:transform .18s var(--ease-out), background-color .18s, border-color .18s, color .18s, opacity .18s;
}
.btn-arrow{ width:18px; height:18px; flex:none; stroke:currentColor; fill:none; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; transition:transform .15s var(--ease-out); }
@media (hover:hover){ .btn:hover .btn-arrow{ transform:translateX(3px); } }
.btn[hidden]{ display:none !important; }

.btn-primary{ background:#F5F5F7; color:#000; }
.btn-outline{ background:transparent; border-color:var(--line-control); color:var(--text); }
.btn-ghost{ background:transparent; border-color:var(--line-strong); color:var(--text); }
@media (hover:hover){
  .btn-primary:hover{ background:#FFFFFF; }
  .btn-outline:hover{ background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.55); }
  .btn-ghost:hover{ background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.3); }
}
.btn:focus-visible{ outline:2px solid var(--focus); outline-offset:3px; }
.btn:active{ transform:scale(.965); }
.btn-primary:active{ background:#D9D9DE; }
.btn-outline:active,.btn-ghost:active{ background:rgba(255,255,255,.14); }

.btn-lg{ min-height:56px; padding:0 30px; font-size:17px; }
.btn-sm{ min-height:44px; padding:0 20px; font-size:15px; }
.btn-block{ display:flex; width:100%; }

/* disabled: the attribute on a <button>; on a link, .is-disabled with aria-disabled="true"
   and tabindex="-1" in the markup */
.btn[disabled],.btn.is-disabled{ opacity:.45; pointer-events:none; cursor:default; }
/* aria-disabled on its own keeps the button focusable, so it can say why it is off;
   it does not answer to hover or press (these come after those rules, so they win) */
.btn[aria-disabled="true"]{ opacity:.45; cursor:not-allowed; }
.btn[aria-disabled="true"]:active{ transform:none; }
.btn-primary[aria-disabled="true"]{ background:#F5F5F7; }
.btn-outline[aria-disabled="true"]{ background:transparent; border-color:var(--line-control); }
.btn-ghost[aria-disabled="true"]{ background:transparent; border-color:var(--line-strong); }

/* loading: a spinner takes the arrow's place and the button ignores a second click */
.btn.is-loading{ pointer-events:none; cursor:progress; }
.btn.is-loading .btn-arrow{ display:none; }
.btn.is-loading::after{
  content:""; flex:none; width:18px; height:18px; border-radius:50%;
  border:2px solid currentColor; border-right-color:transparent; animation:btnSpin .7s linear infinite;
}
@keyframes btnSpin{ to{ transform:rotate(360deg); } }

/* ---- Links: a text link inside copy. .link-tap gives a link that stands alone on its
   line a 44px tap area. ---- */
.link{
  color:var(--text); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px;
  text-decoration-color:var(--line-control); transition:text-decoration-color .18s, color .18s;
}
@media (hover:hover){ .link:hover{ text-decoration-color:currentColor; } }
.link:active{ color:var(--text-2); }
.link-tap{ display:inline-flex; align-items:center; min-height:44px; }

/* ---- .kcard: the engraved card. Art is black on white and is inverted;
   a photograph of a finished card takes .is-photo and is shown as it is ---- */
.kcard{
  position:relative; aspect-ratio:1013/638; border-radius:4.2%/6.6%; background:#050506;
  overflow:hidden; isolation:isolate;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 0 0 1px rgba(255,255,255,.07),0 40px 80px -30px rgba(0,0,0,.9);
}
.kcard img{
  width:100%; height:100%; object-fit:cover; display:block;
  filter:invert(1) brightness(.86) contrast(1.05);
}
.kcard.is-photo img{ filter:none; }
.kcard.is-photo::before{ content:none; } /* the warm tint is for inverted line art */
.kcard::before{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(125deg,#fff 0%,#cfcac1 38%,#fff 55%,#bdb8ae 100%); mix-blend-mode:multiply;
}
.kcard::after{
  content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
  background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.09) 48%,transparent 60%);
}

/* ---- Form fields ----
   <div class="field"> label.field-label, the control, p.field-hint, p.field-error </div>
   .has-err on the .field (or aria-invalid="true" on the control) turns the edge to --err and
   shows the error text, which carries an icon as well as the color. .is-valid shows a tick.
   A checkbox or radio and its text sit in a label.check. */
.field{ display:grid; gap:7px; align-content:start; min-width:0; }
.field-label{ display:block; font-size:var(--fs-small); font-weight:600; color:var(--text); margin-bottom:7px; }
.field > .field-label{ margin-bottom:0; } /* inside a .field the grid gap does the spacing */
legend.field-label{ padding:0; margin-bottom:10px; } /* the question over a group of choices */
.field-hint{ margin:0; font-size:var(--fs-small); line-height:1.5; color:var(--text-2); }
.field-error{ display:none; margin:0; font-size:var(--fs-small); font-weight:500; line-height:1.5; color:var(--err); }
.field.has-err .field-error{ display:flex; align-items:flex-start; gap:6px; }
.field-error::before{
  content:""; flex:none; width:16px; height:16px; margin-top:2.5px; background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9.5'/%3E%3Cpath d='M12 7.5v5.5M12 16.6v.1'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9.5'/%3E%3Cpath d='M12 7.5v5.5M12 16.6v.1'/%3E%3C/svg%3E") center/contain no-repeat;
}

input[type=text],input[type=email],input[type=tel],input[type=url],input[type=number],input[type=search],input[type=password],select,textarea{
  width:100%; min-height:var(--control-h); padding:13px 16px;
  font:inherit; font-size:1rem; line-height:1.5; color:var(--text); /* 16px: no zoom on focus in iOS */
  background-color:var(--surface-2); border:1.5px solid var(--line-control); border-radius:var(--radius-sm);
  transition:border-color .18s;
}
textarea{ min-height:120px; resize:vertical; }
select{
  padding-right:44px; cursor:pointer; -webkit-appearance:none; appearance:none; color-scheme:dark;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A1A1A6' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center; background-size:16px;
}
::placeholder{ color:var(--text-3); opacity:1; }
@media (hover:hover){ input:hover,select:hover,textarea:hover{ border-color:rgba(255,255,255,.55); } }
input:focus-visible,select:focus-visible,textarea:focus-visible{ outline:2px solid var(--focus); outline-offset:2px; }
input:focus,select:focus,textarea:focus{ border-color:rgba(255,255,255,.55); }
input:disabled,select:disabled,textarea:disabled{ opacity:.5; cursor:not-allowed; }
input[readonly],textarea[readonly]{ color:var(--text-2); }
/* the browser's own autofill paint would turn the field light */
input:-webkit-autofill{ -webkit-text-fill-color:var(--text); caret-color:var(--text); box-shadow:0 0 0 1000px var(--surface-2) inset; }
/* an error: after the hover and focus rules, so the red edge stays while the field is in use */
input[aria-invalid="true"],select[aria-invalid="true"],textarea[aria-invalid="true"],
.field.has-err input,.field.has-err select,.field.has-err textarea{ border-color:var(--err); }
/* a value that passed its check: a tick at the right edge (the --ok color, written out for the data URL) */
.field.is-valid input,.field.is-valid textarea{
  padding-right:44px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234ADE80' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 8'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center; background-size:18px;
}
.field.is-valid textarea{ background-position:right 14px top 15px; }

/* a checkbox or radio with its text: the whole row is the target. Ticked is white with a
   dark mark, never the accent. */
.check{ display:flex; align-items:flex-start; gap:12px; min-height:44px; padding-block:10px; font-size:1rem; line-height:1.5; color:var(--text); cursor:pointer; }
.check input[type=checkbox],.check input[type=radio]{
  -webkit-appearance:none; appearance:none; display:inline-grid; place-content:center; flex:none;
  width:22px; height:22px; min-height:0; margin:1px 0 0; padding:0;
  background:var(--surface-2); border:1.5px solid var(--line-control); border-radius:6px; cursor:pointer;
  transition:background-color .18s, border-color .18s;
}
.check input[type=radio]{ border-radius:50%; }
.check input::before{ content:""; width:12px; height:12px; background:var(--bg); transform:scale(0); transition:transform .12s var(--ease-out); }
.check input[type=checkbox]::before{ clip-path:polygon(12% 52%,26% 38%,42% 54%,76% 18%,90% 32%,42% 82%); }
.check input[type=radio]::before{ width:10px; height:10px; border-radius:50%; }
.check input:checked{ background:var(--text); border-color:var(--text); }
.check input:checked::before{ transform:scale(1); }
@media (hover:hover){ .check:hover input:not(:disabled):not(:checked){ border-color:rgba(255,255,255,.6); } }
.check input:focus-visible{ outline:2px solid var(--focus); outline-offset:3px; }
.check input:disabled{ opacity:.5; cursor:not-allowed; }
.check input[aria-invalid="true"],.field.has-err .check input{ border-color:var(--err); }
@media (forced-colors:active){
  .check input:checked{ background:Highlight; border-color:Highlight; }
  .check input::before{ background:HighlightText; }
}

/* ---- FAQ: native <details> in one tile, with a hairline between questions.
   The tile is a surface with an edge and the shadow, so it shows on .section-elev too. ---- */
.faq-list{ max-width:800px; margin-inline:auto; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg); box-shadow:var(--shadow); overflow:hidden; }
.faq-item + .faq-item{ border-top:1px solid var(--line); }
.faq-q{
  display:flex; align-items:center; justify-content:space-between; gap:16px; cursor:pointer;
  padding:20px 22px; font-family:var(--font-display); font-weight:600; font-size:1rem; color:var(--text);
  list-style:none;
}
.faq-q::-webkit-details-marker{ display:none; }
.faq-q:focus-visible{ outline-offset:-4px; } /* .faq-list clips the ring otherwise */
.faq-item:first-child > .faq-q:focus-visible{ border-top-left-radius:22px; border-top-right-radius:22px; } /* the ring follows the tile's corners */
.faq-item:last-child:not([open]) > .faq-q:focus-visible{ border-bottom-left-radius:22px; border-bottom-right-radius:22px; }
@media (hover:hover){ .faq-q:hover{ background:rgba(255,255,255,.03); } }
.faq-q:active{ background:rgba(255,255,255,.05); }
.faq-icon{ flex:none; width:22px; height:22px; position:relative; }
.faq-icon::before,.faq-icon::after{
  content:""; position:absolute; top:50%; left:50%; background:var(--text-2);
  transform:translate(-50%,-50%); transition:transform .2s var(--ease-out);
}
.faq-icon::before{ width:14px; height:1.5px; }
.faq-icon::after{ width:1.5px; height:14px; }
.faq-item[open] .faq-icon::after{ transform:translate(-50%,-50%) rotate(90deg) scaleX(0); }
.faq-item[open] .faq-icon::before{ transform:translate(-50%,-50%) rotate(180deg); }
@media (forced-colors:active){
  .faq-icon::before,.faq-icon::after{ forced-color-adjust:none; background:ButtonText; } /* a background-only glyph vanishes in Windows High Contrast otherwise */
}
.faq-a{ padding:0 22px 22px; display:grid; gap:12px; }
.faq-a p{ margin:0; color:var(--text-2); max-width:70ch; }
.faq-foot{ margin-top:28px; text-align:center; color:var(--text-2); }
.faq-foot a{ color:var(--text); font-weight:600; text-decoration:underline; text-underline-offset:2px; }
/* a link that stands alone on its line inside an answer: padded up to a 44px tap area
   (inline padding adds no line height). A class, so an ordinary link in an answer stays plain. */
.faq-a .faq-link{ padding-block:13px; color:var(--text); font-weight:600; text-decoration:underline; text-underline-offset:2px; }
.faq-foot a,.faq-a .faq-link{ text-decoration-color:var(--line-control); }
@media (hover:hover){ .faq-foot a:hover,.faq-a .faq-link:hover{ text-decoration-color:currentColor; } }

/* ---- Share button ---- */
.share-btn{
  display:inline-flex; align-items:center; gap:9px; min-height:44px; padding:0 20px;
  border-radius:var(--radius-pill); border:1.5px solid var(--line-strong); background:transparent;
  color:var(--text); font-weight:600; font-size:15px; cursor:pointer; transition:background .15s, border-color .15s;
}
@media (hover:hover){ .share-btn:hover{ background:rgba(255,255,255,.06); } }
.share-btn-icon{ width:17px; height:17px; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.share-btn.is-copied::after{ content:"Link copied"; font-size:13px; color:var(--ok); margin-left:2px; }

dialog:not([open]){ display:none; } /* a browser without <dialog> would render it inline */

/* ============================================================
   5. STOREFRONT COMPONENTS
   The blocks the product pages are assembled from. Each one stands
   on its own: it sets its own spacing inside and none outside.
   ============================================================ */

/* ---- .badge: a small label. On a picture caption it says what the picture is:
   .badge-real = a photograph of a card we engraved, .badge-preview = a render or artwork.
   .badge-sample marks a review nobody wrote (the demonstration of the review block). ---- */
.badge{
  display:inline-flex; align-items:center; flex:none; min-height:24px; padding:0 10px;
  border-radius:var(--radius-pill); border:1px solid var(--line-control);
  font-size:.75rem; font-weight:600; line-height:1; letter-spacing:.02em; white-space:nowrap; color:var(--text-2);
}
.badge-real{ background:var(--text); border-color:var(--text); color:#141416; }
.badge-sample{ border-color:var(--warn); color:var(--warn); }

/* ---- .dotgrid: a very faint grid of dots behind a section's content, fading out at the edges ---- */
.dotgrid{ position:relative; isolation:isolate; }
.dotgrid::before{
  content:""; position:absolute; top:0; left:0; right:0; bottom:0; z-index:-1; pointer-events:none;
  background-image:radial-gradient(circle, rgba(255,255,255,.1) 1px, transparent 1.5px);
  background-size:22px 22px; background-position:center top;
  -webkit-mask-image:radial-gradient(ellipse 78% 72% at 50% 46%, #000 25%, transparent 100%);
  mask-image:radial-gradient(ellipse 78% 72% at 50% 46%, #000 25%, transparent 100%);
}

/* ---- a section head with something beside its title (a link, the pager buttons) ---- */
.section-head--split{ max-width:none; display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:16px 32px; }
.section-head--split > :first-child{ max-width:640px; }

/* ---- .pager: the dots under a slider or gallery. 8px dots, the current one stretched into a
   short pill in the accent color; a parent can tint it with --pager-accent. Each dot's tap zone
   is 44px tall and as wide as the dots are apart, so neighbours never share one. site-v2.js
   builds the dots for a [data-gallery] row; .pager-btn is the optional previous / next button. ---- */
.pager-nav{ display:flex; align-items:center; justify-content:center; gap:6px; margin-top:10px; }
.pager{ display:flex; align-items:center; justify-content:center; min-height:44px; }
.pager:empty,.pager[hidden]{ display:none; }
.pager-dot{
  position:relative; flex:none; width:28px; height:44px; padding:0; cursor:pointer;
  -webkit-tap-highlight-color:transparent; transition:width .25s var(--ease-out);
}
.pager-dot::before{
  content:""; position:absolute; left:50%; top:50%; width:8px; height:8px; margin:-4px 0 0 -4px;
  border-radius:var(--radius-pill); background:rgba(255,255,255,.36);
  transition:width .25s var(--ease-out), margin .25s var(--ease-out), background-color .25s;
}
@media (hover:hover){ .pager-dot:hover::before{ background:rgba(255,255,255,.62); } }
.pager-dot:active::before{ background:rgba(255,255,255,.8); }
.pager-dot[aria-current="true"]{ width:44px; }
.pager-dot[aria-current="true"]::before{ width:24px; margin-left:-12px; background:var(--pager-accent, var(--accent)); }
.pager-dot:focus-visible{ outline:none; }
.pager-dot:focus-visible::before{ outline:2px solid var(--focus); outline-offset:3px; }
.pager-btn{
  display:none; flex:none; width:44px; height:44px; padding:0; place-items:center; border-radius:50%; cursor:pointer;
  border:1px solid var(--line-strong); background:var(--surface); color:var(--text);
  transition:transform .18s var(--ease-out), background-color .18s, border-color .18s, opacity .18s;
}
.pager-btn svg{ width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }
.pager-btn:focus-visible{ border-radius:50%; }
@media (hover:hover){ .pager-btn:not([aria-disabled="true"]):hover{ background:var(--surface-2); border-color:var(--text-2); } }
.pager-btn:not([aria-disabled="true"]):active{ transform:scale(.92); }
/* aria-disabled, not the disabled attribute: the button keeps keyboard focus at the ends */
.pager-btn[aria-disabled="true"]{ opacity:.35; cursor:not-allowed; }
/* the buttons need the script, and on phones the row is swiped */
@media (min-width:768px){ html.js .pager-btn:not([hidden]){ display:grid; } }
@media (forced-colors:active){
  .pager-dot::before{ forced-color-adjust:none; background:ButtonText; }
  .pager-dot[aria-current="true"]::before{ background:Highlight; }
}

/* ---- .photo-card: the rounded tile a picture sits in. As it is, a light tile for a studio render
   on a white background; .photo-card--dark for a photograph. 4:3 unless a modifier says otherwise. ---- */
.photo-card{
  position:relative; display:block; margin:0; aspect-ratio:var(--ratio, 4 / 3); overflow:hidden; isolation:isolate;
  border-radius:var(--radius-lg); background:#FFFFFF;
}
.photo-card picture{ display:block; width:100%; height:100%; }
.photo-card img{ display:block; width:100%; height:100%; object-fit:cover; }
.photo-card--dark{ background:#0B0B0D; }
/* a hairline over the picture's edge, so a dark photograph still has a border on the dark page */
.photo-card--dark::after{
  content:""; position:absolute; top:0; left:0; right:0; bottom:0; pointer-events:none;
  border-radius:inherit; box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);
}
.photo-card--card{ --ratio:1013 / 638; }   /* the proportions of a card face */
.photo-card--portrait{ --ratio:3 / 4; }
.photo-card--wide{ --ratio:1200 / 755; }

/* ---- .gallery: one row of large pictures that scrolls sideways and snaps. One and a bit show
   on a phone, three and a part from 960px. The row reaches the screen edges, its first picture lines up with
   the page's text. Give it data-gallery, an id and a .pager to get dots, arrows and arrow keys. ---- */
.gallery{
  --gallery-gap:14px;
  display:flex; gap:var(--gallery-gap); margin:0 calc(-1 * var(--gutter)); padding:4px var(--gutter);
  overflow-x:auto; overscroll-behavior-x:contain; -webkit-overflow-scrolling:touch;
  scroll-snap-type:x mandatory; scroll-padding-inline:var(--gutter); scrollbar-width:none;
}
.gallery::-webkit-scrollbar{ display:none; }
.gallery:focus-visible{ outline-offset:-2px; border-radius:var(--radius-sm); } /* the row is as wide as the screen: the ring goes inside */
.gallery-item{ flex:0 0 82%; min-width:0; scroll-snap-align:start; }
.gallery figure{ margin:0; }
.gallery-cap{
  display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px; margin-top:12px;
  font-size:var(--fs-small); line-height:1.45; color:var(--text-2);
}
@media (min-width:600px){
  .gallery{ --gallery-gap:18px; }
  .gallery-item{ flex-basis:46%; }
}
@media (min-width:960px){
  .gallery{ --gallery-gap:20px; }
  .gallery-item{ flex-basis:calc((100% - 3 * var(--gallery-gap)) / 3.25); } /* the part of a fourth says there is more */
}
/* .gallery--single: one picture at a time, inside its column (the buy box) */
.gallery--single{ --gallery-gap:12px; margin-inline:0; padding:0; scroll-padding-inline:0; border-radius:var(--radius-lg); }
.gallery--single:focus-visible{ outline-offset:3px; }
.gallery--single .gallery-item{ flex-basis:100%; }
@media (prefers-reduced-motion:reduce){
  .pager-dot,.pager-dot::before,.pager-btn{ transition:none; }
  .pager-btn:not([aria-disabled="true"]):active{ transform:none; }
}

/* ---- .buybox: the top of a product page. The picture card with its pager, then the eyebrow, the
   H1, the price, what it includes, the facts and the two buttons. Side by side from 960px. ---- */
.buybox{ display:grid; gap:clamp(20px,5vw,32px); }
.buybox-media,.buybox-body{ min-width:0; }
.buybox .eyebrow{ margin-bottom:10px; }
.buybox-price{ display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 10px; margin-top:18px; color:var(--text); }
.buybox-amount{
  font-family:var(--font-display); font-size:clamp(2.25rem,2vw + 1.7rem,3rem); font-weight:600; line-height:1;
  letter-spacing:-.03em; font-variant-numeric:tabular-nums;
}
.buybox-per{ font-size:1rem; color:var(--text-2); }
.buybox-incl{ margin-top:10px; font-size:1.0625rem; line-height:1.5; color:var(--text); }
.buybox-note{ margin-top:6px; font-size:var(--fs-small); line-height:1.5; color:var(--text-2); }
.buybox-facts{ display:grid; gap:10px; margin-top:20px; padding-top:20px; border-top:1px solid var(--line); }
.buybox-facts li{ position:relative; padding-left:28px; line-height:1.5; color:var(--text-2); }
.buybox-facts li::before{
  content:""; position:absolute; left:0; top:3px; width:18px; height:18px; background:var(--silver);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 8'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 8'/%3E%3C/svg%3E") center/contain no-repeat;
}
.buybox-colors{ margin-top:20px; padding-top:16px; border-top:1px solid var(--line); }
.buybox-colors .buybox-note{ margin-top:4px; }
.buybox-actions{ display:grid; gap:12px; margin-top:24px; }
@media (min-width:600px){
  .buybox-actions{ display:flex; flex-wrap:wrap; }
}
@media (min-width:960px){
  .buybox{ grid-template-columns:minmax(0,1.08fr) minmax(0,1fr); gap:clamp(40px,5vw,72px); align-items:center; }
}

/* ---- .trust-band: four to six short facts, each under one small icon. Two across on phones,
   three from 768px (four when there are four), one row once six fit side by side. ---- */
.trust-band{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px 16px;
  padding-block:clamp(26px,4vw,38px); border-top:1px solid var(--line); border-bottom:1px solid var(--line);
}
.trust-fact{ display:grid; gap:10px; align-content:start; font-size:.9375rem; font-weight:500; line-height:1.4; color:var(--text); }
.trust-fact svg{ width:22px; height:22px; fill:none; stroke:var(--accent); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
@media (min-width:768px){
  .trust-band{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; }
  .trust-band:has(> :nth-child(4):last-child){ grid-template-columns:repeat(4,minmax(0,1fr)); }
}
@media (min-width:1200px){ .trust-band{ grid-template-columns:repeat(auto-fit,minmax(168px,1fr)); } }

/* ---- .price-lines: what an order costs, one row per line: label, an optional note under it and
   the amount at the right; .price-line--total is the last row. .price-box is the tile around it.
   .price-examples are small cards that each work one order out. ---- */
.price-box{ max-width:680px; padding:8px clamp(18px,3vw,26px); border-radius:var(--radius-lg); background:var(--surface); border:1px solid var(--line); box-shadow:var(--shadow); }
.price-lines{ display:grid; margin:0; }
.price-line{ display:flex; align-items:baseline; justify-content:space-between; gap:16px; padding-block:15px; border-top:1px solid var(--line); }
.price-line:first-child{ border-top:0; }
.price-line dt{ min-width:0; font-weight:500; color:var(--text); }
.price-line-note{ display:block; margin-top:2px; font-size:var(--fs-small); font-weight:400; line-height:1.45; color:var(--text-2); }
.price-line dd{ flex:none; margin:0; font-weight:600; font-variant-numeric:tabular-nums; white-space:nowrap; color:var(--text); }
.price-line--total{ border-top-color:var(--line-strong); padding-block:18px; }
.price-line--total dt{ font-weight:600; }
.price-line--total dd{ font-family:var(--font-display); font-size:1.5rem; line-height:1; letter-spacing:-.02em; }
.price-examples{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.price-example{ display:grid; gap:6px; align-content:start; padding:16px; border-radius:var(--radius); background:var(--surface); border:1px solid var(--line); }
.price-example-what{ font-size:var(--fs-small); font-weight:500; line-height:1.4; color:var(--text-2); }
.price-example-total{ font-family:var(--font-display); font-size:1.5rem; font-weight:600; line-height:1.1; letter-spacing:-.02em; font-variant-numeric:tabular-nums; color:var(--text); }
.price-example-how{ font-size:.8125rem; line-height:1.45; color:var(--text-2); font-variant-numeric:tabular-nums; }
/* from 768px: still two across while the block is narrower than four cards of 180px (the
   column's minimum is then half the block), and as many as fit once it is wider, so four
   cards are two rows of two or one row, never three and one */
@media (min-width:768px){
  .price-examples{
    --four-fit:calc(4 * 180px + 3 * 16px); gap:16px;
    grid-template-columns:repeat(auto-fit,minmax(max(180px, min((var(--four-fit) - 100%) * 999, (100% - 16px) / 2)),1fr));
  }
}

/* ---- .compare: two products side by side. On phones each row's label runs across the top of
   its two cells; from 768px the labels are a first column. The markup carries table roles. ---- */
.compare{ border-radius:var(--radius-lg); background:var(--surface); border:1px solid var(--line); box-shadow:var(--shadow); overflow:hidden; }
.compare-row{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); border-top:1px solid var(--line); }
.compare-row:first-child{ border-top:0; }
.compare-label{
  grid-column:1 / -1; padding:9px 16px; background:rgba(255,255,255,.035);
  font-size:.8125rem; font-weight:600; line-height:1.4; letter-spacing:.02em; color:var(--text-2);
}
.compare-cell{ min-width:0; padding:13px 16px 15px; font-size:.9375rem; line-height:1.5; color:var(--text); overflow-wrap:break-word; }
.compare-cell + .compare-cell{ border-left:1px solid var(--line); }
.compare-head .compare-label,.compare-foot .compare-label{ display:none; } /* empty corners: only the wide layout needs them */
.compare-head .compare-cell{ display:grid; gap:4px; align-content:start; padding-block:18px 16px; }
.compare-name{ font-family:var(--font-display); font-size:1.0625rem; font-weight:600; line-height:1.25; letter-spacing:-.018em; color:var(--text); }
.compare-price{ font-size:var(--fs-small); color:var(--text-2); font-variant-numeric:tabular-nums; }
.compare-foot .compare-cell{ padding-block:16px; }
/* a long label wraps inside its pill instead of pushing the column wider */
.compare-foot .btn{ width:100%; min-height:48px; padding:8px 14px; white-space:normal; text-align:center; line-height:1.25; }
@media (min-width:768px){
  .compare-row{ grid-template-columns:minmax(150px,.62fr) minmax(0,1fr) minmax(0,1fr); }
  .compare-label{ grid-column:auto; padding:18px 24px; background:none; font-size:.9375rem; letter-spacing:0; }
  .compare-head .compare-label,.compare-foot .compare-label{ display:block; }
  .compare-cell{ padding:18px 24px; border-left:1px solid var(--line); font-size:1rem; }
  .compare-head .compare-cell{ padding-block:24px 20px; }
  .compare-name{ font-size:var(--fs-h3); }
  .compare-price{ font-size:1rem; }
  .compare-foot .compare-cell{ padding-block:20px 24px; }
  .compare-foot .btn{ width:auto; min-height:var(--control-h); padding:0 26px; white-space:nowrap; }
}

/* ---- .option-card: a large card you choose, around a radio or a checkbox.
   label.option-card > input + span.option-card-face (picture or icon, title, one line of help,
   a price at the right). Chosen = a white ring, a faint fill and a tick badge on the corner.
   The focus ring is drawn on the card while its hidden input has keyboard focus. ---- */
.option-cards{ display:grid; gap:12px; }
.option-card{ position:relative; display:block; cursor:pointer; -webkit-tap-highlight-color:transparent; }
.option-card > input{ position:absolute; top:0; left:0; width:1px; height:1px; margin:0; opacity:0; pointer-events:none; }
.option-card-face{
  position:relative; display:flex; align-items:center; gap:14px; min-height:76px; padding:14px 16px;
  border-radius:var(--radius); background-color:var(--surface); border:1px solid var(--line-control);
  transition:transform .18s var(--ease-out), background-color .18s, border-color .18s, box-shadow .18s;
}
.option-card-face::after{
  content:""; position:absolute; top:-9px; right:-9px; width:24px; height:24px; border-radius:50%;
  background:var(--text) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23141416' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 8'/%3E%3C/svg%3E") center/14px no-repeat;
  box-shadow:0 0 0 3px var(--bg); transform:scale(0); transition:transform .18s var(--ease-out);
}
.option-card-media{ flex:none; width:64px; aspect-ratio:4 / 3; border-radius:10px; overflow:hidden; background:#FFFFFF; }
.option-card-media img{ display:block; width:100%; height:100%; object-fit:cover; }
.option-card-icon{ flex:none; display:grid; place-items:center; width:44px; height:44px; border-radius:var(--radius-sm); background:rgba(255,255,255,.07); color:var(--text); }
.option-card-icon svg{ width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.option-card-text{ flex:1 1 auto; display:grid; gap:2px; min-width:0; }
.option-card-title{ font-family:var(--font-display); font-size:1rem; font-weight:600; line-height:1.3; letter-spacing:-.012em; color:var(--text); }
.option-card-help{ font-size:var(--fs-small); line-height:1.45; color:var(--text-2); }
.option-card-price{ flex:none; margin-left:auto; font-size:var(--fs-small); font-weight:600; line-height:1.3; text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums; color:var(--text); }
.option-card-price small{ display:block; font-size:.75rem; font-weight:500; color:var(--text-2); } /* "per card" under the amount */
@media (hover:hover){
  .option-card:hover > input:not(:disabled):not(:checked) + .option-card-face{ border-color:rgba(255,255,255,.6); }
}
.option-card:active > input:not(:disabled) + .option-card-face{ transform:scale(.99); }
.option-card > input:checked + .option-card-face{ background-color:var(--surface-2); border-color:var(--ring); box-shadow:inset 0 0 0 1px var(--ring); }
.option-card > input:checked + .option-card-face::after{ transform:scale(1); }
.option-card > input:focus-visible + .option-card-face{ outline:2px solid var(--focus); outline-offset:3px; }
.option-card > input:disabled + .option-card-face{ opacity:.5; cursor:not-allowed; }
/* .option-card--stack: the picture on top, for a choice between two or three big things */
.option-card--stack .option-card-face{ flex-direction:column; align-items:stretch; gap:12px; padding:14px 14px 18px; }
.option-card--stack .option-card-media{ width:100%; border-radius:var(--radius-sm); }
.option-card--stack .option-card-price{ margin-left:0; text-align:left; }
.option-card--stack .option-card-price small{ display:inline; font-size:inherit; }
@media (min-width:600px){
  .option-cards--2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .option-card-media{ width:76px; }
  .option-cards--2 .option-card,.option-cards--2 .option-card-face{ height:100%; }
}
@media (forced-colors:active){
  .option-card > input:checked + .option-card-face{ border-color:Highlight; box-shadow:inset 0 0 0 2px Highlight; }
}

/* ---- .qty: a quantity stepper: minus, the number, plus. site-v2.js runs any [data-qty]; at either
   end the button there is switched off (aria-disabled, so it keeps keyboard focus). .qty-note after
   it is shown only at the top of the range ("More than 10? ..."). ---- */
.qty{
  display:inline-flex; align-items:center; gap:4px; padding:3px; border-radius:var(--radius-pill);
  background:var(--surface-2); border:1px solid var(--line-control);
}
.qty-btn{
  flex:none; display:grid; place-items:center; width:44px; height:44px; padding:0; border-radius:50%; cursor:pointer;
  background:rgba(255,255,255,.08); color:var(--text); -webkit-tap-highlight-color:transparent;
  transition:transform .18s var(--ease-out), background-color .18s, opacity .18s;
}
.qty-btn svg{ width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; }
.qty-btn:focus-visible{ border-radius:50%; outline-offset:2px; }
@media (hover:hover){ .qty-btn:not([aria-disabled="true"]):hover{ background:rgba(255,255,255,.16); } }
.qty-btn:not([aria-disabled="true"]):active{ transform:scale(.92); background:rgba(255,255,255,.22); }
.qty-btn[aria-disabled="true"]{ opacity:.35; cursor:not-allowed; }
.qty-value{
  min-width:48px; text-align:center; font-family:var(--font-display); font-size:1.125rem; font-weight:600; line-height:1;
  font-variant-numeric:tabular-nums; color:var(--text);
}
.qty-note{ display:none; margin-top:8px; font-size:var(--fs-small); line-height:1.5; color:var(--text-2); }
.qty.is-max + .qty-note{ display:block; }

/* ---- .swatches: the engraving colors as round dots, each with its name under it.
   As a list (li.swatch) it only shows the colors; as radios (label.swatch > input) one is chosen:
   a white ring and a tick. data-color gives a dot its color; a color that is not listed here
   takes --sw from a style attribute and data-finish="metallic" for the sheen. ---- */
.swatches{ display:flex; flex-wrap:wrap; gap:2px; margin:0; padding:0; list-style:none; }
.swatch{
  position:relative; display:flex; flex-direction:column; align-items:center; gap:6px;
  min-width:44px; min-height:44px; padding:7px 2px 4px; border-radius:var(--radius-sm);
}
label.swatch{ cursor:pointer; -webkit-tap-highlight-color:transparent; }
.swatch > input{ position:absolute; top:0; left:0; width:1px; height:1px; margin:0; opacity:0; pointer-events:none; }
.swatch-dot{
  position:relative; flex:none; width:30px; height:30px; border-radius:50%;
  background:var(--sw, #D9D9DE); box-shadow:inset 0 0 0 1px rgba(255,255,255,.3);
  transition:transform .18s var(--ease-out);
}
.swatch[data-finish="metallic"] .swatch-dot,.swatch[data-color="silver"] .swatch-dot,.swatch[data-color="gold"] .swatch-dot{
  background:linear-gradient(135deg, rgba(255,255,255,.75) 0%, rgba(255,255,255,0) 44%, rgba(0,0,0,.32) 100%), var(--sw, #D9D9DE);
}
.swatch[data-color="silver"]{ --sw:#D9D9DE; }
.swatch[data-color="gold"]{ --sw:#D4AF37; }
.swatch[data-color="red"]{ --sw:#CC2030; --sw-tick:#FFFFFF; }
.swatch[data-color="green"]{ --sw:#53DA3F; }
.swatch[data-color="blue"]{ --sw:#2756A6; --sw-tick:#FFFFFF; }
.swatch[data-color="yellow"]{ --sw:#FFCB05; }
.swatch[data-color="white"]{ --sw:#FFFFFF; }
.swatch-label{ font-size:.75rem; font-weight:500; line-height:1.2; text-align:center; white-space:nowrap; color:var(--text-2); }
/* the chosen color: a ring around the dot and a tick on it */
.swatch-dot::before{
  content:""; position:absolute; top:-5px; left:-5px; right:-5px; bottom:-5px; border-radius:50%;
  border:2px solid var(--ring); opacity:0; transform:scale(.86); transition:opacity .15s, transform .18s var(--ease-out);
}
.swatch-dot::after{
  content:""; position:absolute; top:0; left:0; right:0; bottom:0; opacity:0; background:var(--sw-tick, #141416);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 8'/%3E%3C/svg%3E") center/16px no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 8'/%3E%3C/svg%3E") center/16px no-repeat;
  transition:opacity .15s;
}
.swatch > input:checked + .swatch-dot::before{ opacity:1; transform:none; }
.swatch > input:checked + .swatch-dot::after{ opacity:1; }
.swatch > input:checked ~ .swatch-label{ color:var(--text); }
@media (hover:hover){ label.swatch:hover > input:not(:disabled):not(:checked) + .swatch-dot{ transform:scale(1.08); } }
label.swatch:active > input:not(:disabled) + .swatch-dot{ transform:scale(.94); }
/* keyboard focus: a ring around the whole swatch, so it is never mistaken for the chosen ring */
label.swatch:focus-within{ outline:2px solid var(--focus); outline-offset:1px; }
label.swatch:focus-within:not(:has(input:focus-visible)){ outline:none; }
.swatch > input:disabled ~ .swatch-dot,.swatch > input:disabled ~ .swatch-label{ opacity:.4; }
.swatch-field .field-label{ margin-bottom:4px; }
.swatch-field .swatches{ margin-left:-7px; } /* the first dot lines up with the label above it */
.swatch-field .field-hint{ margin-top:6px; }
@media (forced-colors:active){
  .swatch-dot{ forced-color-adjust:none; }
  .swatch-dot::before{ border-color:Highlight; }
}

/* ---- .reviews: the block of customer reviews, and .review-card, one review: an optional photo
   of their card, the quote, first name and city, an optional link to where it was posted.
   A .reviews with no card in it is not displayed (site-v2.js sets .is-empty where :has() is unknown). ---- */
.reviews:empty{ display:none; }
.reviews:not(:has(.review-card)){ display:none; }
.reviews.is-empty{ display:none; }
.reviews-track{
  display:flex; gap:16px; margin:0 calc(-1 * var(--gutter)); padding:4px var(--gutter);
  overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x mandatory; scroll-padding-inline:var(--gutter); scrollbar-width:none;
}
.reviews-track::-webkit-scrollbar{ display:none; }
.reviews-track:focus-visible{ outline-offset:-2px; border-radius:var(--radius-sm); }
.review-card{
  position:relative; flex:0 0 86%; min-width:0; scroll-snap-align:start;
  display:flex; flex-direction:column; align-items:flex-start; gap:14px; margin:0; padding:22px;
  border-radius:var(--radius-lg); background:var(--surface); border:1px solid var(--line); box-shadow:var(--shadow);
}
.review-photo{ width:100%; aspect-ratio:4 / 3; object-fit:cover; border-radius:var(--radius-sm); }
.review-quote{ margin:0; font-size:1.0625rem; line-height:1.55; letter-spacing:-.01em; color:var(--text); }
.review-quote p + p{ margin-top:.6em; }
.review-who{ display:flex; flex-wrap:wrap; align-items:baseline; gap:2px 8px; margin-top:auto; font-size:var(--fs-small); line-height:1.4; }
.review-name{ font-weight:600; color:var(--text); }
.review-city{ color:var(--text-2); }
.review-source{ margin-block:-12px; font-size:var(--fs-small); }
@media (min-width:600px){ .review-card{ flex-basis:46%; } }
@media (min-width:960px){ .review-card{ flex-basis:calc((100% - 32px) / 3); } }

/* ============================================================
   6. INNER PAGES
   ============================================================ */

/* ---- .page-hero: the centered hero of an inner page ---- */
.page-hero{
  padding-block:clamp(64px,10vw,120px) clamp(40px,6vw,64px);
  text-align:center;
}
.page-hero .eyebrow{ justify-content:center; }
.page-hero .container{ max-width:860px; }
.page-hero h1{ margin-bottom:18px; }
.page-hero .lead{ margin-inline:auto; }
.page-hero .btn{ margin-top:28px; }
.page-hero-ctas{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin-top:28px; }
.page-hero-ctas .btn{ margin-top:0; } /* the row's own margin and gap are the only spacing */
.page-hero-meta{ margin-top:18px; font-family:var(--font-mono); font-size:13px; color:var(--text-3); letter-spacing:.04em; }

/* ---- /tesla-key-card/ hero: copy and the card side by side from 960px.
   On phones the copy block dissolves (display:contents) and named grid areas
   put the card between the H1 and the lead. ---- */
.page-hero.hero-split{ text-align:left; padding-block:clamp(40px,7vw,72px) clamp(40px,6vw,64px); }
.page-hero.hero-split .container{ max-width:var(--maxw); }
.hero-split-grid{ display:grid; gap:clamp(13px,4vw,20px); grid-template-areas:"eyebrow" "h1" "card" "lead" "ctas"; }
.hero-split-copy{ display:contents; }
.hero-split-eyebrow{ grid-area:eyebrow; margin:0; justify-content:flex-start; }
.hero-split-h1{ grid-area:h1; margin:0; }
.hero-split-lead{ grid-area:lead; margin:0; }
.hero-split-ctas{ grid-area:ctas; justify-content:flex-start; margin-top:0; }
/* .page-hero's own eyebrow / h1 / lead rules tie or beat the single-class rules
   above and would center this left-aligned hero again: same weight, later, wins */
.page-hero .hero-split-eyebrow{ justify-content:flex-start; }
.page-hero .hero-split-h1{ margin-bottom:0; }
.page-hero .hero-split-lead{ margin-inline:0; }
.hero-split-visual{ grid-area:card; position:relative; perspective:1400px; width:min(480px,88vw); margin-inline:auto; }
.hero-split-card-glow{
  position:absolute; left:8%; right:8%; bottom:-6%; height:78%; z-index:0; pointer-events:none;
  background:radial-gradient(ellipse 60% 60% at 50% 55%, var(--halo), transparent 72%);
  filter:blur(36px);
}
/* this hero runs under the header, which is transparent over it until the page scrolls */
.has-stage-hero .page-hero.hero-split{
  position:relative; isolation:isolate; overflow:hidden; overflow:clip;
  margin-top:calc(-1 * var(--header-h));
  padding-top:calc(var(--header-h) + clamp(32px,6vw,72px));
}
@media (min-width:960px){
  .hero-split-grid{ grid-template-columns:1.05fr 1fr; grid-template-areas:"copy card"; align-items:center; column-gap:clamp(40px,6vw,72px); }
  .hero-split-copy{ display:flex; flex-direction:column; gap:clamp(14px,1.8vw,18px); grid-area:copy; }
  .hero-split-visual{ width:100%; }
}

/* ---- host for card3d.js's single spinning card ---- */
.card3d-host{ position:relative; z-index:1; width:100%; aspect-ratio:4/3; display:grid; place-items:center; }
.card3d-host .card3d-canvas{
  position:absolute; top:0; left:0; right:0; bottom:0; inset:0; width:100% !important; height:100% !important; display:block;
  /* the renderer's back-glow is wider than this box: feather all four edges */
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent),linear-gradient(180deg,transparent,#000 10%,#000 90%,transparent);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent),linear-gradient(180deg,transparent,#000 10%,#000 90%,transparent);
  mask-composite:intersect;
}
.card3d-fallback{
  width:86%; height:auto; border-radius:4.2%/6.6%;
  filter:invert(1) brightness(.86) contrast(1.05) drop-shadow(0 26px 30px rgba(0,0,0,.65));
  transform:perspective(1400px) rotateX(8deg) rotateY(-12deg);
}
.card3d-host.is-3d .card3d-fallback{ display:none; }

/* ---- .trust-strip: four icon + title + text items. One column on small phones, two up to
   1023px (a sentence needs the width), four in a row from 1024px. ---- */
.trust-strip{
  display:grid; gap:24px; grid-template-columns:1fr;
  padding-block:clamp(28px,4vw,40px);
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
}
.trust-strip-item{ display:flex; gap:14px; align-items:flex-start; }
.trust-strip-icon{
  flex:none; width:40px; height:40px; border-radius:var(--radius-sm);
  border:1px solid var(--line-strong); display:grid; place-items:center; color:var(--text);
}
.trust-strip-icon svg{ width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.trust-strip-item h3{ font-size:var(--fs-label); margin-bottom:4px; }
.trust-strip-item p{ margin:0; font-size:.88rem; color:var(--text-2); line-height:1.5; }
@media (min-width:480px){ .trust-strip{ grid-template-columns:1fr 1fr; } }
@media (min-width:1024px){ .trust-strip{ grid-template-columns:repeat(4,1fr); } }
/* side by side, the items share two rows (title, sentence), so a title that wraps moves the
   sentence down in the whole row. Without subgrid each sentence follows its own title. */
@supports (grid-template-rows:subgrid){
  @media (min-width:480px){
    .trust-strip-item{ display:grid; grid-template-columns:40px minmax(0,1fr); grid-template-rows:subgrid; grid-row:span 2; gap:0 14px; }
    .trust-strip-item > div{ display:contents; }
    .trust-strip-icon{ grid-row:span 2; }
    .trust-strip-item h3,.trust-strip-item p{ grid-column:2; }
  }
}

/* ---- the buttons and the small print under a price block ---- */
.price-table-ctas{ display:flex; flex-wrap:wrap; gap:14px; justify-content:center; margin-top:28px; }
.price-table-fine{ margin-top:16px; text-align:center; font-size:.85rem; color:var(--text-3); }

/* ---- .timeline: a numbered list of steps, each with an optional picture ---- */
.timeline{ list-style:none; margin:0 auto; max-width:700px; padding:0; display:grid; gap:0; counter-reset:tl-step; }
.timeline-item{ position:relative; display:grid; grid-template-columns:44px 1fr; gap:20px; padding-bottom:clamp(32px,5vw,48px); }
.timeline-item::before{
  counter-increment:tl-step; content:counter(tl-step);
  width:44px; height:44px; border-radius:50%; background:var(--surface); border:1.5px solid var(--line-strong);
  display:grid; place-items:center; font-family:var(--font-display); font-weight:700; color:var(--text);
  position:relative; z-index:1;
}
.timeline-item::after{
  content:""; position:absolute; left:22px; top:44px; bottom:0; width:1px;
  background:linear-gradient(to bottom, var(--line-strong), var(--line));
}
.timeline-item:last-child::after{ display:none; }
.timeline-item:last-child{ padding-bottom:0; }
.timeline-body h3{ margin-bottom:8px; }
.timeline-body p{ margin:0; color:var(--text-2); max-width:56ch; }
.timeline-media{ margin-top:14px; max-width:480px; border-radius:var(--radius); overflow:hidden; border:1px solid var(--line); background:var(--surface); }
.timeline-media img{ width:100%; height:100%; object-fit:cover; aspect-ratio:4/3; display:block; }
/* from 960px each step is one row of three columns (number, text, picture):
   .timeline-body dissolves so its children can be placed in separate columns */
@media (min-width:960px){
  /* the title row hugs its content and the text row takes the picture's extra height */
  .timeline-item{ grid-template-columns:44px 1fr .9fr; grid-template-rows:auto 1fr; column-gap:28px; row-gap:4px; align-items:start; }
  .timeline-body{ display:contents; }
  .timeline-body h3{ grid-column:2; grid-row:1; }
  .timeline-body p{ grid-column:2; grid-row:2; }
  .timeline-media{ grid-column:3; grid-row:1 / span 2; margin-top:0; max-width:none; max-height:260px; }
}

/* ---- .prose: legal reading layout ---- */
.prose{ max-width:68ch; color:var(--text-2); font-size:1rem; line-height:1.7; }
.prose h2{ font-size:clamp(1.35rem,1.6vw + 1rem,1.7rem); color:var(--text); margin:2.2em 0 .6em; letter-spacing:-.02em; }
.prose h2:first-child{ margin-top:0; }
.prose h3{ font-size:1.15rem; color:var(--text); margin:1.8em 0 .5em; }
.prose p{ margin:0 0 1.1em; }
.prose ul,.prose ol{ margin:0 0 1.1em; padding-left:1.4em; display:grid; gap:.5em; }
.prose ul{ list-style:disc; }
.prose ol{ list-style:decimal; }
.prose a{ color:var(--text); text-decoration:underline; text-underline-offset:2px; text-decoration-color:var(--line-strong); }
@media (hover:hover){ .prose a:hover{ text-decoration-color:currentColor; } }
.prose table{ margin:0 0 1.4em; font-size:.94rem; }
.prose th,.prose td{ text-align:left; padding:10px 14px; border-bottom:1px solid var(--line); }
.prose th{ color:var(--text); font-weight:600; }
.prose blockquote{ margin:1.4em 0; padding:2px 0 2px 18px; border-left:2px solid var(--silver); color:var(--text-2); font-style:italic; }
.prose strong{ color:var(--text); font-weight:600; }
.prose hr{ border:0; border-top:1px solid var(--line); margin:2em 0; }
/* each numbered clause is its own <section id>: only the first h2 sits flush with the top */
.prose > section + section > h2:first-child{ margin-top:2.2em; }
/* .plain: the one-line "Plainly: ..." summary that opens a clause */
.prose .plain{
  color:var(--text); background:rgba(255,255,255,.05); border-left:2px solid var(--silver);
  padding:10px 14px; border-radius:0 10px 10px 0;
}
/* .legal-foot: the "See also ..." line. Two classes, so it beats .prose p's margin */
.prose .legal-foot{ margin-top:40px; padding-top:20px; border-top:1px solid var(--line); }

/* ---- .legal-layout: the text, with a sticky contents list beside it from 1100px ---- */
.legal-layout{ display:grid; gap:clamp(32px,5vw,56px); }
.legal-layout .toc{ display:none; }
.legal-layout a{ overflow-wrap:anywhere; } /* long emails and addresses never overflow a narrow screen */
.legal-layout > div{ max-width:68ch; } /* the summary box and the phone contents list keep the text's line length */
.toc-label{ font-size:.8rem; font-weight:600; letter-spacing:0; }
@media (min-width:1100px){
  .legal-layout{ grid-template-columns:240px 1fr; align-items:start; }
  .legal-layout .toc{
    display:block; position:sticky; top:calc(var(--header-h) + 24px);
    border-left:1px solid var(--line); padding-left:20px; max-height:calc(100svh - var(--header-h) - 48px); overflow-y:auto;
  }
  .toc-label{ font-family:var(--font-mono); color:var(--text-3); margin-bottom:14px; }
  .toc ol{ list-style:none; margin:0; padding:0; display:grid; gap:9px; counter-reset:toc; }
  .toc a{ display:block; font-size:.86rem; color:var(--text-2); line-height:1.4; }
  @media (hover:hover){ .toc a:hover{ color:var(--text); } }
}

/* ---- .toc-mobile: the contents list as a closed <details>, under 1100px ---- */
.toc-mobile{
  display:block; margin-bottom:clamp(24px,4vw,32px);
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg);
}
.toc-mobile summary{
  cursor:pointer; padding:16px 20px;
  font-family:var(--font-mono); font-size:.8rem; font-weight:600; letter-spacing:0; color:var(--text-3);
}
.toc-mobile[open] summary{ border-bottom:1px solid var(--line); margin-bottom:6px; }
.toc-mobile ol{ list-style:none; margin:0; padding:6px 20px 10px; display:grid; gap:0; }
/* every entry is a full 44px row to tap */
.toc-mobile a{ display:flex; align-items:center; min-height:44px; padding:6px 0; font-size:.9rem; color:var(--text-2); line-height:1.4; }
@media (hover:hover){
  .toc-mobile summary:hover{ color:var(--text-2); }
  .toc-mobile a:hover{ color:var(--text); }
}
@media (min-width:1100px){ .toc-mobile{ display:none; } }

.summary-box{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:clamp(20px,3vw,28px); margin-bottom:clamp(28px,4vw,40px);
}
.summary-box h2{ margin:0 0 12px; font-size:.8rem; font-weight:600; font-family:var(--font-mono); letter-spacing:0; color:var(--text-3); }
.summary-box ul{ list-style:none; margin:0; padding:0; display:grid; gap:10px; }
/* position:relative and padding-left, not flex: text next to a link must flow as one
   paragraph. The tick is a decorative ::before placed absolutely. */
.summary-box li{ position:relative; padding-left:28px; color:var(--text-2); font-size:.97rem; line-height:1.55; }
.summary-box li::before{
  content:""; position:absolute; left:0; top:3px; width:18px; height:18px; border-radius:50%;
  background:var(--ok) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2309090B' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 8'/%3E%3C/svg%3E") center/11px no-repeat;
}

/* ---- .video-frame: a 9:16 frame with a play button over the poster ---- */
.video-frame{
  position:relative; width:100%; margin-inline:auto;
  /* the width comes from the height cap, so the box is always a true 9:16 frame and
     never crops the film; the plain 400px is the fallback where svh is unknown */
  max-width:400px; max-width:min(400px, calc(78svh * 9 / 16));
  aspect-ratio:9/16; max-height:none;
  border-radius:var(--radius-lg); overflow:hidden; overflow:clip;
  border:1px solid var(--line-strong);
  box-shadow:0 0 0 1px rgba(0,0,0,.4), 0 40px 90px -30px rgba(0,0,0,.85);
  background:#050506;
}
.video-frame video{ width:100%; height:100%; object-fit:cover; display:block; background:#050506; }
.video-play{
  /* without JS the button must never sit over the native video controls */
  display:none; position:absolute; top:0; left:0; right:0; bottom:0; inset:0; width:100%; height:100%;
  place-items:center; background:rgba(5,5,6,.28); cursor:pointer; transition:background .2s;
}
html.js .video-play{ display:grid; }
.video-play:focus-visible{ outline-offset:-4px; } /* the frame clips the ring otherwise */
.video-play-circle{
  width:72px; height:72px; border-radius:50%; background:rgba(9,9,11,.55); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  border:1.5px solid rgba(255,255,255,.5); display:grid; place-items:center; transition:transform .2s var(--ease-out), background .2s;
}
@media (hover:hover){
  .video-play:hover{ background:rgba(5,5,6,.4); }
  .video-play:hover .video-play-circle{ transform:scale(1.06); background:rgba(9,9,11,.7); }
}
.video-play-circle svg{ width:24px; height:24px; margin-left:3px; fill:#fff; }
.video-frame.is-playing .video-play{ display:none; }
.video-page-frame{ margin-top:clamp(28px,4vw,40px); }
.video-page-caption{ margin-top:14px; text-align:center; font-size:13px; letter-spacing:.04em; color:var(--text-3); }

/* ---- trust chips: a plain list on phones, bordered pills from 768px ---- */
.trust-chips{ display:flex; flex-direction:column; align-items:flex-start; gap:9px; }
.chip{
  display:inline-flex; align-items:center; gap:8px; padding:0; border:0; border-radius:0; background:none;
  font-family:var(--font-mono); font-size:13px; color:var(--text-2);
}
.chip svg{ width:15px; height:15px; stroke:var(--accent); fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; flex:none; }
@media (min-width:768px){
  .trust-chips{ flex-direction:row; flex-wrap:wrap; gap:10px; }
  .chip{ padding:8px 14px; border:1px solid var(--line); border-radius:var(--radius-pill); font-size:12px; }
  .chip svg{ width:14px; height:14px; }
}
.page-hero .trust-chips{ align-items:center; justify-content:center; margin-top:clamp(24px,4vw,32px); }

/* ---- Designs rail: a row of cards that scrolls sideways ---- */
.rail-wrap{ position:relative; }
.rail{
  display:flex; gap:20px; overflow-x:auto; scroll-snap-type:x proximity; padding:4px 0 18px;
  scrollbar-width:thin; scrollbar-color:var(--line-strong) transparent;
}
.rail::-webkit-scrollbar{ height:6px; }
.rail::-webkit-scrollbar-thumb{ background:var(--line-strong); border-radius:99px; }
.design-card{ flex:0 0 78vw; max-width:320px; scroll-snap-align:start; }
.design-card .kcard{ margin-bottom:14px; }
.design-card-title{ font-family:var(--font-display); font-weight:600; font-size:1.02rem; margin-bottom:2px; }
.design-card-sub{ font-size:.85rem; color:var(--text-3); }
.rail-edge{ display:none; }
.rail-nav{ display:none; }
@media (min-width:768px){
  .rail-nav{ display:flex; align-items:center; gap:10px; }
  .rail-btn{
    width:44px; height:44px; border-radius:50%; border:1px solid var(--line-strong); background:var(--surface);
    display:grid; place-items:center; cursor:pointer; color:var(--text);
    flex:none;
  }
  @media (hover:hover){ .rail-btn:hover{ background:var(--surface-2); border-color:var(--text-2); } }
  .rail-btn.is-disabled{ opacity:.35; cursor:not-allowed; } /* aria-disabled, not the disabled attribute: the button keeps keyboard focus */
  .rail-btn svg{ width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }
  .rail-edge{
    display:block; position:absolute; top:0; bottom:18px; width:64px; z-index:2; pointer-events:none;
    opacity:0; transition:opacity .2s ease;
  }
  .rail-edge-l{ left:0; background:linear-gradient(90deg, var(--bg-elev), transparent); }
  .rail-edge-r{ right:0; background:linear-gradient(270deg, var(--bg-elev), transparent); }
  /* site-v2.js sets these on .rail-wrap from the real scroll position: the left fade
     shows only once the rail has moved, so it never dims the card at the start */
  .rail-wrap.show-edge-l .rail-edge-l{ opacity:1; }
  .rail-wrap.show-edge-r .rail-edge-r{ opacity:1; }
}

.step-index{ font-family:var(--font-mono); font-size:.82rem; font-weight:600; letter-spacing:0; font-variant-numeric:tabular-nums; color:var(--text-3); }

/* ---- show off your card ---- */
.show-off-row{ text-align:center; margin-bottom:32px; }
.show-off-refer{
  max-width:480px; margin-inline:auto; text-align:center;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg); padding:clamp(24px,4vw,32px);
}
.show-off-refer h3{ margin-bottom:8px; }
.show-off-refer p{ color:var(--text-2); margin-bottom:20px; }
.show-off-refer .share-btn{ margin-inline:auto; }
@media (max-width:359.98px){
  /* a long button label wraps onto a second line instead of overflowing its pill */
  .show-off-row .btn{ white-space:normal; text-align:center; line-height:1.25; padding-block:12px; }
}

/* ---- Final CTA: a centered closing block with a card over a glow ---- */
.final-cta{ position:relative; overflow:hidden; overflow:clip; } /* hidden is the fallback where clip is unknown */
.final-cta-glow{
  position:absolute; left:68%; top:50%; width:min(900px,120%); height:120%; transform:translate(-50%,-50%);
  background:radial-gradient(ellipse 50% 50% at 50% 50%, var(--halo), transparent 70%);
  filter:blur(40px); pointer-events:none; z-index:0; opacity:.7;
}
.final-cta .container{ position:relative; z-index:1; }
.final-cta h2{ margin:0 0 14px; }
/* the small print under the button */
.final-cta-fine{ margin:18px 0 0; font-size:.8125rem; line-height:1.5; color:var(--text-3); }
.final-cta-fine a{ color:var(--text-2); text-decoration:underline; text-decoration-color:var(--line-strong); text-underline-offset:2px; }
@media (hover:hover){ .final-cta-fine a:hover{ color:var(--text); text-decoration-color:currentColor; } }
.final-cta--center .container{ display:flex; flex-direction:column; align-items:center; text-align:center; }
/* the sentence between the heading and the button */
.final-cta--center .container > p:not(.final-cta-fine){ color:var(--text-2); font-size:1.08rem; line-height:1.55; max-width:44ch; margin:0 0 28px; }
.final-cta--center .final-cta-glow{ left:50%; }
/* z-index -1 inside the container's own layer: the card's shadow and glow reach below the
   card and would otherwise be painted over the heading under it */
.final-cta-card-wrap{ position:relative; z-index:-1; width:min(360px,78vw); margin:0 auto 32px; perspective:1400px; }
.final-cta-card-glow{
  position:absolute; left:8%; right:8%; bottom:-10%; height:70%; z-index:0; pointer-events:none;
  background:radial-gradient(ellipse 60% 60% at 50% 55%, var(--halo), transparent 72%); filter:blur(36px);
}
.final-cta-card{
  position:relative; z-index:1;
  transform:rotateX(8deg) rotateY(-12deg) rotateZ(1.5deg); filter:drop-shadow(0 30px 40px rgba(0,0,0,.72));
}

/* ---- /shop/: two products, each one large link (picture, name, price, the way in).
   One under the other on phones, side by side from 768px. ---- */
.shop-hero{ padding-block:clamp(40px,7vw,80px) clamp(8px,2vw,16px); }
.shop-hero h1{ margin-bottom:14px; }
.shop-grid{ display:grid; gap:clamp(18px,3vw,28px); }
.shop-item{
  display:flex; flex-direction:column; height:100%; padding:14px; border-radius:var(--radius-lg);
  background:var(--surface); border:1px solid var(--line); box-shadow:var(--shadow);
  transition:transform .18s var(--ease-out), border-color .18s, background-color .18s;
}
.shop-item-media{ --ratio:3 / 2; border-radius:var(--radius); }
.shop-item-body{ display:grid; gap:6px; padding:18px 8px 8px; }
.shop-item-name{ font-family:var(--font-display); font-size:clamp(1.5rem,1.2vw + 1.2rem,2rem); font-weight:600; line-height:1.15; letter-spacing:-.024em; color:var(--text); }
.shop-item-price{ font-size:1.25rem; font-weight:600; font-variant-numeric:tabular-nums; color:var(--text); }
.shop-item-price small{ font-size:1rem; font-weight:400; color:var(--text-2); }
.shop-item-go{ display:inline-flex; align-items:center; gap:8px; margin-top:8px; font-weight:600; color:var(--text); }
@media (hover:hover){
  .shop-item:hover{ border-color:var(--line-control); background:var(--surface-2); }
  .shop-item:hover .btn-arrow{ transform:translateX(3px); }
}
.shop-item:active{ transform:scale(.99); }
.shop-item:focus-visible{ border-radius:var(--radius-lg); }
@media (min-width:768px){ .shop-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (prefers-reduced-motion:reduce){ .shop-item{ transition:none; } .shop-item:active{ transform:none; } }

/* ---- /profile/: the login card ---- */
.login{ display:grid; min-height:calc(100svh - var(--header-h) - 260px); align-items:center; }
.login-card{
  display:grid; gap:18px; width:100%; max-width:420px; margin-inline:auto; padding:clamp(24px,5vw,36px);
  border-radius:var(--radius-lg); background:var(--surface); border:1px solid var(--line); box-shadow:var(--shadow);
}
.login-card h1{ font-size:clamp(1.75rem,2vw + 1.2rem,2.25rem); text-align:center; }
.login-lead{ margin-top:-10px; text-align:center; color:var(--text-2); }
#login-fields,#login-in{ display:grid; gap:18px; }
#login-fields[hidden],#login-in[hidden]{ display:none; }
.login-switch{ margin:-6px 0 0; text-align:center; }
.login-switch .link{ min-height:44px; cursor:pointer; }
.login-who{ text-align:center; font-size:1.0625rem; color:var(--text-2); }
.login-who b{ color:var(--text); overflow-wrap:anywhere; }
.login-state{ margin-top:-8px; padding:10px 14px; border-radius:var(--radius-sm); border:1px solid var(--line-strong); text-align:center; font-size:var(--fs-small); color:var(--text-2); }
.login-state.is-on{ border-color:var(--ok); color:var(--ok); }
.login-msg{ margin:0; padding:12px 14px; border-radius:var(--radius-sm); background:var(--surface-2); border:1px solid var(--line-strong); font-size:var(--fs-small); line-height:1.5; color:var(--text); }

/* ---- 404 ---- */
.notfound-card{ width:min(320px,72vw); margin:32px auto 0; }
.notfound-links{ display:flex; flex-wrap:wrap; justify-content:center; gap:8px 28px; margin-top:28px; }
.notfound-links a{
  font-size:.92rem; color:var(--text-2);
  text-decoration:underline; text-decoration-color:var(--line-strong); text-underline-offset:3px;
}
@media (hover:hover){
  .notfound-links a:hover{ color:var(--text); text-decoration-color:currentColor; }
}

/* ============================================================
   7. HOMEPAGE
   ============================================================ */

/* ---- Hero: one rounded panel. A line of words on top, the picture banners under it. ---- */
.hero-wrap{ padding-block:clamp(14px,2vw,24px) clamp(8px,1.5vw,16px); }
.hero-box{
  position:relative; overflow:hidden; isolation:isolate;
  display:flex; flex-direction:column; align-items:stretch; text-align:left;
  padding:0;
  border-radius:var(--radius-lg); border:1px solid var(--line-strong); box-shadow:var(--shadow);
  --box-accent:#D9D9DE;
  --box-text:#F5F5F7; --box-line:rgba(255,255,255,.18); /* the box is dark on the light page: its text and edges do not follow the page */
}
/* the box theme: each slide names its color (data-theme, copied onto .hero-box by the homepage
   script). Silver is the default.
   A new color = one line here + data-theme on its slide. */
.hero-box[data-theme="green"]{ --box-accent:#6EFB53; }
.hero-box[data-theme="gold"]{ --box-accent:#F2C94C; }
.hero-box[data-theme="red"]{ --box-accent:#FF3B40; }
.hero-box[data-theme="teal"]{ --box-accent:#00E5FE; }
/* the line across the top: centered words on a nearly clear band, so the page shows through
   the box there (the box itself has no fill; the slides carry the dark ground) */
.hero-strip{
  margin:0; padding:13px 16px; text-align:center; text-wrap:balance;
  font-size:12px; font-weight:600; line-height:1.5; letter-spacing:.16em; text-transform:uppercase; color:var(--text);
  background:rgba(255,255,255,.05);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
@media (min-width:768px){ .hero-strip{ font-size:13px; letter-spacing:.2em; } }
/* ---- the picture banners: four pictures fill the box edge to edge, one at a time.
   The headline and buttons are painted into each picture, so the picture is a link and a
   see-through link (.hero-hit) lies over each painted button. Under 600px each slide swaps to
   its tall phone cut (<picture> in index.html), where the painted buttons are big enough to tap. ---- */
.hero-slides{ position:relative; display:grid; overflow:hidden; overflow:clip; background:#0B0B0D; } /* the fill is what shows while a banner picture loads */
/* one slide is in view; the others wait just outside the box, to the right, or to the left
   with .is-left. home.js parks the incoming slide on the side it comes from (.no-anim: no
   transition for that jump) and then both slides glide across together. */
.hero-slide{
  grid-area:1 / 1; display:flex; flex-direction:column; min-width:0;
  pointer-events:none; visibility:hidden; transform:translateX(100%);
  transition:transform .6s cubic-bezier(.22,.61,.36,1), visibility 0s linear .6s;
}
.hero-slide.is-left{ transform:translateX(-100%); }
.hero-slide.is-on{ pointer-events:auto; visibility:visible; transform:none; transition-delay:0s; }
.hero-slide.no-anim{ transition:none; }
/* only the slide in view gives the box its height: a phone cut can be taller than the others
   (--m-ratio on its .hero-art) and the box follows whichever slide is showing */
.hero-slide:not(.is-on){ position:absolute; top:0; left:0; width:100%; }
@media (prefers-reduced-motion:reduce){ .hero-slide{ transition:none; } }
.hero-art{ position:relative; aspect-ratio:1094 / 458; }
.hero-art-link{ display:block; height:100%; }
.hero-art-link:focus-visible{ outline-offset:-4px; } /* the box clips the ring otherwise */
.hero-art picture{ display:block; height:100%; }
.hero-art img{ display:block; width:100%; height:100%; object-fit:cover; }
/* a painted button's place in the picture, as % of the picture: --x/--y its top-left corner, --w/--h its size
   (--mx/--my/--mw/--mh on the tall phone cut) */
.hero-hit{ position:absolute; left:var(--x); top:var(--y); width:var(--w); height:var(--h); border-radius:var(--radius-pill); transition:background-color .18s; }
/* a painted button can be shorter than a fingertip: its tap zone is at least 44px tall */
.hero-hit::after{ content:""; position:absolute; left:0; right:0; top:50%; height:max(100%,44px); transform:translateY(-50%); }
@media (hover:hover){ .hero-hit:hover{ background:rgba(255,255,255,.16); } }
@media (max-width:599.98px){
  .hero-art{ aspect-ratio:var(--m-ratio, 720 / 1040); }
  .hero-hit{ left:var(--mx); top:var(--my); width:var(--mw); height:var(--mh); }
}
/* the arrows ride on the picture's left and right edges, halfway up */
.showcase-arrow{
  position:relative; width:44px; height:44px; flex:none; border-radius:50%; display:grid; place-items:center; cursor:pointer;
  color:var(--text); border:1px solid rgba(255,255,255,.22); background:rgba(0,0,0,.25);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
}
.showcase-arrow[hidden]{ display:none; }
@media (hover:hover){ .showcase-arrow:hover{ background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.5); } }
.showcase-arrow svg{ width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }
.hero-arrow{ position:absolute; top:calc(50% - 22px); z-index:3; background:rgba(9,9,11,.5); }
.hero-arrow--prev{ left:clamp(8px,1.2vw,16px); }
.hero-arrow--next{ right:clamp(8px,1.2vw,16px); }
@media (hover:hover){ .hero-arrow:hover{ background:rgba(9,9,11,.72); border-color:rgba(255,255,255,.6); } }
.hero-arrow:focus-visible{ border-radius:50%; outline-color:#F5F5F7; }
@media (max-width:599.98px){
  .hero-arrow{ width:38px; height:38px; top:calc(50% - 19px); }
  /* the drawn circle is 38px, the tap zone 44px */
  .hero-arrow::after{ content:""; position:absolute; left:50%; top:50%; width:44px; height:44px; margin:-22px 0 0 -22px; }
}
/* ---- Selling points: an icon, a title and one sentence each, under a hairline.
   Two across on phones, four in a row from 768px. ---- */
.features{ display:grid; gap:28px 20px; grid-template-columns:repeat(2,minmax(0,1fr)); }
.feature{ padding-top:18px; border-top:1px solid var(--line-strong); }
.feature-icon{ display:block; margin-bottom:14px; color:var(--accent); }
.feature-icon svg{ width:26px; height:26px; stroke:currentColor; fill:none; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.feature h3{ font-size:var(--fs-label); margin-bottom:4px; }
.feature p{ margin:0; max-width:30ch; font-size:.9rem; line-height:1.5; color:var(--text-2); }
@media (min-width:768px){ .features{ grid-template-columns:repeat(4,minmax(0,1fr)); gap:32px; } }

/* ---- How it works: three photo cards ---- */
.how-grid{ display:grid; gap:16px; }
.how-card{
  position:relative; padding:14px 14px 20px; border-radius:var(--radius-lg); background:var(--surface); border:1px solid var(--line); box-shadow:var(--shadow);
}
.how-n{
  position:absolute; top:24px; left:24px; z-index:3; width:30px; height:30px; border-radius:9px; display:grid; place-items:center;
  font-family:var(--font-display); font-weight:700; font-size:.9rem; color:var(--bg); background:var(--text);
}
.how-media{ margin-bottom:16px; }
.how-media--photo{ aspect-ratio:5/4; border-radius:14px; overflow:hidden; } /* the three step photos are cut to 5:4 */
.how-media--photo img{ width:100%; height:100%; object-fit:cover; }
.how-card h3{ font-size:1.1rem; margin-bottom:6px; } /* a label too; one step up from --fs-label, for a card with a photo */
.how-card p{ margin:0; color:var(--text-2); font-size:.95rem; line-height:1.5; }
@media (min-width:768px){ .how-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; } }
/* side by side, the cards share three rows (photo, title, sentence), so a title that wraps moves
   the sentence down in all three. Without subgrid each sentence follows its own title. */
@supports (grid-template-rows:subgrid){
  @media (min-width:768px){
    .how-card{ display:grid; grid-template-columns:minmax(0,1fr); grid-template-rows:subgrid; grid-row:span 3; row-gap:0; }
  }
}

/* ---- NFC explanation ---- */
.nfc-grid{ display:grid; gap:20px; }
.nfc-panel{
  border-radius:var(--radius-lg); overflow:hidden; background:#0E0E10; border:1px solid var(--line); box-shadow:var(--shadow);
}
.nfc-panel-photo{ aspect-ratio:4/3; }
.nfc-panel-photo img{ display:block; width:100%; height:100%; object-fit:cover; }
.nfc-panel-body{ padding:24px 24px 28px; }
.nfc-panel-body h3{ margin-bottom:6px; }
.nfc-panel-body h3 + p{ margin:0 0 18px; color:var(--text-2); font-size:.95rem; line-height:1.55; }
.nfc-panel-body h3 + p:last-child{ margin-bottom:0; }
.nfc-side h2{ margin-bottom:12px; }
.nfc-side .lead{ margin-bottom:22px; }
.nfc-art{ display:block; width:100%; max-width:520px; height:auto; margin-inline:auto; } /* see-through art: sits straight on the section */
@media (min-width:960px){ .nfc-grid{ grid-template-columns:1.05fr 1fr; gap:40px; align-items:center; } }

/* ---- Business: trades and what a tap opens ---- */
.industries{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px; max-width:820px; margin:0 auto 28px; }
.industries li{
  display:inline-flex; align-items:center; gap:8px; padding:10px 16px; border-radius:var(--radius-pill); font-weight:500; font-size:.95rem;
  background:var(--surface); border:1px solid var(--line);
}
.industries li::before{ content:""; width:8px; height:8px; border-radius:50%; background:var(--accent); }
.opens{ max-width:720px; margin:0 auto; text-align:center; }
.opens-label{ margin:0 0 10px; font-size:.86rem; font-weight:600; color:var(--text-3); }
.opens-list{ display:flex; flex-wrap:wrap; justify-content:center; gap:8px 6px; color:var(--text-2); font-size:.95rem; }
/* the dot follows each entry, so a wrapped line never starts with one */
.opens-list li:not(:last-child)::after{ content:"·"; margin-left:6px; color:var(--text-3); }
#business .section-cta{ margin-top:28px; display:flex; justify-content:center; }

/* ---- CTA banner ---- */
.cta-banner{
  position:relative; overflow:hidden; display:grid; gap:24px; padding:clamp(28px,5vw,52px);
  border-radius:var(--radius-lg); border:1px solid var(--line); box-shadow:var(--shadow);
  background:
    radial-gradient(55% 70% at 100% 0%, var(--halo), transparent 70%),
    linear-gradient(180deg, var(--surface-2), var(--surface));
}
.cta-banner h2{ margin-bottom:10px; }
.cta-banner p{ margin:0 0 22px; color:var(--text-2); font-size:1.05rem; }
.cta-banner-actions{ display:flex; flex-wrap:wrap; gap:12px; }
.cta-banner-art{ position:relative; min-height:150px; }
.cta-banner-art .kcard{ position:absolute; width:min(70%,300px); }
.cta-banner-art .kcard:first-child{ right:0; top:0; transform:rotate(-6deg); z-index:2; }
.cta-banner-art .kcard:last-child{ right:18%; top:38%; transform:rotate(7deg); }
@media (min-width:960px){ .cta-banner{ grid-template-columns:1.1fr 1fr; align-items:center; } .cta-banner-art{ min-height:260px; } }
@media (max-width:479.98px){ .cta-banner-actions .btn{ width:100%; } }
/* .cta-banner--center: no card art, the words and buttons in the middle */
.cta-banner--center{ grid-template-columns:minmax(0,1fr); justify-items:center; text-align:center; }
.cta-banner--center p{ max-width:52ch; margin-inline:auto; }
.cta-banner--center .cta-banner-actions{ justify-content:center; }

/* ============================================================
   8. STICKY PHONE CTA
   ============================================================ */
.sticky-cta{
  position:fixed; left:0; right:0; bottom:0; z-index:90;
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:14px var(--gutter) calc(14px + env(safe-area-inset-bottom));
  background:rgba(29,29,31,.78); -webkit-backdrop-filter:saturate(180%) blur(20px); backdrop-filter:saturate(180%) blur(20px);
  border-top:1px solid var(--line);
  transform:translateY(100%); opacity:0; visibility:hidden;
  /* visibility turns hidden only after the slide-out finishes and visible at once on the
     way in; `inert` in the markup is the main guard, this covers browsers without it */
  transition:transform .25s var(--ease-out), opacity .25s var(--ease-out), visibility 0s linear .25s;
}
.sticky-cta.is-visible{ transform:translateY(0); opacity:1; visibility:visible; transition:transform .25s var(--ease-out), opacity .25s var(--ease-out); }
.sticky-cta-price{ font-family:var(--font-display); font-size:1rem; font-weight:700; color:var(--text); font-variant-numeric:tabular-nums; }
.sticky-cta-price span{ display:block; font-family:var(--font-mono); font-weight:600; font-size:.8rem; letter-spacing:0; color:var(--text-3); }
.sticky-cta .btn{ flex:none; }
@media (prefers-reduced-motion:reduce){
  .sticky-cta{ transition:none; }
}
/* the bar would otherwise cover page content: site-v2.js sets .has-sticky on <body>
   only while the bar is shown, so pages without one carry no padding */
@media (max-width:767.98px){
  html.js body.has-sticky{ padding-bottom:88px; }
}
@media (min-width:768px){ .sticky-cta{ display:none !important; } }

/* ============================================================
   9. UTILITIES, PRESS FEEDBACK, REVEAL ON SCROLL, REDUCED MOTION
   ============================================================ */
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.mono{ font-family:var(--font-mono); }

/* everything you click answers the same way */
.design-card,.cd-layout,.rail-btn,.showcase-arrow,.faq-q{
  transition:transform .18s var(--ease-out), background-color .18s, border-color .18s, color .18s;
}
.design-card:active,.cd-layout:active{ transform:scale(.985); }
.rail-btn:active,.showcase-arrow:active{ transform:scale(.92); }
@media (prefers-reduced-motion:reduce){
  .btn:active,.btn-primary:active,.design-card:active,.cd-layout:active,
  .rail-btn:active,.showcase-arrow:active{ transform:none; }
  .btn .btn-arrow,.faq-icon::before,.faq-icon::after,.video-play-circle,.check input::before{ transition:none; }
  .option-card-face,.option-card-face::after,.qty-btn,.swatch-dot,.swatch-dot::before,.swatch-dot::after{ transition:none; }
  .option-card:active > input:not(:disabled) + .option-card-face,.qty-btn:not([aria-disabled="true"]):active,
  label.swatch:active > input:not(:disabled) + .swatch-dot{ transform:none; }
  @media (hover:hover){
    .btn:hover .btn-arrow{ transform:none; }
    .video-play:hover .video-play-circle{ transform:none; }
  }
  .btn.is-loading::after{ animation:none; } /* a still ring: the button's label says what is happening */
}

/* reveal on scroll: content is visible without JS; site-v2.js adds .is-visible */
[data-reveal]{ opacity:1; transform:none; }
html.js [data-reveal]{
  opacity:0; transform:translateY(14px);
  transition:opacity .6s var(--ease-out), transform .6s var(--ease-out);
  transition-delay:var(--d,0s);
}
html.js [data-reveal].is-visible{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){
  html.js [data-reveal]{ opacity:1; transform:none; transition:none; }
}
@media print{
  html.js [data-reveal]{ opacity:1; transform:none; } /* never print blank sections */
  .sticky-cta{ display:none !important; } /* a fixed bar would repeat on every sheet */
}