/* Hallmark · pre-emit critique: P5 H4 E4 S5 R5 V4 */
:root{
  --pricing-red:#E11D48;
  --pricing-line:rgba(225,29,72,.16);
  --pricing-line-strong:rgba(225,29,72,.34);
}

/* ============================================================================
   AutoSmile pilot — SYSTEM PAGES
   Pricing, the product system index and contact. They use the homepage's
   components; this file only adds what those three need and nothing else owns.
   ========================================================================== */

/* ---------- v15 remaining pages ------------------------------------------ */
.page-title{color:var(--red);max-width:18ch;margin:18px 0 0}
.compare-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-top:clamp(40px,6vh,64px)}
.compare-card{position:relative;min-height:290px;padding:clamp(26px,3vw,38px);border:1px solid var(--line);border-radius:16px;background:var(--white);display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden}
.compare-card.compare-main{background:var(--red);border-color:var(--red);color:#fff}
.compare-card h3{margin:10px 0 0;font:800 clamp(22px,2.4vw,31px)/1.12 var(--display);letter-spacing:-.025em;color:var(--red);max-width:18ch}
.compare-card p:last-child{margin:14px 0 0;max-width:48ch;font-size:15px;line-height:1.65}
.compare-no{position:absolute;inset:20px 24px auto auto;font:800 clamp(54px,7vw,96px)/1 var(--display);letter-spacing:-.06em;color:var(--red);opacity:.1}
.compare-main .eyebrow,.compare-main h3,.compare-main .compare-no{color:#fff}.compare-main .compare-no{opacity:.18}
.fact-grid,.metric-grid,.trait-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);margin-top:clamp(38px,6vh,64px)}
.fact,.metric,.trait{background:var(--white);padding:clamp(24px,3vw,36px)}
.fact b,.metric b,.trait b{display:block;font:800 20px/1.2 var(--display);color:var(--red)}
.fact p,.metric p,.trait p{margin:10px 0 0;font-size:15px;line-height:1.62}
.metric span,.trait span{display:block;margin-bottom:22px;font:600 11px/1 var(--mono);letter-spacing:.16em;color:var(--red)}

.resource-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-top:clamp(40px,6vh,64px)}
.resource-card{padding:clamp(26px,3vw,38px);border:1px solid var(--line);border-radius:16px;background:var(--white)}
.resource-card h3{margin:14px 0 0;font:800 clamp(23px,2.5vw,32px)/1.12 var(--display);letter-spacing:-.025em;color:var(--red);max-width:19ch}
.resource-card>p:last-of-type{margin:18px 0 0;font-size:15px;line-height:1.68}
.resource-card>a{display:inline-flex;margin-top:24px;padding-bottom:7px;border-bottom:1px solid var(--line-2);color:var(--red);font-weight:700;text-decoration:none}

.step-list{list-style:none;margin:clamp(38px,6vh,64px) 0 0;padding:0;border-top:1px solid var(--line)}
.step-list li{display:grid;grid-template-columns:64px minmax(0,1fr);gap:24px;padding:26px 0;border-bottom:1px solid var(--line)}
.step-list li>span{font:600 11px/1 var(--mono);letter-spacing:.16em;color:var(--red);padding-top:5px}
.step-list b{font:800 20px/1.2 var(--display);color:var(--red)}
.step-list p{margin:8px 0 0;max-width:62ch;line-height:1.65}

