/* ============ Bonito PDF — product page ============ */
/* Inherits tokens, nav, footer, type and the hero entrance from /styles.css,
   and the motion layer from /product-motion.css (loaded after this file).
   Built on the Bonito Scan and Golf Swing Partner pages: same type, hairline
   lists, spec rows, FAQ and form (fix those in all the product pages together).

   One accent, the crimson of the app icon (--bp): kickers, icons, the focus
   ring and the one filled button. The product is shown as it is: real
   screenshots of the app (light theme, our own sample documents) in one plain
   window frame drawn here, so the frame stays crisp at every size. */

:root {
  --bp: #ff6257;               /* accent text and icons: 6.9:1 on --bg, 6.5:1 on --bg-2 */
  --bp-strong: #c8283a;        /* button fill: white text 5.5:1 */
  --bp-hover: #b8202f;         /* white text 6.4:1 */
  --bp-soft: rgba(255, 98, 87, .14);
  --bp-line: rgba(255, 98, 87, .5);
  --pm-accent: var(--bp);      /* /product-motion.css */
  --r-frame: 12px;
  --wrap-wide: 1320px;
}

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

/* ---------- Type on this page ---------- */
.product-page .kicker {
  font-size: clamp(1.15rem, 1.6vw, 1.5rem);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: .009em;
  color: var(--bp);
  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, .pr-faq-q, .spec-label, .bp-points li, .bp-tool-name, .bp-tool-desc, .bp-tool-group h3, .bp-avail dd, .bp-hero-price) { letter-spacing: 0; }
html[lang="ko"] :is(.pr-sub, .pr-lede, .stmt, .lead, .pr-card h3, .pr-card p, .bp-tool-desc, .pr-faq-q, .bp-plan-eff, .bp-plan-vs dt, .pr-plan-list li, .bp-hero-price) { word-break: keep-all; }
html[lang="ko"] .pr-lede { max-width: 30em; line-height: 1.75; }
/* Japanese: short items and body text wrap at phrase boundaries (Chrome/Edge;
   other browsers keep the default), like the headings in /styles.css */
html[lang="ja"] :is(.bp-status, .bp-hero-price, .bp-fact, .bp-points li, .bp-tool-name, .bp-tool-desc, .bp-rd-find, .pr-card h3, .pr-card p, .bp-avail dd, .bp-avail-note, .spec-value p, .pr-faq-q, .pr-faq-a-inner, .pr-hint, .pr-form-note, .pm-stat-label, .footer-fine, .bp-cmp th, .bp-cmp td, .bp-cmp-more, .bp-cmp-note, .bp-plan-eff, .bp-plan-trial, .bp-plan-vs dt, .bp-plan-vs dd, .pr-plan-list li, .bp-plan-terms, .bp-pr-usd) {
  word-break: auto-phrase;
  line-break: strict;
}

/* ---------- Hero: the ember photograph, 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% 46%, rgba(239, 75, 63, .1), transparent 62%),
    linear-gradient(180deg, #02060d 0%, #050a18 60%, #02060d 100%);
}
.pr-hero-media { position: absolute; inset: 0; }
.pr-hero-img {
  width: 100%;
  height: 112%;
  object-fit: cover;
  object-position: 70% 50%;
  opacity: .9;
}
.pr-hero-shade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(2, 6, 13, .94) 0%, rgba(2, 6, 13, .72) 36%, rgba(2, 6, 13, .18) 66%, rgba(2, 6, 13, .3) 100%),
    linear-gradient(180deg, rgba(2, 6, 13, .85) 0%, transparent 24%, transparent 66%, var(--bg) 100%);
}
.pr-hero-inner {
  position: relative;
  z-index: 2;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 13svh max(24px, env(safe-area-inset-left)) 10svh;
  width: 100%;
}
.pr-appicon {
  display: block;
  width: clamp(84px, 9vw, 112px);
  height: auto;
  margin-bottom: 26px;
  /* The icon file is the squircle itself, cropped to its edges with
     transparent corners (macOS icon shape), so the shadow follows its alpha
     instead of a rounded box: no dark plate around it. */
  filter: drop-shadow(0 10px 24px rgba(0, 0, 0, .55)) drop-shadow(0 0 30px rgba(239, 75, 63, .32));
}
/* the same icon in the local navigation: its own corners, no extra rounding
   (/product-motion.css rounds it for the edge-to-edge icons of the other pages) */
