/* .guido product page: hero fan, scroll-driven 3D phone tour, feature grid, FAQ, closing call. */

/* ---------- Hero ---------- */
.hero { --hp: 0; position: relative; padding-top: clamp(48px, 8vw, 96px); text-align: center; overflow: clip; }
.hero .copy { position: relative; z-index: 2; }
.hero h1 { margin: 0 auto; width: clamp(220px, 34vw, 460px); }
.hero h1 img { width: 100%; height: auto; }
.hero .lead { margin: clamp(20px, 3vw, 32px) auto 0; font: 650 clamp(30px, 5.4vw, 64px)/1.05 var(--display); letter-spacing: -0.04em; max-width: 16ch; }
.hero .sub { margin: 20px auto 0; max-width: 40ch; font-size: clamp(17px, 1.9vw, 21px); color: var(--text-2); line-height: 1.45; }
.hero .cta { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 14px 20px; margin-top: 32px; }
.hero .cta .muted { font-size: 15px; }
.fan { position: relative; height: clamp(520px, 62vw, 760px); margin-top: clamp(40px, 6vw, 72px); perspective: 1600px; }
.fan .glow { width: min(1100px, 120vw); height: 70%; left: 50%; top: 52%; transform: translate(-50%, -50%); opacity: .9; }
.fan .iphone { position: absolute; left: 50%; top: 0; will-change: transform; }
.fan .center { --pw: clamp(250px, 24vw, 340px); z-index: 3; transform: translateX(-50%) translateY(calc(var(--hp) * -40px)) scale(calc(1 + var(--hp) * .04)); }
.fan .left, .fan .right { --pw: clamp(210px, 20vw, 290px); top: 9%; z-index: 2; opacity: calc(1 - var(--hp) * 1.1); filter: brightness(.7); }
.fan .left { transform: translateX(calc(-50% - 82% - var(--hp) * 30%)) rotateY(24deg) rotateZ(-5deg); }
.fan .right { transform: translateX(calc(-50% + 82% + var(--hp) * 30%)) rotateY(-24deg) rotateZ(5deg); }
.fan::after { /* fade the phones into the page */
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 38%; z-index: 4; pointer-events: none;
  background: linear-gradient(180deg, rgba(8,8,10,0), var(--bg) 92%);
}
@media (prefers-reduced-motion: no-preference) {
  .hero .copy > * { animation: rise 1.1s var(--ease) both; }
  .hero .copy > :nth-child(2) { animation-delay: .08s; }
  .hero .copy > :nth-child(3) { animation-delay: .16s; }
  .hero .copy > :nth-child(4) { animation-delay: .24s; }
  .fan { animation: rise-far 1.4s .2s var(--ease) both; }
}
@keyframes rise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes rise-far { from { opacity: 0; transform: translateY(90px); } to { opacity: 1; transform: none; } }
@media (max-width: 700px) {
  .fan { height: 470px; }
  .fan .center { --pw: 210px; }
  .fan .left, .fan .right { --pw: 170px; top: 12%; }
  .fan .left { transform: translateX(calc(-50% - 74% - var(--hp) * 30%)) rotateY(24deg) rotateZ(-5deg); }
  .fan .right { transform: translateX(calc(-50% + 74% + var(--hp) * 30%)) rotateY(-24deg) rotateZ(5deg); }
}

/* ---------- Section header ---------- */
.section-head { text-align: center; padding: clamp(80px, 12vw, 160px) 0 clamp(24px, 4vw, 48px); }
.section-head h2 { font-size: clamp(40px, 7vw, 88px); letter-spacing: -0.05em; }
.section-head p { margin: 20px auto 0; max-width: 38ch; color: var(--text-2); font-size: clamp(17px, 2vw, 22px); line-height: 1.4; }

/* Section switcher: lime marks the section in view */
.chapters { position: sticky; top: calc(var(--header) + 12px); z-index: 20; display: flex; justify-content: center; align-items: flex-start; pointer-events: none; height: 0; }
.chapters ol { pointer-events: auto; list-style: none; margin: 0; padding: 4px; display: flex; gap: 2px; border-radius: 999px; }
.chapters a { display: block; padding: 8px 16px; border-radius: 999px; font-size: 14px; color: var(--text-2); text-decoration: none; transition: background .3s var(--ease), color .3s; white-space: nowrap; }
.chapters a:hover { color: var(--text); }
.chapters a.on { background: var(--lime); color: var(--on-lime); font-weight: 600; }
@media (max-width: 900px) { .chapters { display: none; } }

