/* Inner pages. Loads after site.css. Each page's section styles are grouped under its own heading. */

/* ---------- shared inner-page rhythm ---------- */
.page{padding-top:clamp(48px,8vh,96px);padding-bottom:clamp(140px,20vh,220px)}
.page h1{max-width:20ch}
.page h1 .tone{color:var(--pine)}
.lede{margin:0;max-width:40ch;font-size:19px;line-height:1.5;color:var(--muted);text-wrap:pretty}
.out svg{flex:none}
.page p a:not(.out),.page dd a:not(.out){color:var(--ink);text-underline-offset:3px;text-decoration-color:rgba(35,80,63,.4);transition:text-decoration-color .15s ease}
.page p a:not(.out):hover,.page dd a:not(.out):hover{text-decoration-color:currentColor}

/* ---------- features ---------- */
.f-head-row{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:24px clamp(32px,6vw,96px);align-items:start;margin-top:clamp(26px,4vh,40px)}
.f-index{display:flex;flex-wrap:wrap;gap:2px 4px;margin:-6px 0 0 -10px;font:500 21px/1.3 var(--serif)}
.f-index a{padding:6px 10px;border-radius:7px;text-decoration:none;color:var(--pine);transition:background-color .15s ease,color .15s ease}
.f-index a:hover{background:rgba(35,80,63,.08);color:var(--pine-deep)}

.f-sec{padding-top:clamp(110px,15vh,170px)}
.f-h{margin:0;font:500 clamp(32px,3.6vw,50px)/1.06 var(--serif);letter-spacing:-.015em;text-wrap:balance}
.f-say p{margin:16px 0 0;max-width:46ch;color:var(--muted);text-wrap:pretty}
.f-say .f-fine{font-size:15.5px;color:var(--quiet)}
.f-go{margin-top:22px!important}

/* status and household: the head sits as one row over a full-width proof */
.f-status .f-say,.f-house .f-say{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:16px clamp(32px,6vw,96px);align-items:end;margin-bottom:clamp(30px,4.5vh,48px)}
.f-status .f-say p,.f-house .f-say p{margin:0}
.f-strips{display:grid;gap:26px}
.shot figcaption{margin:0 0 10px}
.f-also{margin:22px 0 0}

/* compare and enroll: proof and words side by side, the proof at its true size */
.f-pair{display:grid;grid-template-columns:minmax(0,600px) minmax(0,1fr);gap:40px clamp(40px,7vw,110px);align-items:center}
.f-pair.is-flip{grid-template-columns:minmax(0,1fr) minmax(0,620px)}
.f-pair .f-say p:first-of-type{margin-top:16px}

.f-prices{margin:clamp(28px,4vh,44px) 0 0}
.asks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:34px clamp(32px,6vw,96px);margin:clamp(40px,6vh,60px) 0 0}
.asks dt{margin:0 0 8px;font:500 clamp(23px,2.1vw,28px)/1.2 var(--serif)}
.asks dt a{color:var(--ink);text-decoration:none;transition:color .15s ease}
.asks dt a svg{display:inline-block;width:13px;height:13px;margin-left:8px;color:var(--pine);vertical-align:baseline;transform:translateY(-1px);transition:transform .2s cubic-bezier(.3,.7,.2,1)}
.asks dt a:hover{color:var(--pine)}
.asks dt a:hover svg{transform:translate(2px,-3px)}
.asks dd{margin:0;max-width:44ch;color:var(--muted)}

.gets{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:44px clamp(32px,6vw,96px);margin:clamp(36px,5vh,56px) 0 0;padding:0;list-style:none}
.gets li{display:grid;grid-template-columns:40px minmax(0,1fr);gap:0 18px}
.gets svg{grid-row:span 2;width:34px;height:34px;margin-top:2px;color:var(--pine)}
.gets h3{margin:0 0 8px;font:500 clamp(24px,2.2vw,30px)/1.15 var(--serif)}
.gets p{margin:0;max-width:42ch;color:var(--muted)}
.f-next{margin:clamp(48px,7vh,72px) 0 0}

