/* /pricing page — page-specific layer on top of site.css (tokens + .rb-* components). Logical properties only (RTL).
   Rebuilt 2026-10: full plan matrix (#matrix, groups #plan-*), one-contract comparison (#compare, night), #security. */

/* ===== Hero: pricing.lead breaks after its first clause (<br class="rb-br-sm">); the second line needs ~50rem, and below
   768px it does not fit, so the break is dropped and the lead wraps naturally ===== */
.rb-page-hero .rb-lead{max-width:50rem}
@media (max-width:767px){.rb-page-hero .rb-lead .rb-br-sm{display:none}}

/* ===== Plans: the page hero is the heading, so the cards start closer to it ===== */
.rb-pr-plans{padding-top:clamp(3rem,2rem + 2.5vw,4.5rem)}
.rb-pr-plans .rb-plans{margin-top:0}   /* site.css spaces it from a heading the hero replaces here */
/* Stacked cards (<1024): the 6 summary rows are the same cells as the #matrix right below, so the cards keep only the
   headline (name · price · scope · desc · CTA) and the matrix carries the rows (DOM text, no JS) */
@media (max-width:1023px){.rb-pr-plans .rb-plan__rows{display:none}}

/* ===== Full matrix (#matrix): group rows = no + title + status + desc; row labels carry a sub line ===== */
.rb-pr-matrix{margin-top:clamp(3.5rem,2.5rem + 3vw,5.5rem);scroll-margin-top:6rem}
.rb-pr-matrix > .rb-heading{gap:.5rem}
.rb-pr-matrix > .rb-heading .rb-caption{font-size:.9rem}
/* group rows sit on a tinted band (body clips it to its rounded corners); the desc lines up under the title (badge 2rem + gap .5rem) */
.rb-pr-matrix .rb-compare__body{overflow:clip}
.rb-pr-matrix .rb-compare__group{scroll-margin-top:11rem;padding:1rem 1.25rem;background:var(--rb-surface-2);border-top-color:var(--rb-line-strong);border-bottom:1px solid var(--rb-line);text-transform:none;letter-spacing:0}
@media (max-width:767px){.rb-pr-matrix .rb-compare__group{scroll-margin-top:6rem}}
.rb-pr-matrix .rb-compare__group > span{display:flex;flex-wrap:wrap;align-items:center;gap:.25rem .5rem}
.rb-compare__group-no{display:inline-grid;place-items:center;inline-size:2rem;block-size:1.625rem;padding-inline:.4rem;border-radius:var(--rb-radius-pill);background:var(--rb-accent);font:700 .78rem/1 var(--rb-font-display);color:#fff}
.rb-compare__group-title{font-size:1.1rem;font-weight:800;color:var(--rb-ink)}
.rb-pr-matrix .rb-compare__group .rb-tag{font-size:.7rem}
.rb-compare__group-desc{flex-basis:100%;margin-inline-start:2.5rem;font-size:.84rem;font-weight:500;line-height:1.5;color:var(--rb-muted)}
.rb-pr-matrix .rb-compare__label{font-size:.95rem;font-weight:700}
.rb-pr-matrix .rb-compare__label > span{display:block}
.rb-compare__label-sub{display:block;margin-top:.2rem;font-size:.78rem;font-weight:500;line-height:1.45;color:var(--rb-muted)}
.rb-pr-matrix .rb-compare__note{font-size:.9rem;line-height:1.5;color:var(--rb-ink)}
/* 768–859px (iPad portrait): the NBSP-joined language lists (bold STANDARD cells; zh-cn PREMIUM) outgrow a 1fr column, so the label column gives up some width */
@media (min-width:768px) and (max-width:859px){.rb-pr-matrix .rb-compare__row{grid-template-columns:1.15fr repeat(3,minmax(0,1fr))}.rb-pr-matrix .rb-compare__note,.rb-pr-matrix .rb-compare__cell.is-us .rb-compare__note{font-size:.85rem}}
/* × (not included — only the BASIC column has them) in black on a neutral tint instead of rose */
.rb-pr-matrix .rb-compare__cell .rb-mark--no{background:rgb(var(--rb-ink-rgb) / .07);color:var(--rb-ink)}
/* notes heading (pricing.notes.title) above the ※ notes; the ✓ all-plans line sits under the plan cards (as on home) */
.rb-pr-notes-title{margin-top:2.5rem;font-size:1.05rem;font-weight:800;line-height:1.4;text-align:center;color:var(--rb-ink)}
.rb-pr-matrix .rb-fineprint{margin-block-start:1rem}
.rb-pr-matrix .rb-fineprint strong{color:var(--rb-ink)}   /* site.css colours it only after a .rb-plan-foot */

/* ===== One-contract comparison (#compare, night) ===== */
/* phones (stacked cells): the column name may wrap so long values (en/mn/id) keep at least their longest word on the line */
@media (max-width:767px){.rb-pr-onecontract .rb-compare__cell::before{flex:0 1 auto}}
.rb-pr-sides{gap:1rem;max-width:var(--rb-container-narrow);margin-inline:auto}
.rb-pr-side{display:flex;align-items:center;gap:1rem;padding:1.25rem 1.5rem;border-radius:var(--rb-radius-card)}
.rb-pr-side.is-us{border-color:rgb(193 166 250 / .35)}
.rb-pr-side__icon{display:grid;place-items:center;flex:none;inline-size:2.75rem;block-size:2.75rem;border:1px solid var(--rb-night-border);border-radius:var(--rb-radius-md);background:rgb(255 255 255 / .05);color:var(--rb-on-night-3)}
.rb-pr-side.is-us .rb-pr-side__icon{border-color:rgb(193 166 250 / .3);background:rgb(193 166 250 / .12);color:var(--rb-accent-bright)}
.rb-pr-side__icon svg{inline-size:1.2rem;block-size:1.2rem}
.rb-pr-side__title{font-size:1.1rem;font-weight:800;line-height:1.35;color:#fff}
.rb-pr-side__text{margin-top:.2rem;font-size:.92rem;line-height:1.5;color:var(--rb-on-night-3)}
.rb-pr-table-title{max-width:var(--rb-container-narrow);margin-inline:auto;text-wrap:balance}
.rb-compare.rb-pr-onecontract{max-width:var(--rb-container-narrow);margin-inline:auto;margin-top:1.5rem}
.rb-pr-onecontract .rb-compare__row{grid-template-columns:minmax(0,1fr) repeat(2,minmax(0,1fr))}
.rb-pr-onecontract .rb-compare__note{font-size:.85rem}
/* stacked on phones: the light surface cells of site.css become night glass here */
@media (max-width:767px){
  .rb-pr-onecontract.rb-compare--stack .rb-compare__row{grid-template-columns:1fr}
  .rb-pr-onecontract.rb-compare--stack .rb-compare__label{color:#fff}
  .rb-pr-onecontract.rb-compare--stack .rb-compare__cell{background:rgb(255 255 255 / .05)}
  .rb-pr-onecontract.rb-compare--stack .rb-compare__cell::before{color:var(--rb-on-night-4)}
  .rb-pr-onecontract.rb-compare--stack .rb-compare__cell.is-us{background:rgb(var(--rb-accent-rgb) / .2);box-shadow:inset 0 0 0 1px rgb(193 166 250 / .25)}
  .rb-pr-onecontract.rb-compare--stack .rb-compare__cell.is-us::before{color:var(--rb-accent-bright)}
  .rb-pr-onecontract.rb-compare--stack .rb-compare__cell.is-us .rb-compare__note{color:#fff}
}

/* ===== Contract & security (#security) ===== */
.rb-pr-sec{display:flex;flex-direction:column;height:100%}
.rb-pr-sec__value{margin-top:.25rem;text-wrap:balance}
.rb-pr-sec__sub{margin-top:.375rem;font-size:.82rem}

/* ja: leads, H2s and FAQ questions break at phrase boundaries, not inside a word ("ご確認くだ|さい", "比|べて", "申し|込む"); as page-service.css. Chromium only, others keep the default */
html:lang(ja) :is(.rb-page-hero,.rb-heading) .rb-lead,html:lang(ja) :is(.rb-h2,.rb-faq__q){word-break:auto-phrase}