/* Product pages: page-specific styles only. Tokens, base, shell, buttons, cards, forms, pricing cards and the segmented control are in /css/site.css (the design system, WP-112). */

/* Billing period toggle (Annual / Monthly): radio inputs before the content, no script needed. Styled as .seg. */
.billing{position:relative}
.bill-input{position:absolute;inset-block-start:0;inset-inline-start:0;opacity:0;inline-size:1px;block-size:1px;margin:0}
#bill-annual:checked ~ .seg-pair label[for="bill-annual"],#bill-monthly:checked ~ .seg-pair label[for="bill-monthly"]{background:var(--grad);color:var(--on-accent)}
#bill-annual:focus-visible ~ .seg-pair label[for="bill-annual"],#bill-monthly:focus-visible ~ .seg-pair label[for="bill-monthly"]{outline:3px solid var(--indigo);outline-offset:3px}
#bill-annual:checked ~ .price-monthly,#bill-annual:checked ~ .plans .price-monthly,
#bill-monthly:checked ~ .price-annual,#bill-monthly:checked ~ .plans .price-annual{display:none}
#bill-monthly{inset-inline-start:6px}
.plugin-line{display:block;margin-top:.3em}
.price-foot{margin-top:var(--s5);color:var(--muted);font-size:var(--fs-sm);display:grid;gap:4px}
.price-foot p{margin:0}
.price-foot a{color:inherit;text-decoration:underline}
.claims{padding-inline-start:1.2em}
.steps-list{padding-inline-start:1.2em;display:grid;gap:8px}
.landing-two{display:grid;gap:var(--s4)}
@media (min-width:768px){.landing-two{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s5)}}
.landing-two .card:hover{transform:none;border-color:var(--line)}
.landing-two .checks{margin-block-end:0}
.limits-card .limits{margin:0;color:var(--text2)}
.landing .cta-band{margin-block-start:var(--s7)}
.landing .steps h3{margin:.2em 0 .4em;font-size:1.15rem}
.landing .faq{margin-top:12px}

/* Diagrams (Seo/Diagrams.cs): colours from tokens, so a future light token set restyles them; wide variant from 761px, tall variant on phones */
.dg-fig{margin:2rem 0}
.dg{display:block;inline-size:100%;block-size:auto;max-inline-size:100%}
.dg-wide{display:block}.dg-tall{display:none}
@media (max-width:760px){.dg-wide{display:none}.dg-tall{display:block;max-inline-size:420px;margin-inline:auto}}
.dg text{font-family:var(--font)}
.dg-t{fill:var(--text);font-size:15px;font-weight:650}
.dg-m{fill:var(--muted);font-size:13.5px;font-weight:500}
.dg-lane{fill:var(--text);font-size:15px;font-weight:750}
.dg-tag{fill:var(--muted);font-size:12.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase}
.dg-tag-bad{fill:var(--bad-text);font-size:12.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase}
.dg-box{fill:var(--panel);stroke:var(--field-line);stroke-width:1.5}
.dg-hot{stroke:var(--teal);stroke-width:2}
.dg-soft{fill:var(--bg2)}
.dg-dashbox{stroke-dasharray:7 5}
.dg-dead{stroke:var(--bad);stroke-dasharray:6 5}
.dg-bad{stroke:var(--bad)}
.dg-ln{stroke:var(--indigo);stroke-width:2;fill:none}
.dg-ln-bad{stroke:var(--bad)}
.dg-dash{stroke-dasharray:6 6}
.dg-head{fill:var(--indigo)}
.dg-head-bad{fill:var(--bad)}
.dg-x circle{fill:var(--bg);stroke:var(--bad);stroke-width:2}
.dg-x path{stroke:var(--bad);stroke-width:2.4;stroke-linecap:round;fill:none}
.dg-bar{fill:var(--indigo)}
.dg-bar-hi{fill:var(--teal)}
@media (forced-colors:active){.dg-box{stroke:CanvasText}.dg-t,.dg-m,.dg-lane,.dg-tag,.dg-tag-bad{fill:CanvasText}.dg-ln{stroke:CanvasText}.dg-head{fill:CanvasText}.dg-bar{fill:Highlight}}