.pm-localnav .pm-ln-brand img { border-radius: 0; }
.pr-eyebrow {
  font-size: clamp(.95rem, 1.4vw, 1.1rem);
  font-weight: 600;
  letter-spacing: .01em;
  color: var(--bp);
  margin-bottom: 14px;
}
.pr-title {
  font-size: clamp(2.6rem, 7.4vw, 5.6rem);
  font-weight: 700;
  letter-spacing: -.025em;
  line-height: 1.03;
  white-space: nowrap;
  background: linear-gradient(180deg, #ffffff 0%, #f1e4e2 58%, #b7a0a3 132%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.pr-sub {
  margin-top: 14px;
  max-width: 22em;
  font-size: clamp(1.3rem, 2.6vw, 1.95rem);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -.015em;
  color: var(--ink);
  text-wrap: balance;
}
/* Japanese: phrases are kept whole with .nowrap in the dictionary; 24em keeps
   the line clear of the paper in the photograph */
html[lang="ja"] .pr-sub { max-width: 24em; letter-spacing: 0; line-height: 1.5; word-break: auto-phrase; }
/* one sentence per unit: when both do not fit on a line, the second starts a
   new one; a sentence wider than the screen still wraps inside itself */
.pr-sub .bp-sent { display: inline-block; }
.pr-lede {
  margin-top: 22px;
  max-width: 46ch;
  font-size: clamp(1.05rem, 1.6vw, 1.22rem);
  line-height: 1.6;
  letter-spacing: -.01em;
  color: var(--muted);
  text-wrap: pretty;
}
html[lang="ja"] .pr-lede { max-width: 30em; letter-spacing: 0; line-height: 1.85; word-break: auto-phrase; }
.pr-cta {
  margin-top: 34px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 18px;
}
.bp-hero-price {
  margin-top: 18px;
  font-size: .95rem;
  line-height: 1.5;
  color: var(--muted);
  text-wrap: pretty;
}
html[lang="ja"] .bp-hero-price { line-height: 1.8; }
/* "in other countries, the store sets the price": a line of its own under the US prices */
.bp-hero-local { display: block; }

/* "Coming soon to ...": a status line, not a control and not a store badge
   (Apple's and Microsoft's badges are only for apps that are listed). */
.bp-status {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 8px 20px 8px 16px;
  border-radius: 24px;
  border: 1px solid var(--hairline-strong);
  background: rgba(2, 6, 13, .5);
  font-size: clamp(.92rem, .88rem + .25vw, 1.02rem);
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -.005em;
  color: var(--ink);
}
html[lang="ja"] .bp-status, html[lang="ko"] .bp-status { letter-spacing: 0; }
.bp-status-dot {
  width: 9px;
  height: 9px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--bp);
  box-shadow: 0 0 0 4px var(--bp-soft), 0 0 12px rgba(255, 98, 87, .6);
}

/* the one filled button: the launch notice */
.bp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 24px;
  border-radius: var(--r-pill);
  background: var(--bp-strong);
  color: #fff;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: .005em;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  box-shadow: 0 10px 30px -14px rgba(255, 98, 87, .7);
  transition: background var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.bp-btn:hover { background: var(--bp-hover); }
.bp-btn:active { transform: translateY(1px); }
.bp-btn:focus-visible { outline: 2px solid var(--bp); outline-offset: 3px; }
.bp-btn--sm { min-height: 36px; padding: 0 16px; font-size: .9rem; box-shadow: none; white-space: nowrap; }
@media (pointer: coarse) { .bp-btn--sm { min-height: 40px; } }
html[lang="ja"] .bp-btn, html[lang="ko"] .bp-btn { letter-spacing: 0; }

/* the local navigation's call to action replaces the store badge of the other pages */
.pm-ln-cta.bp-btn { display: inline-flex; }

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

