/* Pricing section: owned by templates/marketing/_pricing.html. Every class is prefixed pr-.
   No motion: hover and focus change color only, so the reduced-motion form is identical. */

.pr-section { background:#fff; }
.pr-inner { display:grid; gap:56px; }

/* Header: headline left, intro right (OutMyWindow arrangement). */
.pr-head { display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); gap:32px 64px; align-items:end; }
.pr-eyebrow { margin-bottom:20px; }
.pr-title { margin:0; color:var(--marketing-ink); font:700 clamp(44px,5.4vw,80px)/1 var(--display-font); letter-spacing:-.055em; }
.pr-title em { color:var(--field-teal-deep); font-style:normal; }
.pr-head-intro { display:grid; justify-items:start; gap:20px; padding-bottom:6px; }
.pr-lede { max-width:460px; margin:0; color:var(--marketing-muted); font-size:18px; line-height:1.65; }

.pr-draft { display:inline-flex; align-items:center; gap:8px; margin:0; padding:6px 14px 6px 10px; border:1px dashed #64838a; border-radius:999px; background:#fff; color:var(--marketing-ink); font-size:13px; font-weight:600; line-height:1.4; }
.pr-draft svg { width:16px; height:16px; flex:none; stroke:var(--field-teal-deep); }

/* Cards */
.pr-cards { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.12fr); gap:24px; align-items:stretch; }
.pr-card { position:relative; display:flex; flex-direction:column; min-width:0; padding:40px; border:1px solid var(--marketing-line); border-radius:24px; background:#fff; }
.pr-card-pro { border:2px solid var(--field-teal); padding:39px; box-shadow:0 28px 60px -32px #226b7466; }
.pr-name { display:flex; align-items:center; gap:12px; margin:0; color:var(--marketing-ink); font:700 22px/1.2 var(--display-font); letter-spacing:-.02em; }
.pr-hex { width:40px; height:44px; flex:none; }
.pr-hex path { fill:var(--field-teal-deep); stroke:var(--field-teal); stroke-width:3; stroke-linejoin:round; }
.pr-hex text { fill:#fff; font:700 12px/1 var(--display-font); letter-spacing:-.02em; }
.pr-price { margin:18px 0 0; }
.pr-amount { color:var(--marketing-ink); font:700 76px/.95 var(--display-font); letter-spacing:-.06em; }
.pr-desc { margin:16px 0 0; color:var(--marketing-muted); font-size:16px; line-height:1.6; }
.pr-card-free .pr-desc { padding-bottom:28px; border-bottom:1px solid var(--marketing-line); }

/* Pro tab: deep teal with white 12 px / 700 text (gold is reserved for earned rewards). Sentence case. */
.pr-tab { position:absolute; top:-1px; right:32px; margin:0; padding:9px 14px 10px; border-radius:0 0 12px 12px; background:var(--field-teal-deep); color:#fff; font-size:12px; font-weight:700; line-height:1.2; }

/* Check lists */
.pr-list { display:grid; gap:14px; margin:28px 0 0; padding:0; list-style:none; }
.pr-list li { display:flex; align-items:flex-start; gap:12px; color:var(--marketing-ink); font-size:16px; line-height:1.5; }
.pr-list strong { font-weight:700; }
.pr-list .pr-limit { color:var(--marketing-muted); }
.pr-list .pr-limit strong { color:var(--marketing-ink); }
.pr-icon { width:20px; height:20px; flex:none; }
.pr-list .pr-icon { margin-top:2px; }
.pr-keep { margin:28px 0 0; padding:18px 20px; border-radius:20px; background:var(--marketing-paper); color:var(--marketing-muted); font-size:14px; line-height:1.6; }
.pr-keep strong { color:var(--marketing-ink); font-weight:700; }
.pr-icon-check circle { fill:var(--field-teal-tint); }
.pr-icon-check path { stroke:var(--field-teal-deep); }
.pr-card-pro .pr-icon-check circle { fill:var(--field-teal-deep); }
.pr-card-pro .pr-icon-check path { stroke:#fff; }
.pr-icon-limit circle { fill:#e8eceb; }
.pr-icon-limit path { stroke:var(--marketing-muted); }
.pr-icon-none path { stroke:#64838a; }
.pr-icon-ad path { stroke-width:1.6; }

/* Plan panel inside Pro */
.pr-plans { margin-top:32px; padding:24px 24px 18px; border-radius:20px; background:var(--field-teal-tint); }
.pr-plans-title { margin:0 0 6px; color:var(--marketing-ink); font-size:15px; font-weight:700; line-height:1.4; }
.pr-plan-list { margin:0; padding:0; list-style:none; }
.pr-plan { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px 0; border-bottom:1px solid #c4dfdf; }
.pr-plan:last-child { border-bottom:0; }
.pr-plan-name { display:flex; flex-wrap:wrap; align-items:center; gap:4px 10px; min-width:0; color:var(--marketing-ink); font-size:17px; font-weight:700; line-height:1.3; }
.pr-plan-name small { flex-basis:100%; color:var(--marketing-muted); font-size:14px; font-weight:500; }
.pr-plan-price { flex:none; color:var(--marketing-ink); font:700 26px/1 var(--display-font); letter-spacing:-.04em; white-space:nowrap; }
.pr-plan-price small { margin-left:2px; color:var(--marketing-muted); font:500 14px/1 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; letter-spacing:0; }
.pr-plans-foot { margin:8px 0 0; padding-top:12px; border-top:1px solid #c4dfdf; color:var(--marketing-muted); font-size:13px; line-height:1.5; }
.pr-plans-draft { display:block; margin-top:4px; color:var(--marketing-ink); font-weight:600; }

/* Actions: both lead to the coming-soon download section; neither implies a purchase today. */
.pr-action { display:grid; gap:10px; margin-top:auto; padding-top:32px; text-align:center; }
.pr-button { display:flex; align-items:center; justify-content:center; min-height:56px; padding:14px 20px; border-radius:14px; font-size:20px; font-weight:700; line-height:1.2; text-decoration:none; }
.pr-button-outline { border:2px solid var(--field-teal-deep); background:#fff; color:var(--field-teal-deep); }
.pr-button-outline:hover { background:var(--field-teal-tint); }
.pr-button-solid { border:2px solid var(--field-teal); background:var(--field-teal); color:#fff; }
.pr-button-solid:hover { border-color:var(--field-teal-deep); background:var(--field-teal-deep); }
.pr-action-note { margin:0; color:var(--marketing-muted); font-size:13px; line-height:1.4; }

/* Comparison table */
.pr-compare { padding:8px 40px 16px; border:1px solid var(--marketing-line); border-radius:24px; background:#fff; }
.pr-table { width:100%; border-collapse:collapse; font-size:16px; line-height:1.4; }
.pr-table caption { padding:30px 0 10px; color:var(--marketing-ink); font:700 24px/1.2 var(--display-font); letter-spacing:-.03em; text-align:left; }
.pr-col-free, .pr-col-pro { width:22%; }
.pr-table thead th { padding:14px 12px; border-bottom:1px solid var(--marketing-line); color:var(--marketing-ink); font-size:15px; font-weight:700; text-align:center; }
.pr-table thead th:last-child { color:var(--field-teal-deep); }
.pr-table tbody th { padding:14px 16px 14px 0; color:var(--marketing-ink); font-weight:500; text-align:left; }
.pr-table td { padding:14px 12px; text-align:center; }
.pr-table tbody tr { border-bottom:1px solid var(--marketing-line); }
.pr-table tbody tr:last-child { border-bottom:0; }
.pr-table td:last-child { background:#f3f9f9; }
.pr-table td .pr-icon { display:inline-block; vertical-align:middle; }
.pr-cell-text { display:inline-block; margin-left:8px; color:var(--marketing-ink); font-size:15px; vertical-align:middle; }

.pr-note { margin:0; color:var(--marketing-muted); font-size:14px; line-height:1.6; text-align:center; }

/* Tablet */
@media (max-width:1023px) {
  .pr-inner { gap:44px; }
  .pr-head { grid-template-columns:1fr; gap:24px; }
  .pr-lede { max-width:600px; }
  .pr-card, .pr-card-pro { padding:32px 28px; }
  .pr-card-pro { padding:31px 27px; }
  .pr-amount { font-size:64px; }
  .pr-compare { padding:4px 28px 12px; }
}
/* Two narrower columns: equal widths keep the Pro card from running much shorter than Free. */
@media (min-width:901px) and (max-width:1199px) {
  .pr-cards { grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
}
@media (max-width:900px) {
  .pr-cards { grid-template-columns:1fr; gap:20px; }
}

/* Phone: the table keeps its three columns, with compact cells that stack icon over label. */
@media (max-width:600px) {
  .pr-inner { gap:36px; }
  .pr-title { font-size:clamp(40px,11.5vw,56px); }
  .pr-lede { font-size:16px; }
  .pr-card, .pr-card-pro { padding:28px 20px 24px; border-radius:24px; }
  .pr-card-pro { padding:27px 19px 23px; }
  .pr-card-pro .pr-name { margin-top:22px; }
  .pr-tab { right:20px; }
  .pr-amount { font-size:60px; }
  .pr-keep { padding:16px; }
  .pr-plans { margin-top:28px; padding:18px 16px 14px; }
  .pr-plan-price { font-size:23px; }
  .pr-compare { padding:0 14px 6px; border-radius:24px; }
  .pr-table { table-layout:fixed; font-size:15px; }
  .pr-table caption { padding:24px 2px 6px; font-size:22px; }
  .pr-col-free, .pr-col-pro { width:72px; }
  .pr-table thead th { padding:12px 4px; font-size:14px; }
  .pr-table tbody th { padding:12px 10px 12px 2px; font-size:15px; line-height:1.35; }
  .pr-table td { padding:10px 4px; }
  .pr-table td .pr-icon { display:block; margin:0 auto; }
  .pr-cell-text { display:block; margin:4px 0 0; font-size:12px; line-height:1.3; }
}
@media (max-width:359px) {
  .pr-plan { flex-wrap:wrap; }
  .pr-col-free, .pr-col-pro { width:66px; }
  .pr-table tbody th { font-size:14px; }
}

/* When the Free card runs taller, the extra space sits above the plan panel so both actions stay aligned. */
.pr-card-pro .pr-list { margin-bottom:32px; }
.pr-card-pro .pr-plans { margin-top:auto; }
.pr-card-pro .pr-action { margin-top:0; }
@media (max-width:600px) { .pr-card-pro .pr-list { margin-bottom:28px; } }