/* ============================================================
   S3XY CARDS — tesla-page.css
   Product page only (/tesla-key-card/).
   Loads after engraving.css and eng-motion.css, so everything
   here is an override or an addition. Dark theme only:
   black, concrete gray, silver (#C0C0C8), white.
   ------------------------------------------------------------
   1. Shared bits      4. How it works
   2. Hero             5. Pricing / details
   3. Community rail   6. FAQ / final CTA
   ============================================================ */

/* ============ 1. SHARED ============
   Motion lives in eng-motion.css (.reveal stagger via --i, data-etch,
   data-tilt, data-magnetic, data-parallax). Nothing here re-implements it. */

/* page rhythm: a touch tighter than the site default so the sections read as one film */
main .section{ padding-block:clamp(52px,7vw,88px); }

/* ============ 2. HERO ============ */
.hero.s3xy-hero{ background-image:none; background-color:#08080A; }

.s3xy-hero .hero-bg{
  position:absolute; left:-4%; right:-4%; top:-6%; bottom:-6%;
  /* the same lit concrete stage as the front page */
  background:#08080A url(/assets/images/hero-backdrop.jpg) center bottom / cover no-repeat;
  will-change:transform; z-index:0; pointer-events:none;
}
/* scrim: heavy on the left so the copy reads; a soft pool under the live card so the
   photographed card behind it sinks back into the studio instead of competing with it */
.s3xy-hero .hero-bg::after{
  content:""; position:absolute; inset:0;
  /* lighter scrim: a little shade behind the copy on the left, the room stays visible */
  background:
    linear-gradient(97deg, rgba(8,8,10,.72) 0%, rgba(8,8,10,.5) 34%, rgba(8,8,10,.12) 62%, rgba(8,8,10,.08) 100%),
    linear-gradient(to bottom, rgba(8,8,10,.55) 0%, rgba(8,8,10,0) 26%, rgba(8,8,10,0) 68%, rgba(8,8,10,.55) 100%);
}
@media (max-width:860px){
  .s3xy-hero .hero-bg{ background-image:url(/assets/images/hero-backdrop-m.jpg); background-position:center bottom; }
  .s3xy-hero .hero-bg::after{
    background:
      linear-gradient(to bottom, rgba(8,8,10,.6) 0%, rgba(8,8,10,.35) 30%, rgba(8,8,10,.35) 62%, rgba(8,8,10,.7) 100%);
  }
}
@media (prefers-reduced-motion:reduce){ .s3xy-hero .hero-bg{ transform:none !important; } }

/* two columns: copy left (about 560px), the live card right, proof line across the bottom */
.hero.hero-min.s3xy-hero .wrap{
  display:grid; align-items:center;
  grid-template-columns:minmax(0, 528px) minmax(0, 1fr);
  gap:clamp(24px,3vw,38px) clamp(24px,3vw,44px);
  padding:clamp(52px,6.5vw,88px) 0 clamp(40px,5vw,64px);
  text-align:left;
}
.s3xy-hero .hero-copy{ display:flex; flex-direction:column; align-items:flex-start; gap:clamp(14px,1.6vw,22px); min-width:0; }
.s3xy-hero .hero-stage{ display:flex; flex-direction:column; align-items:center; gap:clamp(14px,1.8vw,22px); min-width:0; }
.s3xy-hero .hero-proof{ grid-column:1 / -1; justify-content:flex-start; }

/* brand row: the S3XY Cards wordmark over "by Engraving By Silva" */
.s3xy-hero .hero-brand{ margin:0; text-align:left; display:flex; flex-direction:column; align-items:flex-start; gap:10px; }
.s3xy-hero .hero-wordmark{ width:220px; height:auto; opacity:.96; }
.s3xy-hero .hero-brand-sub{ letter-spacing:.24em; color:var(--gray-5); }

.s3xy-hero h1{ text-align:left; max-width:none; margin:0; font-size:clamp(2.3rem, 4.6vw, 3.9rem); }
.s3xy-hero .lead{ text-align:left; margin:0; max-width:48ch; font-size:1.06rem; color:var(--gray-3); }
.s3xy-hero .hero-copy .btn{ align-self:flex-start; }

/* the live 3D card fills the right column and sits over the studio floor */
.hero-min.s3xy-hero .hero-3d.product{
  width:100%; max-width:620px; aspect-ratio:3/2; max-height:none; margin:0;
}
.s3xy-hero .hero-crescendo{ margin:0; }
.s3xy-hero .hero-crescendo .c1{ color:var(--gray-3); }

/* between 960 and 1180 the copy column gives some width back to the card */
@media (min-width:961px) and (max-width:1180px){
  .hero.hero-min.s3xy-hero .wrap{ grid-template-columns:minmax(0, 48%) minmax(0, 1fr); }
}
@media (max-width:960px){
  .hero.hero-min.s3xy-hero .wrap{
    grid-template-columns:1fr; justify-items:center; text-align:center;
    padding:clamp(34px,6vw,56px) 0 clamp(44px,7vw,72px);
  }
  /* justify-items:center shrink-wraps grid items, so claim the full row explicitly */
  .s3xy-hero .hero-copy, .s3xy-hero .hero-stage{ width:100%; }
  .s3xy-hero .hero-copy{ align-items:center; }
  .s3xy-hero .hero-brand{ align-items:center; text-align:center; }
  .s3xy-hero h1{ text-align:center; max-width:15ch; }
  .s3xy-hero .lead{ text-align:center; max-width:56ch; margin-inline:auto; }
  .s3xy-hero .hero-copy .btn{ align-self:center; }
  .s3xy-hero .hero-proof{ justify-content:center; }
  .hero-min.s3xy-hero .hero-3d.product{ aspect-ratio:3/2; max-width:560px; }
}
@media (max-width:640px){
  .s3xy-hero .hero-wordmark{ width:min(74vw, 196px); }
  .s3xy-hero h1{ font-size:clamp(2rem, 9vw, 2.8rem); }
  .hero-min.s3xy-hero .hero-3d.product{ aspect-ratio:4/3; max-height:290px; }
  .s3xy-hero .hero-proof{ gap:8px 16px; font-size:.84rem; }
}

/* trust strip: a little more air, silver icons */
.strip.after-hero .wrap{ padding:26px 0; }
.strip.after-hero svg{ stroke:#C0C0C8; }

/* ============ 3. COMMUNITY RAIL ============ */
main .section.community{ padding-bottom:clamp(38px,4.6vw,58px); }
.community-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:24px; }
.community-head h2{ margin-bottom:14px; }
.community-head .lead{ margin:0; max-width:56ch; }
.community-nav{ display:flex; gap:10px; flex:0 0 auto; padding-bottom:4px; }
.community-nav .nav-arrow{ border-color:rgba(255,255,255,.28); background:rgba(255,255,255,.04); }
.community-nav .nav-arrow:disabled{ opacity:.3; cursor:default; transform:none; background:rgba(255,255,255,.03); }

.rail-wrap{ position:relative; margin-top:clamp(24px,3vw,34px); }
.rail{
  list-style:none; margin:0; display:flex; gap:16px;
  padding-inline:max(var(--pad), calc((100% - var(--shell)) / 2));
  padding-block:4px 6px;
  overflow-x:auto; overflow-y:hidden;
  scroll-snap-type:x mandatory;
  scroll-padding-inline:max(var(--pad), calc((100% - var(--shell)) / 2));
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none; -ms-overflow-style:none;
  overscroll-behavior-x:contain;
}
.rail::-webkit-scrollbar{ height:0; display:none; }
.cdesign{ flex:0 0 auto; width:clamp(228px, 25vw, 316px); scroll-snap-align:start; }
.cdesign-card{
  position:relative; aspect-ratio:1013 / 638; border-radius:14px; overflow:hidden;
  background:#0B0B0C; border:1px solid var(--line);
  box-shadow:0 18px 40px rgba(0,0,0,.45);
  transition:border-color .25s ease, transform .35s cubic-bezier(.2,.8,.2,1);
}
.cdesign-card::after{
  content:""; position:absolute; inset:0; border-radius:13px; pointer-events:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12);
}
.cdesign-card img{ width:100%; height:100%; object-fit:cover; display:block; }
/* the source art is black line work on white; invert it so it reads like the engraved card */
.cdesign-card img.inv{ filter:invert(1) brightness(.88); }
.cdesign:hover .cdesign-card{ border-color:var(--line-2); transform:translateY(-3px); }
.cdesign-cap{ margin:12px 2px 0; display:grid; gap:2px; }
.cdesign-cap strong{ font-family:var(--font-head); font-size:1rem; letter-spacing:-.01em; color:var(--ink); }
.cdesign-cap span{ font-size:.85rem; color:var(--gray-5); }

