/* The Instant Reframe — one visual system for the front door, the booking steps, the outcome,
   the private review page and Jeff's request desk. Near-white page, ink type, one sky accent.
   Work Sans for display, Nunito Sans for reading. Square corners on everything except the button.
   No cream, no arches, no uppercase labels, no cards-as-default. Weight comes from type and space. */

:root{--paper:#F4F9FC;--ink:#0F1320;--muted:#3d5a6e;--blue:#049DDD;--blue-ink:#075985;--line:#c5dcea;--hair:#dceaf3;--field:#ffffff;--sky:#E0F2FE;--font:'Nunito Sans',sans-serif;--heading:'Work Sans',sans-serif;
--w:1060px;--gutter:32px;--s1:8px;--s2:16px;--s3:24px;--s4:40px;--s5:64px;--s6:96px}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth}
html,body{background:
  linear-gradient(180deg,#D9EEF9 0%,#F4F9FC 42%,#EAF5FB 100%)}
body{margin:0;color:var(--ink);font:400 18px/1.6 var(--font)}
a{color:var(--blue);text-underline-offset:4px}
h1,h2,h3,p,figure,dl,dd{margin:0}
h1,h2,h3{font-family:var(--heading);letter-spacing:-.035em;line-height:1.08}
h1{font-size:clamp(42px,5.4vw,66px);font-weight:800}
h2{font-size:clamp(28px,3.1vw,36px);font-weight:700}
h3{font-size:22px;font-weight:700;letter-spacing:-.02em}
strong{font-weight:700}
.wrap{max-width:var(--w);margin-inline:auto;padding-inline:var(--gutter)}
.skip{position:fixed;top:12px;left:20px;padding:12px 20px;background:#fff;z-index:100;clip-path:inset(50%)}.skip:focus{clip-path:none}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px}

/* Buttons */
.button{display:inline-flex;align-items:center;justify-content:center;gap:12px;padding:0 22px;min-height:52px;border:1px solid var(--blue);border-radius:5px;background:var(--blue);color:#fff;text-decoration:none;font:700 16px/1.2 var(--font);cursor:pointer;transition:background .15s}
.button:hover{background:var(--blue-ink)}
.secondary{display:inline-flex;align-items:center;justify-content:center;padding:0 18px;min-height:46px;border:1px solid var(--line);border-radius:5px;background:transparent;color:var(--ink);font:600 15px/1.2 var(--font);cursor:pointer}
.secondary:hover{border-color:var(--ink)}
.text-button{background:none;border:0;padding:6px 0;font:inherit;font-size:15px;color:var(--blue);text-decoration:underline;text-underline-offset:4px;cursor:pointer}
button:disabled,.button:disabled{opacity:.5;cursor:wait}
.actions{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-top:var(--s3)}

/* Header + footer */
.door-header{padding:var(--s3) 0 0}
.door-header .brand{color:var(--ink);text-decoration:none;font:800 16px/1.1 var(--heading);letter-spacing:.02em;display:inline-flex;align-items:center;gap:10px}
.door-header .brand img{width:28px;height:auto;display:block;flex:none}
.door-footer{padding:var(--s4) 0 var(--s3);margin-top:var(--s6);font-size:14px;color:var(--muted);display:flex;gap:var(--s3);flex-wrap:wrap;justify-content:center;text-align:center}
.door-footer a{color:inherit}

/* The door */
.door{padding-top:var(--s5);padding-bottom:0;display:grid;grid-template-columns:minmax(0,1.2fr) minmax(240px,.8fr);gap:var(--s4);align-items:start;overflow:visible}
.door h1{margin-bottom:var(--s3)}
.door .lead{font-size:21px;line-height:1.55;max-width:34em}
.door .lead+.lead{margin-top:var(--s2)}
.door .quiet{font-size:16px;line-height:1.6;color:var(--muted);margin-top:var(--s3);max-width:34em}
.door .jump{margin-top:var(--s3)}
.portrait{max-width:420px;width:100%;justify-self:end;position:relative;z-index:2;margin-bottom:-1px}
.portrait img{width:100%;height:auto;display:block;background:transparent}

/* Booking block */
.book{padding-top:var(--s4);border-top:1px solid var(--line)}
.booking-work{max-width:720px;margin-inline:auto}
#calendar-panel h2{margin-bottom:var(--s1)}
#calendar-panel>p{font-size:16px;color:var(--muted);max-width:34em;margin-inline:auto}
#calendar-panel .nb{white-space:nowrap}
.tz-row{margin-top:6px}
.tz-row label{font-weight:400}
#timezone{display:inline-block;width:auto;max-width:100%;margin:0 0 0 4px;padding:6px 30px 6px 10px;border:1px solid var(--line);background:#fff;color:var(--ink);font:600 15px/1.3 var(--font);border-radius:0;-webkit-appearance:none;appearance:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='%23075985' d='M1 1l5 5 5-5'/></svg>");background-repeat:no-repeat;background-position:right 10px center;cursor:pointer}
#timezone:focus{border-color:var(--blue);outline:none;box-shadow:0 0 0 3px rgba(4,157,221,.18)}
.month-label{font:700 20px/1.2 var(--heading);letter-spacing:-.02em;margin:var(--s3) 0 var(--s2)}
.days-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;max-width:520px;margin-inline:auto}
.weekday{font-size:12px;font-weight:700;letter-spacing:.04em;text-align:center;color:var(--muted);padding-bottom:4px}
.day{font:700 17px var(--font);min-height:54px;border:1px solid var(--line);background:#fff;color:var(--ink);cursor:pointer}
.day:hover:not(:disabled){border-color:var(--ink)}
.day:disabled{color:var(--muted);background:transparent;border-color:var(--hair);font-weight:400;cursor:default}
.day.past{opacity:.35}
.day[aria-pressed=true]{background:var(--blue);border-color:var(--blue);color:#fff}
#times h3{margin:var(--s3) 0 var(--s2);font-size:18px}
.time-list{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.time{font:600 16px var(--font);padding:0 20px;min-height:48px;border:1px solid var(--line);background:#fff;color:var(--ink);cursor:pointer}
.time:hover:not(:disabled){border-color:var(--ink)}
.time[aria-pressed=true]{background:var(--blue);border-color:var(--blue);color:#fff}
#availability-status{font-size:16px;color:var(--muted);margin-top:var(--s2)}
#refresh{margin-top:var(--s2)}
#backup{margin-top:var(--s3);padding-top:var(--s3);border-top:1px solid var(--line)}
#backup h3{margin-bottom:var(--s1)}
#backup p{font-size:17px;color:var(--muted)}
#calendar-panel{padding:var(--s4);text-align:center;background:rgba(255,255,255,.42);border:1px solid rgba(4,157,221,.22);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
#calendar-panel h2{margin-bottom:var(--s1)}
.day:focus-visible,.time:focus-visible{outline:none;box-shadow:inset 0 0 0 2px var(--blue);background:#E0F2FE}

#hold-card{display:none;margin:var(--s4) 0;max-width:none}
#hold-card.is-on{display:block}
.hold-row{display:flex;align-items:center;gap:20px;flex-wrap:nowrap}
.hold-cal{width:72px;height:72px;flex:none;border:1.5px solid var(--blue);color:var(--blue);display:flex;flex-direction:column;align-items:center;justify-content:center;font:800 12px/1 var(--heading);letter-spacing:.08em}
.hold-cal b{font:800 28px/1 var(--heading);letter-spacing:0;margin-top:4px;color:var(--blue)}
#chosen-time{font:800 clamp(22px,2.8vw,34px)/1.15 var(--heading);letter-spacing:-.035em;color:var(--ink);margin:0;flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center;gap:0}
#hold-date,#hold-clocktime{display:block;white-space:nowrap}
#hold-date{font-size:.72em;letter-spacing:-.02em}
#hold-clock{font-size:17px;color:var(--ink);margin-top:var(--s3);max-width:42em;line-height:1.55;padding:16px 20px;background:#CDEBFA;border:1px solid #034778}
#hold-clock:empty{display:none}
#hold-clock strong{display:block;font-family:var(--heading);font-weight:700;color:#034778;margin-bottom:6px;letter-spacing:-.01em}
#hold-clock p{margin:0}
#hold-clock .hold-help{margin-top:8px;font-size:15px;color:var(--muted)}
.hold-ring{--p:1;width:76px;height:76px;flex:none;border-radius:50%;display:grid;place-items:center;background:conic-gradient(var(--blue) calc(var(--p)*1turn),#d5e8f3 0);position:relative}
.hold-ring::after{content:"";position:absolute;inset:8px;border-radius:50%;background:linear-gradient(180deg,#D9EEF9 0%,#F4F9FC 100%)}
.hold-ring span{position:relative;z-index:1;font:700 14px/1 var(--heading);color:var(--blue-ink)}
#release-time{margin-top:var(--s3);border-color:var(--blue)}

.now{margin:0 0 var(--s3)}
.now span{display:inline-block;background:#CDEBFA;color:#034778;font:700 22px/1.45 var(--heading);letter-spacing:-.02em;padding:.28em .5em;border:1px solid #034778;max-width:100%}
.what,.channel,.who,.book{padding-block:var(--s5);border-top:1px solid rgba(7,93,157,.16);position:relative;z-index:1}
.what-blurb{max-width:38em;font-size:18px;line-height:1.55;margin:0 0 var(--s2)}
.channel{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(260px,.85fr);gap:var(--s5);align-items:start}
.privacy-page{max-width:720px;margin:0 auto;padding:var(--s5) var(--gutter) var(--s6)}
.privacy-page h1{margin-bottom:var(--s3)}
.privacy-page h2{margin-top:var(--s4);margin-bottom:var(--s2)}
.privacy-page p{max-width:38em}

#hold-date:empty,#hold-clocktime:empty{display:none}

.yt{margin:var(--s3) 0 0;max-width:400px}
.yt-thumb{position:relative;aspect-ratio:16/9;overflow:hidden;background:#0a2a3c}
.yt-thumb img{width:100%;height:100%;object-fit:cover;object-position:50% 18%;display:block}
.yt-thumb{display:block}
.yt-play{position:absolute;left:50%;top:50%;width:68px;height:48px;margin:-24px 0 0 -34px;border-radius:12px;background:#ff0000;box-shadow:0 6px 18px rgba(0,0,0,.35);transition:transform .15s}
.yt-play::after{content:"";position:absolute;left:26px;top:14px;border-style:solid;border-width:10px 0 10px 18px;border-color:transparent transparent transparent #fff}
.yt-thumb:hover .yt-play{transform:scale(1.06)}
.yt figcaption{margin-top:10px;font-size:15px;color:var(--muted)}
.yt figcaption a{color:inherit}
.who{display:grid;grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr);gap:var(--s5);align-items:start}
.who-photo{max-width:420px}
.who-photo figcaption{margin-top:10px;font-size:14px;color:var(--muted)}
.who-photo img{width:100%;height:auto;display:block}
.who p{font-size:17px;line-height:1.7;color:#30465a}
.who p+p{margin-top:var(--s2)}

/* Form */
.booking-work fieldset{border:0;padding:0;margin:0}
.booking-work legend{padding:0;margin:0 0 var(--s1);font:700 clamp(26px,3vw,32px)/1.15 var(--heading);letter-spacing:-.03em}
.booking-work legend+p{font-size:17px;color:var(--muted);margin-bottom:var(--s2)}
#progress{font-size:14px;font-weight:700;color:var(--muted);margin-top:var(--s3)}
.progress-track{height:2px;background:var(--hair);margin:10px 0 var(--s3)}
.progress-track span{display:block;height:100%;width:33%;background:var(--blue)}
.booking-work label{display:block;margin-top:var(--s2);font-size:15px;font-weight:700}
.booking-work input,.booking-work textarea,.booking-work select{display:block;width:100%;margin-top:6px;padding:12px 14px;border:1px solid var(--line);background:var(--field);color:var(--ink);font:400 16px/1.5 var(--font);border-radius:0}
.booking-work select{-webkit-appearance:none;appearance:none;padding-right:42px;background-color:var(--field);background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='%23075985' d='M1 1l5 5 5-5'/></svg>");background-repeat:no-repeat;background-position:right 14px center;cursor:pointer}
.booking-work input:focus,.booking-work textarea:focus,.booking-work select:focus{border-color:var(--blue);outline:none;box-shadow:0 0 0 3px rgba(4,157,221,.18)}
.booking-work textarea{resize:vertical}
.hint,.optional{font-weight:400;font-size:14px;color:var(--muted)}
.hint{display:block;margin-top:2px}
.pair{display:grid;grid-template-columns:1fr 1fr;gap:var(--s2)}
.booking-work label.check{display:flex;gap:14px;align-items:flex-start;font-weight:400!important;font-size:17px;line-height:1.55;color:var(--ink);margin-top:var(--s4)}
.booking-work label.check input[type=checkbox]{appearance:none;-webkit-appearance:none;width:22px;height:22px;margin:3px 0 0;flex:none;padding:0;border:1.5px solid #5a6a78;background:#fff;border-radius:2px;display:block;cursor:pointer}
.booking-work label.check input[type=checkbox]:checked{background:var(--blue);border-color:var(--blue);background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='%23fff' stroke-width='2.2' d='M3 8.2l3.2 3.2L13 4.4'/></svg>");background-repeat:no-repeat;background-position:center;background-size:14px}
.booking-work label.check span{flex:1;min-width:0}
.fit-note{font-size:16px;line-height:1.55;color:var(--muted);margin-top:var(--s3);max-width:38em}
.trap{position:absolute!important;clip-path:inset(50%);width:1px;height:1px;overflow:hidden}
.error{color:#952d28;font-size:15px;margin-top:var(--s2)}
.error:empty{display:none}
.small{font-size:14px;color:var(--muted)}
.small:empty{display:none}
.booking-work .small{margin-top:var(--s2)}
#change-time{margin-top:var(--s2)}

/* Outcome */
#outcome{padding-top:var(--s1);text-align:center}
#outcome-when{display:flex;align-items:center;justify-content:center;gap:20px;font:800 clamp(22px,2.8vw,34px)/1.2 var(--heading);letter-spacing:-.035em}
.outcome-date-details{display:flex;flex-direction:column;gap:5px;text-align:left;min-width:0}
.outcome-weekday{font-size:.72em;letter-spacing:-.02em}
.outcome-date-time{font-size:.8em}
#outcome-copy,#outcome #orientation,#outcome .small{margin-left:auto;margin-right:auto;max-width:34em}
#outcome .actions{justify-content:center}
@media(max-width:540px){#outcome-when{gap:12px}.outcome-date-time{font-size:18px}}
#outcome-title{font-size:clamp(22px,2.4vw,26px);margin:var(--s2) 0 var(--s2);color:var(--blue)}
#outcome-copy{font-size:17px;max-width:34em}
#email-status{margin-top:var(--s2)}
#orientation{margin-top:var(--s3);padding-top:var(--s3);border-top:1px solid var(--line);max-width:34em}
#orientation h3{margin-bottom:var(--s1)}
#orientation p{font-size:16px}
#meet-link{margin-top:var(--s3)}
#demo-receipt{display:none}



/* Jeff's desk (admin + private review) */
.admin{max-width:var(--w);margin:0 auto;padding:var(--s4) var(--gutter) var(--s6)}
.admin-head h1{margin-bottom:var(--s3)}
#login{display:flex;gap:12px;align-items:end;flex-wrap:wrap}
#login label{display:block;font-size:14px;font-weight:700}
#login label span{display:block;margin-bottom:6px}
#login input[type=password]{display:block;width:340px;max-width:100%;padding:12px 14px;border:1px solid var(--line);background:var(--field);font:400 16px var(--font)}
#login .remember{display:flex;gap:8px;align-items:center;font-size:14px;font-weight:400;flex-basis:100%;margin-top:4px}
#login .remember input{width:18px;height:18px;margin:0}
.toolbar{display:flex;gap:10px;margin-top:var(--s2)}
#admin-status{font-size:15px;color:var(--muted);margin-top:var(--s2)}
#admin-status:empty{display:none}
.admin section{margin-top:var(--s5)}
.admin section>h2{font:700 14px/1 var(--font);letter-spacing:.02em;color:var(--muted);padding-bottom:12px;border-bottom:1px solid var(--line)}
.request{padding:var(--s4) 0;border-bottom:1px solid var(--line)}
.request .when{font:800 clamp(24px,2.8vw,32px)/1.15 var(--heading);letter-spacing:-.035em}
.request .when small{display:inline-block;font:600 14px/1 var(--font);letter-spacing:0;color:var(--blue);margin-left:14px;vertical-align:middle;white-space:nowrap}
.request .who{font-size:19px;margin-top:10px}
.request .meta{font-size:14px;color:var(--muted);margin-top:4px}
.request dl{margin-top:var(--s3);max-width:38em}
.request dt{font-size:13px;font-weight:800;color:var(--muted);margin-top:var(--s2)}
.request dd{margin-top:4px;font-size:17px;line-height:1.6;white-space:pre-wrap}
.request .actions{margin-top:var(--s3)}
.request .note{display:none;margin-top:var(--s2);max-width:38em}
.request .note label{display:block;font-size:14px;font-weight:700}
.request .note textarea{display:block;width:100%;margin-top:6px;padding:12px 14px;border:1px solid var(--line);background:var(--field);font:400 16px/1.5 var(--font)}
.request.cancelling .note{display:block}
.request .fine{font-size:13px;color:var(--muted);margin-top:var(--s2)}
.backup{padding:var(--s2) 0;border-bottom:1px solid var(--line);font-size:17px}
.backup small{display:block;color:var(--muted);font-size:14px;margin-top:2px}
.empty{color:var(--muted);font-size:16px;padding:var(--s2) 0}
details.more{margin-top:var(--s2)}
details.more summary{font-size:13px;color:var(--muted);cursor:pointer}
details.more p{font-size:13px;color:var(--muted);margin-top:6px}
#packet h2{font:800 13px/1 var(--font);letter-spacing:0;color:var(--muted);margin-top:var(--s3)}
#packet p{font-size:17px;line-height:1.6;margin-top:6px;max-width:38em}
#title{margin-top:var(--s2)}
#status{font-size:15px;color:var(--muted);margin-top:var(--s1)}

@media(max-width:820px){
 :root{--gutter:32px;--s5:40px;--s6:56px}
 .wrap{padding-inline:max(32px,env(safe-area-inset-left,0px)) max(32px,env(safe-area-inset-right,0px))}
 .door{grid-template-columns:1fr;gap:0;padding-top:var(--s4);padding-bottom:var(--s4)}
 .portrait{display:none}
 .door h1{max-width:none}
 .door .lead,.door .quiet{font-size:18px;line-height:1.55;margin-top:18px}
 .door .jump{margin-top:22px}
 .what-blurb{font-size:17px;margin-bottom:16px}
 .what ol,.channel p,.who p,.fit-note{max-width:none}
 .what li{margin:0 0 20px}
 .channel{grid-template-columns:1fr;gap:var(--s3)}
 .channel p{margin:0 0 16px}
 .who{grid-template-columns:1fr;gap:var(--s3)}
 .who-photo{max-width:100%}
 .yt{max-width:100%}
 .hold-row{gap:10px}
 .hold-cal{width:52px;height:52px}
 .hold-cal b{font-size:22px}
 .hold-ring{width:52px;height:52px}
 .hold-ring::after{inset:6px}
 #chosen-time{font-size:18px}
 #hold-date{font-size:.78em}
 #hold-date,#hold-clocktime{white-space:nowrap}
 #calendar-panel{padding:18px}
 .booking-work{max-width:none}
 .pair{grid-template-columns:1fr;gap:0}
 .day{min-height:46px;font-size:15px}
 .days-grid{gap:4px}
 #login input[type=password]{width:100%}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}

/* Keep the automatic-availability sentence on its own line. */
#join-note,#outcome-copy,#orientation p{white-space:pre-line}

.week-capacity{text-align:center;margin:0 0 18px}.week-capacity p{margin:3px 0;font-weight:600}.is-loading:before{content:'';display:inline-block;width:12px;height:12px;margin-right:8px;border:2px solid #d3e3ec;border-top-color:#049ddd;border-radius:50%;vertical-align:-2px;animation:calendar-check .9s linear infinite}@keyframes calendar-check{to{transform:rotate(360deg)}}@media(prefers-reduced-motion:reduce){.is-loading:before{animation:none}}

.booking-invitation{white-space:pre-line;line-height:1.7;margin-bottom:26px!important}.timezone-disclosure{margin:16px auto 20px;max-width:100%;font-size:13px;color:#526473;text-align:center}.timezone-disclosure summary{cursor:pointer;list-style:none;display:inline-block;padding:6px 2px}.timezone-disclosure summary::-webkit-details-marker{display:none}.timezone-disclosure summary:hover{color:#167cad}.timezone-disclosure summary:focus-visible{outline:2px solid #4ca5d4;outline-offset:4px}.timezone-disclosure .tz-row{margin:10px auto 0;max-width:350px}.timezone-disclosure .tz-row label{font-size:13px}.timezone-disclosure select{font-size:13px;max-width:100%}

/* The booking anchor receives navigation focus, but is not an interactive control. */
#book:focus,#book:focus-visible{outline:none}

.timezone-disclosure{position:relative;width:fit-content}.timezone-menu{position:absolute;z-index:20;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);width:350px;max-width:calc(100vw - 64px);max-height:260px;overflow:auto;overscroll-behavior:contain;padding:6px;background:#fff;border:1px solid #cbdde8;border-radius:8px;box-shadow:0 8px 28px #173d571c;text-align:left}.timezone-menu button{display:block;width:100%;margin:0;padding:10px 12px;background:transparent;border:0;border-radius:4px;color:#425967;text-align:left;font:inherit;line-height:1.4;cursor:pointer}.timezone-menu button:hover,.timezone-menu button:focus-visible{background:#eef7fc;outline:2px solid #87bddb;outline-offset:-2px}.timezone-menu button[aria-pressed="true"]{background:#e5f3fc;color:#17628f;font-weight:600}.timezone-menu button[aria-pressed="true"]:after{content:' ✓';float:right}
/* The calendar chooses a day; this quieter inset chooses a time within it. */
#times:not(:empty){margin:26px 0 18px;padding:21px 16px 23px;border-top:1px solid #cbdfe9;background:#eaf4fa;border-radius:0 0 8px 8px}
#times h3{margin:0 0 15px;font-size:17px;color:#244c64}
#times .time-list{gap:9px}
#times .time{font-size:14px;min-height:40px;padding:0 16px;border:1px solid #a8cee3;border-radius:20px;background:#fff;color:#225b7b}
#times .time:hover:not(:disabled){background:#d8edf9;border-color:#4b99c5}
#times .time:focus-visible{outline:2px solid #2682b7;outline-offset:3px;box-shadow:none}
@media(max-width:480px){#times:not(:empty){padding:18px 10px 20px}#times .time{min-height:44px;padding:0 14px}}