.brand-assets{display:grid;grid-template-columns:1.35fr 1.35fr .8fr;gap:18px;margin-top:clamp(40px,6vh,64px)}
.brand-asset{min-height:260px;border:1px solid var(--line);border-radius:16px;padding:24px;display:grid;grid-template-rows:auto 1fr;place-items:center}
.brand-asset .eyebrow{justify-self:start}.brand-asset img{display:block;max-width:86%;height:auto}
.brand-asset.on-light{background:var(--white)}.brand-asset.on-red{background:var(--red)}
.brand-asset.on-red .eyebrow{color:#fff}
.brand-rules{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);margin-top:clamp(40px,6vh,64px)}
.brand-rules article{background:var(--white);padding:clamp(24px,3vw,36px)}
.brand-rules span{display:block;margin-bottom:24px;font:600 11px/1 var(--mono);letter-spacing:.16em;color:var(--red)}
.brand-rules b{font:800 20px/1.2 var(--display);color:var(--red)}
.brand-rules p{margin:10px 0 0;line-height:1.62}
.palette{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:clamp(40px,6vh,64px)}
.palette>div{border:1px solid var(--line);border-radius:14px;background:var(--white);padding:16px;display:grid;grid-template-columns:1fr auto;gap:8px 10px}
.palette i{display:block;grid-column:1/-1;height:120px;border-radius:8px;background:var(--sw);border:1px solid rgba(23,21,26,.1)}
.palette b{font:800 16px/1.2 var(--display);color:var(--red)}
.palette code{font:500 11px/1.4 var(--mono);color:var(--ink)}
.palette span{grid-column:1/-1;font-size:13px;line-height:1.5}

.growth-note{margin-top:clamp(38px,6vh,64px);border:1px solid var(--line);border-radius:16px;background:var(--white);padding:clamp(28px,4vw,48px);display:grid;grid-template-columns:minmax(0,1.5fr) minmax(240px,.7fr);gap:clamp(28px,5vw,70px);align-items:end}
.growth-note p{margin:0;font-size:clamp(18px,2vw,24px);line-height:1.55;color:var(--ink)}
.growth-note b{font:600 11px/1.6 var(--mono);letter-spacing:.13em;text-transform:uppercase;color:var(--red)}

.state-screen{min-height:100svh;padding:48px 24px;display:grid;place-items:center;background:var(--paper)}
.state-card{width:min(680px,100%);border:1px solid var(--line);border-radius:20px;background:var(--white);padding:clamp(30px,6vw,64px);text-align:center;box-shadow:0 30px 70px -48px rgba(70,18,38,.34)}
.state-card>img{display:block;margin:0 auto 26px}.state-card .eyebrow{justify-content:center}
.state-card h1{margin:18px auto 0;max-width:16ch;font-size:clamp(34px,5.2vw,58px);color:var(--red)}
.state-card>p:not(.eyebrow):not(.state-note){margin:22px auto 0;max-width:52ch;font-size:16px;line-height:1.65}
.state-actions{display:flex;justify-content:center;flex-wrap:wrap;gap:12px;margin-top:30px}
.state-note{margin:28px 0 0;padding:18px;border:1px solid var(--line);border-radius:10px;background:var(--paper);font-size:13px;line-height:1.6;text-align:left}
.state-home{display:inline-flex;margin-top:24px;color:var(--red);font-weight:700;text-decoration:none;border-bottom:1px solid var(--line-2);padding-bottom:6px}

