/* The /pricing/ section, inside the real shell. Everything is scoped to #sec-pricing:
   the shell owns the rail, the fonts and the page background. */
#sec-pricing{--pr-ink:#eef0f4;--pr-ink2:#c4cad4;--pr-ink3:#aeb6c2;--pr-line:#252b36;--pr-line2:#1b2029;--pr-on-orange:#171108;
  padding:40px clamp(16px,4vw,64px) 56px;color:var(--pr-ink);font-family:var(--lp-body)}
#sec-pricing.hidden{display:none}
/* Same as the other sections in style.css: opening one must not scroll it under the omnibox. */
#sec-pricing{min-height:100vh;scroll-margin-top:100vh}
#sec-pricing a{color:var(--pr-ink3)}
#sec-pricing a:hover{color:var(--lp-orange-light)}
#sec-pricing :focus-visible{outline:2px solid var(--lp-orange-light);outline-offset:2px}
#sec-pricing [hidden]{display:none !important}
#sec-pricing.plan-month [data-plan="year"],#sec-pricing.plan-year [data-plan="month"]{display:none}

#sec-pricing .pr-wrap{display:flex;flex-direction:column;gap:88px;max-width:1120px;margin:0 auto}
#sec-pricing .pr-plans{display:flex;flex-direction:column;gap:32px}
#sec-pricing .pr-hero{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:28px}
#sec-pricing .pr-hero-copy{display:flex;flex-direction:column;gap:16px;flex:1 1 520px;min-width:0}
#sec-pricing .pr-eyebrow{margin:0;font:700 13px/1 var(--lp-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--lp-orange)}
#sec-pricing h1{margin:0;max-width:none;font:700 clamp(44px,6vw,76px)/.98 var(--lp-disp);letter-spacing:0;text-transform:none;color:#fff;text-wrap:balance}
#sec-pricing .pr-lead{margin:0;max-width:620px;font-size:19px;line-height:1.5;color:var(--pr-ink2);text-wrap:pretty}
#sec-pricing .pr-period{display:flex;gap:4px;padding:4px;background:#10131a;border:1px solid #2a303b;border-radius:6px}
#sec-pricing .pr-period button{display:flex;align-items:center;gap:10px;min-height:44px;padding:0 20px;border:0;border-radius:4px;cursor:pointer;font:600 15px/1 var(--lp-body);background:transparent;color:var(--pr-ink2)}
#sec-pricing .pr-period button span{font:700 12px/1 var(--lp-mono);color:var(--lp-orange)}
#sec-pricing .pr-period button[aria-pressed="true"]{background:var(--lp-orange);color:var(--pr-on-orange)}
#sec-pricing .pr-period button[aria-pressed="true"] span{color:var(--pr-on-orange)}

#sec-pricing .pr-cards{display:flex;flex-wrap:wrap;gap:20px;align-items:stretch}
#sec-pricing .pr-card{min-width:0;display:flex;flex-direction:column;border-radius:6px;overflow:hidden}
#sec-pricing .pr-card-free{flex:5 1 340px;background:#0d1016;border:1px solid var(--pr-line)}
#sec-pricing .pr-card-pro{flex:7 1 420px;background:#12110e;border:1px solid var(--lp-orange)}
#sec-pricing .pr-shot{position:relative;height:220px;background:#000}
#sec-pricing .pr-shot img{display:block;width:100%;height:100%;object-fit:cover}
#sec-pricing .pr-chip{position:absolute;left:14px;top:14px;padding:6px 9px;background:#06080c;border:1px solid #3a414e;border-radius:3px;font:700 12px/1 var(--lp-mono);letter-spacing:.08em;color:var(--pr-ink)}
#sec-pricing .pr-chip-pro{background:var(--lp-orange);border-color:var(--lp-orange);color:var(--pr-on-orange)}
#sec-pricing .pr-body{display:flex;flex-direction:column;gap:22px;flex-grow:1;padding:28px}
#sec-pricing .pr-price-block{display:flex;flex-direction:column;gap:8px}
#sec-pricing .pr-price-block h2{margin:0;font:700 30px/1 var(--lp-disp);letter-spacing:0;text-transform:none;color:#fff}
#sec-pricing .pr-price{margin:0;display:flex;align-items:baseline;gap:8px;color:#fff}
#sec-pricing .pr-price b{font:700 44px/1 var(--lp-disp)}
#sec-pricing .pr-price span{font-size:17px;color:var(--pr-ink2)}
#sec-pricing .pr-note{margin:0;font-size:15px;line-height:1.45;color:var(--pr-ink3)}
#sec-pricing .pr-note-pro{color:var(--lp-orange)}
#sec-pricing .pr-list{display:flex;flex-direction:column;gap:11px;flex-grow:1;margin:0;padding:0;list-style:none;font-size:15px;line-height:1.4;color:#dfe2e8}
#sec-pricing .pr-list-pro{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(250px,100%),1fr));gap:11px 24px;color:#f0ece4;align-content:start}
#sec-pricing .pr-actions{display:flex;flex-direction:column;gap:12px}
#sec-pricing .pr-btn{display:flex;align-items:center;justify-content:center;gap:12px;width:100%;min-height:52px;padding:8px 18px;border-radius:3px;cursor:pointer;text-decoration:none;text-align:center;font:700 16px/1.15 var(--lp-disp);letter-spacing:.08em;text-transform:uppercase}
#sec-pricing .pr-ghost{background:transparent;border:1px solid #3a414e;color:var(--pr-ink)}
#sec-pricing .pr-ghost:hover{border-color:var(--lp-orange);color:#fff}
#sec-pricing .pr-buy{min-height:56px;border:0;background:var(--lp-orange);color:var(--pr-on-orange);font-size:17px}
#sec-pricing .pr-buy:hover{background:var(--lp-orange-light);color:var(--pr-on-orange)}
#sec-pricing .pr-buy img{width:22px;height:22px;flex:none}
#sec-pricing .pr-btn[aria-busy="true"]{opacity:.7;cursor:progress}
#sec-pricing .pr-fine{margin:0;font-size:13px;line-height:1.5;color:#bdb7aa}