@media (max-width:1020px){
  .f-pair,.f-pair.is-flip{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
}
@media (max-width:860px){
  .f-head-row,.f-status .f-say,.f-house .f-say{grid-template-columns:minmax(0,1fr)}
  .f-pair,.f-pair.is-flip{grid-template-columns:minmax(0,1fr);gap:28px}
  .f-pair.is-flip .shot{order:2}
  .f-pair:not(.is-flip) .shot{order:2}
  .asks,.gets{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:700px){
  .page{padding-top:36px}
  .page h1{font-size:clamp(30px,8.4vw,40px);line-height:1.06}
  .lede{font-size:18px}
  .f-index{font-size:19px}
  .f-sec{padding-top:96px}
  .f-h{font-size:clamp(29px,8.4vw,36px)}
  .gets{gap:32px}
}
.page .folder-tab a:not(.out){color:inherit;text-decoration:none}
.page .folder-tab a:not(.out):hover{text-decoration:underline;text-decoration-color:currentColor}

/* ---------- pricing ---------- */
.pricing-page .price-top{margin-bottom:clamp(28px,4vh,40px)}
.pricing-page .price-top h1{max-width:none;font-size:clamp(44px,6vw,88px);white-space:nowrap}
.plans-full tbody th{padding-top:16px;padding-bottom:16px}
.row-note{display:block;margin-top:4px;max-width:52ch;font-size:15px;line-height:1.45;color:var(--quiet)}
.row-note a{color:inherit;text-underline-offset:3px;text-decoration-color:rgba(35,80,63,.4)}
.row-note a:hover{color:var(--ink);text-decoration-color:currentColor}

.p-terms{padding-top:clamp(90px,12vh,130px);display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:40px clamp(40px,7vw,110px);align-items:end}
.p-ten{margin:0 0 clamp(8px,2vh,24px);font:500 clamp(25px,2.5vw,34px)/1.22 var(--serif);letter-spacing:-.01em;text-wrap:balance}
.p-promise{margin:0;font:500 clamp(25px,2.7vw,38px)/1.24 var(--serif);letter-spacing:-.01em;text-wrap:pretty}

.p-qa{padding-top:clamp(110px,15vh,170px)}
.qa{margin:clamp(34px,5vh,52px) 0 0;display:grid;gap:30px;max-width:1060px}
.qa > div{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:8px clamp(32px,6vw,96px);align-items:baseline}
.qa dt{margin:0;font:500 clamp(23px,2.1vw,28px)/1.2 var(--serif)}
.qa dd{margin:0;max-width:52ch;color:var(--muted)}

@media (max-width:860px){
  .p-terms{grid-template-columns:minmax(0,1fr);gap:36px}
  .qa > div{grid-template-columns:minmax(0,1fr)}
  .qa{gap:28px}
}
@media (max-width:360px){.pricing-page .price-top h1{white-space:normal}}
@media (max-width:700px){
  .pricing-page .price-top h1{font-size:clamp(34px,10vw,44px)}
  .row-note{font-size:14px}
  .plans-full tbody th{padding-top:13px;padding-bottom:13px}
}

/* ---------- new clinics ---------- */
.nc-head .lede{margin-top:22px}
.nc-stage{position:relative;margin:clamp(40px,6vh,64px) auto 0;max-width:calc(var(--wrap) + 40px);padding:0 calc(var(--gutter) - 20px)}
.nc-controls{display:flex;justify-content:flex-end;align-items:center;gap:12px 24px;flex-wrap:wrap;margin:0 0 -38px;min-height:48px;position:relative;z-index:2;padding-left:240px}
.nc-screen{position:relative;height:min(78vh,800px);min-height:520px;border-radius:9px;overflow:hidden;background:var(--paper)}
.nc-screen iframe{display:block;width:100%;height:100%;border:0;background:var(--paper)}
.nc-cover,.nc-phone-open{display:none}

.nc-flipday{padding-top:clamp(110px,15vh,170px)}
.nc-diff{width:100%;max-width:1060px;margin:clamp(32px,5vh,48px) 0 0;border-collapse:collapse;table-layout:fixed}
.nc-diff thead th{padding:0 0 14px;text-align:left;font:600 15.5px/1.3 var(--sans);color:var(--muted)}
.nc-diff thead th:last-child{color:var(--pine)}
.nc-diff tbody th{width:28%;padding:16px 24px 16px 0;text-align:left;font-weight:400;color:var(--muted);border-top:1px solid var(--rule)}
.nc-diff td{padding:16px 24px 16px 0;font:500 clamp(20px,1.9vw,25px)/1.25 var(--serif);border-top:1px solid var(--rule)}
.nc-diff td:last-child{color:var(--pine-deep)}
.nc-fine{margin:16px 0 0;font-size:15px;color:var(--quiet)}

.nc-need{padding-top:clamp(110px,15vh,170px);display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:32px clamp(40px,7vw,110px);align-items:start}
.nc-need-say p{margin:16px 0 0;max-width:38ch;color:var(--muted)}
.nc-list{margin:4px 0 0;padding:0;list-style:none;display:grid;gap:22px}
.nc-list li{font:400 clamp(21px,1.9vw,25px)/1.35 var(--serif);color:var(--muted);text-wrap:pretty}
.nc-list b{font-weight:500;color:var(--ink)}

@media (max-width:900px){.nc-stage{padding:0 var(--gutter)}}
@media (max-width:860px){
  .nc-controls{padding-left:0;margin:0 0 16px;justify-content:space-between}
  .nc-need{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:700px){
  .nc-full{display:none}
  .nc-controls .billing{width:100%;display:flex}
  .nc-controls .billing button{flex:1}
  .nc-screen{height:600px;min-height:0;border-radius:8px}
  .nc-screen iframe{pointer-events:none}
  .nc-cover{display:block;position:absolute;inset:0;z-index:2}
  .nc-phone-open{
    display:flex;align-items:center;justify-content:center;gap:9px;margin:12px 0 0;min-height:52px;
    border-radius:10px;background:var(--pine);color:#fff;text-decoration:none;font-weight:600;font-size:16.5px;transition:background-color .15s ease;
  }
  .nc-phone-open:hover,.nc-phone-open:active{background:var(--pine-deep)}
  .nc-phone-open svg{width:13px;height:13px}
  .nc-diff,.nc-diff tbody,.nc-diff tr{display:block}
  .nc-diff thead{display:none}
  .nc-diff tbody tr{padding:16px 0;border-top:1px solid var(--rule);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:6px 16px}
  .nc-diff tbody th{grid-column:1/-1;width:auto;padding:0;border:0;font-size:15px}
  .nc-diff td{padding:0;border:0;font-size:19px}
  .nc-diff td::before{display:block;margin-bottom:2px;font:600 13.5px/1.3 var(--sans);color:var(--quiet)}
  .nc-diff td:nth-of-type(1)::before{content:"Before opening"}
  .nc-diff td:nth-of-type(2)::before{content:"From opening day";color:var(--pine)}
}

/* ---------- how it works ---------- */
.how-need{padding-top:clamp(44px,7vh,72px)}
.needs{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px clamp(32px,5vw,80px)}
.needs b{display:block;margin:0 0 4px;font:500 clamp(22px,2vw,27px)/1.2 var(--serif)}
.needs span{display:block;max-width:40ch;color:var(--muted)}
.needs-more{margin:clamp(30px,4vh,40px) 0 0;color:var(--muted)}
.needs-more a{margin-left:4px}

.how-then{padding-top:clamp(110px,15vh,170px)}
/* the sequence is one sentence, not a numbered rail */
.path{margin:0;padding:0;list-style:none;display:block;max-width:24em;text-wrap:balance;font:500 clamp(30px,3.6vw,50px)/1.18 var(--serif);letter-spacing:-.015em}
.path li{display:inline}
.path li:first-child{color:var(--pine)}
.path li:last-child{color:var(--pine)}
.path li:not(:last-child)::after{
  content:"";display:inline-block;width:.42em;height:.42em;margin:0 .34em 0 .3em;vertical-align:.06em;
  background:currentColor;color:var(--quiet);
  -webkit-mask:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M2 7h9.2M7.6 3.2 11.4 7l-3.8 3.8' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M2 7h9.2M7.6 3.2 11.4 7l-3.8 3.8' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
}
.path li:first-child::after{color:var(--quiet)}
.then-notes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px clamp(32px,6vw,96px);margin:clamp(36px,5vh,52px) 0 0;max-width:1060px}
.then-notes p{margin:0;max-width:44ch;color:var(--muted)}
.then-notes b{color:var(--ink);font-weight:600}
.then-time{grid-column:1/-1;max-width:none!important;margin-top:clamp(10px,2vh,20px)!important;font:500 clamp(23px,2.2vw,29px)/1.3 var(--serif);color:var(--ink)!important}
.then-time b{font-weight:700}

.how-after{padding-top:clamp(110px,15vh,170px)}
.after-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px clamp(32px,6vw,96px);margin:clamp(32px,5vh,48px) 0 0;max-width:1060px}
.after-pair h3{margin:0 0 8px;font:500 clamp(24px,2.2vw,30px)/1.15 var(--serif)}
.after-pair p{margin:0;max-width:42ch;color:var(--muted)}
.after-leave{margin:clamp(44px,6vh,64px) 0 0;max-width:60ch;color:var(--muted)}
.after-leave .out{margin-left:6px}

@media (max-width:860px){
  .needs,.then-notes,.after-pair{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:700px){
  .path{font-size:clamp(26px,7.6vw,32px)}
  .then-time{font-size:22px}
}

/* ---------- about ---------- */
.about-grid{display:grid;grid-template-columns:minmax(0,440px) minmax(0,1fr);gap:clamp(36px,5vh,56px) clamp(40px,7vw,110px);align-items:start}
.about-grid h1{grid-column:1/-1}
.about-photo{margin:0}
.about-photo img{display:block;width:100%;height:auto;aspect-ratio:1140/1308;object-fit:cover;border-radius:14px;box-shadow:0 0 0 1px rgba(24,58,45,.08),0 3px 8px -5px rgba(24,58,45,.45)}
.about-say{max-width:56ch;padding-top:4px}
.about-say p{margin:0 0 20px;color:var(--muted);font-size:18px;line-height:1.6;text-wrap:pretty}
.about-say .about-first{font:500 clamp(24px,2.3vw,31px)/1.3 var(--serif);color:var(--ink);margin-bottom:28px}
.about-say .about-last{margin:30px 0 0;color:var(--ink);font-weight:600}
@media (max-width:860px){
  .about-grid{grid-template-columns:minmax(0,1fr)}
  .about-photo{max-width:440px}
}
@media (max-width:700px){
  .about-say p{font-size:17px}
}
