/* ============ Golf Swing Partner — product page ============ */
/* Inherits tokens, nav, footer, type and the hero entrance from /styles.css.
   Built on the Golf Rhythm Coach page (same type, hairlines, FAQ, form and
   spec rows — fix those in both files together). One accent, the app's
   neon green, on the kickers, the step numbers, the icons, the delay label,
   the paid plan's name, focus and the send button. The product is shown as
   it is: the real App Store screenshots, in a plain device frame. */

:root {
  --gsp: #39ff88;
  --gsp-hover: #74ffab;
  --gsp-ink: #03210f;          /* text on the green control */
  --gsp-soft: rgba(57, 255, 136, .13);
  --gsp-line: rgba(57, 255, 136, .45);
  --r-frame: 12px;
}

.product-page { overflow-x: hidden; }
.product-page :focus-visible { outline-color: var(--gsp); }

/* ---------- Type on this page ---------- */
/* Section intros are centred with a wide measure; the screenshot sections
   set their copy beside the image and stay left-aligned. */
.product-page .kicker {
  font-size: clamp(1.15rem, 1.6vw, 1.5rem);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: .009em;
  color: var(--gsp);
  margin-bottom: 18px;
  text-align: center;
}
.product-page .stmt {
  font-size: clamp(1.9rem, 1.1rem + 3vw, 3.4rem);
  line-height: 1.1;
  max-width: 44ch;
  margin-inline: auto;
  text-align: center;
}
html[lang="ja"] .product-page .stmt { max-width: 22em; line-height: 1.26; }
.product-page .lead {
  max-width: 60ch;
  margin-inline: auto;
  text-align: center;
}
html[lang="ja"] .product-page .lead { max-width: 34em; }
html[lang="ko"] .product-page .stmt { max-width: 24em; line-height: 1.2; letter-spacing: 0; }
html[lang="ko"] .product-page .lead { max-width: 36em; letter-spacing: 0; }
html[lang="ko"] :is(.pr-sub, .pr-lede, .pr-card h3, .pr-card p, .how-card h3, .how-card p, .pr-faq-q, .spec-label, .gsp-points li) { letter-spacing: 0; }
html[lang="ko"] .pr-lede { max-width: 30em; line-height: 1.75; }