#sec-pricing .pr-one{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px 28px;padding:20px 24px;background:#0d1016;border:1px solid var(--pr-line);border-radius:6px}
#sec-pricing .pr-one p{margin:0;flex:1 1 380px;font-size:16px;line-height:1.45;color:#dfe2e8}
#sec-pricing .pr-one strong{color:#fff}
#sec-pricing .pr-one .pr-one-price{flex:0 0 auto;display:flex;align-items:baseline;gap:8px;font-size:14px;color:var(--pr-ink3)}
#sec-pricing .pr-one-price b{font:700 28px/1 var(--lp-disp);color:#fff}

#sec-pricing .pr-section-h{margin:0 0 24px;font:700 clamp(32px,4vw,44px)/1 var(--lp-disp);letter-spacing:0;text-transform:none;color:#fff}
#sec-pricing .pr-table-box{overflow-x:auto;background:#0b0e13;border:1px solid var(--pr-line);border-radius:6px}
#sec-pricing table{width:100%;min-width:660px;border-collapse:collapse;font-size:15px;line-height:1.4;text-align:left}
#sec-pricing thead th{padding:16px 22px;font:700 12px/1 var(--lp-mono);letter-spacing:.08em;color:var(--pr-ink3)}
#sec-pricing thead th:first-child{width:38%}
#sec-pricing thead th.pr-col-pro{color:var(--lp-orange)}
#sec-pricing tbody tr{border-top:1px solid var(--pr-line2)}
#sec-pricing tbody th{padding:14px 22px;font-weight:500;color:var(--pr-ink)}
#sec-pricing tbody td{padding:14px 22px;color:var(--pr-ink3)}
#sec-pricing .pr-col-pro{background:#17140e}
#sec-pricing tbody td.pr-col-pro{color:#f4f0e7}

#sec-pricing .pr-faq{display:flex;flex-direction:column;border-top:1px solid var(--pr-line)}
#sec-pricing .pr-faq details{border-bottom:1px solid var(--pr-line)}
#sec-pricing .pr-faq summary{display:flex;align-items:center;gap:18px;min-height:60px;cursor:pointer;list-style:none;font-size:18px;font-weight:600;color:#fff}
#sec-pricing .pr-faq summary::-webkit-details-marker{display:none}
#sec-pricing .pr-faq summary::after{content:'+';margin-left:auto;color:var(--lp-orange);font:500 20px/1 var(--lp-mono)}
#sec-pricing .pr-faq details[open] summary::after{content:'−'}
#sec-pricing .pr-faq p{margin:0 0 22px;max-width:760px;font-size:16px;line-height:1.55;color:var(--pr-ink2);text-wrap:pretty}

#sec-pricing .pr-foot{padding-top:24px;border-top:1px solid var(--pr-line2);font-size:14px}
#sec-pricing .pr-foot nav{display:flex;flex-wrap:wrap;gap:8px 20px}
#sec-pricing .pr-foot p{margin:14px 0 0;color:#9aa3b0;font-size:13px;line-height:1.5}

/* A WIDE SCREEN (2026-11-11): the headline stands beside the two plans. The page was a centred
   1120 px column with 254 px of nothing on each side at 1920, and both buttons sat at the fold.
   1720 px is where the area right of the rail holds a 400 px headline and the plans. */
@media (min-width:1720px){
  #sec-pricing{padding-left:40px;padding-right:40px}
  #sec-pricing .pr-wrap{max-width:1760px}
  #sec-pricing .pr-plans{display:grid;grid-template-columns:minmax(400px,1fr) minmax(0,1120px);gap:32px 40px;align-items:start}
  #sec-pricing .pr-hero{flex-direction:column;align-items:flex-start;flex-wrap:nowrap}
  #sec-pricing .pr-hero-copy{flex:0 1 auto}
  #sec-pricing .pr-cards,#sec-pricing .pr-one{grid-column:2}
}

@media (max-width:760px){
  #sec-pricing{padding-top:24px}
  #sec-pricing .pr-wrap{gap:64px}
  #sec-pricing .pr-period{width:100%}
  #sec-pricing .pr-period button{flex:1;justify-content:center;padding:0 10px}
  #sec-pricing .pr-body{padding:22px}
}