/* ============================================================================
   GoogleViews — Page & section layouts
   ========================================================================= */

/* ------------------------------------------------------------------ HERO */
.hero__grid{
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(32px,5vw,64px);
  align-items:center;
}
@media (max-width:1060px){
  .hero__grid{grid-template-columns:minmax(0,1fr);gap:clamp(40px,7vw,64px)}
  .hero__copy{max-width:680px}
}/* --------------------------------------------------------- SPLIT SECTIONS */
.split{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(36px,5.5vw,80px);
  align-items:center;
}
.split--reverse .split__visual{order:-1}
@media (max-width:940px){
  .split{grid-template-columns:minmax(0,1fr);gap:clamp(36px,6vw,52px)}
  .split--reverse .split__visual{order:0}
}
.split__visual{display:flex;justify-content:center}

/* -------------------------------------------------------- ANALOGY (NFC) */
.analogy{width:100%;max-width:460px}
.analogy__row{
  display:flex;align-items:center;gap:16px;
  margin-top:var(--s-6);
}
.analogy__row h4{margin-bottom:2px}
.analogy__eq{
  display:flex;align-items:center;gap:14px;
  margin:var(--s-6) 0 0;
  padding-left:6px;
}
.analogy__eq span{flex:1;height:1px;background:var(--border)}
.analogy__eq em{
  font-style:normal;font-size:.78rem;font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;
  background-image:var(--gradient-gemini-h);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
  white-space:nowrap;
}
.analogy__note{
  display:flex;gap:12px;align-items:flex-start;
  margin-top:var(--s-7);padding-top:var(--s-6);
  border-top:1px solid var(--border);
  color:var(--text-2);
}
.analogy__note .spark{margin-top:4px;font-size:1.05rem}

/* ---------------------------------------------------------------- CALLOUT */
.callout{
  display:flex;gap:clamp(18px,2.4vw,26px);
  align-items:flex-start;
  padding:clamp(24px,3vw,34px);
  border-radius:var(--r-xl);
  background:var(--surface);
  border:1px solid var(--border);
}
@media (max-width:560px){.callout{flex-direction:column;gap:var(--s-5)}}

/* -------------------------------------------------------------- NOTE BOX */
.note-box{
  display:flex;gap:13px;align-items:flex-start;
  padding:18px 20px;
  border-radius:var(--r-lg);
  background:var(--surface-2);
  color:var(--text-2);
}
.note-box svg{flex:none;margin-top:2px;color:var(--tertiary)}

/* -------------------------------------------------------- PRODUCT STAGES */
.product-stage{
  display:flex;align-items:center;justify-content:center;
  height:236px;
  margin:calc(-1 * clamp(24px,2.6vw,32px)) calc(-1 * clamp(24px,2.6vw,32px)) 0;
  padding:clamp(26px,3.4vw,38px) clamp(24px,3vw,34px);
  background:
    radial-gradient(120% 100% at 50% 0%,var(--surface-3),transparent 72%),
    var(--surface-1);
  border-bottom:1px solid var(--border);
  overflow:hidden;
}
.product-stage>*{
  transform:rotate(-6deg) scale(.94);
  transition:transform var(--d-med) var(--spring-spatial);
}
.card--hover:hover .product-stage>*{transform:rotate(-3deg) scale(1)}
.product-stage .rcard{width:min(100%,196px)}
.product-stage .rcard-stand{width:min(100%,178px)}
.product-stage .rcard--sticker{width:min(100%,168px)}