/* ---------- Hero: the practice-range photo, shaded, copy on the left ---------- */
.pr-hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  overflow: hidden;
  background:
    radial-gradient(1100px 620px at 76% 42%, rgba(57, 255, 136, .11), transparent 62%),
    linear-gradient(180deg, #02060d 0%, #030b18 60%, #02060d 100%);
}
.pr-hero-media { position: absolute; inset: 0; }
.pr-hero-img {
  width: 100%;
  height: 112%;
  object-fit: cover;
  opacity: .78;
  will-change: transform;
}
.pr-hero-shade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(2, 6, 13, .96) 0%, rgba(2, 6, 13, .78) 42%, rgba(2, 6, 13, .28) 72%, rgba(2, 6, 13, .55) 100%),
    linear-gradient(180deg, rgba(2, 6, 13, .9) 0%, transparent 26%, transparent 62%, var(--bg) 100%);
}
.pr-hero-inner {
  position: relative;
  z-index: 2;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 12svh max(24px, env(safe-area-inset-left)) 10svh;
  width: 100%;
}
.pr-appicon {
  width: clamp(84px, 9vw, 112px);
  height: auto;
  border-radius: 23%;
  display: block;
  margin-bottom: 26px;
  box-shadow: 0 10px 44px rgba(0, 0, 0, .6), 0 0 60px -18px rgba(57, 255, 136, .45), inset 0 0 0 1px rgba(244, 241, 234, .1);
}
.pr-eyebrow {
  font-size: clamp(.95rem, 1.4vw, 1.1rem);
  font-weight: 600;
  letter-spacing: .01em;
  color: var(--gsp);
  margin-bottom: 14px;
}
.pr-title {
  font-size: clamp(2.6rem, 7.4vw, 5.6rem);
  font-weight: 700;
  letter-spacing: -.025em;
  line-height: 1.03;
  background: linear-gradient(180deg, #ffffff 0%, #dfe6f2 58%, #93a3ba 132%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
/* the Japanese name is one word: it never breaks mid-word */
html[lang="ja"] .pr-title { font-size: clamp(1.9rem, 6vw, 4.3rem); letter-spacing: 0; line-height: 1.18; white-space: nowrap; }
.pr-sub {
  margin-top: 12px;
  font-size: clamp(1.35rem, 3vw, 2.1rem);
  font-weight: 600;
  letter-spacing: -.015em;
  color: var(--ink);
}
html[lang="ja"] .pr-sub { letter-spacing: 0; word-break: auto-phrase; }
.pr-lede {
  margin-top: 22px;
  max-width: 46ch;
  font-size: clamp(1.05rem, 1.7vw, 1.28rem);
  line-height: 1.6;
  letter-spacing: -.01em;
  color: var(--muted);
}
html[lang="ja"] .pr-lede { max-width: 30em; letter-spacing: 0; line-height: 1.85; word-break: auto-phrase; }
.pr-cta {
  margin-top: 36px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 22px;
}
/* Not on the App Store yet, so no badge: Apple's badge may only link to a
   live listing. A plain status pill in the page's own style instead. */
.pr-soon {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--gsp-line);
  background: var(--gsp-soft);
  color: #dcffe9;
  border-radius: var(--r-pill);
  padding: 12px 22px 12px 16px;
  font-size: clamp(.95rem, 1.4vw, 1.05rem);
  font-weight: 600;
  letter-spacing: .01em;
}
.pr-soon svg { width: 18px; height: 18px; flex-shrink: 0; color: var(--gsp); }
.pr-link {
  color: var(--muted);
  text-decoration: none;
  font-size: clamp(.9rem, 1.4vw, 1rem);
  border-bottom: 1px solid rgba(147, 163, 186, .35);
  padding-bottom: 2px;
  transition: color .3s ease, border-color .3s ease;
}
.pr-link:hover { color: var(--ink); border-color: rgba(244, 241, 234, .6); }

/* ---------- Facts row under the hero ---------- */
.gsp-facts {
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}
.gsp-facts-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 12px 30px;
  padding-top: 22px;
  padding-bottom: 22px;
}
.gsp-fact {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: .86rem;
  font-weight: 600;
  color: var(--muted);
  white-space: nowrap;
}
.gsp-fact svg { flex-shrink: 0; color: var(--gsp); }

/* ---------- Section rhythm ---------- */
.pr-concept, .pr-how, .pr-duo, .pr-safe, .pr-pricing, .pr-specs, .pr-faq, .pr-contact { padding: var(--section-y) 0; }
.pr-shot { padding: clamp(64px, 8vw, 120px) 0; }
.pr-pricing { background: var(--bg-2); }
.pr-contact { padding-bottom: clamp(72px, 10vw, 128px); }
.stmt--sm {
  font-size: clamp(1.5rem, 1rem + 1.8vw, 2.2rem);
  line-height: 1.16;
  max-width: 100%;
  margin-inline: 0;
  text-align: left;
}
.product-page .stmt.stmt--sm { max-width: 100%; margin-inline: 0; text-align: left; }
html[lang="ja"] .stmt--sm { line-height: 1.42; }

/* ---------- Line icons: one per card, in the accent ---------- */
/* Stroked, never filled, 24px — the same drawing language as the facts row. */
.card-mark {
  width: 24px;
  height: 24px;
  display: block;
  margin-bottom: 14px;
  color: var(--gsp);
}