/* ---------- Section rhythm ---------- */
.bp-concept, .bp-tools-sec, .bp-redact, .bp-sign, .bp-convert, .bp-engine, .bp-compare, .pr-pricing, .pr-specs, .pr-faq, .pr-contact { padding: var(--section-y) 0; }
.bp-tools-sec, .bp-sign, .bp-engine, .pr-contact { background: var(--bg-2); }
.bp-safe { padding: clamp(24px, 4vw, 48px) 0 var(--section-y); }
.pr-contact { padding-bottom: clamp(72px, 10vw, 128px); }
.stmt--sm {
  font-size: clamp(1.5rem, 1rem + 1.8vw, 2.2rem);
  line-height: 1.16;
}
.product-page .stmt.stmt--sm { max-width: 100%; margin-inline: 0; text-align: left; }
html[lang="ja"] .stmt--sm { line-height: 1.42; }
.pr-shot-copy .kicker { text-align: left; }
.pr-shot-copy .lead, .bp-redact-copy .lead { max-width: 100%; margin-inline: 0; text-align: left; }
.bp-redact-copy .kicker { text-align: left; }

/* ---------- Line icons: one per card, in the accent ---------- */
.card-mark { width: 24px; height: 24px; display: block; margin-bottom: 14px; color: var(--bp); }

/* ---------- The window frame around every screenshot ---------- */
/* A plain macOS title bar ("Bonito PDF", as the app's window is titled), a
   hairline and a quiet shadow. The figure is a size container, so the bar,
   the buttons and the corner radius scale with the screenshot (cqw) and keep
   the window's real proportions at any width. */
