/* UTF booking page. Calendly's layout in UrbanTechFlow's brand: the tokens, fonts and one action colour of
   urbantechflow.com (landing/index.html). Space Grotesk for headings, Manrope for text, the brand green for
   the one thing to press, ink on paper for everything else. Mobile first: under 600 px the card fills the
   screen; from 900 px the card splits into the event panel and the picker; from 1100 px the times sit beside
   the month, as on Calendly. */

@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:300 700;font-display:swap;src:url(fonts/spacegrotesk-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:300 700;font-display:swap;src:url(fonts/spacegrotesk-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Manrope';font-style:normal;font-weight:200 800;font-display:swap;src:url(fonts/manrope-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Manrope';font-style:normal;font-weight:200 800;font-display:swap;src:url(fonts/manrope-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root{
  --night:#0B0E13; --night-ink:#F5F7FA;
  --paper:#F7F8FA; --white:#FFFFFF;
  --ink:#20242B; --ink-2:#5D646F; --ink-3:#828A96;   /* ink-3 is 3.5:1 on white: the lightest a control edge may be */
  --rule:#DFE3E9; --rule-soft:#EBEEF2;
  --green:#3FBF77;        /* the only action colour; never as text on white */
  --on-green:#06130B;     /* text on green */
  --green-text:#1F6B43;   /* green words on white */
  --green-deep:#2C8A57;   /* green edges and icons on white */
  --green-marker:#DDF5E7; /* an open day */
  --green-hover:#C8EED8;
  --green-wash:#F1FAF5;
  --bad:#B3261E; --bad-bg:#FCEBEA; --bad-rule:#F0B9B4;
  --focus:#2563C9;

  --f-head:"Space Grotesk","Manrope",system-ui,sans-serif;
  --f-body:"Manrope",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --r-card:14px; --r-input:10px; --r-btn:12px;
  --ease:cubic-bezier(.16,1,.3,1); --t-fast:180ms;
  --shadow-card:0 1px 2px rgba(32,36,43,.05),0 18px 40px -22px rgba(32,36,43,.22);
}

/* ------------------------------------------------------------ base */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;-webkit-tap-highlight-color:transparent;color-scheme:light}
body{margin:0;font:400 16px/1.55 var(--f-body);color:var(--ink);background:var(--paper);-webkit-font-smoothing:antialiased;overflow-wrap:break-word}
h1,h2,h3,p,ul,ol,dl,dd,figure{margin:0}
ul,ol{padding:0;list-style:none}
fieldset{margin:0;padding:0;border:0;min-width:0}
legend{padding:0}
[hidden]{display:none!important}
a{color:var(--green-text);text-underline-offset:3px;text-decoration-thickness:1px}
button,input,select,textarea{font:inherit;color:inherit;margin:0}
button{cursor:pointer;touch-action:manipulation}
svg{display:block}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
h2[tabindex="-1"]:focus,h3[tabindex="-1"]:focus,main:focus{outline:none}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.skip{position:absolute;left:12px;top:-80px;z-index:20;background:var(--white);color:var(--ink);padding:10px 14px;border-radius:10px;font-weight:700;text-decoration:none;box-shadow:var(--shadow-card)}
.skip:focus{top:12px}
.hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
/* Until the script has put the right words in, the card waits (never longer than 2.5 s). */
.pending .card{visibility:hidden;animation:reveal 0s linear 2.5s forwards}
@keyframes reveal{to{visibility:visible}}
.noscript{max-width:560px;margin:24px auto;padding:16px;text-align:center}
/* The frame guard (book.js): framed by a page that is not UTF's, the page shows only its own address. */
.frame-refused{max-width:560px;margin:24px auto;padding:16px;text-align:center;overflow-wrap:anywhere}
.ic{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.vi{width:22px;height:22px;flex:none}
.mock-banner{margin:0;padding:8px 12px;background:var(--night);color:var(--night-ink);text-align:center;font:600 13.5px/1.4 var(--f-body)}

/* ------------------------------------------------------------ page and card */
.shell{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;align-items:center}
.card{width:100%;max-width:1060px;background:var(--white);display:flex;flex-direction:column}
@media (max-width:599px){
  /* the white card fills a short phone screen, so the footer sits at the bottom (embed and framed: no min height) */
  .card{border-bottom:1px solid var(--rule);flex:1 0 auto}
}
@media (min-width:600px){
  .shell{padding:32px 20px 12px}
  .card{border:1px solid var(--rule);border-radius:var(--r-card);box-shadow:var(--shadow-card);overflow:hidden}
}
@media (min-width:900px){
  .shell{padding:56px 24px 16px}
  .card{flex-direction:row;min-height:640px}
}

/* ------------------------------------------------------------ left panel: who, what, how long */
.info{padding:18px 16px 18px;border-bottom:1px solid var(--rule)}
@media (min-width:600px){.info{padding:24px 28px}}
@media (min-width:900px){.info{flex:0 0 340px;max-width:340px;border-bottom:0;border-right:1px solid var(--rule);padding:28px 28px 32px}}
.brand{display:flex;align-items:center;gap:10px;padding-bottom:14px;margin-bottom:16px;border-bottom:1px solid var(--rule-soft);color:var(--ink)}
.brand svg{width:34px;height:34px;flex:none}
.brand .wm{font:700 17px/1 var(--f-head);letter-spacing:-.01em}
@media (min-width:900px){.brand{padding-bottom:18px;margin-bottom:22px}}
.host{display:flex;align-items:center;gap:12px;margin-bottom:8px}
.avatar{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;flex:none;overflow:hidden;
  background:var(--green-marker);color:var(--green-text);font:700 18px/1 var(--f-head);box-shadow:inset 0 0 0 1px rgba(44,138,87,.18)}
.avatar img{width:100%;height:100%;object-fit:cover}
.host-name{font:700 15px/1.3 var(--f-body);color:var(--ink-2)}
.evt-title{font:700 23px/1.18 var(--f-head);letter-spacing:-.02em;color:var(--ink);margin-bottom:14px;text-wrap:balance}
@media (min-width:900px){.evt-title{font-size:27px;margin-bottom:18px}}
.meta{display:grid;gap:10px;margin-bottom:14px}
.meta li{display:flex;align-items:flex-start;gap:10px;font:700 15px/1.4 var(--f-body);color:var(--ink-2)}
.meta .ic{margin-top:1px}
.meta li > span{min-width:0}
.vicons{display:inline-flex;gap:6px;vertical-align:-5px;margin-left:8px}
.vicons .vi{width:20px;height:20px}
.meta .picked{color:var(--green-text)}
.meta .picked-tz{font-weight:600}
.desc{font-size:15px;line-height:1.55;color:var(--ink-2);text-wrap:pretty}
@media (max-width:599px){
  .info .desc{font-size:14.5px}
  /* on the details step the phone sees what he picked, not the pitch again */
  [data-step="details"] .info .desc{display:none}
  body[data-page="manage"] .info .desc{display:none}
}

/* ------------------------------------------------------------ right panel */
.panel{flex:1;min-width:0;padding:18px 16px 28px}
@media (min-width:600px){.panel{padding:24px 28px 32px}}
@media (min-width:900px){.panel{padding:28px 32px 32px}}
.step-h{font:700 20px/1.25 var(--f-head);letter-spacing:-.01em;margin-bottom:16px}
@media (min-width:900px){.step-h{font-size:21px;margin-bottom:20px}}
.alert{margin-bottom:16px;padding:12px 14px;border-radius:var(--r-input);border:1px solid var(--bad-rule);background:var(--bad-bg);color:var(--bad);font:700 14.5px/1.45 var(--f-body)}
.alert a{color:var(--bad)}

/* ------------------------------------------------------------ picker: month, time zone, times */
.picker{display:grid;gap:22px}
@media (min-width:900px){.picker{grid-template-columns:minmax(0,440px)}}
@media (min-width:1100px){.picker.has-day{grid-template-columns:minmax(0,1fr) 208px;gap:28px}}
.cal-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:6px}
.cal-month{flex:1;text-align:center;font:600 17px/1.3 var(--f-head);letter-spacing:-.005em}
.cal-nav{width:44px;height:44px;flex:none;border:0;border-radius:50%;background:transparent;display:grid;place-items:center;color:var(--green-text);transition:background var(--t-fast) var(--ease)}
.cal-nav .ic{width:22px;height:22px;stroke-width:2.2}
@media (hover:hover){.cal-nav:hover:not(:disabled){background:var(--green-marker)}}
.cal-nav:disabled{color:var(--ink-3);opacity:.4;cursor:default}
.cal-grid{width:100%;table-layout:fixed;border-collapse:separate;border-spacing:0 4px}
.cal-grid th{padding:8px 0 6px;text-align:center;font:700 11.5px/1 var(--f-body);letter-spacing:.07em;color:var(--ink-2)}
.cal-grid td{padding:0 1px;text-align:center}
.day{position:relative;display:inline-grid;place-items:center;width:100%;max-width:48px;aspect-ratio:1/1;border:0;border-radius:50%;
  background:transparent;color:var(--ink-3);font:500 15px/1 var(--f-body);font-variant-numeric:tabular-nums;
  transition:background var(--t-fast) var(--ease),color var(--t-fast) var(--ease)}
.day[aria-disabled="true"]{cursor:default}
.day.open{background:var(--green-marker);color:var(--green-text);font-weight:800}
@media (hover:hover){.day.open:hover{background:var(--green-hover)}}
.day.sel,.day.sel:hover{background:var(--green);color:var(--on-green);box-shadow:0 8px 18px -10px rgba(63,191,119,.9)}
.day.today::after{content:"";position:absolute;left:50%;bottom:5px;width:4px;height:4px;margin-left:-2px;border-radius:50%;background:currentColor}
.cal-status:empty{display:none}
.cal-msg{display:block;margin-top:10px;padding:12px 14px;border-radius:var(--r-input);background:var(--paper);font:600 14.5px/1.45 var(--f-body);color:var(--ink-2)}
.cal-msg.err{background:var(--bad-bg);color:var(--bad)}
.cal-msg.err a{color:var(--bad)}
.cal-msg p{margin:0}
.cal-msg .spin{vertical-align:-4px;margin-right:10px}
.cal-msg .btn-sm{margin-top:10px}
.nw{white-space:nowrap}
.linkbtn{border:0;background:none;padding:6px 0;min-height:44px;color:var(--green-text);font:700 14.5px/1.3 var(--f-body);text-decoration:underline;text-underline-offset:3px}
.btn-sm{min-height:44px;padding:0 14px;border-radius:10px;border:1px solid currentColor;background:var(--white);font:700 14px/1 var(--f-body)}
.spin{display:inline-block;width:18px;height:18px;flex:none;border-radius:50%;border:2.5px solid currentColor;border-right-color:transparent;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* S13: the next three open times, above the month */
.soon{margin-bottom:14px}
.soon-h{margin-bottom:8px;font:700 14px/1.3 var(--f-body);color:var(--ink)}
.soon-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.soon-btn{min-width:0;min-height:56px;padding:8px 6px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  border:1.5px solid var(--green-deep);border-radius:var(--r-input);background:var(--white);color:var(--green-text);
  font:700 13.5px/1.2 var(--f-body);font-variant-numeric:tabular-nums;text-align:center;transition:background var(--t-fast) var(--ease)}
.soon-btn .soon-d{white-space:nowrap}
.soon-btn .soon-t{font-size:15px;font-weight:800;white-space:nowrap}
.soon-btn[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--white)}
@media (hover:hover){.soon-btn:hover{background:var(--green-wash)}.soon-btn[aria-pressed="true"]:hover{background:var(--ink)}}

/* C23: small, under the calendar */
.reassure{margin-top:20px;padding-top:14px;border-top:1px solid var(--rule-soft);font:500 13.5px/1.5 var(--f-body);color:var(--ink-2);max-width:560px}

/* S4: when the times cannot be shown */
.fallback{display:grid;gap:16px;max-width:560px}
.fb-msg{padding:14px 16px;border-radius:var(--r-input);background:var(--paper);border:1px solid var(--rule);font:700 16px/1.45 var(--f-body);color:var(--ink)}
.fb-msg:focus{outline:none}
.fb-form{gap:14px}
.fb-fields{display:grid;gap:16px}
.fb-form .btn{width:100%}
@media (min-width:600px){.fb-form .btn{width:auto;min-width:280px}}
.fb-retry{justify-self:start}
.fb-done{padding:14px 16px;border-radius:var(--r-input);border:1px solid var(--green-deep);background:var(--green-wash);color:var(--green-text);font:700 15.5px/1.45 var(--f-body)}
.fb-done:focus{outline:none}

.tz{margin-top:16px}
.tz-label{display:block;margin-bottom:6px;font:700 14px/1.3 var(--f-body)}
.tz-box{position:relative;display:flex;align-items:center}
.tz-box select{appearance:none;-webkit-appearance:none;width:100%;min-height:48px;padding:10px 38px 10px 42px;border:1px solid var(--ink-3);border-radius:var(--r-input);
  background:var(--white);font:600 15px/1.3 var(--f-body);color:var(--ink);text-overflow:ellipsis;cursor:pointer}
.tz-box .i-globe{position:absolute;left:13px;width:19px;height:19px;color:var(--ink-2);pointer-events:none}
.tz-box .i-chev{position:absolute;right:12px;width:18px;height:18px;color:var(--ink-2);pointer-events:none}
.tz-note{margin-top:7px;font:500 13.5px/1.45 var(--f-body);color:var(--ink-2)}

.times-h{margin-bottom:12px;font:600 16px/1.3 var(--f-head)}
.times{display:grid;gap:8px}
@media (min-width:1100px){
  .times-h{padding-top:12px;margin-bottom:16px}
  .times{max-height:470px;overflow-y:auto;padding:2px 6px 2px 2px;margin:-2px -6px -2px -2px;scrollbar-width:thin}
}
.slot-row{display:flex;gap:8px}
.slot{flex:1 1 100%;min-width:0;min-height:52px;padding:6px 8px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;
  border:1.5px solid var(--green-deep);border-radius:var(--r-input);background:var(--white);color:var(--green-text);
  font:800 15.5px/1.2 var(--f-body);font-variant-numeric:tabular-nums;transition:background var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease)}
@media (hover:hover){.slot:hover{background:var(--green-wash);box-shadow:inset 0 0 0 1px var(--green-deep)}}
.slot-o{font:600 12.5px/1.2 var(--f-body);color:var(--ink-2);white-space:nowrap}
.slot-row.is-sel .slot{flex-basis:56%;background:var(--ink);border-color:var(--ink);color:var(--white);box-shadow:none}
.slot-row.is-sel .slot-o{color:#C9CFD8;font-size:12px}
.slot-next{flex:1 1 44%;min-width:0;min-height:52px;border:0;border-radius:var(--r-input);background:var(--green);color:var(--on-green);
  font:800 15.5px/1.2 var(--f-body);box-shadow:0 10px 22px -14px rgba(63,191,119,.9)}
@media (hover:hover){.slot-next:hover{filter:brightness(1.06)}}

/* ------------------------------------------------------------ details form */
.back{display:inline-flex;align-items:center;gap:6px;min-height:44px;margin:-6px 0 8px -10px;padding:0 14px 0 8px;border:0;border-radius:999px;
  background:transparent;color:var(--green-text);font:700 15px/1 var(--f-body)}
.back .ic{width:20px;height:20px;stroke-width:2.2}
@media (hover:hover){.back:hover{background:var(--green-marker)}}
.form{display:grid;gap:16px;max-width:560px}
.err-summary{padding:12px 14px;border-radius:var(--r-input);border:1px solid var(--bad-rule);background:var(--bad-bg);color:var(--bad);font:700 14.5px/1.45 var(--f-body)}
.err-summary:focus{outline:2px solid var(--focus);outline-offset:2px}
.err-summary ul{margin-top:6px;padding-left:18px;list-style:disc;font-weight:600}
.err-summary a{color:var(--bad)}
.field{display:grid;gap:6px;min-width:0}
.field > label,.field > legend{font:700 14.5px/1.35 var(--f-body);color:var(--ink)}
.field > legend{margin-bottom:6px}
.req{color:var(--bad)}
.opt{font-weight:500;color:var(--ink-2)}
.field input[type="text"],.field input[type="email"],.field input[type="tel"],.field textarea{
  width:100%;min-height:48px;padding:11px 14px;border:1px solid var(--ink-3);border-radius:var(--r-input);background:var(--white);
  font:500 16px/1.4 var(--f-body);color:var(--ink);transition:border-color var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease)}
.field textarea{min-height:92px;resize:vertical}
.field input:focus,.field textarea:focus{border-color:var(--focus);box-shadow:0 0 0 1px var(--focus);outline:none}
.field input[aria-invalid="true"],.field textarea[aria-invalid="true"]{border-color:var(--bad);background:#FFFAF9}
.field input[aria-invalid="true"]:focus,.field textarea[aria-invalid="true"]:focus{border-color:var(--bad);box-shadow:0 0 0 1px var(--bad)}
.hint{font:500 13.5px/1.45 var(--f-body);color:var(--ink-2)}
.ferr{font:700 13.5px/1.4 var(--f-body);color:var(--bad)}

/* S10: the short panel when his details came with the link */
.quick{display:flex;align-items:flex-start;gap:12px;padding:14px 16px;border:1px solid var(--rule);border-radius:var(--r-input);background:var(--paper)}
.quick-text{flex:1;min-width:0;font:600 15px/1.5 var(--f-body);color:var(--ink);overflow-wrap:anywhere}
.quick-edit{flex:none;color:var(--green-text);border-color:var(--green-deep)}
.form.is-quick .f-contact,.form.is-quick .f-site{display:none}
/* S9: the optional website field and its "I don't have one" tile */
.site-none{margin-top:2px}
.field input:disabled{background:var(--paper);color:var(--ink-2);cursor:not-allowed}
.form.is-quick .vfield > legend{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.note-open{justify-self:start}

/* S1: the picked app as a card, the other one as a small link under it (both are radio buttons underneath) */
.video-opts{display:flex;flex-direction:column;align-items:stretch;gap:2px}
.vopt{position:relative;min-width:0}
.vopt.is-on{order:-1}
.vopt input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.vopt label{cursor:pointer}
.vopt input:checked + label{display:flex;align-items:center;gap:10px;min-height:54px;padding:10px 12px;border:1px solid var(--green-deep);border-radius:var(--r-input);
  background:var(--green-wash);box-shadow:inset 0 0 0 1px var(--green-deep);font:700 15px/1.2 var(--f-body)}
.vopt input:checked + label::after{content:"";margin-left:auto;width:20px;height:20px;flex:none;border-radius:50%;border:6px solid var(--green-deep);background:var(--white)}
.video-opts.one .vopt input:checked + label::after{display:none}
.vopt input:not(:checked) + label{display:inline-flex;align-items:center;min-height:44px;padding:0 2px;color:var(--green-text);
  font:700 14.5px/1.3 var(--f-body);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.vopt input:checked + label .v-alt,.vopt input:not(:checked) + label .v-on{display:none}
.v-on{display:flex;align-items:center;gap:10px;min-width:0}
.v-on span{min-width:0}
.vopt input:focus-visible + label{outline:2px solid var(--focus);outline-offset:2px}

.fine{font:500 13.5px/1.5 var(--f-body);color:var(--ink-2)}
.fine a{color:var(--ink-2);font-weight:700}
.fine .dot{margin:0 2px;font-weight:700}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:54px;padding:0 26px;border:0;border-radius:var(--r-btn);
  background:var(--green);color:var(--on-green);font:700 17px/1.1 var(--f-head);letter-spacing:-.005em;text-decoration:none;text-align:center;
  box-shadow:0 10px 28px -14px rgba(63,191,119,.75);transition:filter var(--t-fast) var(--ease),transform var(--t-fast) var(--ease)}
@media (hover:hover){.btn:hover{filter:brightness(1.06);transform:translateY(-1px)}}
.btn:active{transform:none}
.btn[aria-disabled="true"]{cursor:progress;filter:saturate(.7);transform:none}
.form .btn{width:100%}
@media (min-width:600px){.form .btn{width:auto;min-width:240px;justify-self:start}}
.btn-ghost{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:54px;padding:0 22px;border:1px solid var(--ink-3);border-radius:var(--r-btn);
  background:var(--white);color:var(--ink);font:700 16px/1.1 var(--f-head);text-decoration:none;transition:background var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease)}
@media (hover:hover){.btn-ghost:hover{background:var(--paper);border-color:var(--ink-2)}}
.btn-danger{background:var(--bad);color:var(--white);box-shadow:0 10px 28px -16px rgba(179,38,30,.8)}

/* ------------------------------------------------------------ confirmation */
.card.is-done{min-height:0}
.card.is-done .info{display:none}
.card.is-done .panel{display:flex;justify-content:center;align-items:flex-start}
.done{width:100%;max-width:580px;margin:0 auto;padding:8px 0 12px;text-align:center}
@media (min-width:900px){.done{padding-top:18px}}
.done-icon{width:64px;height:64px;margin:0 auto 14px;border-radius:50%;display:grid;place-items:center;background:var(--green-marker);color:var(--green-deep)}
.done-icon .ic{width:32px;height:32px;stroke-width:2.4}
.done-icon.off{background:var(--rule-soft);color:var(--ink-2)}
.done .step-h{font-size:28px;line-height:1.15;letter-spacing:-.02em;margin-bottom:8px}
@media (min-width:900px){.done .step-h{font-size:32px}}
.done-when{margin:0 auto 6px;max-width:46ch;font:700 16.5px/1.45 var(--f-body);color:var(--ink);text-wrap:balance}
.done-sent{margin:0 auto 20px;max-width:48ch;color:var(--ink-2);font-size:15.5px;text-wrap:balance}
.summary{margin:0 0 16px;padding:4px 16px;border:1px solid var(--rule);border-radius:var(--r-card);text-align:left}
.summary > div{display:grid;grid-template-columns:68px minmax(0,1fr);gap:12px;padding:12px 0;border-bottom:1px solid var(--rule-soft)}
.summary > div:last-child{border-bottom:0}
.summary dt{padding-top:2px;font:700 12px/1.5 var(--f-body);letter-spacing:.07em;text-transform:uppercase;color:var(--ink-2)}
.summary dd{margin:0;font:700 15.5px/1.45 var(--f-body);color:var(--ink);min-width:0}
.summary .sub{display:block;font-weight:500;font-size:14px;color:var(--ink-2)}
.join{display:flex;align-items:center;gap:6px;width:fit-content;max-width:100%;min-height:44px;margin-top:2px;font-weight:700;overflow-wrap:anywhere}
.join .ic{width:16px;height:16px}
/* A Zoom call's passcode (1 Oct 2026), on its own line right under the join link, in the link's weight and colour */
.passcode{display:block;margin:0 0 2px;font-weight:700;color:var(--ink);overflow-wrap:anywhere}
@media (max-width:599px){
  .summary{padding:4px 14px}
  .summary > div{grid-template-columns:56px minmax(0,1fr);gap:10px}
  .join{font-size:14.5px}
}
.remind{display:flex;align-items:flex-start;gap:10px;margin:0 0 22px;padding:12px 14px;border-radius:var(--r-input);background:var(--paper);text-align:left;font:600 14.5px/1.45 var(--f-body);color:var(--ink-2)}
.remind .ic{margin-top:1px;color:var(--green-deep)}
.addcal{margin-bottom:20px}
.cal-btn{width:100%}
.cal-btn .ic{width:20px;height:20px;color:var(--green-deep)}
@media (min-width:600px){.cal-btn{width:auto;min-width:280px}}
.cal-note{margin-top:8px;font:500 13.5px/1.45 var(--f-body);color:var(--ink-2);text-wrap:balance}
.box{margin:0 0 16px;padding:14px 16px;border:1px solid var(--rule);border-radius:var(--r-card);text-align:left}
.box h3{margin-bottom:8px;font:600 15px/1.3 var(--f-head)}
.box-line{margin:0 0 16px;padding:12px 14px;border-radius:var(--r-input);background:var(--paper);text-align:left;font:600 14.5px/1.45 var(--f-body);color:var(--ink)}
.ready ul{display:grid;gap:8px;padding-left:18px;list-style:disc;font:500 14.5px/1.5 var(--f-body);color:var(--ink-2)}
.ready li::marker{color:var(--green-deep)}
.homework p{margin-bottom:12px;font:500 14.5px/1.5 var(--f-body);color:var(--ink-2)}
.homework strong{color:var(--ink)}
.homework .btn-ghost{width:100%}
.partner{display:grid;gap:10px}
.partner-q{font:600 14.5px/1.5 var(--f-body);color:var(--ink)}
.partner .field > label{font:700 14px/1.35 var(--f-body)}
.partner-row{display:grid;gap:8px}
@media (min-width:480px){.partner-row{grid-template-columns:minmax(0,1fr) auto}}
.partner-row .btn-sm{min-height:48px;padding:0 18px;border-color:var(--green-deep);color:var(--green-text)}
.partner-done{font:700 14.5px/1.45 var(--f-body);color:var(--green-text);overflow-wrap:anywhere}
.done-out{margin:0 auto 14px;max-width:52ch;font:500 14px/1.55 var(--f-body);color:var(--ink-2);text-wrap:pretty}
.change{font:600 14.5px/1.6 var(--f-body);color:var(--ink-2)}
/* the two links stay together: on a narrow phone they move to the next line as a pair, each a 44 px tap target */
.change-links{display:inline-flex;gap:4px;margin-left:4px}
.change a{display:inline-flex;align-items:center;min-height:44px;padding:0 8px;font-weight:800}

/* ------------------------------------------------------------ manage page */
.pill{display:inline-flex;align-items:center;gap:6px;margin:-4px 0 16px;padding:5px 10px;border-radius:999px;background:var(--green-marker);color:var(--green-text);
  font:800 12px/1.2 var(--f-body);letter-spacing:.06em;text-transform:uppercase}
.pill::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:4px}
@media (max-width:599px){.actions > *{flex:1 1 100%}}
.compare{display:grid;gap:10px;margin-bottom:18px}
.compare > div{padding:12px 14px;border:1px solid var(--rule);border-radius:var(--r-input)}
.compare .k{display:block;margin-bottom:2px;font:700 12px/1.5 var(--f-body);letter-spacing:.07em;text-transform:uppercase;color:var(--ink-2)}
.compare .v{font:700 15.5px/1.45 var(--f-body)}
.compare .v .sub{display:block;font-weight:500;font-size:14px;color:var(--ink-2)}
.compare .old .v{color:var(--ink-2);text-decoration:line-through;text-decoration-thickness:1px}
.compare .old .v .sub{text-decoration:none}
.compare .new{border-color:var(--green-deep);background:var(--green-wash)}
.lead{margin-bottom:18px;color:var(--ink-2)}
.lead.missed{margin-top:-4px;color:var(--ink);font-weight:700}
.reasons{margin:0 0 18px}
.reasons legend{margin-bottom:8px;font:700 14.5px/1.35 var(--f-body);color:var(--ink)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{position:relative;min-width:0;max-width:100%}
.chip input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.chip label{display:inline-flex;align-items:center;max-width:100%;min-height:44px;padding:8px 14px;border:1px solid var(--ink-3);border-radius:22px;background:var(--white);
  font:700 14px/1.25 var(--f-body);color:var(--ink);cursor:pointer;transition:background var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease)}
.chip input:checked + label{border-color:var(--ink);background:var(--ink);color:var(--white)}
.chip input:focus-visible + label{outline:2px solid var(--focus);outline-offset:2px}
@media (hover:hover){.chip label:hover{border-color:var(--ink-2)}.chip input:checked + label:hover{border-color:var(--ink)}}
.loading{display:flex;align-items:center;gap:10px;color:var(--ink-2);font-weight:600}

/* ------------------------------------------------------------ footer */
.foot{width:100%;max-width:1060px;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:4px 18px;padding:16px 16px 20px;
  font:500 13.5px/1.5 var(--f-body);color:var(--ink-2)}
.foot a{display:inline-flex;align-items:center;min-height:44px;padding:0 4px;color:var(--ink-2)}
.foot .lang-link{font-weight:800;color:var(--green-text)}

/* ------------------------------------------------------------ embedded (?embed=1): no outer chrome */
.embed body{background:transparent}
.embed .shell,.framed .shell{min-height:0}
.embed .shell{padding:0}
.embed .card{max-width:none;box-shadow:none}
.embed .foot{display:none}
.embed .card{border:1px solid var(--rule);border-radius:var(--r-card);overflow:hidden}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms!important;scroll-behavior:auto!important}
  .spin{animation-duration:2.4s}
}