/* ---------- Three steps ---------- */
.how-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0 clamp(28px, 4vw, 56px);
  margin-top: clamp(48px, 6vw, 72px);
}
.how-card { border-top: 1px solid var(--hairline-strong); padding: 24px 0 30px; }
.how-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}
.how-num {
  font-size: clamp(1.7rem, 1.2rem + 1.4vw, 2.4rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  color: var(--gsp);
}
.how-head .card-mark { width: 30px; height: 30px; margin: 0; }
.how-card h3, .pr-card h3 {
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: -.015em;
  line-height: 1.3;
  margin-bottom: 10px;
  text-wrap: balance;
}
html[lang="ja"] :is(.how-card, .pr-card) h3 { letter-spacing: 0; line-height: 1.45; }
.how-card p, .pr-card p { font-size: 1rem; line-height: 1.6; color: var(--muted); text-wrap: pretty; }
html[lang="ja"] :is(.how-card, .pr-card) p { line-height: 1.85; }

/* ---------- The delay, as a timeline ---------- */
.gsp-track {
  max-width: 860px;
  margin: clamp(56px, 7vw, 88px) auto 0;
  padding: clamp(28px, 4vw, 44px) clamp(18px, 4vw, 48px) clamp(26px, 3.5vw, 36px);
  border: 1px solid var(--hairline-strong);
  border-radius: 20px;
  background:
    radial-gradient(520px 200px at 82% 30%, rgba(57, 255, 136, .10), transparent 70%),
    rgba(244, 241, 234, .015);
}
.gsp-track-row {
  display: grid;
  grid-template-columns: minmax(84px, 150px) 1fr minmax(84px, 150px);
  align-items: center;
  row-gap: 16px;
}
.gsp-track-mark {
  justify-self: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: grid;
  place-items: center;
}
.gsp-track-mark--start {
  border: 1.5px solid rgba(244, 241, 234, .3);
  background: rgba(244, 241, 234, .04);
}
.gsp-track-mark--start::after {
  content: "";
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--ink);
}
.gsp-track-mark--end {
  background: var(--gsp);
  color: var(--gsp-ink);
  box-shadow: 0 0 0 7px var(--gsp-soft), 0 0 46px rgba(57, 255, 136, .5);
}
.gsp-track-mark--end svg { width: 24px; height: 24px; margin-left: 3px; }
.gsp-track-line {
  position: relative;
  height: 2px;
  margin: 0 6px;
  border-radius: 2px;
  background: linear-gradient(90deg, rgba(244, 241, 234, .22), var(--gsp));
}
/* six small ticks: one per second of the default delay */
.gsp-track-line::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -5px;
  height: 12px;
  background: repeating-linear-gradient(90deg, rgba(244, 241, 234, .28) 0 1px, transparent 1px calc(100% / 6));
  -webkit-mask: linear-gradient(90deg, transparent 0 1px, #000 1px);
  mask: linear-gradient(90deg, transparent 0 1px, #000 1px);
}
/* the app's own status label, as it sits in the top-left of the screen */
.gsp-track-chip {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 9px 18px 9px 14px;
  border-radius: var(--r-pill);
  background: rgba(20, 24, 30, .96);
  border: 1px solid var(--hairline-strong);
  box-shadow: 0 8px 26px rgba(0, 0, 0, .45);
  font-size: clamp(.95rem, .9rem + .4vw, 1.15rem);
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
}
.gsp-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--gsp);
  box-shadow: 0 0 10px rgba(57, 255, 136, .8);
  flex-shrink: 0;
}
/* the dot blinks once a second, as it does in the app while the delay runs */
@media (prefers-reduced-motion: no-preference) {
  .gsp-dot { animation: gspBlink 1s ease-in-out infinite; }
}
@keyframes gspBlink {
  0%, 100% { opacity: 1; }
  50% { opacity: .25; }
}
.gsp-track-label, .gsp-track-gap {
  justify-self: center;
  text-align: center;
  font-size: .98rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--ink);
  text-wrap: balance;
}
.gsp-track-gap { color: var(--gsp); font-variant-numeric: tabular-nums; }
.gsp-track-note {
  margin: 26px auto 0;
  max-width: 56ch;
  text-align: center;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--muted);
  text-wrap: pretty;
}
html[lang="ja"] .gsp-track-note { max-width: 34em; line-height: 1.85; }
html[lang="ko"] .gsp-track-note { max-width: 36em; line-height: 1.75; }

/* ---------- Screenshot sections ---------- */
.pr-shot-grid {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}
.pr-shot-grid--rev { grid-template-columns: .85fr 1.15fr; }
.pr-shot-copy .kicker { text-align: left; }
.pr-shot-copy .lead { max-width: 100%; margin-inline: 0; text-align: left; }
.pr-shot-figure { margin: 0; }
.pr-shot-figure figcaption, .gsp-duo-item figcaption {
  margin-top: 16px;
  font-size: .8rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-align: center;
  color: var(--muted-2);
}
html[lang="ja"] :is(.pr-shot-figure, .gsp-duo-item) figcaption { letter-spacing: .04em; text-transform: none; }
.gsp-phone-figure { width: min(330px, 100%); margin-inline: auto; }