/* Screenshots: width/height attributes reserve the space (no layout shift); lazy below the fold */
.shots-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-block:1.5rem}
.shots-grid .shot{margin:0}
.shot img{inline-size:100%;block-size:auto;border:1px solid var(--line);border-radius:var(--radius);display:block}
.shot-pair{grid-column:1/-1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
@media (max-width:760px){.shots-grid,.shot-pair{grid-template-columns:1fr}}

/* Legal pages (WP-76) */
.legal-doc .prose{overflow-wrap:anywhere}
.legal-meta{display:grid;grid-template-columns:max-content 1fr;gap:6px 18px;margin:0 0 28px;padding:14px 18px;border:1px solid var(--line);border-radius:14px;background:var(--panel)}
.legal-meta dt{color:var(--muted)}
.legal-meta dd{margin:0}
.legal-meta .legal-unset{color:var(--muted);font-style:italic}
.legal-meta-h{font-size:1rem;margin:0 0 8px}
.table-scroll{overflow-x:auto;margin:0 0 1.2em}
.table-scroll table{border-collapse:collapse;min-inline-size:100%}
.table-scroll th,.table-scroll td{border:1px solid var(--line);padding:6px 10px;text-align:start;vertical-align:top}
.legal-related ul{display:flex;flex-wrap:wrap;gap:8px 20px;list-style:none;padding:0}
.legal-related a{display:inline-block;padding:4px 0}
@media (max-width:560px){.legal-meta{grid-template-columns:1fr}.legal-meta dd{margin-block-end:6px}}
@media print{
  :root{color-scheme:light}
  body{background:#fff;color:#000}
  .site-header,.skip,.banner,.legal-related,.crumbs,.site-footer nav{display:none!important}
  .site-footer{border:0;padding:0}
  .legal-banner{border:2px solid #000;color:#000;background:#fff;break-inside:avoid}
  .legal-meta,.table-scroll th,.table-scroll td{border-color:#000;background:#fff}
  .table-scroll{overflow:visible}
  .legal-doc a{color:#000;text-decoration:underline}
  .legal-body a[href^="/"]::after{content:" (" attr(href) ")";font-size:.85em}
  h2,h3{break-after:avoid}
  tr{break-inside:avoid}
}
/* Marketplace-style platform pages (WP-110, restyled WP-112): wordpress and shopify. Images carry width/height; the hero image is decoration behind the text. */
.sf-hero{position:relative;overflow:hidden;padding:var(--s6) 0 var(--s7);background:linear-gradient(135deg,var(--tint-mint),var(--tint-lav));border-block-end:1px solid var(--line)}
.sf-hero-img{position:absolute;inset:0;inline-size:100%;block-size:100%;object-fit:cover;object-position:right center;opacity:.55;display:none}
.sf-hero::after{content:none}
.sf-hero-in{position:relative;z-index:1}
.sf-hero-in h1,.sf-hero-in .lead,.sf-note{max-inline-size:44rem}
.sf-hero h1{margin:.2em 0 .4em}
.sf-note{margin:.8em 0 0;color:var(--muted);font-size:var(--fs-sm)}
.sf-facts{list-style:none;margin:var(--s5) 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px 10px}
.sf-facts li{padding:6px 14px;border:1px solid var(--line);border-radius:999px;background:var(--panel);font-size:var(--fs-sm)}
.sf-facts .k{color:var(--muted);margin-inline-end:4px}
.sf-hero .status{border-radius:14px}
.sf-grid,.sf-plans{list-style:none;margin:0 0 var(--s5);padding:0;display:grid;gap:var(--s4);grid-template-columns:minmax(0,1fr)}
.sf-card,.sf-plan{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:var(--s4);display:flex;flex-direction:column;box-shadow:var(--shadow)}
.sf-card img{inline-size:100%;block-size:auto;border-radius:12px;display:block;margin-block-end:var(--s3);background:var(--bg2)}
.sf-card h3{margin:.1em 0 .3em;font-size:var(--fs-h3)}
.sf-card p{margin:0;color:var(--muted)}
.sf-plans{grid-template-columns:minmax(0,1fr)}
.sf-plan h3{margin:0 0 .3em}
.sf-plan .price{font-size:1.75rem;overflow-wrap:anywhere}
.sf-card,.sf-plan,.sf-facts li,.wl-card,.steps li{min-inline-size:0;overflow-wrap:anywhere}
.sf-facts{max-inline-size:100%}
.sf-plan .plan-badge{font-size:.72rem}
.sf-banner{margin:var(--s5) 0;padding:14px 18px;border:1px solid var(--bad);border-radius:14px;background:var(--panel);color:var(--bad-text)}
.sf-final{text-align:center}
.sf-final .cta-row{justify-content:center}
.sf h2.topic-h{margin-block-start:0}
.sf .landing h3.topic-h{margin-block-start:var(--s6)}
@media (min-width:480px){.sf-plans{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:640px){.sf-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.sf-hero{padding:var(--s7) 0 var(--s8)}}
@media (min-width:1024px){.sf-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s5)}.sf-plans{grid-template-columns:repeat(3,minmax(0,1fr))}.sf-card{padding:var(--s5)}
}
/* waiting list: a card with an inline email + button, consent below */
.wl-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-lg);padding:var(--s5);box-shadow:var(--shadow)}
.waitform{max-inline-size:none;gap:var(--s3)}
.wl-btn{inline-size:100%}
@media (min-width:640px){
  .wl-card{padding:var(--s6)}
  .waitform{grid-template-columns:minmax(0,1fr) auto;align-items:end;column-gap:var(--s3)}
  .wl-consent,.wl-other,.wl-fine{grid-column:1/-1}
  .waitform>.wl-btn{inline-size:auto;grid-row:1;grid-column:2;justify-self:stretch}
}
/* WP-113: content pages (features, how it works, use cases, compare, trust), articles, legal, error pages. Page-specific; foundation stays in site.css. */
.ph-center .wrap>*{margin-inline:auto}
.ph-center .lead{max-inline-size:62ch}
.section.tight{padding-block-start:var(--s5)}
.measure{max-inline-size:72ch}
.cards.cards-2{grid-template-columns:minmax(0,1fr)}
@media (min-width:768px){.cards.cards-2{grid-template-columns:repeat(2,minmax(0,1fr))}}
.cta-band.spaced{margin-block-start:var(--s7)}
.cta-band h2{margin-block-end:.2em}
.card .icon-box{margin-block-end:var(--s3)}
.steps+.dg-fig,.dg-fig+.steps{margin-block-start:var(--s7)}
.section.band .section-head{margin-block-end:var(--s6)}
.section.band{padding-block:var(--s7)}
.shots-3{gap:var(--s5)}
.shots-3>.shot:first-child{grid-column:1/-1}
.shot img{background:var(--panel);box-shadow:var(--shadow)}
@media (min-width:761px){.shot-pair{gap:var(--s5)}}
.cta-band{margin-block-start:var(--s7)}

/* compare */
.compare{max-inline-size:960px}
.compare h2{margin-block:var(--s7) var(--s4)}
.compare h2:first-child{margin-block-start:0}
.cmp{inline-size:100%;border-collapse:separate;border-spacing:0;min-inline-size:560px;font-size:var(--fs-sm)}
.cmp th,.cmp td{padding:var(--s3) var(--s4);text-align:start;vertical-align:top;border-block-end:1px solid var(--line)}
.cmp thead th{background:var(--panel2);font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.06em;color:var(--text2)}
.cmp tbody th{font-weight:700;color:var(--text)}
.cmp td{color:var(--muted)}
.cmp td:last-child,.cmp thead th:last-child{background:var(--teal-soft);color:var(--text2)}
.tests{list-style:none;counter-reset:t;padding:0;display:grid;gap:var(--s3)}
.tests li{counter-increment:t;display:grid;grid-template-columns:40px 1fr;gap:var(--s3);align-items:start;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:var(--s4)}
.tests li::before{content:counter(t);display:grid;place-items:center;inline-size:40px;block-size:40px;border-radius:12px;background:var(--grad);color:var(--on-accent);font-weight:800}
.compare .claims,.compare .fine{max-inline-size:72ch}

/* legal: long-form, wide tables scroll inside their own container */
.legal-doc .wrap.narrow{max-inline-size:900px}
.legal-doc .prose{font-size:1.0625rem}
.legal-doc .legal-body p,.legal-doc .legal-body li{max-inline-size:75ch}
.legal-doc h1{margin-block-end:var(--s4)}
.legal-doc .legal-body h2{border-block-start:1px solid var(--line);padding-block-start:var(--s5);margin-block-start:var(--s7);font-size:1.4rem}
.legal-doc .table-scroll{border:1px solid var(--line);border-radius:12px;font-size:var(--fs-sm);line-height:1.5}
.legal-doc .table-scroll table{min-inline-size:760px;inline-size:100%}
.legal-doc .table-scroll th{background:var(--panel2);position:sticky;inset-block-start:0}
.legal-doc .table-scroll td{min-inline-size:110px}
.legal-doc .table-scroll td,.legal-doc .table-scroll th{padding:var(--s2) var(--s3);overflow-wrap:normal;word-break:normal;hyphens:manual}
.legal-doc .table-scroll code{overflow-wrap:anywhere}
.legal-meta{font-size:var(--fs-sm)}
.legal-related{margin-block-start:var(--s8);padding-block-start:var(--s5);border-block-start:1px solid var(--line)}
.legal-related h2{font-size:var(--fs-lg);margin-block-start:0}
/* Platform chooser (/platforms): label, select and button wrap inside the card on a phone (the select used to overflow 390px by 19px). */
.choose p{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;margin-inline:0}
.choose p label{flex:1 1 100%;font-weight:600}
.choose select{flex:1 1 14em;min-width:0;max-width:100%;box-sizing:border-box}