/* ---------- Tour ---------- */
.tour { position: relative; view-timeline: --tour block; }
.tour .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 32px; }
.stage-col { grid-column: 2; grid-row: 1; }
.steps { grid-column: 1; grid-row: 1; }
.stage { position: sticky; top: var(--header); height: calc(100svh - var(--header)); display: grid; place-items: center; perspective: 1700px; }
/* Room at the top for the section bar, so it never covers the phone. */
@media (min-width: 901px) { .stage { box-sizing: border-box; padding-top: 72px; } }
.stage .glow { width: 760px; height: 760px; left: 50%; top: 50%; transform: translate(-50%, -50%); opacity: .85; }
.stage-inner { position: relative; display: grid; justify-items: center; gap: 22px; }

.phone3d { --pw: min(clamp(250px, 23vw, 320px), calc((100svh - var(--header) - 170px) / 2.12)); transform-style: preserve-3d; transform: rotateY(-22deg) rotateX(6deg) rotateZ(-1.5deg); will-change: transform; }
@media (max-height: 780px) and (min-width: 901px) { .phone3d { --pw: min(23vw, calc((100svh - var(--header) - 170px) / 2.12)); } }
.phone3d .edge {
  position: absolute; inset: 0; border-radius: var(--fr);
  background: linear-gradient(90deg, #3E4045 0%, #B9BBBF 10%, #7C7F85 28%, #D9DADD 50%, #7C7F85 72%, #B9BBBF 90%, #3E4045 100%);
  transform: translateZ(calc(var(--i) * -1.6px));
}
.phone3d .screen, .phone3d .glare { transform: translateZ(1px); }
/* The island keeps its centring when it is lifted off the screen. */
.phone3d .island { transform: translateX(-50%) translateZ(2px); }
.phone3d .screen img { opacity: 0; transform: scale(1.03); transition: opacity .55s ease, transform .8s var(--ease); }
.phone3d .screen img.is-on { opacity: 1; transform: none; }
@supports (animation-timeline: view()) {
  .phone3d.css-turn { animation: turn linear both; animation-timeline: --tour; animation-range: contain 0% contain 100%; }
}
@keyframes turn {
  0%   { transform: rotateY(-22deg) rotateX(6deg) rotateZ(-1.5deg); }
  18%  { transform: rotateY(14deg) rotateX(4deg) rotateZ(1deg); }
  38%  { transform: rotateY(-13deg) rotateX(3deg) rotateZ(-1deg); }
  58%  { transform: rotateY(12deg) rotateX(3deg) rotateZ(1deg); }
  78%  { transform: rotateY(-10deg) rotateX(2deg) rotateZ(-.5deg); }
  100% { transform: rotateY(0deg) rotateX(0deg) rotateZ(0deg); }
}

/* Glass notes beside the phone, one set per screen */
.chip {
  position: absolute; z-index: 3; display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 18px; white-space: nowrap;
  font-size: 14px; color: var(--text-2); box-shadow: 0 20px 40px -20px rgba(0,0,0,.8);
  opacity: 0; transform: translateY(10px) scale(.97); transition: opacity .45s var(--ease), transform .6s var(--ease); pointer-events: none;
}
.chip.on { opacity: 1; transform: none; }
.chip b { display: block; font: 650 17px/1.2 var(--display); color: var(--text); letter-spacing: -0.01em; }
.chip .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 0 5px rgba(163,230,53,.14); flex: none; }
.chip.l { right: calc(100% - 40px); }
.chip.r { left: calc(100% - 40px); }
@media (max-width: 1180px) and (min-width: 901px) { .chip { display: none; } }

.caption { display: flex; align-items: center; gap: 12px; min-height: 28px; color: var(--text-3); font-size: 14px; }
.dots { display: flex; gap: 6px; }
.dots i { width: 6px; height: 6px; border-radius: 999px; background: rgba(255,255,255,.18); transition: width .35s var(--ease), background .35s; }
.dots i.on { width: 20px; background: var(--lime); }