/* A plain device frame around the real screenshot: dark bezel, hairline
   edge, rounded like the screen. Padding and radii are percentages so the
   frame keeps its proportions at every size. */
.gsp-device {
  position: relative;
  width: 100%;
  padding: 2.9%;
  border-radius: 14.7% / 7%;
  background: linear-gradient(160deg, #1d232d 0%, #0b0f15 52%, #161b23 100%);
  box-shadow:
    inset 0 0 0 1px rgba(244, 241, 234, .11),
    0 1px 2px rgba(0, 0, 0, .4),
    0 36px 70px -30px rgba(0, 0, 0, .85),
    0 0 90px -34px rgba(57, 255, 136, .32);
}
.gsp-device img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12.5% / 5.75%;
  background: #0b0f15;
}
.gsp-device--tablet { padding: 2.1%; border-radius: 5.4% / 4.1%; }
.gsp-device--tablet img { border-radius: 3.4% / 2.55%; }

/* points under a showcase: an icon and one line each, on hairlines */
.gsp-points {
  list-style: none;
  margin: 32px 0 0;
  padding: 0;
  border-top: 1px solid var(--hairline);
}
.gsp-points li {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid var(--hairline);
  font-size: 1.02rem;
  font-weight: 500;
  line-height: 1.5;
  color: var(--ink);
}
html[lang="ja"] .gsp-points li { line-height: 1.7; }
.gsp-points svg { width: 22px; height: 22px; flex-shrink: 0; color: var(--gsp); }

/* ---------- Two-device mode ---------- */
.pr-duo {
  background:
    radial-gradient(900px 520px at 50% 42%, rgba(57, 255, 136, .07), transparent 70%),
    var(--bg-2);
}
.gsp-duo {
  display: grid;
  grid-template-columns: 1fr auto 2.35fr;
  align-items: end;
  gap: clamp(14px, 2.6vw, 34px);
  max-width: 880px;
  margin: clamp(52px, 6.5vw, 80px) auto 0;
}
.gsp-duo-item { margin: 0; }
.gsp-duo-item figcaption { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.gsp-role {
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: .01em;
  text-transform: none;
  color: var(--gsp);
}
.gsp-role-note { letter-spacing: .02em; text-transform: none; }
.gsp-duo-link {
  align-self: center;
  margin-bottom: 48px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  max-width: 7.5em;
  text-align: center;
  font-size: .82rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--muted);
}
.gsp-duo-link svg {
  width: 30px;
  height: 30px;
  padding: 10px;
  box-sizing: content-box;
  border-radius: 50%;
  color: var(--gsp);
  border: 1px solid var(--gsp-line);
  background: var(--gsp-soft);
}

/* ---------- Card lists (two-device points, privacy) ---------- */
.pr-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 clamp(32px, 5vw, 72px);
  margin-top: clamp(48px, 6vw, 72px);
}
.pr-card { border-top: 1px solid var(--hairline-strong); padding: 24px 0 30px; }

/* ---------- Pricing ---------- */
.pr-plans {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin: clamp(48px, 6vw, 72px) 0 40px;
}
.pr-plan {
  border: 1px solid var(--hairline-strong);
  border-radius: var(--r-frame);
  padding: 32px 30px 30px;
  display: flex;
  flex-direction: column;
  background: var(--bg);
}
.pr-plan--pro { border-color: var(--gsp-line); }
/* The edition is the first thing to read: large, centred, on its own line,
   with the price directly under it. The feature list below stays
   left-aligned, which is easier to scan. */
.pr-plan-name {
  font-size: clamp(1.7rem, 1.2rem + 1.6vw, 2.3rem);
  font-weight: 700;
  letter-spacing: -.01em;
  line-height: 1.1;
  text-align: center;
  color: var(--ink);
}
html[lang="ja"] .pr-plan-name { letter-spacing: 0; }
.pr-plan--pro .pr-plan-name { color: var(--gsp); }
.pr-plan-price { margin-top: 8px; font-size: 1rem; color: var(--muted); text-align: center; }
.pr-plan-row { margin-top: 16px; text-align: center; }
.pr-plan-amount {
  font-size: clamp(2.8rem, 2.1rem + 2.2vw, 3.9rem);
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.pr-plan-list { list-style: none; margin: 26px 0 0; padding: 0; border-top: 1px solid var(--hairline); }
.pr-plan-list li {
  padding: 12px 0;
  border-bottom: 1px solid var(--hairline);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--ink);
}
html[lang="ja"] .pr-plan-list li { line-height: 1.75; }
.pr-plan-note { margin-top: 18px; font-size: .9rem; line-height: 1.55; color: var(--muted); text-align: center; }
html[lang="ja"] .pr-plan-note { line-height: 1.8; }