.community-foot{ display:flex; align-items:center; gap:18px; flex-wrap:wrap; margin-top:clamp(22px,3vw,30px); }
.community-foot .hero-hint{ margin:0; }

@media (max-width:760px){
  .community-head{ flex-direction:column; align-items:stretch; gap:16px; }
  .community-nav{ display:none; }
  .cdesign{ width:min(78vw, 300px); }
}
@media (prefers-reduced-motion:reduce){
  .rail{ scroll-behavior:auto; }
  .cdesign-card{ transition:none; }
}

/* ============ 4. HOW IT WORKS ============ */
main .section#how{ padding-bottom:clamp(26px,3.4vw,44px); }
.pstep-icon{ background:linear-gradient(160deg, #F2F2F4, #C0C0C8); color:#0A0A0B; }
#how .trust-line{ margin:clamp(34px,4.4vw,52px) 0 0; }

/* ============ 5. PRICING / DETAILS ============ */
.pricing-sec .prices{ max-width:860px; gap:20px; align-items:stretch; }
.pricing-sec .price{
  background:linear-gradient(180deg, rgba(26,26,30,.94), rgba(16,16,19,.94));
  border-color:var(--line-2); border-radius:22px; padding:22px 24px 26px;
  /* property list only: eng-motion owns the duration so data-tilt stays snappy */
  transition-property:opacity, transform, filter, border-color, box-shadow;
}
.pricing-sec .price:hover{ border-color:rgba(192,192,200,.55); box-shadow:0 26px 60px rgba(0,0,0,.5); }
.pricing-sec .price.featured{ border-color:rgba(242,242,244,.5); }
.pricing-sec .price h3{ font-size:1.22rem; margin-bottom:4px; }
.pricing-sec .price .who{ min-height:3.05em; }
.pricing-sec .price .amt{ font-size:2.8rem; }
.pricing-sec .price .btn{ width:100%; }
.pricing-sec .badge{ background:linear-gradient(90deg, #F2F2F4, #C0C0C8); color:#0A0A0B; }

.price-visual{
  position:relative; border-radius:14px; background:#0B0B0C; border:1px solid var(--line);
  padding:18px; margin:0 0 20px; overflow:hidden;
}
.price-visual::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(120% 90% at 50% 0%, rgba(255,255,255,.07), rgba(255,255,255,0) 62%);
}
.price-visual .pv-card{ position:relative; }
.price-visual .pv-card svg{ width:100%; height:auto; display:block; border-radius:6px; }
.price-visual.two{ display:grid; padding:22px 24px; }
.price-visual.two .pv-card{ grid-area:1 / 1; }
.price-visual.two .back{ transform:translate(10%, -10%) scale(.78); opacity:.5; }
.price-visual.two .front{ transform:translate(-6%, 7%) scale(.86); }

.get{
  max-width:860px; margin:22px auto 0; padding:24px 26px 26px;
  background:rgba(18,18,21,.8); border:1px solid var(--line); border-radius:var(--r-lg);
}
.get h3{
  font-family:var(--font-mono); font-size:.72rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--gray-5); font-weight:600; margin:0 0 16px;
}
.get ul{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:12px 26px; }
.get li{ display:grid; grid-template-columns:16px 1fr; gap:12px; font-size:.94rem; color:var(--gray-7); line-height:1.5; }
.get li::before{
  content:""; width:16px; height:16px; margin-top:4px; border-radius:50%;
  background:#C0C0C8 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230A0A0B' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 8'/%3E%3C/svg%3E") center/10px no-repeat;
}
@media (max-width:720px){ .get ul{ grid-template-columns:1fr; } }

main .section.pricing-sec{ padding-bottom:clamp(34px,4.2vw,54px); }
main .section.details-sec{ padding-top:0; padding-bottom:clamp(46px,6vw,80px); }
.details-sec .assure{ border-color:var(--line-2); }
.details-sec .assure-icon{ border-color:rgba(192,192,200,.35); color:#C0C0C8; }

/* ============ 6. FAQ / SHARE / FINAL CTA ============ */
.faq-laser{ border-top:0; }
.faq-laser details{ border-bottom:0; position:relative; }
.faq-laser details::before,
.faq-laser details::after{
  content:""; position:absolute; left:0; right:0; height:1px; pointer-events:none;
  background:linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.16) 10%, rgba(255,255,255,.16) 90%, rgba(255,255,255,0));
}
.faq-laser details::before{ top:0; }
.faq-laser details::after{ bottom:0; }
.faq-laser details:not(:first-child)::before{ display:none; }
.faq-laser details[open]::after{
  background:linear-gradient(90deg, rgba(255,255,255,0), rgba(192,192,200,.6) 10%, rgba(255,255,255,.85) 50%, rgba(192,192,200,.6) 90%, rgba(255,255,255,0));
}
.faq-laser summary{ transition:color .2s ease; }
.faq-laser summary:hover{ color:#FFFFFF; }
.faq-laser summary::after{ border-color:#C0C0C8; }

.final-cta{
  position:relative; text-align:center;
  background:rgba(9,9,11,.82);
  border-top:1px solid rgba(255,255,255,.07);
}
.final-cta::before{
  content:""; position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:min(680px, 82%); height:1px;
  background:linear-gradient(90deg, rgba(255,255,255,0), rgba(192,192,200,.6) 20%, rgba(255,255,255,.9) 50%, rgba(192,192,200,.6) 80%, rgba(255,255,255,0));
}
.final-cta .wrap{ display:grid; justify-items:center; gap:16px; position:relative; }
.final-mark{ width:160px; height:auto; opacity:.9; margin:0 auto 10px; }
.final-cta h2{ margin:0; font-size:clamp(2rem, 5vw, 3.1rem); }
.final-cta p{ margin:0; color:var(--gray-3); max-width:46ch; }
.final-cta .btn{ margin-top:6px; }


/* FAQ: the label is the headline */
.faq-title{ font-size:clamp(2.6rem, 6vw, 4.2rem); letter-spacing:.04em; margin-bottom:6px; }
.faq-lead{ margin:0 auto 30px; }

/* Facebook handle icon */
.share .handle svg{ width:18px; height:18px; flex:0 0 auto; }