/* Steps: tall sections with sticky text, so the phone can change screens under one heading */
.step { min-height: max(calc(100svh - var(--header)), calc(var(--n, 1) * 75svh)); }
.step .card { position: sticky; top: calc(var(--header) + 20svh); padding: 18svh 0; max-width: 520px; transition: opacity .6s var(--ease), transform .6s var(--ease); }
.js .step:not(.active) .card { opacity: .18; transform: translateY(12px); }
.step h2 { font-size: clamp(44px, 5.4vw, 76px); letter-spacing: -0.05em; }
.step .lede { margin-top: 20px; font-size: clamp(18px, 1.7vw, 22px); line-height: 1.45; color: var(--text-2); }
.step .lede strong { color: var(--text); font-weight: 600; }
.step .facts { list-style: none; padding: 0; margin: 28px 0 0; display: grid; gap: 12px; }
.step .facts li { display: flex; gap: 14px; align-items: baseline; color: #D6D6DA; font-size: 16.5px; }
.step .facts li::before { content: ""; flex: none; width: 5px; height: 5px; border-radius: 50%; background: var(--text-3); transform: translateY(-3px); }

/* ---------- Feature grid ---------- */
.bento { display: grid; gap: 16px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tile { position: relative; overflow: hidden; border-radius: var(--radius-lg); padding: clamp(24px, 3vw, 36px); min-height: 260px; display: flex; flex-direction: column; justify-content: space-between; gap: 24px; }
.tile.wide { grid-column: span 2; }
.tile h3 { font-size: clamp(24px, 2.4vw, 32px); letter-spacing: -0.03em; }
.tile p { margin-top: 10px; color: var(--text-2); font-size: 16px; max-width: 40ch; }
.tile .big { font: 750 clamp(64px, 8vw, 112px)/.9 var(--display); letter-spacing: -0.06em; }
.tile .icon { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: rgba(255,255,255,.07); border: 1px solid var(--line); }
.tile .icon svg { width: 22px; height: 22px; }
.ranks { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.ranks i { height: 10px; border-radius: 3px; }
.ranks-names { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin-top: 8px; font-size: 11.5px; color: var(--text-3); text-align: center; }
.lang-big { display: flex; gap: 10px; }
.lang-big span { font: 700 clamp(40px, 5vw, 64px)/1 var(--display); letter-spacing: -0.04em; padding: 10px 18px; border-radius: 18px; border: 1px solid var(--line); background: rgba(255,255,255,.04); }
@media (max-width: 900px) { .bento { grid-template-columns: 1fr 1fr; } .tile.wide { grid-column: span 2; } }
@media (max-width: 600px) { .bento { grid-template-columns: minmax(0, 1fr); } .tile.wide { grid-column: auto; } .tile { min-height: 0; } }

/* ---------- FAQ ---------- */
.faq-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; }
@media (min-width: 900px) { .faq-grid { grid-template-columns: 1fr 1.6fr; gap: 64px; } .faq-grid .head { position: sticky; top: calc(var(--header) + 40px); align-self: start; } }
.faq-grid h2 { font-size: clamp(40px, 6vw, 72px); letter-spacing: -0.05em; }
.faq-grid .head p { margin-top: 16px; color: var(--text-2); }
.faq details { border-bottom: 1px solid var(--line); }
.faq details:first-of-type { border-top: 1px solid var(--line); }
.faq summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 20px;
  min-height: 72px; padding: 20px 0; font: 600 clamp(19px, 2vw, 22px)/1.3 var(--display); letter-spacing: -0.015em;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary .pm { position: relative; flex: none; width: 32px; height: 32px; border-radius: 50%; background: rgba(255,255,255,.06); border: 1px solid var(--line); transition: background .3s, transform .4s var(--ease); }
.faq summary .pm::before, .faq summary .pm::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 1.5px; margin: -.75px 0 0 -6px; background: var(--text); border-radius: 1px; transition: transform .4s var(--ease); }
.faq summary .pm::after { transform: rotate(90deg); }
.faq details[open] summary .pm { transform: rotate(45deg); }
.faq details p { padding: 0 52px 24px 0; color: var(--text-2); font-size: 17px; }
.faq details p + p { margin-top: -10px; }

/* ---------- Closing ---------- */
.finale { position: relative; text-align: center; padding: clamp(96px, 14vw, 180px) 0 0; overflow: clip; }
.finale .glow { width: 1000px; height: 600px; left: 50%; top: 62%; transform: translate(-50%, -50%); opacity: .9; }
.finale img.mark { width: clamp(140px, 18vw, 220px); margin: 0 auto 28px; }
.finale h2 { position: relative; font-size: clamp(40px, 7vw, 96px); letter-spacing: -0.05em; }
.finale p { position: relative; margin: 18px auto 0; color: var(--text-2); font-size: clamp(17px, 2vw, 21px); }
.finale .cta { position: relative; display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 34px; }
.finale .pair { position: relative; height: clamp(360px, 40vw, 520px); margin-top: 64px; perspective: 1400px; }
.finale .pair .iphone { position: absolute; left: 50%; top: 0; --pw: clamp(210px, 20vw, 280px); }
.finale .pair .a { transform: translateX(-96%) rotateY(14deg) rotateZ(-4deg); }
.finale .pair .b { transform: translateX(-4%) rotateY(-14deg) rotateZ(4deg); top: 36px; }
.finale .pair::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 55%; background: linear-gradient(180deg, rgba(8,8,10,0), var(--bg) 85%); }
@media (max-width: 600px) { .finale .pair .iphone { --pw: 170px; } }