/* ---------- Requirements (hairline rows) ---------- */
.spec-list { margin-top: clamp(48px, 6vw, 72px); border-top: 1px solid var(--hairline-strong); }
.spec-row {
  display: grid;
  grid-template-columns: 24% 1fr;
  column-gap: clamp(24px, 3vw, 48px);
  padding: 34px 0;
  border-bottom: 1px solid var(--hairline);
  align-items: start;
}
.spec-label { font-size: 1.05rem; font-weight: 600; line-height: 1.4; color: var(--ink); margin: 0; }
.spec-value { max-width: 60ch; }
.spec-value p { font-size: 1rem; line-height: 1.55; color: var(--muted); margin: 0 0 6px; }
.spec-value p:first-child { color: var(--ink); font-weight: 500; margin-bottom: 10px; }
.spec-value p:last-child { margin-bottom: 0; }
html[lang="ja"] .spec-value p { line-height: 1.8; }

/* ---------- FAQ ---------- */
.pr-faq-list { margin-top: clamp(40px, 5vw, 64px); border-top: 1px solid var(--hairline-strong); max-width: 60ch; margin-inline: auto; }
html[lang="ja"] .pr-faq-list { max-width: 36em; }
.pr-faq-item { border-bottom: 1px solid var(--hairline); }
.pr-faq-q {
  width: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding: 22px 0;
  background: none;
  border: 0;
  color: var(--ink);
  font-family: var(--font);
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: -.01em;
  line-height: 1.45;
  text-align: left;
  cursor: pointer;
}
html[lang="ja"] .pr-faq-q { letter-spacing: 0; line-height: 1.6; }
.pr-faq-q:hover { color: #fff; }
.pr-faq-mark { flex-shrink: 0; width: 20px; height: 20px; position: relative; margin-top: .3em; }
.pr-faq-mark::before,
.pr-faq-mark::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 14px;
  height: 1.5px;
  background: var(--ink);
  transform: translate(-50%, -50%);
  transition: transform var(--dur-base) var(--ease-out), opacity var(--dur-base) var(--ease-out);
}
.pr-faq-mark::after { transform: translate(-50%, -50%) rotate(90deg); }
.pr-faq-item.open .pr-faq-mark::after { transform: translate(-50%, -50%) rotate(0deg); opacity: 0; }
.pr-faq-a { overflow: hidden; max-height: 0; transition: max-height var(--dur-base) var(--ease-out); }
.pr-faq-a-inner { padding: 0 40px 24px 0; font-size: 1rem; line-height: 1.65; color: var(--muted); }
html[lang="ja"] .pr-faq-a-inner { line-height: 1.9; }
.pr-faq-a-inner a { color: var(--ink); }

