@font-face{font-family:'Figtree';font-style:normal;font-weight:300 900;font-display:swap;src:url(/static/figtree-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:'Figtree';font-style:normal;font-weight:300 900;font-display:swap;src:url(/static/figtree-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,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}
/* Temp Work Hub landing page.
   Values ported from the design mockup (Main.dc.html), whose visuals lived in
   inline style attributes. They live here instead so the markup stays readable
   and the page can be responsive, which the desktop-only mockup was not. */

/* LIGHT is the default theme, for everyone. Dark applies only when the visitor
   picked it with the header toggle (static/theme.js stores the choice); the
   operating system's dark setting is deliberately NOT followed, matching the
   web app. :root holds light so a page with no script still renders light.

   --mint and --blue are FILL colours (buttons, chips, the booked bar) and are
   the same in both themes. Brand-green TEXT uses --mint-ink: #5DC08D on white
   measures about 2.2:1 and is unreadable at body sizes. */
:root{
  --bg:#FFFFFF;
  --bg-alt:#F3F7F6;
  --border:#DDE6E3;
  --border-soft:#D3DEDB;
  --ink:#0B1B22;
  --ink-dim:#2A434D;
  --muted:#4A6069;
  --muted-2:#566C74;
  --mint:#5DC08D;
  --mint-ink:#1D7A4D;
  --coral:#C0392B;
  --blue:#7FB2F0;
  --pill-border:#B9C8C5;
  --placeholder:#6A8088;
  --card-strong:#FFFFFF;
  --chip-bg:rgba(93,192,141,0.18);
  --chip-ink:#1D7A4D;
  --rule-faint:rgba(11,27,34,0.07);
  --glyph:#E6EEEB;
  --glyph-tick:#D8EDE1;
  --logo-ring:#7C929B;
  --pad:120px;
}

/* The original design: the mockup's dark palette, values unchanged. */
html[data-theme='dark']{
  --bg:#0A1317;
  --bg-alt:#0F1B20;
  --border:#1B2C32;
  --border-soft:#21343B;
  --ink:#ECF3F1;
  --ink-dim:#C9D6D6;
  --muted:#A3B5B7;
  --muted-2:#8FA3A6;
  --mint-ink:#5DC08D;
  --coral:#FF9B8F;
  --pill-border:#3A5159;
  --placeholder:#7F9498;
  --card-strong:#142329;
  --chip-bg:rgba(93,192,141,0.14);
  --chip-ink:#7FD3A6;
  --rule-faint:rgba(236,243,241,0.06);
  --glyph:#12222A;
  --glyph-tick:#0F2A22;
  --logo-ring:#A9B0B3;
  color-scheme:dark;
}

*,*::before,*::after{box-sizing:border-box}
html{color-scheme:light;scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}
body{margin:0;font-family:'Figtree',system-ui,sans-serif;background:var(--bg);color:var(--ink);overflow-x:hidden}
img,svg{max-width:100%}
a{color:var(--ink)}
a:hover{color:var(--mint-ink)}
:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
input:focus,select:focus,textarea:focus{outline:3px solid var(--blue);outline-offset:1px}
::placeholder{color:var(--placeholder)}
h1,h2,h3{margin:0}
p{margin:0}

.skip{position:absolute;left:-9999px;top:0;z-index:20;background:var(--mint);color:#062418;
  padding:12px 18px;border-radius:0 0 12px 0;font-weight:700;text-decoration:none}
.skip:focus{left:0}

/* ---------- header ---------- */
.site-header{height:92px;padding:0 var(--pad);display:flex;align-items:center;
  justify-content:space-between;gap:20px;background:var(--bg);border-bottom:1px solid var(--border)}
.brand{display:flex;align-items:center;gap:14px;text-decoration:none}
.brand-name{font-weight:700;font-size:26px;letter-spacing:-0.7px;color:var(--mint-ink)}
.brand-name-sm{font-size:22px;letter-spacing:-0.6px}
.site-nav{display:flex;align-items:center;gap:22px}
/* Only the Sign-in pill: the section links live in the glass nav, whose own
   sizing positions the lens. A broader rule here would out-rank it and slide
   the lens off the words. */
.site-nav > a{font-size:15.5px;font-weight:500;color:var(--ink-dim);text-decoration:none}
.site-nav .pill{height:44px;padding:0 22px;display:flex;align-items:center;
  border:1.5px solid var(--pill-border);border-radius:999px;font-size:15px;font-weight:600;color:var(--ink)}
/* ---------- Liquid Glass (vendor/liquidglass, self-hosted) ----------
   The library's --lg-* tokens mapped onto the brand, per theme, so its
   Apple-style controls read as ours: the switch turns brand green, focus
   rings use the site's focus blue. */
:root{
  --lg-on:var(--mint);
  --lg-accent:var(--mint-ink);
  --lg-focus:var(--blue);
  --lg-surface:var(--bg);
  --lg-track-off:#CBD6D3;
  --lg-text:var(--ink);
  --lg-on-glass:var(--ink);
  --lg-tint:rgb(255 255 255 / 0.55);
  --lg-indicator:rgb(255 255 255 / 0.85);
  --lg-shadow-1:0 1px 3px rgba(11,27,34,0.12);
  --lg-shadow-2:0 6px 18px rgba(11,27,34,0.10);
}
html[data-theme='dark']{
  --lg-track-off:rgba(255,255,255,0.18);
  --lg-tint:rgb(255 255 255 / 0.08);
  --lg-indicator:rgb(255 255 255 / 0.16);
  --lg-shadow-1:0 1px 3px rgba(0,0,0,0.45);
  --lg-shadow-2:0 6px 18px rgba(0,0,0,0.40);
}

/* The header floats: content scrolls UNDER it, which is what gives frosted
   glass something to frost. Opaque fallback where backdrop-filter is absent. */
.site-header{position:sticky;top:0;z-index:10;
  background:color-mix(in srgb,var(--bg) 72%,transparent);
  -webkit-backdrop-filter:blur(20px) saturate(1.8);backdrop-filter:blur(20px) saturate(1.8)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .site-header{background:var(--bg)}
}
@media (prefers-reduced-transparency: reduce){
  .site-header{background:var(--bg);-webkit-backdrop-filter:none;backdrop-filter:none}
}
html{scroll-padding-top:104px}

.glass-nav{border-radius:999px}
.glass-nav > a{font-size:15px;color:var(--ink-dim)}
.glass-nav > a:hover{color:var(--ink)}
/* The lens rests on the CURRENT section. With none current (the hero, or a
   legal page) it would sit on "About us" and claim a place the reader is not
   in, so it shows only while the pointer or focus is on the bar. */
.glass-nav:not(:has(> a[aria-current])):not(:hover):not(:focus-within) :is(.lg-nav__copy,.lg-lens-shadow){opacity:0}
.glass-nav .lg-nav__copy,.glass-nav .lg-lens-shadow{transition:opacity var(--t-fast,140ms)}

.theme-switch{display:inline-flex;align-items:center;gap:8px;color:var(--ink-dim)}
.theme-switch[hidden]{display:none}
.theme-switch-icon{flex:none}

/* Inline SVG strokes are presentation attributes, which CSS overrides; these
   let the decorative artwork follow the theme. */
.logo-ring{stroke:var(--logo-ring)}
.glyph-ring{stroke:var(--glyph)}
.glyph-tick{stroke:var(--glyph-tick)}

/* ---------- hero ---------- */
.hero{position:relative;overflow:hidden;padding:88px var(--pad) 120px;background:var(--bg);
  display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,0.88fr);gap:72px;align-items:center}
.hero-glyph{position:absolute;right:-150px;top:-70px;pointer-events:none}
.hero-copy{position:relative;display:flex;flex-direction:column;gap:30px;min-width:0}
.hero-copy h1{font-weight:800;font-size:52px;line-height:1.04;letter-spacing:-1.8px;color:var(--ink)}
.lead{max-width:560px;font-size:20px;line-height:1.6;color:var(--muted)}
.hero-ctas{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;max-width:640px}
.cta{min-height:88px;padding:16px 20px;display:flex;align-items:center;gap:14px;
  border-radius:16px;text-decoration:none}
.cta:hover{color:inherit;filter:brightness(1.06)}
.cta-temp{background:var(--mint);color:#062418}
.cta-facility{background:var(--blue);color:#071A33}
.cta-icon{width:46px;height:46px;flex:none;border-radius:12px;display:flex;align-items:center;
  justify-content:center;background:rgba(6,36,24,0.12)}
.cta-facility .cta-icon{background:rgba(7,26,51,0.12)}
.cta-text{display:flex;flex-direction:column;gap:2px;min-width:0}
.cta-title{font-size:19px;font-weight:800;letter-spacing:-0.3px}
.cta-sub{font-size:14px;font-weight:500;color:#0E3A2A}
.cta-facility .cta-sub{color:#16335C}
.hero-signin{font-size:15px;color:var(--muted)}
.link-accent{color:var(--mint-ink);font-weight:600}

/* ---------- schedule visual ---------- */
.schedule{position:relative;background:var(--bg-alt);border:1px solid var(--border-soft);
  border-radius:22px;padding:30px;display:flex;flex-direction:column;gap:22px;min-width:0}
.schedule-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.schedule-when{display:flex;flex-direction:column;gap:4px}
.schedule-day{font-weight:700;font-size:20px;color:var(--ink)}
.schedule-site{font-size:14px;color:var(--muted)}
.chip{padding:6px 12px;border-radius:999px;background:var(--chip-bg);color:var(--chip-ink);
  font-size:13px;font-weight:700;white-space:nowrap}
.schedule-body{display:flex;flex-direction:column;gap:8px}
.schedule-hours{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));font-size:12px;
  color:var(--muted-2);font-variant-numeric:tabular-nums}
.timeline{position:relative;height:74px;border-radius:12px;background:var(--bg);overflow:hidden}
.timeline-available{position:absolute;left:0;top:0;bottom:0;width:83.33%;background:rgba(93,192,141,0.16)}
.timeline-rule{position:absolute;top:0;bottom:0;width:1px;background:var(--rule-faint)}
.timeline-rule-1{left:16.66%}.timeline-rule-2{left:33.33%}.timeline-rule-3{left:50%}.timeline-rule-4{left:66.66%}.timeline-rule-5{left:83.33%}
.notfound{min-height:70vh;display:grid;place-content:center;gap:16px;text-align:center;padding:48px 24px}
.timeline-booked{position:absolute;left:8.33%;top:11px;bottom:11px;width:66.67%;padding:0 14px;
  background:var(--blue);border-radius:9px;display:flex;flex-direction:column;justify-content:center;
  gap:1px;color:#071A33}
.booked-title{font-size:14px;font-weight:700}
.booked-time{font-size:12.5px;font-weight:500;color:#16335C}
.legend{display:flex;gap:18px;font-size:12.5px;color:var(--muted)}
.legend span{display:flex;align-items:center;gap:6px}
.swatch{width:10px;height:10px;border-radius:3px}
.swatch-available{background:rgba(93,192,141,0.35);border:1px solid var(--mint)}
.swatch-booked{background:var(--blue)}
.rule{height:1px;background:var(--border-soft)}
.ticks{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px}
.ticks li{display:flex;align-items:center;gap:12px;font-size:15px;color:var(--ink)}
.tick{flex:none}
.ticks-pay{justify-content:space-between}
.ticks-pay>span:first-child{display:flex;align-items:center;gap:12px}
.amount{font-weight:800;font-variant-numeric:tabular-nums;color:var(--mint-ink)}

/* ---------- about ---------- */
.about{padding:112px var(--pad);background:var(--bg-alt);border-top:1px solid var(--border);
  display:flex;flex-direction:column;gap:72px}
.about-intro{display:grid;grid-template-columns:minmax(0,0.8fr) minmax(0,1.2fr);gap:72px}
h2{font-weight:800;font-size:52px;line-height:1.02;letter-spacing:-1.6px;color:var(--ink)}
.about-text{display:flex;flex-direction:column;gap:18px;max-width:660px}
.about-text p{font-size:19px;line-height:1.65;color:var(--muted)}
.about-text .strong{color:var(--ink)}
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.card{background:var(--bg);border:1px solid var(--border-soft);border-radius:18px;padding:28px;
  display:flex;flex-direction:column;gap:12px;min-width:0}
.card h3{font-size:19px;font-weight:700;color:var(--ink)}
.card p{font-size:15.5px;line-height:1.6;color:var(--muted)}

/* ---------- registration ---------- */
.register{padding:112px var(--pad);background:var(--bg);border-top:1px solid var(--border);
  display:grid;grid-template-columns:minmax(0,0.82fr) minmax(0,1.18fr);gap:72px;align-items:start}
.register-copy{display:flex;flex-direction:column;gap:24px;min-width:0}
.register-copy p{font-size:17px;line-height:1.6;color:var(--muted)}
.muted-small{font-size:15px;color:var(--muted-2)}
.register-panels{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;min-width:0}
.panel{background:var(--bg-alt);border:1px solid var(--border-soft);border-radius:22px;padding:32px;
  display:flex;flex-direction:column;gap:12px;min-width:0}
.panel-temp{border-color:rgba(93,192,141,0.35)}
.panel-facility{border-color:rgba(127,178,240,0.35)}
.panel-icon{width:46px;height:46px;border-radius:12px;display:flex;align-items:center;
  justify-content:center;margin-bottom:4px}
.panel-icon-temp{background:rgba(93,192,141,0.14)}
.panel-icon-facility{background:rgba(127,178,240,0.14)}
.panel h3{font-size:22px;font-weight:800;letter-spacing:-0.4px;color:var(--ink)}
.panel-sub{font-size:14.5px;font-weight:600;color:var(--ink-dim)}
.panel p{font-size:15.5px;line-height:1.6;color:var(--muted)}
.btn{margin-top:auto;height:56px;display:flex;align-items:center;justify-content:center;
  border-radius:14px;font-size:17px;font-weight:800;letter-spacing:-0.2px;text-decoration:none}
.btn-mint{background:var(--mint);color:#062418}
.btn-blue{background:var(--blue);color:#071A33}
.btn:hover{color:inherit;filter:brightness(1.06)}
.panels-signin{grid-column:1/-1;font-size:15px;color:var(--muted)}

/* ---------- contact ---------- */
.contact{padding:112px var(--pad) 96px;background:var(--bg-alt);border-top:1px solid var(--border);
  display:grid;grid-template-columns:minmax(0,0.9fr) minmax(0,1.1fr);gap:72px;align-items:start}
.contact-copy{display:flex;flex-direction:column;gap:28px;min-width:0}
.contact-copy>p{max-width:440px;font-size:17px;line-height:1.6;color:var(--muted)}
.contact-details{margin:0;display:flex;flex-direction:column;gap:22px}
.contact-details>div{display:flex;gap:14px;align-items:flex-start}
.contact-icon{width:44px;height:44px;flex:none;border-radius:12px;background:var(--bg);
  border:1px solid var(--border-soft);display:flex;align-items:center;justify-content:center}
.contact-details dt{font-size:13.5px;color:var(--muted)}
.contact-details dd{margin:2px 0 0;font-size:16.5px;line-height:1.5;color:var(--ink)}
.contact-details dd a{text-decoration:none}
.contact-card{background:var(--card-strong);border:1px solid var(--border-soft);border-radius:22px;padding:36px;min-width:0}
.contact-form{display:flex;flex-direction:column;gap:18px}
.contact-form h3,.sent h3{font-size:22px;font-weight:800;letter-spacing:-0.4px;color:var(--ink)}
.field-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.field{display:flex;flex-direction:column;gap:7px;min-width:0}
.field label{font-size:14px;font-weight:600;color:var(--ink)}
.field input,.field textarea{height:50px;padding:0 14px;border:1.5px solid var(--border-soft);
  border-radius:11px;font:inherit;font-size:16px;color:var(--ink);background:var(--bg);width:100%}
.field textarea{min-height:150px;height:auto;padding:12px 14px;line-height:1.5;resize:vertical}
.field [aria-invalid="true"]{border-color:var(--coral)}
.err{font-size:13.5px;color:var(--coral)}
/* Captcha guidance. Muted, not coral: nothing has gone wrong yet, and using
   the error colour for an instruction makes a fresh form look failed. */
.hint{font-size:13.5px;color:var(--muted)}
.form-error{font-size:14px;color:var(--coral);font-weight:600}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.btn-send{height:52px;align-self:flex-start;padding:0 28px;border:none;border-radius:999px;
  background:var(--ink);color:var(--bg);font:inherit;font-size:16px;font-weight:700;cursor:pointer}
.sent{display:flex;flex-direction:column;gap:16px;align-items:flex-start}
.sent h3{font-size:34px;line-height:1.08;letter-spacing:-1px}
.sent p{font-size:16.5px;line-height:1.6;color:var(--muted)}
.btn-ghost{height:48px;padding:0 22px;display:inline-flex;align-items:center;
  border:1.5px solid var(--pill-border);border-radius:999px;font-size:15px;font-weight:600;
  color:var(--ink);text-decoration:none}

/* ---------- footer ---------- */
.site-footer{padding:72px var(--pad) 32px;background:var(--bg);border-top:1px solid var(--border);
  display:flex;flex-direction:column;gap:56px;font-size:14.5px;color:var(--muted)}
.footer-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr) minmax(0,1fr) minmax(0,0.8fr);gap:56px}
.footer-brand{display:flex;flex-direction:column;gap:18px;min-width:0}
.footer-brand p{max-width:320px;line-height:1.6}
.footer-col{display:flex;flex-direction:column;gap:12px;min-width:0}
.footer-col h2{margin:0 0 4px;font-size:15px;font-weight:800;letter-spacing:normal;color:var(--ink)}
.footer-col a{color:var(--ink-dim);text-decoration:none;padding:6px 0}
.fline{display:flex;gap:10px;align-items:center;line-height:1.5;color:var(--ink-dim)}
.fline svg{flex:none}
.fline a{color:var(--ink-dim);text-decoration:none}
.footer-base{display:flex;justify-content:space-between;align-items:center;gap:24px;
  padding-top:24px;border-top:1px solid var(--border);font-size:13.5px;color:var(--muted-2)}

/* ---------- responsive ---------- */
@media (max-width:1180px){
  :root{--pad:64px}
  .hero{grid-template-columns:1fr;gap:56px;padding-top:64px;padding-bottom:88px}
  .hero-copy h1{font-size:46px;letter-spacing:-1.4px}
  .about-intro,.register,.contact{grid-template-columns:1fr;gap:40px}
  .cards{grid-template-columns:1fr 1fr}
  .footer-grid{grid-template-columns:1fr 1fr;gap:40px}
  .hero-glyph{display:none}
}
@media (max-width:820px){
  :root{--pad:32px}
  .about,.register,.contact{padding-top:72px;padding-bottom:72px}
  .cards,.register-panels{grid-template-columns:1fr}
  h2{font-size:40px;letter-spacing:-1.2px}
}
@media (max-width:620px){
  :root{--pad:20px}
  .site-header{height:auto;padding-top:16px;padding-bottom:16px;flex-direction:column;align-items:flex-start;gap:14px}
  .site-nav{gap:16px;flex-wrap:wrap}
  .brand-name{font-size:22px}
  .hero{padding-top:44px;padding-bottom:64px;gap:40px}
  .hero-copy h1{font-size:36px;letter-spacing:-1px}
  .lead{font-size:17px}
  .hero-ctas{grid-template-columns:1fr}
  .schedule,.contact-card,.panel{padding:22px}
  h2{font-size:32px;letter-spacing:-0.9px}
  .about-text p{font-size:17px}
  .field-row{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr;gap:32px}
  .footer-base{flex-direction:column;align-items:flex-start;gap:12px}
  .schedule-hours{font-size:11px}
}
@media (pointer:coarse){
  .glass-nav > a{height:44px;line-height:44px}
}

/* ---------- legal and support pages ---------- */
.legal-main{max-width:840px;margin:0 auto;padding:64px 24px 96px}
.legal-main h1{font-weight:800;font-size:42px;line-height:1.1;letter-spacing:-1.4px;margin:0 0 18px}
.legal-main h2{font-size:26px;font-weight:700;letter-spacing:-0.5px;margin:44px 0 12px}
.legal-main h3{font-size:20px;font-weight:700;margin:30px 0 10px}
.legal-main h4{font-size:17px;font-weight:700;margin:24px 0 8px}
.legal-main p{margin:0 0 14px;font-size:16.5px;line-height:1.7;color:var(--ink-dim)}
.legal-main ul{margin:0 0 14px;padding-left:24px;color:var(--ink-dim);font-size:16.5px;line-height:1.7}
.legal-main li{margin-bottom:6px}
.legal-main a{color:var(--mint-ink)}
.legal-lead{font-size:18px;color:var(--muted)}
.legal-doc{margin-top:52px;padding-top:28px;border-top:1px solid var(--border)}
.site-footer-slim{padding-top:32px}
.footer-legal{display:flex;gap:22px}
.footer-legal a{color:var(--muted);text-decoration:none;padding:6px 0}
.footer-legal a:hover{color:var(--mint-ink)}

/* ---------- Liquid Glass buttons and panels ----------
   glass.js swaps marked links/buttons for <lg-button> and moves their classes
   onto the host, so the rules above still match it. The host then only lays
   out; the button the element builds inside (.lg-button__el) carries the
   size, and the glass surface replaces the solid fill. */
lg-button{--lg-on-glass:var(--ink)}
lg-button:is(.cta,.btn,.pill,.btn-send,.btn-ghost){padding:0;border:0;background:none;filter:none;height:auto;min-height:0}
lg-button .lg-button__el{font-family:inherit}
lg-button.cta-temp,lg-button.btn-mint{--lg-accent:var(--mint)}
lg-button.cta-facility,lg-button.btn-blue{--lg-accent:var(--blue)}
lg-button.btn-send{--lg-accent:var(--ink)}
/* Strong tint: these are the page's calls to action and must read as solid
   colour at a glance; 55% (the library's default) washes out on white. */
lg-button[tone="tinted"] .lg-surface__tint{background:color-mix(in srgb,var(--lg-accent) 88%,transparent)}

lg-button.cta{display:flex;border-radius:16px}
lg-button.cta .lg-button__el{width:100%;min-height:88px;padding:16px 20px;border-radius:16px;
  justify-content:flex-start;white-space:normal;text-align:left;color:#062418}
lg-button.cta-facility .lg-button__el{color:#071A33}
lg-button.cta .lg-button__label{gap:14px;width:100%}

lg-button.btn{margin-top:auto;display:flex}
lg-button.btn .lg-button__el{width:100%;height:56px;border-radius:14px;font-size:17px;font-weight:800;letter-spacing:-0.2px}
lg-button.btn-mint .lg-button__el{color:#062418}
lg-button.btn-blue .lg-button__el{color:#071A33}

lg-button.pill .lg-button__el{height:44px;min-height:44px;padding:0 22px;font-size:15px;font-weight:600;color:var(--ink);
  box-shadow:inset 0 0 0 1.5px var(--pill-border)}
lg-button.btn-ghost .lg-button__el{height:48px;padding:0 22px;font-size:15px;font-weight:600;color:var(--ink);
  box-shadow:inset 0 0 0 1.5px var(--pill-border)}
lg-button.btn-send{align-self:flex-start}
lg-button.btn-send .lg-button__el{height:52px;padding:0 28px;font-size:16px;font-weight:700;color:var(--bg)}

/* Panels: <lg-panel> moves its children into .lg-panel__body, so the card's
   own column layout (gap, the button pushed to the bottom) has to continue
   one level down or every card collapses its spacing. */
lg-panel{display:block;color:var(--ink)}
lg-panel > .lg-panel__body{display:flex;flex-direction:column;gap:inherit;flex:1;min-width:0}
lg-panel.contact-card > .lg-panel__body{display:block}
lg-panel.schedule,lg-panel.card,lg-panel.panel{background:color-mix(in srgb,var(--bg-alt) 70%,transparent)}
lg-panel.card{background:color-mix(in srgb,var(--bg) 70%,transparent)}