/* -------------------------------------------------------------- CTA PANEL */
.cta-panel{
  position:relative;
  border-radius:var(--r-2xl);
  overflow:hidden;
  background:var(--gradient-gemini);
  isolation:isolate;
}
.cta-panel__aura{
  position:absolute;inset:-40% -10%;
  background:
    radial-gradient(38% 46% at 22% 26%,rgba(255,255,255,.42),transparent 62%),
    radial-gradient(34% 40% at 82% 74%,rgba(249,171,0,.42),transparent 64%),
    radial-gradient(30% 38% at 62% 8%,rgba(52,168,83,.30),transparent 62%);
  filter:blur(28px);
  animation:ctaDrift 18s var(--ease-standard) infinite alternate;
}
@keyframes ctaDrift{
  from{transform:translate3d(0,0,0) scale(1)}
  to{transform:translate3d(-4%,3%,0) scale(1.12)}
}
.cta-panel__inner{
  position:relative;z-index:1;
  padding:clamp(44px,6.5vw,84px) clamp(24px,5vw,64px);
  text-align:center;
}
.cta-panel__inner .badge .spark{background-color:#fff}

/* ------------------------------------------------------------- PAGE HERO
   Compact hero used on the interior pages.                                */
.page-hero{
  position:relative;
  padding-top:calc(var(--nav-h) + clamp(48px,6vw,84px));
  padding-bottom:clamp(40px,5vw,64px);
}
.page-hero__inner{max-width:820px;position:relative;z-index:1}
.page-hero .lead{margin-top:var(--s-6)}
.breadcrumb{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  font-size:.85rem;color:var(--text-3);margin-bottom:var(--s-6);
}
.breadcrumb a:hover{color:var(--text)}
.breadcrumb svg{width:14px;height:14px;opacity:.6}

/* ---------------------------------------------------------- MISC HELPERS */
.pill-row{display:flex;flex-wrap:wrap;gap:10px}
.pill{
  display:inline-flex;align-items:center;gap:8px;
  padding:9px 16px;border-radius:var(--r-full);
  background:var(--surface-2);
  font-size:.9rem;font-weight:500;color:var(--text-2);
}
.pill svg{width:16px;height:16px;flex:none;color:var(--tertiary)}

.kbd-note{
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 14px;border-radius:var(--r-full);
  background:var(--surface-2);color:var(--text-2);
  font-size:.85rem;
}

/* Two-column prose lists used on the deeper pages */
.prose-grid{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(20px,3vw,36px);
}
@media (max-width:720px){.prose-grid{grid-template-columns:minmax(0,1fr)}}

/* Numbered device compatibility table */
.compat{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  font-size:.96rem;
  overflow:hidden;
  border-radius:var(--r-xl);
  border:1px solid var(--border);
}
.compat th,.compat td{
  padding:16px 20px;
  text-align:left;
  border-bottom:1px solid var(--border);
  vertical-align:top;
}
.compat thead th{
  background:var(--surface-2);
  font-family:var(--font-display);
  font-weight:600;font-size:.88rem;
  letter-spacing:-.01em;
  color:var(--text);
}
.compat tbody tr:last-child td{border-bottom:none}
.compat td:first-child{font-weight:600;color:var(--text);white-space:nowrap}
.compat .ok{color:var(--tertiary);font-weight:600}
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}

.form-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--s-5);
}
.form-grid .field--full{grid-column:1 / -1}
@media (max-width:620px){.form-grid{grid-template-columns:minmax(0,1fr)}}/* Pricing page comparison strip */
.price-note{
  display:flex;gap:13px;align-items:flex-start;
  padding:20px 24px;
  border-radius:var(--r-xl);
  background:var(--surface-2);
  color:var(--text-2);
}
.price-note svg{flex:none;margin-top:2px;width:21px;height:21px;color:var(--primary)}

.addon{
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:18px 22px;
  border-radius:var(--r-lg);
  background:var(--surface);
  border:1px solid var(--border);
}
.addon+.addon{margin-top:12px}
.addon b{font-family:var(--font-display);white-space:nowrap}
@media (max-width:560px){
  .addon{flex-direction:column;align-items:flex-start;gap:8px}
}

/* ------------------------------------------------------- ANSWER PANEL
   The single-sentence definition at the top of the NFC guide.            */
.answer-panel{
  position:relative;
  padding:clamp(28px,4vw,52px);
  border-radius:var(--r-xl-inc);
  background:var(--surface-1);
  border:1px solid var(--border);
  overflow:hidden;
}
.answer-panel::before{
  content:"";
  position:absolute;inset:0 auto 0 0;width:5px;
  background:var(--gradient-gemini);
}
.answer-panel__label{
  display:block;
  font-size:.775rem;font-weight:600;letter-spacing:.09em;text-transform:uppercase;
  color:var(--text-3);margin-bottom:var(--s-5);
}
.answer-panel__text{
  font-family:var(--font-display);
  font-size:clamp(1.4rem,2.8vw,2.05rem);
  font-weight:500;line-height:1.32;letter-spacing:-.026em;
  color:var(--text);
  text-wrap:balance;
}
.answer-panel em{font-style:italic;color:var(--text-2)}

/* ------------------------------------------------------------ DIAGRAM */
.diagram{
  width:100%;max-width:470px;
  padding:clamp(20px,3vw,32px);
  border-radius:var(--r-xl);
  background:var(--surface-1);
  border:1px solid var(--border);
  color:var(--text-2);
}
.diagram svg{width:100%;height:auto}