/* ---------- Contact form ---------- */
.pr-form {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px;
  margin: clamp(40px, 5vw, 64px) auto 0;
  max-width: 760px;
}
.pr-field { display: flex; flex-direction: column; }
.pr-field--full { grid-column: 1 / -1; }
.pr-field label { font-size: .92rem; font-weight: 600; color: var(--ink); margin-bottom: 8px; }
.pr-field input,
.pr-field select,
.pr-field textarea {
  width: 100%;
  font-family: var(--font);
  font-size: 1rem;
  color: var(--ink);
  background: rgba(244, 241, 234, .03);
  border: 1px solid var(--hairline-strong);
  border-radius: var(--r-control);
  padding: 13px 14px;
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
  -webkit-appearance: none;
  appearance: none;
}
.pr-field select {
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 42px;
}
.pr-field select option { background: #061020; color: var(--ink); }
.pr-field textarea { resize: vertical; min-height: 140px; line-height: 1.6; }
.pr-field input:focus,
.pr-field select:focus,
.pr-field textarea:focus {
  outline: none;
  border-color: var(--gsp);
  box-shadow: 0 0 0 3px var(--gsp-soft);
}
.pr-field.invalid input,
.pr-field.invalid textarea { border-color: rgba(255, 122, 40, .8); }
.pr-error { display: none; margin-top: 8px; font-size: .86rem; color: #ffab7a; }
.pr-field.invalid .pr-error { display: block; }
.pr-form-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}
.pr-form-note { font-size: .88rem; line-height: 1.6; color: var(--muted); max-width: 48ch; }
.pr-form-note a { color: var(--ink); }
.pr-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 26px;
  font-family: var(--font);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: .01em;
  color: var(--gsp-ink);
  background: var(--gsp);
  border: 0;
  border-radius: var(--r-pill);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.pr-submit:hover { background: var(--gsp-hover); }
.pr-submit:active { transform: translateY(1px); }
.pr-submit[disabled] { opacity: .55; cursor: default; }
.pr-trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.pr-form-sent {
  grid-column: 1 / -1;
  border: 1px solid var(--gsp-line);
  background: var(--gsp-soft);
  border-radius: var(--r-control);
  padding: 16px 18px;
  font-size: .98rem;
  line-height: 1.6;
  color: var(--ink);
}
.pr-form-sent.error { border-color: rgba(255, 138, 76, .5); background: rgba(255, 122, 40, .12); color: #ffcda8; }
.pr-contact-alt { margin-top: 32px; font-size: 1rem; color: var(--muted); text-align: center; }
.pr-contact-alt a { color: var(--ink); }

/* ---------- Footer additions ---------- */
.pr-trademark {
  margin: 14px auto 0;
  max-width: 62ch;
  font-size: 11.5px;
  line-height: 1.6;
  letter-spacing: 0;
  color: var(--muted-2);
}
.footer-fine a { color: var(--muted); }
.footer-fine a:hover { color: var(--ink); }

/* ---------- Responsive ---------- */
@media (max-width: 860px) {
  .pr-hero-inner { padding-top: 16svh; }
  .how-grid { grid-template-columns: 1fr; gap: 0; }
  .how-card { padding: 22px 0 24px; }
  .pr-shot-grid, .pr-shot-grid--rev { grid-template-columns: 1fr; gap: 44px; }
  .pr-shot-grid--rev .pr-shot-copy { order: -1; }
  .gsp-phone-figure { width: min(300px, 72vw); }
  .gsp-duo { grid-template-columns: 1fr 2.35fr; gap: 16px 14px; }
  .gsp-duo-link {
    grid-column: 1 / -1;
    grid-row: 2;
    margin: 6px auto 0;
    max-width: none;
    flex-direction: row;
  }
  .gsp-duo-link svg { width: 22px; height: 22px; padding: 7px; }
  .pr-grid { grid-template-columns: 1fr; gap: 0; }
  .pr-card { padding: 22px 0 24px; }
  .pr-plans { grid-template-columns: 1fr; }
  .spec-row { grid-template-columns: 1fr; row-gap: 12px; padding: 26px 0; }
  .spec-value { max-width: 100%; }
  .pr-form { grid-template-columns: 1fr; }
  .pr-faq-a-inner { padding-right: 0; }
}
@media (max-width: 560px) {
  .gsp-track-row { grid-template-columns: minmax(70px, 1fr) 1.25fr minmax(70px, 1fr); }
  .gsp-track-mark { width: 46px; height: 46px; }
  .gsp-track-chip { padding: 7px 13px 7px 11px; gap: 7px; font-size: .88rem; }
  .gsp-track-label, .gsp-track-gap { font-size: .86rem; }
  .gsp-role { font-size: .95rem; }
  .gsp-duo-item figcaption { font-size: .72rem; letter-spacing: .04em; }
}
@media (max-width: 480px) {
  .pr-plan { padding: 26px 22px 24px; }
  .pr-form-foot { align-items: stretch; }
  .pr-form-foot .pr-submit { width: 100%; }
  .gsp-fact { white-space: normal; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .pr-hero-img { transform: none !important; }
  .pr-faq-a { transition: none !important; }
  .pr-submit, .pr-link { transition: none !important; }
  .gsp-dot { animation: none !important; }
}