/* ================================================================
   S3XY CARDS — home.css
   The homepage's own styles. Loaded after site-v2.css, which holds
   the tokens and every shared component (gallery, compare, trust
   band, swatches, reviews, FAQ, CTA banner); nothing here restyles
   one of those, it only adds the homepage's own classes.
   ------------------------------------------------------------
   ORDER
   0. The opener: 3D cards on the concrete wall
   1. Hero and the owner's picture blocks (swipe, <picture> wrappers)
   2. #choose: the how-it-works pictures and the product panel
   3. Selling points and trades
   4. #real-work: photographs and where to see more
   5. Reviews: one at a time
   6. FAQ foot
   ================================================================ */

/* ============================================================
   0. THE OPENER: 3D CARDS ON THE CONCRETE WALL
   "Inspired by Those Who Chose Different". The wall is a picture
   behind the whole block; the cards are drawn by card3d.js into
   .show-3d, whose shape sets how large they are.
   ============================================================ */
.show-hero{
  position:relative; isolation:isolate; overflow:hidden; text-align:center; color:#F5F5F7;
  background:#0A0A0B url(/assets/images/hero-backdrop.jpg) center bottom / cover no-repeat;
  background-image:image-set(url(/assets/images/hero-backdrop.webp) type("image/webp"), url(/assets/images/hero-backdrop.jpg) type("image/jpeg"));
}
/* the wall fades into the page under it */
.show-hero::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:90px; z-index:-1; background:linear-gradient(180deg, rgba(10,10,11,0), rgba(10,10,11,.85)); }
.show-hero-in{ display:flex; flex-direction:column; align-items:center; gap:18px; padding-block:clamp(28px,4.5vw,56px) clamp(40px,6vw,72px); }
.show-title{
  margin:0; max-width:23ch; font-family:"Cormorant Garamond", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  font-weight:500; font-size:clamp(2rem,4.6vw,3.4rem); line-height:1.08; letter-spacing:.01em; color:#FFFFFF;
  /* a small, tight shadow: the wide one (0 8px 30px) painted a dark box with a visible lower edge behind the words */
  text-shadow:0 1px 2px rgba(0,0,0,.55), 0 2px 10px rgba(0,0,0,.35);
}
.show-3d{ position:relative; width:100%; aspect-ratio:21 / 9; max-height:520px; display:grid; place-items:center; }
.show-3d .card3d-canvas{
  position:absolute; top:0; left:0; width:100% !important; height:100% !important; display:block;
  /* the renderer paints a soft glow behind the cards that is larger than this box: without a feather
     it stops on a straight line at the box's edges (seen as a dark band ending under the title) */
  -webkit-mask-image:linear-gradient(180deg, transparent 0%, #000 22%, #000 80%, transparent 100%);
  mask-image:linear-gradient(180deg, transparent 0%, #000 22%, #000 80%, transparent 100%);
}
/* the picture that stands in for the cards: black line art on white, turned into light engraving on a black card */
.show-fallback{ width:auto; height:auto; max-width:min(70%, 560px); max-height:92%; border-radius:4% / 6.5%; box-shadow:0 30px 60px rgba(0,0,0,.6); filter:invert(1) brightness(.86); }
.show-3d.is-3d .show-fallback{ display:none; }
.show-nav{ display:flex; align-items:center; justify-content:center; gap:14px; margin-top:-8px; }
.show-nav[hidden]{ display:none; }
.show-arrow{
  display:grid; place-items:center; flex:none; width:44px; height:44px; padding:0; border-radius:50%; cursor:pointer;
  border:1.5px solid rgba(255,255,255,.5); background:rgba(255,255,255,.06); color:#FFFFFF;
  transition:background-color .15s, border-color .15s, transform .15s;
}
.show-arrow svg{ width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }
@media (hover:hover){ .show-arrow:hover{ background:rgba(255,255,255,.16); border-color:#FFFFFF; } }
.show-arrow:active{ transform:scale(.92); }
.show-arrow:focus-visible{ border-radius:50%; outline-color:#F5F5F7; }
.show-dots{ display:flex; flex-wrap:wrap; justify-content:center; gap:8px; max-width:min(60vw, 300px); }
.show-dots button{ position:relative; width:8px; height:8px; padding:0; border-radius:50%; background:rgba(255,255,255,.32); cursor:pointer; transition:transform .2s, background-color .2s; }
.show-dots button::after{ content:""; position:absolute; left:50%; top:50%; width:16px; height:28px; margin:-14px 0 0 -8px; }   /* a larger place to tap */
@media (hover:hover){ .show-dots button:hover{ background:rgba(255,255,255,.7); } }
.show-dots button.on{ background:#FFFFFF; transform:scale(1.5); }
.show-caption{ margin:0; min-height:3em; font-size:.95rem; line-height:1.4; color:#C7C7CC; }
.show-caption b{ display:block; font-family:var(--font-display); font-size:1.15rem; font-weight:600; letter-spacing:-.01em; color:#FFFFFF; }
.show-caption span{ display:block; }
.show-actions .btn{ box-shadow:0 18px 50px rgba(0,0,0,.55); }
.show-watch{
  font-size:.75rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:#C7C7CC;
  padding-block:6px; border-bottom:1px solid rgba(255,255,255,.35); transition:color .15s, border-color .15s;
}
@media (hover:hover){ .show-watch:hover{ color:#FFFFFF; border-bottom-color:#FFFFFF; } }
@media (max-width:860px){ .show-3d{ aspect-ratio:4 / 3; max-height:360px; } .show-hero-in{ gap:14px; } }
@media (max-width:479.98px){ .show-actions,.show-actions .btn{ width:100%; } .show-3d{ max-height:320px; } }
@media (prefers-reduced-motion:reduce){ .show-arrow,.show-dots button{ transition:none; } .show-arrow:active{ transform:none; } }

/* ============================================================
   1. HERO AND THE OWNER'S PICTURE BLOCKS
   ============================================================ */
/* a sideways swipe changes the slide (home.js); up and down still scrolls the page */
#hero-slides{ touch-action:pan-y; }

/* a <picture> around a photo that fills its frame: the frame's height has to reach the <img> */
.how-media--photo picture,.nfc-panel-photo picture,.cta-banner-art .kcard picture{ display:block; height:100%; }

/* ============================================================
   2. #CHOOSE: THE HOW-IT-WORKS PICTURES AND THE PRODUCT PANEL
   Under the section's heading: the three how-it-works pictures,
   then one large panel for both products. Its top holds a label,
   the title, one sentence and the one starting price beside the
   card's photograph, the engraving colors (choosing one tints the
   engraving) and the button.
   ============================================================ */
/* what the announce bar's /#choose link scrolls to: it sits just above the section */
.page-anchor{ display:block; scroll-margin-top:calc(var(--header-h) + 16px); }
/* the line under the section's heading: what the rest of the page is about */
.choose-sub{ margin-top:10px; font-family:var(--font-display); font-size:clamp(1.2rem,1vw + 1rem,1.6rem); font-weight:600; line-height:1.2; letter-spacing:-.02em; color:var(--text); }
.choose-sub + .lead{ margin-top:10px; }
/* the three how-it-works pictures sit under the section's heading, above the panel */
/* the three step pictures on the homepage since 2026-10-09 are square (the owner's own), shown whole, not cut to 5:4 */
.how-media--photo.how-media--square{ aspect-ratio:1; }
.how-grid--lead{ margin-bottom:clamp(20px,3vw,28px); scroll-margin-top:calc(var(--header-h) + 16px); }

/* a black panel on the gray page: inside it the page's colors are swapped for the dark set, so
   everything in the panel (text, lines, the price box, the pill, the button) follows */
.choose-card{
  --bg:#0B0B0D; --surface:#1A1A1E; --surface-2:#0B0B0D;
  --text:#F5F5F7; --text-2:#A1A1A6; --text-3:#8E8E93; --silver:#D9D9DE;
  --line:rgba(255,255,255,.1); --line-strong:rgba(255,255,255,.2); --line-control:rgba(255,255,255,.4);
  --ring:#F5F5F7; --focus:#F5F5F7;
  padding:clamp(22px,4vw,44px); border-radius:var(--radius-lg); color:var(--text);
  background:#0B0B0D; border:1px solid rgba(255,255,255,.08); box-shadow:0 18px 40px -20px rgba(0,0,0,.55);
}
/* the light button on the black panel: hover and press stay light (site-v2.css darkens them) */
@media (hover:hover){ .choose-card .btn-primary:hover{ background:#FFFFFF; } }
.choose-card .btn-primary:active{ background:#D9D9DE; }
.choose-card .swatch-dot{ box-shadow:inset 0 0 0 1px rgba(255,255,255,.3); }
.choose-card-top{ display:grid; gap:clamp(24px,5vw,40px); align-items:center; }
.choose-card-copy{ min-width:0; }
.choose-pill{
  display:inline-flex; align-items:center; min-height:32px; padding:0 14px; border-radius:var(--radius-pill);
  background:var(--text); color:var(--surface-2); font-size:.8125rem; font-weight:600; line-height:1; letter-spacing:.01em;
}
.choose-card-title{ margin-top:16px; font-size:clamp(2.1rem,3.6vw + 1rem,3.5rem); font-weight:700; line-height:1.02; letter-spacing:-.035em; }
.choose-card-lead{ margin-top:12px; max-width:40ch; font-size:clamp(1.05rem,.5vw + .95rem,1.25rem); line-height:1.45; color:var(--text-2); }
/* the one price: "Starting at $9.99 per card" */
.choose-start{
  display:inline-flex; flex-wrap:wrap; align-items:baseline; gap:4px 10px; margin-top:clamp(18px,3vw,26px); padding:14px 20px;
  border-radius:var(--radius); background:var(--surface); border:1px solid var(--line); color:var(--text);
}
.choose-start-from{ font-size:1rem; font-weight:600; }
.choose-amount{
  font-family:var(--font-display); font-size:clamp(2.1rem,1.6vw + 1.7rem,2.75rem); font-weight:700; line-height:1;
  letter-spacing:-.03em; font-variant-numeric:tabular-nums;
}
.choose-per{ color:var(--text-2); }
/* the card's photograph, the colors under it, then the button. There is one photograph per engraving color
   (the owner's own, square, since 2026-10-08), stacked in .choose-shot: silver shows, and the one whose
   color is picked fades in over it. No script. */
.choose-card-art{ display:grid; justify-items:center; gap:14px; min-width:0; }
.choose-shot{
  position:relative; width:100%; max-width:480px; aspect-ratio:1 / 1; overflow:hidden; isolation:isolate;
  border-radius:var(--radius); background:#3A3A3D; box-shadow:0 0 0 1px rgba(255,255,255,.1);
}
.choose-shot img{ position:absolute; top:0; left:0; display:block; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity .3s; }
.choose-shot img[data-color="silver"]{ opacity:1; }
.choose-card:has(input[value="gold"]:checked) .choose-shot img[data-color="gold"],
.choose-card:has(input[value="red"]:checked) .choose-shot img[data-color="red"],
.choose-card:has(input[value="green"]:checked) .choose-shot img[data-color="green"],
.choose-card:has(input[value="blue"]:checked) .choose-shot img[data-color="blue"]{ opacity:1; z-index:1; }
@media (prefers-reduced-motion:reduce){ .choose-shot img{ transition:none; } }
.choose-card-art .choose-colors{ display:grid; justify-items:center; gap:2px; }
.choose-card-art .choose-colors-label{ padding:0; font-size:var(--fs-small); font-weight:600; line-height:1.4; text-align:center; color:var(--text); }
.choose-card-art .swatches{ justify-content:center; }
/* the dots in one row on a 360px phone (seven when this was written, five since 2026-10-08): each 40px wide there (and still 55px tall to tap) */
@media (max-width:420px){ .choose-card-art .swatches{ flex-wrap:nowrap; gap:0; } .choose-card-art .swatch{ min-width:40px; } }
.choose-card-art .choose-actions{ justify-items:center; justify-content:center; padding-top:4px; }

/* the way in: the button across the column on phones with the link under it */
.choose-actions{ display:grid; justify-items:center; gap:4px; width:100%; }
.choose-actions .btn{ width:100%; }
@media (min-width:600px){
  .choose-actions{ display:flex; flex-wrap:wrap; align-items:center; justify-items:normal; gap:8px 24px; width:auto; }
  .choose-actions .btn{ width:auto; }
}
@media (min-width:900px){
  .choose-card-top{ grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); }
}

/* ============================================================
   2b. #COMPARE: WHY CHOOSE US
   The shared .compare table with two kinds of cell: ours carries
   a tick and the full text color, the typical card's a cross and
   the quiet one. The mark is an icon as well as a color.
   ============================================================ */
.why-compare{ max-width:980px; margin-inline:auto; }
.why-compare .why-yes,.why-compare .why-no{ position:relative; padding-left:44px; }
.why-compare .why-yes{ font-weight:500; color:var(--text); background:rgba(255,255,255,.035); }
.why-compare .why-no{ color:var(--text-2); }
.why-compare .why-yes::before,.why-compare .why-no::before{
  content:""; position:absolute; left:16px; top:15px; width:18px; height:18px;
}
.why-compare .why-yes::before{ background:var(--ok); -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.8' 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.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 8'/%3E%3C/svg%3E") center/contain no-repeat; }
.why-compare .why-no::before{ background:var(--err); -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.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.5 6.5l11 11M17.5 6.5l-11 11'/%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.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.5 6.5l11 11M17.5 6.5l-11 11'/%3E%3C/svg%3E") center/contain no-repeat; }
.why-compare .compare-head .compare-cell:nth-child(2){ background:rgba(255,255,255,.035); }
@media (min-width:768px){
  .why-compare .why-yes,.why-compare .why-no{ padding-left:54px; }
  .why-compare .why-yes::before,.why-compare .why-no::before{ left:24px; top:21px; }
}
.why-fine{ margin-top:14px; text-align:center; font-size:.8125rem; line-height:1.5; color:var(--text-3); }
.why-cta{ display:flex; justify-content:center; margin-top:24px; }
@media (max-width:479.98px){ .why-cta .btn{ width:100%; } }
@media (forced-colors:active){
  .why-compare .why-yes::before,.why-compare .why-no::before{ forced-color-adjust:none; background:CanvasText; }
}

/* ============================================================
   3. SELLING POINTS AND TRADES
   .features--plain: the four points as a plain row under a hairline
   each, an icon without a tile behind it. Two across on phones.
   ============================================================ */
/* the points take their space from the sections around them. The hero brings next to none, so
   straight under it (#choose taken out, only its anchor left) they keep their own distance. */
.page-anchor + .why{ padding-top:clamp(40px,6vw,72px); }
.features--plain{ gap:28px 20px; }
.features--plain .feature{ padding:18px 0 0; border:0; border-top:1px solid var(--line-strong); border-radius:0; background:none; box-shadow:none; }
.features--plain .feature-icon{ display:block; width:auto; height:auto; margin-bottom:14px; border-radius:0; background:none; }
.features--plain .feature-icon svg{ width:26px; height:26px; stroke-width:1.7; }
.features--plain .feature p{ max-width:30ch; }
@media (min-width:768px){ .features--plain{ gap:32px; } }

/* "One tap can open": the dot follows each entry, so a wrapped line never starts with one */
.opens-list--trail li + li::before{ content:none; }
.opens-list--trail li:not(:last-child)::after{ content:"·"; margin-left:6px; color:var(--text-3); }

/* ============================================================
   4. #REAL-WORK: PHOTOGRAPHS AND WHERE TO SEE MORE
   Three photographs of cards we engraved: the first one large, the
   other two beside it from 960px (under it, side by side, below
   that). Then the links to the video and to Facebook and Instagram.
   ============================================================ */
.realwork-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px 14px; }
.realwork-shot{ margin:0; min-width:0; }
.realwork-shot--lead{ grid-column:1 / -1; }
.realwork-links{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin-top:clamp(24px,4vw,36px); }
.realwork-links .btn{ padding-inline:16px; }
.realwork-links .btn:first-child{ grid-column:1 / -1; }
.realwork-icon{ flex:none; width:18px; height:18px; fill:currentColor; }
.realwork-icon.is-line{ fill:none; stroke:currentColor; stroke-width:1.8; }
.realwork-icon .is-dot{ fill:currentColor; stroke:none; }
@media (min-width:600px){
  .realwork-links{ display:flex; flex-wrap:wrap; }
  .realwork-links .btn{ padding-inline:26px; }
}
@media (min-width:960px){
  /* All three stay 4:3. The large photograph is as tall as the two small ones plus what lies
     between them (--between: one caption line, 36px, and the gap), so it is twice as wide as a
     small one plus 4/3 of that; the second column's width follows from it. */
  .realwork-grid{
    --gap:20px; --between:calc(36px + var(--gap));
    grid-template-columns:minmax(0,1fr) calc((100% - var(--gap)) / 3 - var(--between) * 4 / 9); gap:var(--gap);
  }
  /* should a small caption wrap, the large photograph grows by that much rather than end short */
  .realwork-shot--lead{ grid-column:auto; grid-row:span 2; display:flex; flex-direction:column; }
  .realwork-shot--lead .photo-card{ flex:1 0 auto; }
}

/* ============================================================
   5. REVIEWS: ONE AT A TIME
   .home-reviews is the shared review block (.reviews) shown as a
   carousel: one card fills the row and home.js slides to the next.
   Shown only while it holds a card. The pause button sits beside
   the dots.
   ============================================================ */
.home-reviews{ margin-top:clamp(48px,7vw,80px); padding-top:clamp(40px,6vw,64px); border-top:1px solid var(--line); }
.home-reviews .section-head{ margin-bottom:clamp(20px,3vw,28px); }
.home-reviews .reviews-track{ max-width:760px; margin-inline:auto; padding-inline:0; scroll-padding-inline:0; gap:24px; }
.home-reviews .review-card{ flex-basis:100%; padding:clamp(22px,4vw,36px); }
.home-reviews .review-quote{ font-size:clamp(1.125rem,.7vw + 1rem,1.375rem); line-height:1.5; }
/* the line over the demonstration (?reviews=demo): says plainly that these are not reviews */
.reviews-demo-note{
  max-width:760px; margin:0 auto clamp(20px,3vw,28px); padding:10px 16px; border-radius:var(--radius-sm);
  border:1px dashed var(--warn); font-size:var(--fs-small); font-weight:600; line-height:1.45; text-align:center; color:var(--warn);
}
.reviews-demo-note span{ display:block; margin-top:2px; font-weight:400; color:var(--text-2); }
.reviews-toggle{
  flex:none; display:grid; place-items:center; width:44px; height:44px; padding:0; border-radius:50%; cursor:pointer;
  border:1px solid var(--line-strong); background:var(--surface); color:var(--text); -webkit-tap-highlight-color:transparent;
  transition:transform .18s var(--ease-out), background-color .18s, border-color .18s;
}
.reviews-toggle svg{ width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }
.reviews-toggle .icon-play,.reviews-toggle.is-stopped .icon-pause{ display:none; }
.reviews-toggle.is-stopped .icon-play{ display:block; fill:currentColor; stroke-width:1.6; }
.reviews-toggle:focus-visible{ border-radius:50%; }
@media (hover:hover){ .reviews-toggle:hover{ background:var(--surface-2); border-color:var(--text-2); } }
.reviews-toggle:active{ transform:scale(.92); }
@media (min-width:600px){
  /* a review with a photo of the card: the photo beside the words */
  .home-reviews .review-card.has-photo{ display:grid; grid-template-columns:minmax(0,220px) minmax(0,1fr); column-gap:28px; align-items:start; align-content:start; }
  .home-reviews .review-card.has-photo > *{ grid-column:2; justify-self:start; }
  .home-reviews .review-card.has-photo > .review-photo{ grid-column:1; grid-row:1 / span 5; }
}
@media (prefers-reduced-motion:reduce){
  /* the row stands still, so there is nothing to pause */
  .reviews-toggle{ display:none; }
}

/* ============================================================
   6. FAQ FOOT
   ============================================================ */
.faq-foot--next{ margin-top:8px; }

/* #nfc panel: the words that sit above the photo ("Custom engraving") */
.nfc-panel-body--top{ padding-bottom:22px; }
/* #nfc panel: the engraved cards that fade in over the blank one (added by the script at the foot of index.html) */
.nfc-panel-photo{ position:relative; overflow:hidden; }
.nfc-rot{ position:absolute; top:0; left:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity .7s ease; }
.nfc-rot.on{ opacity:1; }
@media (prefers-reduced-motion:reduce){ .nfc-rot{ transition:none; } }

/* a how-it-works card whose title and line are one sentence: the first words bold, the rest plain */
.how-card h3.how-one{ margin-bottom:0; font-weight:400; line-height:1.4; }
.how-card h3.how-one b{ font-weight:700; }
.how-card h3.how-one span{ color:var(--text-2); }

/* "One card. Endless possibilities." on its own (above "Now with Color"): the words beside the icon art on a wide screen */
.nfc-grid.nfc-grid--side{ grid-template-columns:minmax(0,1fr); }
.nfc-grid--side .nfc-side{ display:grid; gap:20px; align-items:center; }
.nfc-grid--side .nfc-side .lead{ margin-bottom:0; }
@media (min-width:960px){ .nfc-grid--side .nfc-side{ grid-template-columns:1fr 1fr; gap:40px; } }
/* the "Custom engraving / NFC technology" panel on its own: one column in the middle */
.nfc-solo .nfc-panel{ max-width:760px; margin-inline:auto; }
/* that block sits close to its neighbours, on the same ground as them (no lighter band): the three sections
   read as one stretch of the page. sec-close = little room above and below; -b / -t = only below / only above. */
.section.sec-close{ padding-block:clamp(8px,1.5vw,16px); }
.section.sec-close-b{ padding-bottom:clamp(16px,2.5vw,28px); }
.section.sec-close-t{ padding-top:clamp(16px,2.5vw,28px); }
.nfc-grid--side .nfc-art{ max-width:440px; }