/* ---------- Phone width: like the desktop tour, one screen that stays put. The phone sits on top and a single
   card under it changes text with the section; the section texts themselves only give the scroll its length. */
.mcard { display: none; }
@media (max-width: 900px) {
  .tour .wrap { display: grid; grid-template-columns: minmax(0, 1fr); padding: 0; gap: 0; }
  .stage-col, .steps { grid-column: 1; grid-row: 1; }
  .stage {
    position: sticky; top: var(--header); height: calc(100svh - var(--header)); perspective: 1100px;
    display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 12px;
    padding: 14px var(--gutter) max(16px, env(safe-area-inset-bottom));
  }
  .stage .glow { width: 420px; height: 420px; top: 36%; }
  .stage-inner { flex: 1 1 auto; min-height: 0; align-content: center; gap: 10px; }
  .phone3d { --pw: min(52vw, calc((100svh - var(--header) - 250px) / 2.12)); }
  .steps { pointer-events: none; }
  .step { min-height: calc(var(--n, 1) * 85svh); }
  .step .card { position: static; padding: 0; opacity: 0 !important; }
  .mcard {
    display: block; position: relative; z-index: 2; width: 100%; max-width: 560px; flex: none; min-height: 148px;
    padding: 18px 20px; border-radius: var(--radius-lg); background: rgba(20, 20, 23, 0.72);
    transition: opacity .28s ease, transform .4s var(--ease);
  }
  .mcard.swap { opacity: 0; transform: translateY(8px); }
  .mcard .h { font: 700 28px/1.1 var(--display); letter-spacing: -0.035em; }
  .mcard .lede { margin-top: 8px; font-size: 15.5px; line-height: 1.45; color: var(--text-2); }
  .mcard .lede strong { color: var(--text); font-weight: 600; }
}
/* Phones: the same glass notes, smaller, overlapping the phone's edges so they stay on screen. */
@media (max-width: 900px) {
  .chip { gap: 8px; padding: 8px 12px; border-radius: 14px; font-size: 11.5px; line-height: 1.3; background: rgba(28, 28, 32, 0.82); }
  .chip b { font-size: 13.5px; }
  .chip .dot { width: 7px; height: 7px; box-shadow: 0 0 0 4px rgba(163,230,53,.14); }
  .chip.l { right: auto; left: -30%; }
  .chip.r { left: auto; right: -30%; }
}
@media (max-width: 900px) and (prefers-reduced-motion: reduce) { .mcard { transition: none; } }

@media (prefers-reduced-motion: reduce) {
  .phone3d, .phone3d.css-turn { transform: none !important; }
  .phone3d .screen img { transition: none; transform: none; }
  .hero { --hp: 0 !important; }
}

/* Wide screens: text left, phones right, everything above the fold */
@media (min-width: 1000px) {
  .hero { padding-top: 0; text-align: left; }
  .hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); align-items: center; min-height: calc(100svh - var(--header)); max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); gap: 24px; }
  .hero .copy { padding: 0; }
  .hero h1 { margin: 0; width: clamp(240px, 24vw, 340px); }
  .hero .lead { margin-left: 0; font-size: clamp(44px, 4.6vw, 68px); max-width: 12ch; }
  .hero .sub { margin-left: 0; }
  .hero .cta { justify-content: flex-start; }
  .fan { margin-top: 0; height: min(760px, calc(100svh - var(--header) - 40px)); }
  .fan::after { height: 18%; }
  .fan .center { --pw: min(300px, calc((100svh - var(--header) - 80px) / 2.12)); top: 4%; }
  .fan .left, .fan .right { --pw: min(250px, calc((100svh - var(--header) - 80px) / 2.5)); top: 13%; }
}
.tile.end { justify-content: flex-end; }