/* --------------------------------------------------------- DEMO STAGE */
.demo-stage{
  display:flex;justify-content:center;
  padding-block:clamp(12px,3vw,32px);
}
.demo-stage .scene{
  position:relative;
  width:min(720px,100%);
  min-height:min(480px,86vw);
  display:flex;align-items:center;justify-content:center;
}
/* Product in front, phone peeking out behind it: the card is near-square now,
   so a phone on top would cover its headline and QR. */
.demo-stage__card{
  position:relative;z-index:4;
  width:min(400px,58%);
  margin-right:min(150px,24%);
}
.demo-stage__phone{
  position:absolute;z-index:3;
  right:6%;bottom:0;
  width:min(230px,33%);
  /* query container for the phone's own cqw values — see .hero-stage__phone */
  container-type:inline-size;
}
@media (max-width:620px){
  .demo-stage__card{width:72%;margin-right:34px}
  .demo-stage__phone{width:42%;right:-6px;bottom:-2%}
}

/* ------------------------------------------------------ SPEC LISTS */
.spec{
  display:grid;grid-template-columns:auto 1fr;
  gap:10px 18px;
  font-size:.95rem;
}
.spec dt{color:var(--text-3);white-space:nowrap}
.spec dd{color:var(--text);font-weight:500}

/* ---------------------------------------------------- PRODUCT DETAIL */
.product-hero{
  display:flex;align-items:center;justify-content:center;
  /* an explicit width breaks the shrink-to-fit cycle: the card inside is
     width:100%, which contributes no intrinsic width of its own */
  width:100%;
  min-height:300px;
  padding:clamp(32px,5vw,56px);
  border-radius:var(--r-xl-inc);
  background:
    radial-gradient(120% 100% at 50% 0%,var(--surface-3),transparent 74%),
    var(--surface-1);
  border:1px solid var(--border);
  overflow:hidden;
}
.product-hero .scene{width:100%;display:flex;justify-content:center}

/* ------------------------------------------------------------ KEYRING */
.keyring{
  position:relative;
  display:flex;flex-direction:column;align-items:center;
}
.keyring__ring{
  width:26px;height:26px;
  border:3px solid var(--border-strong);
  border-radius:50%;
  margin-bottom:-9px;
  z-index:1;
}
.keyring__body{
  width:112px;height:150px;
  border-radius:16px;
  background:linear-gradient(158deg,#4285F4,#1B62DC 60%,#1652C6);
  box-shadow:0 16px 32px -14px rgba(26,95,217,.55);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:10px;text-align:center;color:#fff;
  position:relative;overflow:hidden;
}
.keyring__body::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(90% 60% at 24% 6%,rgba(255,255,255,.38),transparent 62%);
}
.keyring__body::after{
  content:"";position:absolute;top:9px;left:50%;transform:translateX(-50%);
  width:13px;height:13px;border-radius:50%;
  background:var(--surface-1);
  box-shadow:inset 0 1px 3px rgba(0,0,0,.35);
}
.keyring__body>*{position:relative;z-index:1;margin-top:14px}
.keyring__text{
  font-family:var(--font-display);
  font-size:.78rem;font-weight:600;line-height:1.25;letter-spacing:-.014em;
}

/* --------------------------------------------------------- PHOTO BAND */
.photo-band__grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(14px,2vw,24px);
}
@media (max-width:760px){
  .photo-band__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .photo-band__grid .photo-card:last-child{display:none}
}
@media (max-width:460px){
  .photo-band__grid{grid-template-columns:minmax(0,1fr)}
  .photo-band__grid .photo-card:last-child{display:block}
}
.photo-card{
  position:relative;
  border-radius:var(--r-xl);
  overflow:hidden;
  aspect-ratio:4/5;
  background:var(--surface-2);
  box-shadow:var(--e2);
}
.photo-card img{
  width:100%;height:100%;
  object-fit:cover;
  transition:transform var(--d-long) var(--ease-emph-dec),
             filter var(--d-base) var(--ease-standard);
}
.photo-card:hover img{transform:scale(1.05)}
.photo-card::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,rgba(15,16,17,.78) 0%,rgba(15,16,17,.22) 34%,transparent 62%);
}
.photo-card figcaption{
  position:absolute;inset:auto 0 0 0;z-index:1;
  padding:clamp(18px,2.4vw,26px);
  display:flex;flex-direction:column;gap:4px;
  color:#fff;
}
.photo-card__kicker{
  font-size:.72rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:rgba(255,255,255,.82);
}
.photo-card__title{
  font-family:var(--font-display);
  font-size:clamp(1.05rem,1.7vw,1.28rem);
  font-weight:600;letter-spacing:-.018em;line-height:1.2;
}.order-form{width:100%}