.bp-win-fig { container-type: inline-size; margin: 0; }
.bp-win {
  position: relative;
  overflow: hidden;
  border-radius: max(7px, .9cqw);
  background: #f2f2f4;
  box-shadow:
    0 0 0 1px rgba(244, 241, 234, .16),
    0 2px 6px rgba(0, 0, 0, .45),
    0 44px 90px -40px rgba(0, 0, 0, .95),
    0 0 140px -56px rgba(239, 75, 63, .45);
}
.bp-win-bar {
  position: relative;
  display: flex;
  align-items: center;
  gap: max(4px, .55cqw);
  height: max(13px, 1.95cqw);
  padding-left: max(7px, .9cqw);
  background: linear-gradient(180deg, #ececee, #e3e3e6);
  border-bottom: 1px solid rgba(0, 0, 0, .1);
}
.bp-win-bar i {
  width: max(6px, .85cqw);
  height: max(6px, .85cqw);
  border-radius: 50%;
  background: #ff5f57;
  box-shadow: inset 0 0 0 .5px rgba(0, 0, 0, .14);
}
.bp-win-bar i:nth-child(2) { background: #febc2e; }
.bp-win-bar i:nth-child(3) { background: #28c840; }
.bp-win-bar span {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: max(8px, .92cqw);
  font-weight: 600;
  letter-spacing: 0;
  color: #4a4a50;
  pointer-events: none;
}
@container (max-width: 560px) { .bp-win-bar span { display: none; } }
.bp-win img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; background: #f2f2f4; }

/* ---------- Concept: the main window, large ---------- */
.bp-concept { padding-bottom: clamp(64px, 8vw, 112px); }
.bp-main {
  max-width: calc(1180px + 2 * var(--gutter));
  margin: clamp(48px, 6vw, 80px) auto 0;
  padding: 0 var(--gutter);
}
.bp-main-stage { position: relative; }
.bp-langs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 8px 10px;
  margin-top: 28px;
}
.bp-langs-label { margin-right: 6px; font-size: .9rem; color: var(--muted); }
.bp-lang {
  min-height: 36px;
  padding: 0 14px;
  border: 1px solid var(--hairline-strong);
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--muted);
  font-family: var(--font);
  font-size: .9rem;
  font-weight: 600;
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.bp-lang:hover { color: var(--ink); border-color: rgba(244, 241, 234, .34); }
.bp-lang[aria-pressed="true"] { color: var(--ink); border-color: var(--bp-line); background: var(--bp-soft); }
@media (pointer: coarse) { .bp-lang { min-height: 44px; } }
#mainShot { transition: opacity .25s ease; }
#mainShot.is-swapping { opacity: .35; }

/* ---------- The tour: the window stays, the screens change ---------- */
/* /product-motion.css lays out .pm-steps for phone screenshots; a desktop
   window needs the wide column, so this page widens the grid and gives the
   window two thirds of it. Below 980px each step shows its own screenshot. */
.bp-tour .wrap { max-width: calc(var(--wrap-wide) + 2 * 24px); }
.bp-step-figure { margin-top: 32px; }
@media (max-width: 979px) {
  .bp-tour .pm-step + .pm-step { margin-top: clamp(72px, 12vw, 104px); }
}
@media (min-width: 980px) {
  .bp-tour .pm-steps-grid {
    grid-template-columns: minmax(0, .78fr) minmax(0, 1.72fr);
    gap: clamp(40px, 4.5vw, 72px);
  }
  .bp-tour .pm-steps-visual {
    place-items: center stretch;
    top: max(84px, calc(50vh - 17.5vw));
  }
  .bp-tour .pm-frame { width: 100%; transform: none; transition: opacity .35s ease; }
  .bp-tour .pm-step { min-height: 92vh; }
  /* /product-motion.css hides each step's own screenshot on wide screens; the
     visible window is aria-hidden, so keep the figures for screen readers */
  .bp-tour .pm-step-figure {
    display: block !important;
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

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

/* ---------- Every tool, as in the app's Tools panel ---------- */
.bp-tools {
  display: grid;
  grid-template-columns: 1fr;
  gap: 44px clamp(24px, 3vw, 40px);
  margin-top: clamp(48px, 6vw, 72px);
}
@media (min-width: 640px) { .bp-tools { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .bp-tools { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.bp-tool-group h3 {
  padding-bottom: 14px;
  border-bottom: 1px solid var(--hairline-strong);
  font-size: .95rem;
  font-weight: 700;
  letter-spacing: .01em;
  color: var(--bp);
}
.bp-tool-group ul { list-style: none; margin: 0; padding: 0; }
.bp-tool-group li {
  display: flex;
  gap: 12px;
  padding: 15px 0;
  border-bottom: 1px solid var(--hairline);
}
.bp-tool-group svg { width: 22px; height: 22px; flex-shrink: 0; margin-top: 1px; color: var(--bp); }
.bp-tool-group li > div { min-width: 0; }
.bp-tool-name { font-size: 1.02rem; font-weight: 600; line-height: 1.35; color: var(--ink); }
.bp-tool-desc { margin-top: 4px; font-size: .92rem; line-height: 1.5; color: var(--muted); text-wrap: pretty; overflow-wrap: anywhere; }
html[lang="ja"] .bp-tool-desc { line-height: 1.75; }

/* ---------- Redact: copy beside an illustration of the result ---------- */
.bp-redact-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
  align-items: center;
}
@media (min-width: 900px) {
  .bp-redact-grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(48px, 6vw, 88px); }
}
.bp-rd { margin: 0; width: min(100%, 440px); justify-self: center; }
.bp-rd-page {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 11% 10% 13%;
  border-radius: 4px;
  background: #f6f3ec;
  color: #1d2430;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 36px 70px -30px rgba(0, 0, 0, .9), 0 0 120px -50px rgba(239, 75, 63, .4);
}
.bp-rd-line { display: block; width: var(--w); height: 8px; border-radius: 3px; background: #dcd6cb; }
.bp-rd-line:first-child { height: 15px; margin-bottom: 8px; background: #1d2430; }
.bp-rd-line--thin { height: 7px; }
.bp-rd-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 14px;
  margin: 6px 0;
  font-size: clamp(.86rem, .8rem + .3vw, 1rem);
  line-height: 1.4;
}
.bp-rd-label { min-width: 4.6em; font-size: .86em; color: #5d6370; }
.bp-rd-hit { position: relative; display: inline-block; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: .92em; white-space: nowrap; }
/* the finished state: the bar, and nothing left under it */
.bp-rd-ink { opacity: 0; }
.bp-rd-bar { position: absolute; inset: -3px -5px; border-radius: 2px; background: #0c0f15; transform-origin: 0 50%; }
.bp-rd figcaption { margin-top: 22px; text-align: center; }
.bp-rd-find {
  display: inline-block;
  padding: 8px 14px;
  border: 1px solid var(--hairline-strong);
  border-radius: 8px;
  background: rgba(244, 241, 234, .04);
  font-size: .9rem;
  line-height: 1.5;
  color: var(--ink);
}
.bp-rd-note { display: block; margin-top: 10px; font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
html[lang="ja"] .bp-rd-note, html[lang="ko"] .bp-rd-note { letter-spacing: .04em; text-transform: none; }
/* with motion: the words are there first, the bars land, then the search comes back empty */
html.pm .bp-rd .bp-rd-bar { transition: transform .7s var(--pm-ease) .55s; }
html.pm .bp-rd .bp-rd-row + .bp-rd-row .bp-rd-bar { transition-delay: .8s; }
html.pm .bp-rd .bp-rd-ink { transition: opacity .2s ease 1.5s; }
html.pm .bp-rd .bp-rd-find { transition: opacity .5s ease 1.7s, transform .5s var(--pm-ease) 1.7s; }
html.pm .bp-rd:not(.on) .bp-rd-ink { opacity: 1; }
html.pm .bp-rd:not(.on) .bp-rd-bar { transform: scaleX(0); }
html.pm .bp-rd:not(.on) .bp-rd-find { opacity: 0; transform: translate3d(0, 8px, 0); }

/* ---------- Card lists (two columns of hairline rows) ---------- */
.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; }
.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"] .pr-card h3 { letter-spacing: 0; line-height: 1.45; }
.pr-card p { font-size: 1rem; line-height: 1.6; color: var(--muted); text-wrap: pretty; }
html[lang="ja"] .pr-card p { line-height: 1.85; }
.bp-safe .pr-grid { margin-top: 0; }

/* ---------- Under the hood: the claim stays put while its four proofs pass ---------- */
@media (min-width: 900px) {
  .bp-engine-grid {
    display: grid;
    grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
    column-gap: clamp(48px, 6vw, 96px);
    align-items: start;
  }
  .bp-engine-head { position: sticky; top: 112px; }
  .product-page .bp-engine-head :is(.kicker, .stmt, .lead) { text-align: left; margin-inline: 0; }
  .product-page .bp-engine-head .stmt { font-size: clamp(1.9rem, 1rem + 2.4vw, 3rem); }
  .bp-engine-list { grid-template-columns: 1fr; margin-top: 0; }
  .bp-engine-list .pr-card:first-child { border-top-color: var(--bp-line); }
}

/* ---------- Pricing and availability ---------- */
.pr-pricing {
  background:
    radial-gradient(760px 420px at 50% 12%, rgba(239, 75, 63, .09), transparent 70%),
    var(--bg-2);
}
.bp-avail {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 clamp(24px, 4vw, 48px);
  max-width: 920px;
  margin: clamp(48px, 6vw, 72px) auto 0;
}
@media (min-width: 860px) { .bp-avail { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.bp-avail-item { border-top: 1px solid var(--hairline-strong); padding: 20px 0 22px; }
.bp-avail dt { font-size: .9rem; font-weight: 600; color: var(--muted); }
.bp-avail dd { margin: 8px 0 0; font-size: 1.12rem; font-weight: 600; line-height: 1.4; color: var(--ink); text-wrap: balance; }
html[lang="ja"] .bp-avail dd { line-height: 1.6; }
.bp-avail-cta {
  margin-top: clamp(36px, 5vw, 52px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  text-align: center;
}
.bp-avail-note { font-size: .95rem; color: var(--muted); }

/* the two plans (the Bonito Scan card pattern): name and price large and
   centred, then the free month, Acrobat Pro's price for the same billing
   period and the saving; the list below stays left-aligned */
.pr-plans {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  max-width: 920px;
  margin: clamp(48px, 6vw, 72px) auto 0;
}
.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(--bp-line); }
.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, html[lang="ko"] .pr-plan-name { letter-spacing: 0; }
.pr-plan--pro .pr-plan-name { color: var(--bp); }
.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.6rem, 2rem + 2vw, 3.6rem);
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  white-space: nowrap;
}
html[lang="ja"] .pr-plan-amount, html[lang="ko"] .pr-plan-amount { letter-spacing: -.01em; }
.pr-plan-per { font-size: 1.1rem; font-weight: 600; color: var(--muted); white-space: nowrap; }
.bp-plan-eff { margin-top: 10px; font-size: .92rem; line-height: 1.5; color: var(--muted); text-align: center; }
.bp-plan-trial {
  align-self: center;
  margin-top: 16px;
  padding: 5px 14px;
  border: 1px solid var(--bp-line);
  border-radius: 14px; /* two lines: the free month, then the price after it */
  background: var(--bp-soft);
  font-size: .92rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--ink);
  text-align: center;
  text-wrap: balance;
}
html[lang="ja"] .bp-plan-trial, html[lang="ko"] .bp-plan-trial { letter-spacing: 0; }
html[lang="ko"] .bp-plan-trial { word-break: keep-all; }
.bp-plan-vs { margin: 22px 0 0; border-top: 1px solid var(--hairline); }
.bp-plan-vs > div {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 2px 16px;
  padding: 10px 0;
  border-bottom: 1px solid var(--hairline);
}
.bp-plan-vs dt { font-size: .92rem; line-height: 1.45; color: var(--muted); }
.bp-plan-vs dd { margin: 0; font-size: .98rem; font-weight: 600; line-height: 1.45; color: var(--ink); font-variant-numeric: tabular-nums; }
.bp-plan-save dd { color: var(--bp); }
.pr-plan-list { list-style: none; margin: 18px 0 0; padding: 0; }
.pr-plan-list li {
  position: relative;
  padding: 8px 0 8px 22px;
  font-size: .98rem;
  line-height: 1.5;
  color: var(--ink);
}
/* a small check drawn with borders: decoration only, nothing for a screen reader to read */
.pr-plan-list li::before {
  content: "";
  position: absolute;
  left: 3px;
  top: calc(8px + .38em);
  width: 5px;
  height: 10px;
  border: solid var(--bp);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
html[lang="ja"] .pr-plan-list li { line-height: 1.7; }
html[lang="ja"] .pr-plan-list li::before { top: calc(8px + .45em); }
.bp-pr-usd {
  max-width: 760px;
  margin: 28px auto 0;
  font-size: .92rem;
  line-height: 1.65;
  color: var(--muted);
  text-align: center;
  text-wrap: pretty;
}
html[lang="ja"] .bp-pr-usd { max-width: 44em; line-height: 1.85; }
.bp-pr-usd a { color: inherit; text-underline-offset: 2px; }
.bp-pr-usd a:hover { color: var(--ink); }
/* note 2: the conditions of the free month, right under the two cards
   (the hero's "First month free" links here) */
.bp-plan-terms {
  max-width: 920px;
  margin: 22px auto 0;
  font-size: .86rem;
  line-height: 1.65;
  color: var(--muted-2);
}
html[lang="ja"] .bp-plan-terms { line-height: 1.85; }
html[lang="ko"] .bp-plan-terms { letter-spacing: 0; word-break: keep-all; }
.bp-plan-terms:target { outline: 1px solid var(--bp-line); outline-offset: 8px; border-radius: 4px; }
html[lang="ko"] .bp-pr-usd { max-width: 46em; letter-spacing: 0; word-break: keep-all; }

/* ---------- Bonito PDF vs Acrobat Pro: one hairline table ---------- */
.bp-compare { border-top: 1px solid var(--hairline); }
/* the footnote marker (hero price line, the Acrobat Pro column) */
.bp-fn { font-size: .68em; line-height: 0; vertical-align: super; margin-left: 2px; }
.bp-fn a { color: inherit; text-decoration: none; padding: 2px 3px; border-radius: 4px; }
.bp-fn a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }
.bp-cmp-wrap { max-width: 980px; margin: clamp(48px, 6vw, 72px) auto 0; }
.bp-cmp { width: 100%; border-collapse: collapse; font-size: 1rem; }
.bp-cmp th, .bp-cmp td {
  padding: 14px 18px;
  text-align: left;
  vertical-align: top;
  line-height: 1.5;
  border-bottom: 1px solid var(--hairline);
}
.bp-cmp thead th {
  padding-top: 0;
  padding-bottom: 14px;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--ink);
  border-bottom: 1px solid var(--hairline-strong);
}
.bp-cmp thead th:first-child { font-size: .9rem; font-weight: 600; color: var(--muted-2); }
.bp-cmp thead th.bp-cmp-us { color: var(--bp); }
.bp-cmp tbody th { width: 36%; font-weight: 600; color: var(--ink); }
.bp-cmp td { width: 32%; padding-left: 40px; color: var(--muted); }
/* the Bonito PDF column: a faint tint of the accent */
.bp-cmp .bp-cmp-us { background: rgba(255, 98, 87, .06); }
.bp-cmp td.bp-cmp-us { color: var(--ink); }
/* group headings: "In both", "Only in Acrobat Pro", "Price" */
.bp-cmp .bp-cmp-group th {
  width: auto;
  padding: 34px 18px 10px;
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--bp);
  border-bottom: 1px solid var(--hairline-strong);
}
.bp-cmp tbody:first-of-type .bp-cmp-group th { padding-top: 18px; }
html[lang="ja"] .bp-cmp .bp-cmp-group th, html[lang="ko"] .bp-cmp .bp-cmp-group th { font-size: .9rem; letter-spacing: .02em; text-transform: none; }
/* a small check or dash before "Yes" / "Not available": drawn, not text */
.bp-cmp td.bp-yes, .bp-cmp td.bp-no { position: relative; }
.bp-cmp td.bp-yes::after, .bp-cmp td.bp-no::after { content: ""; position: absolute; left: 18px; }
.bp-cmp td.bp-yes::after {
  top: calc(14px + .3em);
  width: 5px;
  height: 10px;
  border: solid var(--bp);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.bp-cmp td.bp-yes:not(.bp-cmp-us)::after { border-color: var(--muted); }
.bp-cmp td.bp-no::after { top: calc(14px + .72em); width: 11px; height: 2px; border-radius: 1px; background: var(--muted-2); }
.bp-cmp-price td { font-weight: 600; font-variant-numeric: tabular-nums; }
html[lang="ja"] .bp-cmp :is(th, td) { line-height: 1.7; }
html[lang="ko"] .bp-cmp :is(th, td) { letter-spacing: 0; word-break: keep-all; }
.bp-cmp-more {
  max-width: 980px;
  margin: 22px auto 0;
  font-size: .95rem;
  line-height: 1.6;
  color: var(--muted);
}
.bp-cmp-note {
  max-width: 980px;
  margin: 16px auto 0;
  font-size: .86rem;
  line-height: 1.65;
  color: var(--muted-2);
}
html[lang="ja"] :is(.bp-cmp-more, .bp-cmp-note) { line-height: 1.85; }
html[lang="ko"] :is(.bp-cmp-more, .bp-cmp-note) { letter-spacing: 0; word-break: keep-all; }
.bp-cmp-note a { color: var(--muted); text-underline-offset: 2px; }
.bp-cmp-note a:hover { color: var(--ink); }
.bp-cmp-note:target { outline: 1px solid var(--bp-line); outline-offset: 8px; border-radius: 4px; }
/* the notes are jump targets: clear the sticky local nav (70px, see
   /product-motion.css) plus the 8px outline, with some air */
html.pm-has-ln :is(#cmpNote, #planTerms) { scroll-margin-top: 92px; }

@media (max-width: 680px) {
  /* each row becomes a small block: the feature, then one line per app */
  .bp-cmp thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .bp-cmp, .bp-cmp tbody, .bp-cmp tr, .bp-cmp th, .bp-cmp td { display: block; width: 100%; }
  .bp-cmp tr { padding: 14px 0 12px; border-top: 1px solid var(--hairline-strong); }
  .bp-cmp tbody tr:last-child { border-bottom: 1px solid var(--hairline-strong); }
  .bp-cmp tbody th { width: 100%; padding: 0 0 8px; border: 0; }
  .bp-cmp td { display: grid; grid-template-columns: 6.6rem 1fr; gap: 10px; width: 100%; padding: 6px 10px; border: 0; }
  .bp-cmp td::before { content: attr(data-head); font-size: .86rem; font-weight: 600; line-height: 1.75; color: var(--muted-2); }
  .bp-cmp td.bp-cmp-us { border-radius: 8px; }
  .bp-cmp td.bp-cmp-us::before { color: var(--bp); }
  /* the check and dash sit after the app name, before the value */
  .bp-cmp td.bp-yes, .bp-cmp td.bp-no { padding-left: 10px; }
  .bp-cmp td.bp-yes::after, .bp-cmp td.bp-no::after { display: none; }
  .bp-cmp .bp-cmp-group { padding: 30px 0 0; border-top: 0; }
  .bp-cmp tbody:first-of-type .bp-cmp-group { padding-top: 0; }
  .bp-cmp .bp-cmp-group th { padding: 0 0 10px; border: 0; }
}
@media (max-width: 760px) {
  .pr-plans { grid-template-columns: 1fr; max-width: 480px; }
}
@media (max-width: 480px) {
  .pr-plan { padding: 26px 22px 24px; }
}

/* ---------- 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: 30px 0;
  border-bottom: 1px solid var(--hairline);
  align-items: start;
}
.spec-row > * { min-width: 0; }
.spec-label { font-size: 1.05rem; font-weight: 600; line-height: 1.4; color: var(--ink); margin: 0; }
.spec-value { max-width: 64ch; }
.spec-value p { font-size: 1rem; line-height: 1.55; color: var(--muted); margin: 0 0 6px; overflow-wrap: anywhere; }
.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: 64ch; margin-inline: auto; }
html[lang="ja"] .pr-faq-list { max-width: 38em; }
html[lang="ko"] .pr-faq-list { max-width: 40em; }
.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; }

/* ---------- 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-optional { font-weight: 400; color: var(--muted); }
.pr-hint { margin-top: 8px; font-size: .86rem; line-height: 1.55; color: var(--muted); }
html[lang="ja"] .pr-hint { line-height: 1.75; }
.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: 128px; line-height: 1.6; }
.pr-field input:focus,
.pr-field select:focus,
.pr-field textarea:focus {
  outline: none;
  border-color: var(--bp);
  box-shadow: 0 0 0 3px var(--bp-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; }
html[lang="ja"] .pr-form-note { max-width: 30em; line-height: 1.8; }
html[lang="ko"] .pr-form-note { max-width: 32em; }
.pr-form-note a { color: var(--ink); }
/* Turnstile injects its widget after load into an empty div; hold its 65px
   (line-height: 0 removes the descender gap that varies by language). Same
   rule as the other product pages. */
.cf-turnstile { min-height: 65px; line-height: 0; }
.pr-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 28px;
  font-family: var(--font);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: .01em;
  color: #fff;
  background: var(--bp-strong);
  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(--bp-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(--bp-line);
  background: var(--bp-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);
}
html[lang="ja"] .pr-trademark, html[lang="ko"] .pr-trademark { max-width: 40em; }
.footer-fine a { color: var(--muted); }
.footer-fine a:hover { color: var(--ink); }

/* the hero has seven rising lines; /product-motion.css times the first six */
html.pm body.loaded .pr-hero .rise:nth-child(7) { animation-delay: 1.22s; }

/* ---------- Responsive ---------- */
@media (max-width: 860px) {
  /* Phones and small tablets: the copy runs the full width, so the photograph
     becomes a band across the top, framed on the pages, and fades out before
     the copy starts; every text line then sits on the plain dark ground. */
  .pr-hero { align-items: flex-start; background: var(--bg); }
  .pr-hero-media { bottom: auto; height: min(44svh, 420px); overflow: hidden; }
  .pr-hero-img { object-position: 78% 45%; opacity: 1; }
  .pr-hero-shade {
    background: linear-gradient(180deg, rgba(2, 6, 13, .55) 0%, rgba(2, 6, 13, .05) 26%, rgba(2, 6, 13, .1) 58%, rgba(2, 6, 13, .82) 86%, var(--bg) 100%);
  }
  .pr-hero-inner { padding-top: calc(min(44svh, 420px) - 56px); }
  .pr-grid { grid-template-columns: 1fr; gap: 0; }
  .pr-card { padding: 22px 0 24px; }
  .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: 480px) {
  .pr-cta { flex-direction: column; align-items: stretch; }
  .pr-cta .bp-btn { width: 100%; }
  .bp-status { border-radius: 16px; }
  .bp-fact { white-space: normal; }
  .pr-form-foot { align-items: stretch; }
  .pr-form-foot .pr-submit { width: 100%; }
  .bp-langs-label { flex-basis: 100%; margin: 0 0 2px; text-align: center; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .pr-faq-a { transition: none !important; }
  .pr-submit, .bp-btn, .bp-lang, #mainShot { transition: none !important; }
}