.product-status{position:relative;z-index:4;margin:0;padding:11px 24px;background:var(--red);color:#fff;text-align:center;font:500 12px/1.5 var(--mono);letter-spacing:.04em}
.product-status strong{font-weight:700;text-transform:uppercase;letter-spacing:.12em}
.lead-hp{position:absolute!important;left:-10000px!important;width:1px!important;height:1px!important;overflow:hidden!important}
.lead-status{grid-column:1/-1;margin:0;min-height:0;font-size:13px;line-height:1.5}
.lead-status:empty{display:none}.lead-status.show{display:block;padding:12px 14px;border:1px solid var(--line);border-radius:8px;background:var(--paper)}
.lead-status.success{border-color:rgba(16,122,87,.35);color:#107A57}.lead-status.error{border-color:var(--line-2);color:var(--red)}
.lead-turnstile{grid-column:1/-1;min-height:65px}
.cform .lead-submit{grid-column:1/-1;justify-self:start}

@media (max-width:820px){
  .compare-grid,.fact-grid,.metric-grid,.trait-grid,.resource-grid,.brand-rules{grid-template-columns:1fr}
  .brand-assets{grid-template-columns:1fr}.brand-asset{min-height:220px}
  .palette{grid-template-columns:repeat(2,minmax(0,1fr))}
  .growth-note{grid-template-columns:1fr}
}
@media (max-width:520px){
  .palette{grid-template-columns:1fr}.palette i{height:96px}
  .state-actions .btn{width:100%}
}

/* A page head, not a pinned act. The opening sequence belongs to the homepage
   and the product pages; a page someone arrives at to compare or to get in
   touch should show its content immediately. Same entrance language, no pin. */
.phead{background:var(--paper);padding:clamp(96px,13vh,150px) 0 clamp(72px,9vh,108px);text-align:center}
.phead .wrap{max-width:900px}
.phead .eyebrow{justify-content:center}
.phead h1{color:var(--red);margin:18px auto 0;max-width:17ch;font-size:clamp(36px,5.2vw,78px)}
.phead .lead{margin:26px auto 0;max-width:58ch;font-size:17.5px}
.phead .hero-cta{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;margin-top:32px}
.js .phead h1 .rl > i{transform:translateY(106%);transition:transform .92s var(--cine-ease);transition-delay:var(--d,0s)}
.js .phead.is-in h1 .rl > i{transform:none}
.js .phead .eyebrow,.js .phead .lead,.js .phead .hero-cta{
  opacity:0;transform:translateY(16px);
  transition:opacity .7s var(--cine-ease),transform .7s var(--cine-ease);
}
.js .phead.is-in .eyebrow{transition-delay:.04s}
.js .phead.is-in .lead{transition-delay:.42s}
.js .phead.is-in .hero-cta{transition-delay:.5s}
.js .phead.is-in .eyebrow,.js .phead.is-in .lead,.js .phead.is-in .hero-cta{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .js .phead h1 .rl > i,.js .phead .eyebrow,.js .phead .lead,.js .phead .hero-cta{transition-duration:.01ms}
}

/* ---------- plans --------------------------------------------------------- */
.plans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,2.2vw,28px);margin-top:clamp(44px,6vh,68px);align-items:start}
.plan{position:relative;border:1px solid var(--line);border-radius:16px;background:var(--white);padding:clamp(26px,2.4vw,34px);display:flex;flex-direction:column;min-width:0}
.plan.best{border-color:var(--red);box-shadow:0 26px 54px -30px rgba(90,20,45,.34)}
.pl-badge{position:absolute;top:-11px;left:clamp(26px,2.4vw,34px);font:600 11px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:#fff;background:var(--red);border-radius:5px;padding:7px 11px}
.plan h3{margin:0;font-family:var(--display);font-weight:800;font-size:24px;letter-spacing:-.02em;color:var(--red)}
.pl-for{margin:10px 0 0;font-size:14.5px;line-height:1.55;color:var(--ink);min-height:3.1em}
.pl-price{margin:22px 0 0;font-family:var(--display);font-weight:800;font-size:clamp(34px,3.4vw,46px);letter-spacing:-.03em;color:var(--ink);line-height:1}
.pl-price small{font-family:var(--body);font-weight:500;font-size:15px;letter-spacing:0;color:var(--ink);opacity:.7;margin-left:6px}
.pl-setup{margin:10px 0 0;font:600 12.5px/1.4 var(--mono);letter-spacing:.04em;color:var(--red)}
.pl-outcome{margin:20px 0 0;padding-top:18px;border-top:1px solid var(--line);font-size:14.5px;line-height:1.58;color:var(--ink)}
.pl-outcome b{display:block;font:600 11px/1.4 var(--mono);letter-spacing:.15em;text-transform:uppercase;color:var(--red);margin-bottom:7px}
.pl-list{list-style:none;margin:20px 0 26px;padding:0;display:grid;gap:11px;flex:1 1 auto}
.pl-list li{display:grid;grid-template-columns:20px minmax(0,1fr);gap:11px;align-items:start;font-size:14.5px;line-height:1.5}
.pl-list svg{width:17px;height:17px;margin-top:2px;fill:none;stroke:var(--red);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.pl-list li.off{opacity:.45}
.pl-list li.off svg{stroke:var(--ink);stroke-width:2.2}
.plan .btn{width:100%}
@media (max-width:980px){
  .plans{grid-template-columns:1fr;max-width:560px;margin-inline:auto}
  .pl-for{min-height:0}
}

/* ---------- the product system index -------------------------------------- */
.sysrow{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(18px,2.2vw,26px);margin-top:clamp(44px,6vh,68px)}
.syscard{display:grid;grid-template-columns:auto minmax(0,1fr);gap:20px;align-items:start;border:1px solid var(--line);border-radius:16px;background:var(--white);padding:clamp(24px,2.2vw,32px);text-decoration:none;color:var(--ink);transition:border-color .3s var(--cine-ease),transform .3s var(--cine-ease),box-shadow .3s var(--cine-ease)}
.syscard:hover{border-color:var(--red);transform:translateY(-3px);box-shadow:0 24px 48px -30px rgba(90,20,45,.4)}
.sys-mark{width:52px;height:52px;border-radius:14px;border:1.5px solid var(--line-2);display:grid;place-items:center;color:var(--red);transition:background-color .3s var(--cine-ease),border-color .3s var(--cine-ease),color .3s var(--cine-ease)}
.sys-mark svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.syscard:hover .sys-mark{background:var(--red);border-color:var(--red);color:#fff}
.sys-no{display:block;font:600 11px/1 var(--mono);letter-spacing:.14em;color:var(--red);opacity:.7;margin-bottom:9px}
.syscard h3{margin:0;font-family:var(--display);font-weight:800;font-size:21px;letter-spacing:-.018em;color:var(--red)}
.syscard p{margin:10px 0 0;font-size:14.5px;line-height:1.58}
.sys-go{display:inline-flex;align-items:center;gap:9px;margin-top:16px;font:700 13.5px/1 var(--body);color:var(--red);border-bottom:1.5px solid var(--line-2);padding-bottom:7px}
.syscard:hover .sys-go{border-color:var(--red)}
@media (max-width:860px){.sysrow{grid-template-columns:1fr}}

/* ---------- contact ------------------------------------------------------- */
.cform{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-top:clamp(36px,5vh,56px)}
.cfield{display:flex;flex-direction:column;gap:9px;min-width:0}
.cfield.wide{grid-column:1/-1}
.cfield label{font:600 11px/1.4 var(--mono);letter-spacing:.15em;text-transform:uppercase;color:var(--red)}
.cfield input,.cfield select,.cfield textarea{
  font:400 16px/1.5 var(--body);color:var(--ink);background:var(--white);
  border:1px solid var(--line-2);border-radius:9px;padding:14px 15px;min-height:54px;width:100%;
  transition:border-color .22s var(--cine-ease);
}
.cfield textarea{min-height:132px;resize:vertical}
.cfield input:focus,.cfield select:focus,.cfield textarea:focus{outline:none;border-color:var(--red)}
.cnote{grid-column:1/-1;margin:0;font-size:13.5px;line-height:1.6;color:var(--ink);opacity:.8}
.cside{display:grid;gap:14px;align-content:start}
.cbox{border:1px solid var(--line);border-radius:14px;background:var(--white);padding:22px 24px}
.cbox b{display:block;font-family:var(--display);font-weight:800;font-size:17px;color:var(--red);margin-bottom:8px}
.cbox p{margin:0;font-size:14.5px;line-height:1.58}
.cgrid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:clamp(28px,4vw,56px);align-items:start}
@media (max-width:900px){.cgrid{grid-template-columns:1fr}.cform{grid-template-columns:1fr}}

/* ---------- the page head, widened ---------------------------------------
   "hero bölümü çok dar, böyle dar hero olmasın" — it was a 900px column on a
   1240px page. It now uses the full measure and can carry a row of facts under
   the buttons so the head has something to stand on. */
.phead .wrap{max-width:var(--wrap)}
.phead h1{max-width:19ch;font-size:clamp(38px,5.6vw,84px)}
.phead .lead{max-width:62ch;font-size:18px}
.phead-facts{
  list-style:none;margin:clamp(38px,5vh,58px) auto 0;padding:clamp(26px,3vh,34px) 0 0;padding-inline:0;
  border-top:1px solid var(--line);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(18px,2.4vw,36px);text-align:left;max-width:1000px;
}
.phead-facts b{display:block;font-family:var(--display);font-weight:800;font-size:17px;letter-spacing:-.015em;color:var(--red)}
.phead-facts span{display:block;margin-top:7px;font-size:14.5px;line-height:1.56;color:var(--ink)}
@media (max-width:760px){
  .phead-facts{grid-template-columns:1fr;gap:20px}
}

/* ---------- which products a plan covers ----------------------------------
   "hangi pakette hangi ürün olduğu anlaşılsın" — the five automations the price
   list actually governs, marked included or not. The sixth product is never
   named by a tier on the production price list, so it is not shown here. */
.pl-marks{margin:20px 0 0;padding-top:18px;border-top:1px solid var(--line)}
.pl-marks > p{margin:0 0 12px;font:600 11px/1.4 var(--mono);letter-spacing:.15em;text-transform:uppercase;color:var(--red)}
.pl-marks ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.pl-marks li{position:relative;display:grid;place-items:center;width:38px;height:38px;border-radius:11px;border:1.5px solid var(--line-2);color:var(--red)}
.pl-marks li.on{background:var(--red);border-color:var(--red);color:#fff}
.pl-marks li.off{opacity:.34}
.pl-marks li.off::after{content:"";position:absolute;left:8px;right:8px;top:50%;height:1.5px;background:currentColor;transform:rotate(-32deg)}
.pm-i{display:grid;place-items:center}
.pm-i svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
/* The name shows on hover and on keyboard focus, and is always in the DOM for
   a screen reader through the .sr-only sibling. */
.pm-n{
  position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%) translateY(4px);
  white-space:nowrap;font:600 11px/1 var(--mono);letter-spacing:.06em;color:#fff;background:var(--ink);
  border-radius:5px;padding:7px 9px;opacity:0;pointer-events:none;transition:opacity .2s var(--cine-ease),transform .2s var(--cine-ease);z-index:3;
}
.pl-marks li:hover .pm-n{opacity:1;transform:translateX(-50%)}

/* ---------- about: the four rules ----------------------------------------- */
.rules{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(18px,2.2vw,26px);margin-top:clamp(44px,6vh,68px)}
.rule{position:relative;border:1px solid var(--line);border-radius:16px;background:var(--white);padding:clamp(26px,2.4vw,34px)}
.rule-n{display:block;font:600 11px/1 var(--mono);letter-spacing:.16em;color:var(--red);opacity:.7;margin-bottom:14px}
.rule b{display:block;font-family:var(--display);font-weight:800;font-size:19px;letter-spacing:-.018em;color:var(--red)}
.rule p{margin:10px 0 0;font-size:15px;line-height:1.6}
@media (max-width:820px){.rules{grid-template-columns:1fr}}

/* ---------- faq ----------------------------------------------------------- */
.qwrap{max-width:900px;display:grid;gap:clamp(38px,5vh,58px)}
.qgroup h3{margin:0 0 18px;font-family:var(--display);font-weight:800;font-size:20px;letter-spacing:-.018em;color:var(--red)}
.qlist{border-top:1px solid var(--line-2)}
.qa{border-bottom:1px solid var(--line-2)}
.qa summary{
  list-style:none;cursor:pointer;padding:20px 40px 20px 0;position:relative;
  font-family:var(--display);font-weight:800;font-size:17px;letter-spacing:-.015em;color:var(--ink);
}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{
  content:"";position:absolute;right:6px;top:50%;width:12px;height:12px;margin-top:-6px;
  border-right:2px solid var(--red);border-bottom:2px solid var(--red);
  transform:rotate(45deg) translate(-2px,-2px);transition:transform .28s var(--cine-ease);
}
.qa[open] summary::after{transform:rotate(-135deg) translate(-3px,-3px)}
.qa summary:hover{color:var(--red)}
.qa summary:focus-visible{outline:2px solid var(--red);outline-offset:3px;border-radius:5px}
.qa p{margin:0 0 22px;padding-right:40px;font-size:15.5px;line-height:1.66;color:var(--ink)}

/* ---------- security / privacy blocks ------------------------------------- */
.secnote{border:1.5px solid var(--red);border-radius:16px;background:#FFF7F8;padding:clamp(24px,2.4vw,32px);margin-bottom:clamp(32px,4vh,48px)}
.secnote b{display:block;font:600 11px/1.4 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--red);margin-bottom:10px}
.secnote p{margin:0;font-size:16px;line-height:1.66}
.secnote strong{color:var(--red)}
.secblocks{display:grid;gap:clamp(18px,2.2vw,24px)}
.secblock{border:1px solid var(--line);border-radius:16px;background:var(--white);padding:clamp(24px,2.4vw,32px)}
.secblock h3{margin:0 0 12px;font-family:var(--display);font-weight:800;font-size:19px;letter-spacing:-.018em;color:var(--red)}
.secblock p{margin:0 0 10px;font-size:15.5px;line-height:1.64}
.secblock p:last-child{margin-bottom:0}
.sec-li{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:10px}
.sec-li li{position:relative;padding-left:22px;font-size:15px;line-height:1.58}
.sec-li li::before{content:"";position:absolute;left:0;top:.62em;width:11px;height:1.5px;background:var(--red)}

/* ---------- state pages: pre-launch and the auth doors --------------------
   Layout only. Every control on these pages is disabled and no form has an
   action, so nothing here can transmit a credential. */
.statepage{background:var(--paper)}
.state-note{
  margin:22px 0 0;padding:14px 16px;border:1px dashed var(--line-2);border-radius:10px;
  font-size:13px;line-height:1.6;color:var(--ink);background:var(--white);
}
.state-note b{color:var(--red)}

.soonwrap{min-height:100vh;display:grid;place-items:center;padding:clamp(56px,9vh,110px) 0;background:var(--paper);position:relative;isolation:isolate}
.soon{max-width:760px;margin-inline:auto;text-align:center}
.soon-amb{display:block;margin:0 auto 26px}
.soon .eyebrow{justify-content:center}
.soon h1{color:var(--red);margin:18px auto 0;font-size:clamp(34px,5vw,66px);max-width:16ch}
.soon .lead{margin:24px auto 0;max-width:58ch}
.soonform{display:flex;gap:12px;align-items:flex-end;justify-content:center;flex-wrap:wrap;margin-top:34px}
.soonform .cfield{text-align:left;min-width:min(320px,100%)}
.soon-facts{list-style:none;margin:clamp(36px,5vh,54px) 0 0;padding:clamp(26px,3vh,34px) 0 0;border-top:1px solid var(--line);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,2.4vw,32px);text-align:left}
.soon-facts b{display:block;font-family:var(--display);font-weight:800;font-size:16px;color:var(--red)}
.soon-facts span{display:block;margin-top:6px;font-size:14px;line-height:1.56}
.soon-links{margin:30px 0 0;font-size:14px}
.soon-links a{color:var(--red);text-decoration:none;border-bottom:1px solid var(--line-2);padding-bottom:2px}
.soon-links a:hover{border-color:var(--red)}
@media (max-width:760px){.soon-facts{grid-template-columns:1fr;text-align:center}.soonform{flex-direction:column;align-items:stretch}}

.authwrap{min-height:100vh;display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)}
.authside{background:var(--red);color:#fff;padding:clamp(34px,4vw,56px);display:flex;flex-direction:column;position:relative;isolation:isolate}
.authside .eyebrow{color:rgba(255,255,255,.78)}
.authside-body{margin-top:auto}
.authline{margin:20px 0 0;font-family:var(--display);font-weight:800;font-size:clamp(22px,2.3vw,32px);line-height:1.24;letter-spacing:-.02em;color:#fff;max-width:22ch}
.authbrand{display:block;width:max-content}
.authfoot{margin:auto 0 0;padding-top:36px;font:600 11px/1 var(--mono);letter-spacing:.14em;color:rgba(255,255,255,.72)}
.authmain{display:grid;place-items:center;padding:clamp(40px,6vh,80px) clamp(22px,4vw,64px);background:var(--paper)}
.authcard{width:min(440px,100%)}
.authcard h1{color:var(--red);font-size:clamp(28px,3vw,40px);margin:0}
.authsub{margin:14px 0 0;font-size:15.5px;line-height:1.62}
.authform{display:grid;gap:16px;margin-top:30px}
.authform .btn{width:100%;margin-top:6px}
.authalt{margin:20px 0 0;font-size:14.5px;line-height:1.6}
.authalt a{color:var(--red);text-decoration:none;border-bottom:1px solid var(--line-2);padding-bottom:2px}
.authalt a:hover{border-color:var(--red)}
.btn[disabled],.cfield input[disabled],.cfield select[disabled],.cfield textarea[disabled]{opacity:.55;cursor:not-allowed}
@media (max-width:860px){
  .authwrap{grid-template-columns:1fr}
  .authside{min-height:230px}
  .authside-body{margin-top:26px}
  .authfoot{display:none}
}

/* ============================================================================
   Pricing editorial pass · 2026-09-09
   The current offer is one plan. This composition makes that fact explicit
   instead of disguising it inside a generic three-card pricing template.
   ========================================================================== */

html:has(body.pricing-v18),body.pricing-v18{overflow-x:clip}
.pricing-v18 h1,.pricing-v18 h2,.pricing-v18 h3{font-style:normal;overflow-wrap:anywhere;min-width:0}

.pricing-v18 .phead{
  position:relative;isolation:isolate;overflow:hidden;
  padding-block:clamp(104px,14vw,176px);
  text-align:left;background:var(--paper);
}
.pricing-v18 .phead::after{
  content:"01";position:absolute;right:-.03em;top:50%;z-index:-1;
  transform:translateY(-52%);
  font:800 clamp(210px,34vw,520px)/.72 var(--display);
  letter-spacing:-.1em;color:var(--pricing-line);
}
.pricing-v18 .phead .wrap{max-width:var(--wrap)}
.pricing-v18 .phead-main{width:min(760px,68%)}
.pricing-v18 .phead .eyebrow{justify-content:flex-start}
.pricing-v18 .phead h1{margin-inline:0;max-width:12ch;font-size:clamp(50px,7.2vw,104px)}
.pricing-v18 .phead .lead{margin-inline:0;max-width:50ch}
.pricing-v18 .phead .hero-cta{justify-content:flex-start}

.pricing-v18 #plans{background:var(--white);padding-block:clamp(96px,12vw,156px)}
.pricing-v18 #plans>.wrap{
  display:grid;
  grid-template-columns:minmax(240px,.66fr) minmax(0,1.34fr);
  grid-template-rows:auto auto 1fr;
  column-gap:clamp(56px,8vw,120px);
  align-items:start;
}
.pricing-v18 #plans>.wrap>.eyebrow{grid-column:1;grid-row:1}
.pricing-v18 #plans>.wrap>h2{grid-column:1;grid-row:2;font-size:clamp(40px,5.2vw,74px);max-width:10ch!important}
.pricing-v18 #plans>.wrap>.plans{grid-column:2;grid-row:1/4;margin-top:0}
.pricing-v18 #plans>.wrap>.note{grid-column:2;grid-row:4;margin-top:28px!important}

.pricing-v18 .single-plan{display:block;max-width:none}
.pricing-v18 .single-plan>.plan[hidden]{display:none!important}
.pricing-v18 .single-plan .plan.best{
  width:100%;padding:clamp(34px,4vw,58px);
  display:grid;
  grid-template-columns:minmax(210px,.72fr) minmax(0,1.28fr);
  grid-template-areas:
    "name outcome"
    "for outcome"
    "price list"
    "setup list"
    "marks list"
    ". usage"
    ". action";
  column-gap:clamp(34px,5vw,76px);align-items:start;
  border:0;border-block:1px solid var(--pricing-line-strong);border-radius:0;
  box-shadow:none;background:var(--white);
}
.pricing-v18 .single-plan .plan.best h3{grid-area:name;font-size:clamp(28px,3vw,42px)}
.pricing-v18 .single-plan .pl-for{grid-area:for;min-height:0}
.pricing-v18 .single-plan .pl-price{grid-area:price;margin-top:30px}
.pricing-v18 .single-plan .pl-setup{grid-area:setup}
.pricing-v18 .single-plan .pl-marks{grid-area:marks}
.pricing-v18 .single-plan .pl-outcome{grid-area:outcome;margin-top:0;padding:0 0 24px;border-top:0;border-bottom:1px solid var(--pricing-line)}
.pricing-v18 .single-plan .pl-list{grid-area:list;margin:24px 0 28px}
.pricing-v18 .single-plan .plan-usage{grid-area:usage;margin:0 0 22px;font-size:13px;line-height:1.6}
.pricing-v18 .single-plan .btn{grid-area:action;width:auto;justify-self:start;white-space:nowrap}
.pricing-v18 .single-plan .pl-badge{top:0;left:auto;right:0;border-radius:0;padding:9px 12px}
.pricing-v18 .pl-marks li{border-radius:6px}

.pricing-v18 main>.section:nth-of-type(3){background:var(--paper)}
.pricing-v18 .ledger .lrow{grid-template-columns:minmax(100px,.24fr) minmax(0,1fr) auto;gap:clamp(20px,3vw,46px);padding-block:30px}
.pricing-v18 .fnote{background:var(--white)!important;border-color:var(--pricing-line)!important}
.pricing-v18 .fnote-txt{color:var(--ink)!important}
.pricing-v18 .fnote-txt em{color:var(--pricing-red)!important}
.pricing-v18 .fnote-go{color:var(--pricing-red)!important;border-color:var(--pricing-line-strong)!important}
.pricing-v18 .fnote-go:hover{border-color:var(--pricing-red)!important}
/* B5 — brand law: no box-shadow anywhere. pilot-v15-cinema.css:1126 rings the
   founder portrait with `box-shadow:0 0 0 2px var(--red)` and paints its real
   border white, because that block was written for the charcoal founder strip.
   This page's strip is white (the rule directly above), so the white border
   vanished and the only thing holding the portrait was the shadow. The ring
   goes back to being a hairline, which is what the rest of the page uses.
   A2 corrected the same class of violation on index.html and did not reach
   here; the shared cinema layer is left untouched for the pages that still
   render the dark strip. */
.pricing-v18 .fnote-face{
  box-shadow:none!important;border-color:var(--pricing-line-strong)!important;
  background:var(--white)!important
}
.pricing-v18 main>.founder{background:var(--pricing-red)}

@media(max-width:980px){
  .pricing-v18 #plans>.wrap{grid-template-columns:1fr;grid-template-rows:auto;row-gap:22px}
  .pricing-v18 #plans>.wrap>.eyebrow,
  .pricing-v18 #plans>.wrap>h2,
  .pricing-v18 #plans>.wrap>.plans,
  .pricing-v18 #plans>.wrap>.note{grid-column:1;grid-row:auto}
  .pricing-v18 #plans>.wrap>h2{max-width:14ch!important}
  .pricing-v18 #plans>.wrap>.plans{margin-top:28px}
}

@media(max-width:760px){
  .pricing-v18 .phead-main{width:100%}
  .pricing-v18 .phead::after{right:50%;top:24%;transform:translate(50%,-50%);font-size:clamp(140px,58vw,250px)}
  .pricing-v18 .phead h1{font-size:clamp(42px,12vw,64px)}
  .pricing-v18 .phead .hero-cta{flex-direction:column;align-items:stretch}
  .pricing-v18 .phead .btn{width:100%;font-size:14px;padding-inline:18px;white-space:nowrap}
  .pricing-v18 .single-plan .plan.best{grid-template-columns:1fr;grid-template-areas:"name" "for" "price" "setup" "marks" "outcome" "list" "usage" "action";row-gap:0}
  .pricing-v18 .single-plan .pl-outcome{margin-top:30px;padding-block:22px;border-top:1px solid var(--pricing-line)}
  .pricing-v18 .single-plan .btn{width:100%;justify-self:stretch}
  .pricing-v18 .ledger .lrow{grid-template-columns:1fr;gap:8px}
}

@media(prefers-reduced-motion:reduce){
  html.js body.pricing-v18 .fade,
  html.js body.pricing-v18 .rl>i{opacity:1!important;transform:none!important;filter:none!important;transition-duration:.01ms!important}
}