@font-face {
  font-family: "Host Grotesk";
  src: url("/fonts/host-grotesk.ttf") format("truetype");
  font-weight: 300 800;
  font-style: normal;
  font-display: swap;
}
:root {
  color-scheme: light;
  --ink: #201f20;
  --muted: #494949;
  --paper: #fff;
  --white: #fff;
  --mist: #f7f6f6;
  --wash: #eef2ff;
  --line: #e0e0df;
  --control-line: #858185;
  --blue: #2e5bff;
  --blue-hover: #2248d9;
  --confirmed-ink: #1d624d;
  --confirmed-wash: #e8f4ed;
  --pending-ink: #754707;
  --pending-wash: #fff2da;
  --error-ink: #962e37;
  --error-wash: #fff0f1;
  --control-radius: 12px;
  --panel-radius: 16px;
  --control-height: 44px;
  --button-weight: 600;
  --title-tracking: -.04em;
  --highlight: var(--pending-wash);
  --site-font: "Host Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font:1rem/1.6 var(--site-font)}
.wrap{width:min(1120px,calc(100% - 3rem));margin-inline:auto}
header{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:1.4rem 0;border-bottom:1px solid var(--line)}
header a{text-decoration:none}
.brand{font-weight:800;color:var(--ink)}
.brand span{color:var(--blue);font-size:1.45em;vertical-align:middle;margin-right:.35rem}
nav{display:flex;gap:1.5rem}
a{color:var(--blue);text-underline-offset:.2em}
:is(a,button,input,select,textarea,summary):focus-visible{outline:3px solid var(--blue);outline-offset:3px}
.hero{padding:clamp(3rem,9vw,7rem) 0;display:grid;grid-template-columns:1.35fr 1fr;gap:clamp(2rem,7vw,6rem);align-items:center}
.eyebrow{color:var(--blue);font-weight:750}
h1,h2,h3{line-height:1.06;letter-spacing:-.045em;margin:0 0 .65em}
h1{font-size:clamp(3rem,7vw,6.4rem);margin-bottom:.32em}
h2{font-size:clamp(2rem,4vw,3.1rem)}
h3{font-size:1.5rem}
.intro{font-size:1.2rem;max-width:32rem;color:var(--muted);margin:0 0 1.75rem}
.button{display:inline-block;background:var(--blue);color:var(--white);border:0;border-radius:.35rem;padding:.8rem 1.15rem;text-decoration:none;font:inherit;font-weight:750;cursor:pointer}
.button:hover{background:var(--blue-hover)}
.sheet{background:var(--white);padding:clamp(1.4rem,4vw,2.6rem);border:1px solid var(--line);border-top:6px solid var(--blue);box-shadow:9px 9px 0 #dce8ed}
.sheet h2{font-size:clamp(1.8rem,3.6vw,3rem)}
.sheet-label{margin:0 0 .8rem;color:var(--muted);font-weight:650}
dl{margin:0 0 1.25rem}
dl div{display:grid;grid-template-columns:4rem 1fr;gap:.5rem;border-top:1px solid var(--line);padding:.65rem 0}
dt{font-weight:750}dd{margin:0}
.stamp{display:inline-block;background:var(--highlight);padding:.15rem .55rem;margin:0;font-weight:700}
.section{border-top:1px solid var(--line);padding:3rem 0}
.examples,.split{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.examples{margin-bottom:2.6rem;gap:2rem}
.examples article{border-left:3px solid var(--blue);padding-left:1rem}
.examples p{margin:0}
.steps{padding-left:1.6rem;max-width:49rem}.steps li{padding:.35rem 0}
.downloads{display:flex;flex-wrap:wrap;gap:.5rem 1.5rem}
.signup{display:grid;grid-template-columns:1fr 1.65fr;gap:clamp(1.5rem,5vw,5rem)}
form{background:var(--white);border:1px solid var(--line);padding:clamp(1rem,4vw,2rem)}
form label{display:block;font-weight:650;margin-bottom:1rem}
input:not([type=checkbox],[type=radio]),select,textarea{display:block;width:100%;min-height:2.75rem;border:1px solid var(--control-line);border-radius:.25rem;background:white;color:var(--ink);font:inherit;padding:.5rem .65rem;margin-top:.3rem}
textarea{resize:vertical}
fieldset{border:1px solid var(--line);margin:0 0 1rem;padding:.6rem 1rem}
legend{font-weight:750}.check{font-weight:400;margin-bottom:.4rem}.check input{margin-right:.5rem}
.hint{color:var(--muted);font-size:.9rem;font-weight:400;margin:0 0 .45rem}
footer{border-top:1px solid var(--line);padding:1.3rem 0;color:var(--muted)}
@media(max-width:720px){.hero,.signup{grid-template-columns:1fr}.hero{padding-top:2.5rem}.examples,.split{grid-template-columns:1fr}.split{gap:0}nav{gap:.8rem;font-size:.85rem}.wrap{width:calc(100% - 2rem)}}

.landing-page {
  background:white;
}
.landing-page .hero h1 {font-size:clamp(2.9rem,7vw,5.4rem);font-weight:650}
.landing-page .button {border-radius:.6rem;font-weight:650}
.landing-page .sheet {
  border:1px solid var(--line);
  border-radius:1.1rem;
  background:#f4f9fc;
  box-shadow:none;
}
.landing-page .sheet h2 {font-size:clamp(1.65rem,3vw,2.45rem)}
.landing-page .signup form {border-radius:1rem}

.landing-page [hidden] {display:none!important}
.landing-page .hero {min-height:31rem;gap:clamp(2rem,6vw,5rem)}
.landing-page .hero .eyebrow {font-size:.9rem;color:#005987}
.landing-page .hero h1 {letter-spacing:-.065em}
.landing-page .sheet {padding:clamp(1.5rem,4vw,2.75rem)}
.landing-page .sheet dl {margin-bottom:0}
.landing-page .examples article {border-left:0;border-top:1px solid var(--line);padding:1rem 0 0}
.landing-page .signup {grid-template-columns:minmax(0,.85fr) minmax(0,1.5fr);align-items:start}
.landing-page .signup form {padding:clamp(1.15rem,4vw,2.1rem);background:#f8fafc}
.signup-wizard h3 {font-size:clamp(1.65rem,4vw,2.35rem);letter-spacing:-.045em;line-height:1.12;text-wrap:balance}
.signup-wizard h3:focus {outline:none}
.signup-wizard section p {color:var(--muted);margin:-.25rem 0 1rem}
.signup-progress {font-size:.82rem;color:var(--muted);margin-bottom:1.2rem}
.signup-progress progress {display:block;width:100%;height:.28rem;margin-top:.45rem;accent-color:var(--blue)}
.signup-choices,.signup-wizard fieldset {display:grid;gap:.55rem;grid-template-columns:repeat(2,minmax(0,1fr))}
.signup-wizard fieldset {border:0;padding:0;margin:0}
.signup-choices button,.signup-actions #signup-back,.signup-wizard .check {
  border:1px solid var(--line);background:white;border-radius:.75rem;padding:.7rem .9rem;
  min-height:2.9rem;color:var(--ink);font:inherit;font-weight:600;text-align:left;cursor:pointer;
}
.signup-choices button:hover,.signup-choices button[aria-pressed=true],.signup-wizard .check:has(input:checked) {
  background:var(--wash);border-color:var(--blue);
}
.signup-wizard .check {margin:0}
.signup-wizard input:not([type=checkbox]) {border-color:#cad4de;border-radius:.65rem;min-height:3rem}
.signup-actions {display:flex;flex-wrap:wrap;align-items:center;gap:.6rem;margin-top:1.15rem}
.signup-sr-only {position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
@media(max-width:720px) {
  .landing-page .signup {grid-template-columns:1fr}
  .landing-page .hero {min-height:auto}
}
@media(max-width:460px) {
  .signup-choices,.signup-wizard fieldset {grid-template-columns:1fr}
}

.landing-page .sheet {background:#f5f9ff;border-radius:1.5rem}
.landing-page .signup form {
  background:#fff;
  border-radius:1.5rem;
  box-shadow:0 14px 44px rgba(22,43,75,.07);
}
.landing-page :focus-visible {outline:2px solid var(--blue);outline-offset:3px}
.signup-question-title {display:flex;align-items:baseline;gap:.65rem;margin-bottom:.85rem}
.signup-question-title h3 {margin:0;text-wrap:pretty}
.signup-help-toggle {
  flex:none;display:grid;place-items:center;width:2.75rem;height:2.75rem;
  border:1px solid var(--line);border-radius:50%;background:white;color:var(--blue);
  cursor:pointer;font:inherit;font-size:.95rem;font-weight:650;
}
.signup-help-toggle:hover,.signup-help-toggle[aria-expanded=true] {background:#eff6ff;border-color:#9fbde3}
.signup-wizard section .signup-help {
  margin:0 0 1rem;padding:.75rem 1rem;background:var(--mist);border-radius:.75rem;
  font-size:.94rem;line-height:1.5;
}
.signup-task-fields {display:grid;gap:.85rem}
.signup-task-fields label {margin:0}
.signup-wizard input:not([type=checkbox]) {border-color:#c5cbd4;padding-inline:.85rem}
.signup-actions .button,.landing-page .hero .button {border-radius:999px}
.signup-actions #signup-back {border-radius:999px}

.landing-page header .brand {display:flex;align-items:center;gap:.65rem;font-weight:550}
.landing-page .landing-mark {
  display:grid;place-items:center;width:42px;height:42px;margin:0;
  border:1px solid var(--line);border-radius:50%;
}
.landing-mark svg {width:24px;height:24px}
.landing-page nav a {color:var(--ink)}
.landing-page nav a:hover {color:var(--blue)}
.landing-page .hero h1 {font-weight:520;letter-spacing:-.055em;line-height:1.03}
.landing-page h2,.landing-page h3 {font-weight:550;letter-spacing:-.035em}
.landing-page .hero .eyebrow,.landing-page .sheet-label {font-weight:500;color:var(--muted)}
.landing-page .sheet {background:#f7fbfd;box-shadow:none}
.landing-page .signup form {box-shadow:none}
.landing-page .signup-choices button,.landing-page .signup-wizard label {font-weight:500}
.landing-page .section {padding-block:clamp(2.5rem,6vw,4.75rem)}

.hero-actions {display:flex;align-items:center;flex-wrap:wrap;gap:.85rem 1.2rem}
@media(max-width:480px) {
  .landing-page header {flex-wrap:wrap}
  .landing-page nav {gap:.85rem;flex-wrap:wrap}
}

/* The builder preview and signup share the same surface and control system. */
.landing-page {
  --surface:#fff;
}
.landing-page .wrap {width:min(1160px,calc(100% - 3rem))}
.landing-page header {min-height:76px;padding-block:.65rem}
.landing-page nav {align-items:center;font-size:.92rem}
.landing-page .hero {
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(2rem,6vw,5.5rem);
  padding-block:clamp(3rem,8vw,7rem);
}
.landing-page .hero h1 {
  font-size:clamp(3rem,6.4vw,5.85rem);
  font-weight:560;
  line-height:.99;
  letter-spacing:-.065em;
}
.landing-page .intro {font-size:clamp(1rem,1.7vw,1.15rem);max-width:32ch}
.landing-page .hero .eyebrow {margin:0 0 1.2rem}
.landing-page .button {background:var(--blue);padding:.72rem 1.15rem}
.landing-page .button:hover {background:var(--blue-hover)}
.hero-actions > a:not(.button) {text-decoration:none;font-weight:550}
.builder-preview,.landing-page .signup form {
  border:1px solid var(--line);
  border-radius:var(--panel-radius);
  background:var(--surface);
  box-shadow:0 16px 48px #193d6b0d;
}
.builder-preview {min-width:0;overflow:hidden}
.preview-top,.signup-progress > div {
  display:flex;justify-content:space-between;align-items:center;gap:.75rem;
}
.preview-top {padding:.85rem clamp(1.1rem,3vw,2rem);border-bottom:1px solid var(--line);background:var(--mist);font-size:.9rem;font-weight:600}
.preview-stage {color:var(--muted);font-weight:450}
.preview-body,.landing-page .signup form {padding:clamp(1.2rem,3.4vw,2.35rem)}
.preview-body h2,.signup-wizard h3 {font-size:clamp(1.65rem,3vw,2.35rem);line-height:1.12}
.preview-choices {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.65rem}
.preview-choices a,.signup-choices button,.signup-wizard .check {
  min-height:56px;border:1px solid var(--line);border-radius:var(--control-radius);
  background:#fff;color:var(--ink);font-size:.94rem;font-weight:550;
}
.preview-choices a {display:flex;align-items:center;gap:.65rem;padding:.7rem .85rem;text-decoration:none;line-height:1.35}
.preview-choices a:hover,.signup-choices button:hover {background:var(--mist);border-color:var(--blue)}
.preview-choices svg {width:21px;height:21px;flex:none;stroke:var(--blue);stroke-width:1.6;stroke-linejoin:round;stroke-linecap:round;fill:none}
.preview-all {display:inline-block;margin-top:1.15rem;font-size:.9rem;text-decoration:none}
.preview-all span {margin-left:.25rem}
.landing-page .workshop-overview .examples {gap:clamp(1rem,4vw,3rem)}
.landing-page .workshop-overview .examples article {border:0;border-radius:18px;background:var(--mist);padding:1.3rem 1.5rem}
.workshop-overview p,.workshop-overview li,.signup-intro p {color:var(--muted);max-width:66ch}
.landing-page .signup {grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr)}
.signup-intro {padding-top:clamp(0rem,2vw,1rem)}
.signup-progress {margin-bottom:1.65rem}
.signup-progress progress {margin-top:.65rem}
.signup-wizard input:not([type=checkbox]) {border-radius:var(--control-radius);border-color:var(--control-line);min-height:3.15rem}
.signup-question-title {margin-bottom:1rem;align-items:center}
.landing-page footer {font-size:.88rem}
@media(max-width:760px) {
  .landing-page .hero,.landing-page .signup {grid-template-columns:1fr}
  .landing-page .wrap {width:calc(100% - 2rem)}
}
@media(max-width:360px) {
  .preview-choices {grid-template-columns:1fr}
  .landing-page .hero h1 {font-size:2.7rem}
}

.landing-page .workshop-overview {scroll-margin-top:1rem}
.workshop-signup {margin-top:1.35rem;max-width:42rem}
.workshop-signup summary {width:fit-content;color:var(--blue);font-weight:550;cursor:pointer;padding-block:.45rem}
.workshop-signup form {border-radius:var(--panel-radius);padding:clamp(1.2rem,3.4vw,2.35rem)}
.workshop-signup p {margin-block:.8rem 1.2rem}

.course-hero .presenter {margin:0 0 1.6rem;font-weight:600}
.course-hero .presenter span {display:block;color:var(--muted);font-size:.9rem;font-weight:400}
.course-projects {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.3rem;margin-bottom:2rem}
.course-projects article {padding-top:1rem;border-top:1px solid var(--line)}
.course-projects h3 {font-size:1.2rem;margin-bottom:.4rem}
.course-projects p,.builder-caption {margin:0;color:var(--muted)}
.embedded-builder {border:1px solid var(--line);border-radius:var(--panel-radius);overflow:hidden}
.embedded-builder iframe {display:block;width:100%;height:680px;border:0}
.builder-caption {margin-top:.75rem;font-size:.9rem}
@media(max-width:760px) {
  .course-projects {grid-template-columns:repeat(2,minmax(0,1fr))}
  .embedded-builder iframe {height:620px}
}


/* Adapt the Hub’s centered hero, soft color wash, and framed product demo. */
.landing-page .course-hero {
  display:grid;
  grid-template-columns:minmax(0,1fr);
  place-items:center;
  min-height:0;
  text-align:center;
  padding-block:clamp(3rem,7vw,6rem);
  background:radial-gradient(ellipse at 18% 12%,#eaf6ff 0,transparent 55%),
    radial-gradient(ellipse at 88% 25%,#eafaf6 0,transparent 49%);
}
.landing-page .course-hero h1 {margin-inline:auto;font-weight:550;line-height:1.04}
.landing-page .course-hero .intro {max-width:42ch;margin-inline:auto;text-wrap:balance}
.course-hero .presenter {font-size:.94rem}
.course-hero .presenter span {display:inline;margin-left:.35rem}
.landing-page .course-try {padding-top:clamp(2rem,5vw,3.5rem)}
.course-try > h2 {text-align:center;text-wrap:balance}
.course-projects article {border:1px solid var(--line);border-radius:16px;padding:1rem}
.embedded-builder {box-shadow:0 8px 28px -18px #193d6b40}
@media(max-width:380px) {.course-projects {grid-template-columns:1fr}}

.course-hero-actions {display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:.7rem 1rem}
.course-showcase {display:grid;gap:clamp(2.5rem,7vw,5.5rem);padding-block:clamp(2rem,6vw,4rem)}
.showcase-section {text-align:center}
.showcase-section > h2 {text-wrap:balance;margin-bottom:.45rem}
.showcase-section > p {max-width:56ch;margin:0 auto 1.4rem;color:var(--muted);text-wrap:balance}
.showcase-demo {max-width:48rem;margin:0 auto 1rem;text-align:left;border:1px solid var(--line);border-radius:var(--panel-radius);overflow:hidden;background:#fff}
.showcase-demo .preview-top span:last-child {color:var(--muted);font-weight:450}
.showcase-body {padding:clamp(1rem,3vw,1.8rem)}
.showcase-body table {width:100%;border-collapse:collapse;font-size:.92rem}
.showcase-body td,.showcase-body th {padding:.55rem .35rem;border-bottom:1px solid var(--line)}
.showcase-body tfoot :is(td,th) {border-bottom:0;font-weight:650}
.showcase-body blockquote {margin:0;color:var(--ink);max-width:52ch}
.demo-list {list-style:none;margin:0;padding:0;display:grid;gap:.75rem}
.demo-list li {display:grid;grid-template-columns:minmax(0,9rem) minmax(0,1fr);gap:.45rem .75rem}
.demo-list span {color:var(--muted)}
.showcase-link {font-weight:550;text-decoration:none}
.showcase-link:hover {text-decoration:underline}
@media(max-width:480px) {
  .demo-list li {grid-template-columns:1fr;gap:0}
}

/* Adapted from The Caribbean Hub Landing.tsx Section and CARD_SURFACE. */
.showcase-section {
  display:grid;
  grid-template-columns:minmax(0,5fr) minmax(0,7fr);
  align-items:center;
  gap:clamp(1.25rem,5vw,4rem);
}
.showcase-copy {text-align:left}
.showcase-copy > p {color:var(--muted);max-width:44ch}
.showcase-demo {width:100%;margin:0;box-shadow:0 4px 20px -12px #0f172a30}
.inline-builder {grid-column:1/-1;scroll-margin-top:1rem}
@media(max-width:760px) {
  .showcase-section {grid-template-columns:minmax(0,1fr)}
  .showcase-copy {text-align:center}
  .showcase-copy > p {margin-inline:auto}
}

/* Utility CSS generated from hub-landing.tsx with the imported Hub Tailwind config. */
.relative{position:relative}.mx-auto{margin-left:auto;margin-right:auto}.mt-4{margin-top:1rem}.mt-6{margin-top:1.5rem}.mt-7{margin-top:1.75rem}.flex{display:flex}.inline-flex{display:inline-flex}.table{display:table}.hidden{display:none}.h-1{height:.25rem}.h-11{height:2.75rem}.min-h-\[calc\(100svh-16rem\)\]{min-height:calc(100svh - 16rem)}.w-1{width:.25rem}.w-full{width:100%}.min-w-0{min-width:0}.max-w-3xl{max-width:48rem}.max-w-5xl{max-width:64rem}.max-w-7xl{max-width:80rem}.max-w-\[640px\]{max-width:640px}.max-w-md{max-width:28rem}.max-w-xl{max-width:36rem}.flex-1{flex:1 1 0%}@keyframes fade-in{0%{opacity:0}to{opacity:1}}.animate-fade-in{animation:fade-in .15s ease-out}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-center{align-items:center}.justify-center{justify-content:center}.gap-1\.5{gap:.375rem}.gap-2\.5{gap:.625rem}.gap-7{gap:1.75rem}.space-y-4>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(1rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1rem*var(--tw-space-y-reverse))}.overflow-hidden{overflow:hidden}.rounded-3xl{border-radius:1.5rem}.rounded-full{border-radius:9999px}.border{border-width:1px}.border-border{border-color:var(--line)}.bg-card{background-color:hsl(var(--card))}.bg-foreground\/\[0\.025\]{background-color:hsl(var(--foreground)/.025)}.bg-primary{background-color:var(--blue)}.px-5{padding-left:1.25rem;padding-right:1.25rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.py-14{padding-top:3.5rem;padding-bottom:3.5rem}.py-16{padding-top:4rem;padding-bottom:4rem}.py-8{padding-top:2rem;padding-bottom:2rem}.pb-14{padding-bottom:3.5rem}.pt-4{padding-top:1rem}.text-center{text-align:center}.text-\[15px\]{font-size:15px}.text-\[clamp\(1\.75rem\2c 4\.5vw\2c 3rem\)\]{font-size:clamp(1.75rem,4.5vw,3rem)}.text-\[clamp\(1\.7rem\2c 7\.5vw\2c 5\.5rem\)\]{font-size:clamp(1.7rem,7.5vw,5.5rem)}.text-\[clamp\(1\.9rem\2c 6vw\2c 4rem\)\]{font-size:clamp(1.9rem,6vw,4rem)}.text-base{font-size:1rem;line-height:1.5rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-xs{font-size:.75rem;line-height:1rem}.font-medium{font-weight:500}.font-semibold{font-weight:600}.leading-\[1\.04\]{line-height:1.04}.leading-\[1\.12\]{line-height:1.12}.leading-relaxed{line-height:1.625}.tracking-tight{letter-spacing:-.025em}.tracking-wide{letter-spacing:.025em}.text-muted-foreground{color:var(--muted)}.text-primary{color:var(--blue)}.shadow-\[0_4px_20px_-12px_rgba\(15\2c 23\2c 42\2c 0\.10\)\]{--tw-shadow:0 4px 20px -12px rgba(15,23,42,.1);--tw-shadow-colored:0 4px 20px -12px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.outline{outline-style:solid}@keyframes enter{0%{opacity:var(--tw-enter-opacity,1);transform:translate3d(var(--tw-enter-translate-x,0),var(--tw-enter-translate-y,0),0) scale3d(var(--tw-enter-scale,1),var(--tw-enter-scale,1),var(--tw-enter-scale,1)) rotate(var(--tw-enter-rotate,0))}}@keyframes exit{to{opacity:var(--tw-exit-opacity,1);transform:translate3d(var(--tw-exit-translate-x,0),var(--tw-exit-translate-y,0),0) scale3d(var(--tw-exit-scale,1),var(--tw-exit-scale,1),var(--tw-exit-scale,1)) rotate(var(--tw-exit-rotate,0))}}.\[text-wrap\:balance\]{text-wrap:balance}@media (min-width:640px){.sm\:mt-5{margin-top:1.25rem}.sm\:mt-6{margin-top:1.5rem}.sm\:mt-8{margin-top:2rem}.sm\:mt-9{margin-top:2.25rem}.sm\:h-12{height:3rem}.sm\:gap-12{gap:3rem}.sm\:px-7{padding-left:1.75rem;padding-right:1.75rem}.sm\:px-8{padding-left:2rem;padding-right:2rem}.sm\:py-10{padding-top:2.5rem;padding-bottom:2.5rem}.sm\:py-28{padding-top:7rem;padding-bottom:7rem}.sm\:text-base{font-size:1rem;line-height:1.5rem}.sm\:text-lg{font-size:1.125rem}.sm\:text-lg,.sm\:text-xl{line-height:1.75rem}.sm\:text-xl{font-size:1.25rem}}@media (min-width:1024px){.lg\:col-span-5{grid-column:span 5/span 5}.lg\:col-span-7{grid-column:span 7/span 7}.lg\:mx-0{margin-left:0;margin-right:0}.lg\:grid{display:grid}.lg\:min-h-\[calc\(100svh-26rem\)\]{min-height:calc(100svh - 26rem)}.lg\:max-w-none{max-width:none}.lg\:grid-cols-12{grid-template-columns:repeat(12,minmax(0,1fr))}.lg\:items-center{align-items:center}.lg\:gap-16{gap:4rem}.lg\:px-12{padding-left:3rem;padding-right:3rem}.lg\:py-12{padding-top:3rem;padding-bottom:3rem}.lg\:py-32{padding-top:8rem;padding-bottom:8rem}.lg\:text-left{text-align:left}}

.hub-course {
  --background:0 0% 100%;
  --foreground:220 13% 10%;
  --card:0 0% 100%;
  isolation:isolate;
}
.hub-course h1,.hub-course h2 {margin:0;letter-spacing:-.035em}
.hub-course p {margin-block-end:0}
.hub-header {position:sticky;top:0;z-index:5;background:#fffffff5;backdrop-filter:blur(12px)}
.hub-button {display:inline-flex;align-items:center;justify-content:center;gap:.5rem;background:var(--blue);color:white;text-decoration:none;font-weight:550}
.hub-button-outline {background:white;color:var(--ink);border:1px solid var(--line)}
.hub-demo-card {border-style:solid;border-width:1px;overflow:hidden}
.hub-course [data-course-demo] {display:inline-block;margin-top:.8rem}
.hub-course .inline-builder {margin-top:.75rem}
.hub-registration {padding-bottom:4rem}
.hub-registration details {margin-inline:auto}
.hub-course :is(#try,#examples,#lab,#signup) {scroll-margin-top:152px}
@media(prefers-reduced-motion:reduce) {.hub-course * {animation:none!important}}

.hub-course .hub-demo-trigger {
  display:block;
  color:var(--ink);
  text-decoration:none;
  transition:border-color .15s, box-shadow .15s;
}
.hub-demo-trigger:hover,.hub-demo-trigger[aria-expanded=true] {
  border-color:#a9c7e6;
  box-shadow:0 5px 22px -12px #1b4f8250;
}
.hub-demo-trigger .preview-top,.hub-demo-action {
  padding:.85rem clamp(.9rem,3vw,1.35rem);
}
.hub-demo-trigger .preview-top {background:var(--mist)}
.hub-demo-trigger .showcase-body {padding:clamp(.8rem,2.5vw,1.25rem)}
.hub-demo-action {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:.75rem;
  min-height:44px;
  border-top:1px solid var(--line);
  color:var(--blue);
  font-size:.9rem;
  font-weight:600;
}
.hub-demo-chevron {font-size:1.2rem;line-height:1}
.hub-demo-trigger[aria-expanded=true] .hub-demo-chevron {transform:rotate(180deg)}
.hub-demo-trigger[aria-expanded=false] .demo-close,
.hub-demo-trigger[aria-expanded=true] .demo-open {display:none}
@media(max-width:640px) {
  .hub-demo-trigger .preview-top {font-size:.8rem;line-height:1.4}
  .hub-demo-trigger td,.hub-demo-trigger th {font-size:.82rem}
}

.hub-course .demo-guide {
  max-width:54ch;
  margin:0 auto;
  padding:1.25rem 1rem 0;
  text-align:center;
  color:var(--muted);
}
.demo-before {background:#fff}
.demo-inputs {
  display:grid;
  gap:.45rem;
  margin:0;
  padding:.9rem clamp(.9rem,3vw,1.35rem);
  list-style:none;
  color:var(--muted);
  font-size:.9rem;
  line-height:1.45;
}
.demo-before + .preview-top {border-top:1px solid var(--line)}
.hub-demo-trigger .preview-top span:first-child {color:var(--blue)}

.demo-pair {display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.demo-pair .demo-after {border-left:1px solid var(--line)}
.demo-pair .preview-top {font-size:.82rem;line-height:1.35}
.demo-pair .showcase-body {padding:.85rem}
.demo-card-footer {border-top:1px solid var(--line);padding:.85rem 1rem}
.hub-course .demo-try {margin:0;border:0;border-radius:999px;min-height:var(--control-height);padding:.55rem 1rem;font:inherit;font-size:.9rem;cursor:pointer}
.demo-try[aria-expanded=false] .demo-close,.demo-try[aria-expanded=true] .demo-open {display:none}
.receipt-stack {background:#f2f4f7}
.receipt-stack li {background:white;padding:.6rem .7rem;border-bottom:2px dashed #cbd1da;font: .75rem/1.4 ui-monospace,monospace;color:var(--ink)}
.receipt-stack li span {display:flex;justify-content:space-between;gap:.35rem;margin-top:.25rem}
.sheet-bar {background:#176343;color:white;padding:.45rem .55rem;border-radius:.3rem .3rem 0 0;font-size:.78rem;font-weight:650}
.showcase-body .demo-sheet :is(td,th) {border:1px solid #d6e5dc;padding:.35rem .3rem;font-size:.75rem}
.demo-sheet thead,.demo-sheet tfoot {background:#edf6ef}
.demo-sheet tr > :last-child {text-align:right}
.inbox-list li {display:grid;padding:.45rem 0;border-bottom:1px solid var(--line);font-size:.8rem}
.inbox-list li:last-child {border-bottom:0}
.inbox-list strong {color:var(--blue);font-size:.72rem}
.inbox-list b {color:var(--ink)}
.demo-pair-email .demo-list li {grid-template-columns:1fr;gap:.15rem;font-size:.86rem}
@media(max-width:600px) {
  .demo-pair {grid-template-columns:1fr}
  .demo-pair .demo-after {border-left:0;border-top:1px solid var(--line)}
  .hub-course .demo-try {width:100%}
}

.receipt-stack li {width:min(100%,12rem);margin-inline:auto;border-radius:2px;box-shadow:0 2px 6px #182a4020}
.receipt-stack small {display:block;color:var(--muted);font-size:.65rem}
.receipt-stack .receipt-total {border-top:1px dashed #9da8b3;padding-top:.25rem}
.sheet-formula,.sheet-tabs,.inbox-toolbar {display:flex;align-items:center;gap:.55rem;font-size:.75rem;padding:.35rem .5rem}
.sheet-formula,.sheet-tabs {background:#f4f7f5;border:1px solid #d6e5dc}
.sheet-formula span {border-right:1px solid #d6e5dc;padding-right:.55rem}
.sheet-formula code {white-space:nowrap}
.showcase-body .demo-sheet .sheet-letters td {background:#f4f7f5;text-align:center;color:var(--muted)}
.showcase-body .demo-sheet .sheet-active {box-shadow:inset 0 0 0 2px #176343}
.demo-sheet .sheet-review {background:#fff3d5}
.sheet-tabs span {color:#176343;border-bottom:2px solid currentColor;font-weight:650}
.inbox-toolbar {margin:.75rem .9rem 0;background:var(--wash);border-radius:6px;color:var(--blue);font-weight:650}
.inbox-toolbar small {margin-left:auto}
.brief-title {font-weight:650;margin-bottom:.65rem}
.brief-tag {width:fit-content;padding:.1rem .45rem;border-radius:999px;background:var(--wash);color:var(--blue);font-size:.7rem}
.demo-pair-email .demo-list li + li {border-top:1px solid var(--line);padding-top:.55rem}

.hub-course .course-try > h2 {
  margin-bottom:clamp(1.25rem,3vw,2rem);
  line-height:1.15;
}

.inbox-folders {display:flex;gap:.85rem;padding:.6rem .9rem .15rem;color:var(--muted);font-size:.75rem}
.inbox-folders strong {color:var(--blue);border-bottom:2px solid currentColor}
.inbox-list li {position:relative;padding-left:.85rem}
.inbox-list li::before {content:"";position:absolute;top:.8rem;left:0;width:.36rem;height:.36rem;border-radius:50%;background:var(--blue)}
.demo-pair-email .demo-after {background:var(--mist)}
.brief-title small {display:block;font-weight:450;color:var(--muted)}
.demo-pair-email .demo-list li {padding:.65rem;background:white;border:1px solid var(--line);border-radius:8px}
.quote-docs {display:grid;gap:.6rem;padding:var(--demo-inset)}
.quote-docs article {padding:.6rem .75rem;background:white;border:1px solid var(--line);border-radius:4px;box-shadow:0 2px 4px #0001}
.quote-docs small,.quote-docs strong {display:block}
.quote-docs small {font-size:.66rem;color:var(--muted)}
.quote-docs dl {display:grid;grid-template-columns:1fr 1fr;font-size:.78rem;margin:.4rem 0 0}
.quote-docs dd {margin:0}
.quote-takeaway {padding:.55rem;background:var(--wash);border-radius:6px;font-size:.8rem}
.quote-matrix td:not(:first-child) {text-align:center;font-size:.78rem}
.quote-included {background:var(--confirmed-wash);color:var(--confirmed-ink)}
.quote-extra {background:var(--pending-wash);color:var(--pending-ink)}
.quote-ask {background:var(--mist);color:var(--muted)}
.chat-heading {display:flex;align-items:center;gap:.55rem;padding:.65rem .8rem;background:#075e54;color:white;font-size:.85rem}
.chat-heading small {margin-left:auto}
.chat-thread {display:grid;gap:.55rem;padding:.85rem;background:#eae5dd;font-size:.86rem}
.chat-thread p,.chat-thread blockquote {max-width:95%;padding:.55rem .7rem;background:white;border-radius:3px 10px 10px;box-shadow:0 1px 2px #0002;margin:0}
.chat-thread blockquote {justify-self:end;background:#dcf8c6;border-radius:10px 3px 10px 10px}
.chat-draft {justify-self:end;color:#324d42}
.landing-page nav .header-register {color:white;padding:.45rem .85rem;border-radius:var(--control-radius)}
.landing-page nav .header-register:hover {color:white;background:var(--blue-hover)}
#lab > div {padding-bottom:0}
.hub-registration .workshop-signup summary {
  display:flex;
  justify-content:center;
  align-items:center;
  gap:.65rem;
  width:fit-content;
  max-width:100%;
  min-height:48px;
  margin-inline:auto;
  padding:.65rem 1.4rem;
  background:var(--blue);
  color:white;
  border-radius:999px;
}
.hub-registration .workshop-signup summary:hover {background:var(--blue-hover)}
.hub-registration .workshop-signup summary::-webkit-details-marker {display:none}
.hub-registration .workshop-signup[open] summary span:last-child {transform:rotate(180deg)}

.inbox-list li span {line-height:1.5}
.demo-pair-email .brief-title {padding:.65rem .75rem;background:var(--wash);border-radius:8px}
.demo-pair-email .demo-list {gap:.55rem}
.quote-docs dl {grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:.25rem}
.quote-matrix th,.quote-matrix td {overflow-wrap:anywhere}
.chat-heading {background:#e4f3ec;color:#214d40}
.chat-thread {background:#f3f5ef;background-image:radial-gradient(#dbe6dc 1px,transparent 1px);background-size:14px 14px}
.chat-thread p,.chat-thread blockquote {border-radius:12px;box-shadow:0 1px 3px #284c3612}
.chat-thread blockquote {background:#e0f3df}




.account-page {padding-block:clamp(2rem,6vw,5rem)}
.account-page > h1 {font-size:clamp(2rem,6vw,3.5rem);margin-top:1rem}
.account-form,.account-grid section {border:1px solid var(--line);border-radius:16px;padding:1.25rem}
.account-form {max-width:28rem}
.account-grid {display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,22rem),1fr));gap:1rem;margin:1.5rem 0}
.account-grid h2 {font-size:1.35rem}
.account-grid dl dd {white-space:pre-wrap;margin-bottom:.75rem;overflow-wrap:anywhere}
.account-signout {padding:0;border:0}
.account-signout button {cursor:pointer}

.account-header nav {align-items:center;flex-wrap:wrap}
.account-header .account-signout {margin:0}
.account-header .account-signout button {
  color:var(--blue);background:white;border:1px solid var(--line);border-radius:999px;
  min-height:40px;padding:.4rem .85rem;font:inherit
}
.auth-page {max-width:30rem;text-align:center}
.auth-intro,.dashboard-intro p {color:var(--muted)}
.auth-page .account-form {margin:1.35rem auto;text-align:left;background:var(--mist)}
.account-form input {border-color:var(--control-line);border-radius:10px;min-height:46px}
.account-form .button {width:100%;border-radius:999px}
.dashboard-intro {display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:.7rem}
.dashboard-intro p {margin:0}
.dashboard-intro .button {border-radius:999px}
.dashboard-section {margin-top:2rem}
.dashboard-section h2 {font-size:1.6rem}
.exercise-grid {display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,13rem),1fr));gap:.75rem}
.exercise-grid article {padding:1rem;background:var(--mist);border:1px solid var(--line);border-radius:14px}
.exercise-grid small {color:var(--blue);font-weight:600}
.exercise-grid h3 {font-size:1.05rem;margin:.45rem 0 .6rem}
.saved-prompt,.task-tips details {padding:.65rem 0;border-bottom:1px solid var(--line)}
.saved-prompt summary,.task-tips summary {cursor:pointer;overflow-wrap:anywhere;font-weight:600}
.saved-prompt summary small {display:block;color:var(--muted);font-weight:400}
.saved-prompt textarea {border-color:var(--line);border-radius:8px}

.seat-status {display:inline-block;width:fit-content;padding:.35rem .65rem;border-radius:999px;background:var(--mist);color:var(--muted);font-size:.88rem;font-weight:650}
.seat-pending {background:var(--pending-wash);color:var(--pending-ink)}
.seat-confirmed {background:var(--confirmed-wash);color:var(--confirmed-ink)}
.claim-form {display:grid;gap:.7rem;padding:0;border:0;margin-top:1rem}
.claim-form label {margin:0}
.claim-form input:not([type=hidden]) {border-radius:8px;border-color:var(--control-line)}
.claim-form .button {justify-self:start}
.signup-code {display:inline-block;max-width:100%;overflow-wrap:anywhere;background:var(--mist);color:var(--ink);padding:.6rem;border-radius:8px}

.site-header {
  min-height:76px;
  padding:.65rem 0;
}
.site-header .brand {
  display:flex;
  align-items:center;
  gap:.65rem;
  font-weight:650;
  white-space:nowrap;
}
.site-header .landing-mark {
  display:grid;
  place-items:center;
  width:42px;
  height:42px;
  margin:0;
  border:1px solid var(--line);
  border-radius:50%;
}
.site-header nav {align-items:center;flex-wrap:wrap}
.site-header nav a {color:var(--ink)}
.hub-registration .workshop-signup[open] #signup-form {
  margin-top:1rem;
  border-radius:18px;
}
.hub-registration .registration-intro {
  margin:0 0 1.25rem;
  color:var(--muted);
  font-size:.94rem;
}
.receipt-linking {
  margin:1.25rem 0;
  padding:1rem;
  border:1px solid var(--line);
  border-radius:14px;
  background:var(--mist);
}
.receipt-linking p:first-child {margin-top:0}
.receipt-linking p:last-child {margin-bottom:0}
.roster-list {display:grid;gap:.65rem;margin-top:1.4rem}
.roster-row {
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(10rem,.52fr) minmax(12rem,.64fr);
  align-items:center;
  gap:.85rem;
  padding:1rem;
  border:1px solid var(--line);
  border-radius:12px;
}
.roster-person {min-width:0;overflow-wrap:anywhere}
.roster-person h2 {margin:0;font-size:1.05rem}
.roster-person p {margin:.25rem 0 0;color:var(--muted)}
.roster-row .claim-form {margin:0;justify-items:start}
.roster-row button[name=action]:not(.button) {
  border:0;background:transparent;color:var(--blue);font:inherit;text-align:left;
  padding:.25rem 0;cursor:pointer;text-decoration:underline;
}
.demo-more summary {padding:.45rem .85rem;color:var(--blue);font-size:.82rem;cursor:pointer}
.demo-more .inbox-list,.demo-more .receipt-stack {padding-top:.25rem}
.demo-more .demo-list {margin-top:.25rem}
@media(min-width:601px) {.demo-more summary {display:none}}
@media(max-width:600px) {
  .roster-row {grid-template-columns:minmax(0,1fr)}
  .demo-pair-email .inbox-folders {display:none}
  .demo-pair-email .inbox-toolbar {margin:.55rem .85rem 0}
  .demo-pair-email .brief-title {display:none}
}
@media(max-width:380px) {
  .site-header {gap:.45rem;flex-wrap:wrap}
  .site-header nav {gap:.6rem}
}

/* Shared interaction and surface treatments. */
:root {accent-color:var(--blue)}
:is(input,textarea)::placeholder {color:var(--muted);opacity:1}
p[role="alert"]:not(:empty) {
  color:var(--error-ink);
  background:var(--error-wash);
  border-inline-start:3px solid currentColor;
  border-radius:0 .5rem .5rem 0;
  padding:.65rem .85rem;
}
.site-header nav a:hover {color:var(--blue);text-decoration:underline;text-underline-offset:.25em}
.hub-course .hub-hero {min-height:0;background:var(--white)}
.hub-course .hub-hero > div {padding-block:clamp(2.75rem,5.5vw,5rem) clamp(2.5rem,4.5vw,4rem)}
.hub-course .hub-hero h1 {font-size:clamp(2.4rem,4.5vw,3.5rem);font-weight:500;letter-spacing:var(--title-tracking);line-height:1.06}
.hub-button-outline:hover {background:var(--wash);color:var(--blue)}
.hub-button:not(.hub-button-outline):hover {background:var(--blue-hover);color:var(--white)}
.hub-button-outline {border-color:var(--control-line)}
.demo-pair .demo-before .preview-top {background:var(--white)}
.demo-pair .demo-after .preview-top {background:var(--wash);color:var(--blue)}
.demo-card-footer {background:var(--white);display:flex;justify-content:center;padding:var(--demo-inset)}
.demo-card-footer .demo-try {width:min(100%,21rem);min-height:48px;font-weight:var(--button-weight)}
.signup-choices button[aria-pressed=true] {box-shadow:inset 0 0 0 1px var(--blue)}
#signup-back:hover {background:var(--mist)}

/* Use the same heading rhythm and controls on the workshop and builder. */
.site-header .brand {font-size:1.125rem;letter-spacing:-.04em;font-weight:650}
.site-header .brand .landing-mark {
  width:26px;height:26px;border:0;border-radius:0;background:transparent;color:var(--ink);
}
.site-header .landing-mark svg {width:24px;height:24px}
.hub-course .hub-button,
.hub-registration .workshop-signup > summary,
.landing-page .signup-actions :is(.button,#signup-back) {
  min-height:var(--control-height);
  border-radius:999px;
  font-weight:var(--button-weight);
}
.hub-hero h1 {max-width:19ch;text-wrap:balance}
.hub-hero p {max-width:45ch}
.hub-course .demo-card {
  --demo-inset:clamp(1rem,1.6vw,1.4rem);
  border-radius:var(--panel-radius);
  box-shadow:none;
}
.demo-pair .preview-top {
  min-height:3rem;
  padding:.7rem var(--demo-inset);
  font-size:.875rem;
}
.demo-pair .preview-top span + span {text-align:right;font-weight:550}
.demo-pair .showcase-body {padding:var(--demo-inset)}
.demo-pair-quotes .demo-before {background:var(--mist)}
.demo-pair-quotes .quote-docs {gap:.75rem}
.demo-pair-quotes .quote-docs article {padding:.8rem .9rem;border-radius:8px;box-shadow:none}
.demo-pair-quotes .quote-takeaway {padding:.7rem .8rem;margin:0 0 .45rem}
.demo-pair-email .inbox-toolbar {margin-inline:var(--demo-inset)}
.demo-pair-email .inbox-folders,.demo-pair-email .inbox-list {padding-inline:var(--demo-inset)}
.demo-pair-email .inbox-list li {padding-block:.65rem}
.demo-pair-email .inbox-list li::before {top:1rem}
.demo-pair-email .demo-list li {padding:.75rem .85rem}
.demo-pair-order :is(.demo-before,.demo-after) {display:flex;flex-direction:column}
.demo-pair-order .chat-demo,.demo-pair-order .chat-thread {flex:1}
.demo-pair-order .chat-demo {display:flex;flex-direction:column}
.demo-pair-order .chat-thread {align-content:start;padding:var(--demo-inset)}
.course-try > h2 {
  margin-bottom:1rem;
  font-size:clamp(1.85rem,3.4vw,2.65rem);
  letter-spacing:var(--title-tracking);
  text-align:left;
}
.course-try .preview-top a {padding-block:.3rem}
.course-try .builder-caption {margin-top:.75rem}
@media(max-width:600px) {
  .hub-course .hub-hero h1 {max-width:none}
  .hub-hero h1 span {display:block}
  .hub-course .hub-hero p {max-width:32ch}
  .demo-more summary {min-height:var(--control-height);padding-block:.65rem}
}
@media(max-width:350px) {
  .hub-hero-actions {width:100%;flex-direction:column}
  .hub-hero-actions .hub-button {width:min(100%,14rem)}
}
@media(min-width:601px) {
  .demo-pair-email {grid-template-columns:minmax(0,1.18fr) minmax(0,1fr)}
  .demo-pair-email .demo-before > .inbox-list {padding-bottom:.4rem}
  .demo-pair-email .demo-after .demo-list li {padding-block:1rem}
  .demo-pair-quotes {grid-template-columns:minmax(0,1fr) minmax(0,1.1fr)}
  .demo-pair-quotes .quote-matrix :is(td,th) {padding-block:.72rem}
  .demo-pair-excel .demo-before {background:#f2f4f7}
  .demo-pair-excel .demo-before > .receipt-stack {padding-bottom:.2rem}
}


/* Apply the first workshop page's typography and action styling to the original site. */
body {scrollbar-color:#777 var(--mist)}
::selection {background:#dce4ff;color:var(--ink)}
.site-header {
  min-height:64px;
  margin-top:18px;
  margin-bottom:0;
  padding:.45rem 1rem .45rem 1.25rem;
  border:1px solid var(--line);
  border-radius:999px;
  background:var(--white);
}
.landing-page header.site-header {min-height:64px;padding:.45rem 1rem .45rem 1.25rem}
.landing-page .wrap {width:min(1176px,calc(100% - 3rem))}
.hub-header {top:12px}
.site-header nav {font-size:.9375rem}
.landing-page nav .header-register {min-height:42px;padding:.5rem 1.1rem;border-radius:999px}
.hub-course .hub-hero > div {padding-top:clamp(3rem,6vw,5.5rem)}
.hub-course .hub-hero p {font-size:clamp(1rem,1.6vw,1.125rem);max-width:45ch;line-height:1.55}
.hub-course .hub-button {min-height:48px;font-size:.9rem;padding-inline:1.3rem}
.hub-button-outline {border-color:#858185}
.site-header~.account-page h1 {font-weight:550;letter-spacing:-.04em}
.account-page .button,.workbook-page .button {border-radius:999px}
.hub-registration .workshop-signup summary {min-height:48px}
.signup-wizard h3 {font-weight:550}
@media(max-width:600px) {
  .site-header,.landing-page header.site-header {padding:.45rem .65rem .45rem .85rem;margin-top:12px;gap:.6rem}
  .site-header .brand {font-size:1rem;gap:.4rem}
  .site-header .brand .landing-mark {width:22px;height:22px}
  .site-header .landing-mark svg {width:22px;height:22px}
  .landing-page .wrap {width:calc(100% - 2rem)}
  .site-header nav {font-size:.85rem;gap:.7rem}
  .landing-page nav .header-register {padding-inline:.85rem}
}
@media(max-width:350px) {
  .site-header,.landing-page header.site-header {gap:.45rem;padding-inline:.65rem}
  .site-header .brand {font-size:.9rem}
  .site-header nav {gap:.5rem;font-size:.8rem}
  .landing-page nav .header-register {padding-inline:.7rem}
}


/* Photography joins the original workshop copy and working before-and-after demos. */
.hub-course .photo-hero {
  position:relative;
  display:grid;
  align-items:end;
  min-height:clamp(34rem,49vw,44rem);
  margin-top:18px;
  background:#d5cbbd;
}
.original-hero-photo {
  position:absolute;
  inset:0;
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:50% 46%;
}
.hub-course .photo-hero > .original-hero-panel {
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  align-items:start;
  gap:clamp(1.5rem,4vw,4rem);
  width:min(100%,calc(50% + 25rem));
  padding:2.5rem 2.5rem 2.75rem max(24px,calc((100vw - 1176px) / 2));
  background:var(--white);
}
.hub-course .photo-hero h1 {
  max-width:none;
  margin:0;
  font-size:clamp(2.25rem,3.35vw,3rem);
  font-weight:500;
  line-height:1.05;
  letter-spacing:-.045em;
  text-align:left;
}
.hub-course .photo-hero .original-hero-intro {
  padding:0;
}
.hub-course .photo-hero p {
  max-width:31ch;
  font-size:1.125rem;
  line-height:1.55;
  margin:0;
}
.photo-hero .hub-hero-actions {
  display:flex;
  align-items:center;
  justify-content:flex-start;
  flex-wrap:wrap;
  gap:.65rem;
  margin-top:1.1rem;
}
.hub-course .showcase-photo {
  position:relative;
  width:100%;
  aspect-ratio:8/5;
  margin:1.5rem 0 0;
  overflow:hidden;
  border-radius:var(--panel-radius);
  background:var(--mist);
}
.showcase-photo img {
  position:absolute;
  display:block;
  width:200%;
  height:200%;
  max-width:none;
}
.showcase-photo.inbox img,.showcase-photo.message img {left:-100%}
.showcase-photo.quotes img,.showcase-photo.message img {top:-100%}
.original-footer {display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:.5rem 1.5rem}
.original-footer small {font-size:.8rem}
@media(max-width:960px) {
  .hub-course .photo-hero > .original-hero-panel {width:90%;padding-left:24px}
}
@media(max-width:760px) {
  .hub-course .photo-hero {display:block;min-height:0;background:var(--white);margin-top:16px}
  .original-hero-photo {position:static;height:clamp(15rem,48vw,23rem);object-position:56% 46%}
  .hub-course .photo-hero > .original-hero-panel {width:100%;padding:2rem 24px 0;gap:1.25rem}
  .hub-course .photo-hero p {font-size:1rem}
}
@media(max-width:540px) {
  .hub-course .photo-hero > .original-hero-panel {grid-template-columns:1fr;padding-inline:20px;gap:.9rem}
  .hub-course .photo-hero h1 {font-size:2.25rem}
  .hub-course .photo-hero p {max-width:34ch}
  .photo-hero .hub-hero-actions {width:auto;flex-direction:row;margin-top:1.1rem}
  .photo-hero .hub-hero-actions .hub-button {width:auto}
  .hub-course .showcase-photo {margin-top:1.1rem}
}

/* Original example arrangement, with more room between source and result. */
.hub-course #examples > section > div {
  max-width:75rem;
  padding-block:clamp(2.5rem,5vw,5rem);
}
.hub-course #examples > section + section {border-top:1px solid var(--line)}
.hub-course #examples .demo-heading {
  max-width:18ch;
  margin-top:1.5rem;
  font-size:clamp(1.85rem,3vw,2.4rem);
  font-weight:550;
  line-height:1.12;
  letter-spacing:var(--title-tracking);
}
.hub-course #examples .demo-heading + p {max-width:44ch;margin-top:.65rem;font-size:1rem;line-height:1.55}
.example-preview .demo-card {border:0;border-radius:0;background:transparent;overflow:visible}
.example-preview .demo-pair {gap:18px;align-items:start}
.example-preview .demo-pair > :is(.demo-before,.demo-after) {min-width:0;border:1px solid var(--line);border-radius:16px;overflow:hidden}
.example-preview .demo-card-footer {padding:20px 0 0;border:0;background:transparent}
.example-preview .demo-card-footer .demo-try {width:min(100%,21rem)}
@media(min-width:1024px) {
  .hub-course #examples > section > div > div {align-items:start;gap:2.25rem}
  .hub-course #examples .example-copy {grid-column:span 4 / span 4}
  .hub-course #examples .example-preview {grid-column:span 8 / span 8}
  .hub-course #examples .showcase-photo {margin-top:1.25rem}
}
@media(max-width:600px) {
  .hub-course #examples > section > div {padding-block:2rem}
  .hub-course #examples .demo-heading {margin-top:0}
  .example-preview .demo-pair {gap:18px}
  .example-preview .demo-pair > :is(.demo-before,.demo-after) {border:1px solid var(--line)}
}

/* Center the introduction and give the mentor photograph its own space. */
.hub-course .mentor-hero {display:block;min-height:0;background:var(--white)}
.hub-course .mentor-hero > .mentor-hero-copy {
  width:min(900px,calc(100% - 3rem));
  margin-inline:auto;
  padding-block:clamp(3.25rem,6vw,5.5rem) 2.5rem;
  text-align:center;
}
.hub-course .mentor-hero h1 {
  margin:0;
  max-width:none;
  font-size:clamp(2.75rem,5.4vw,4.5rem);
  font-weight:500;
  line-height:1.02;
  letter-spacing:-.05em;
}
.hub-course .mentor-hero p {margin:1.3rem auto 0;max-width:45ch;font-size:1.125rem;line-height:1.55}
.mentor-hero .hub-hero-actions {display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:.65rem;margin-top:1.5rem}
.mentor-hero-image {width:min(1176px,calc(100% - 3rem));margin:0 auto;overflow:hidden;border-radius:24px;background:var(--mist)}
.mentor-hero-image img {display:block;width:100%;height:auto}
.more-examples {padding-block:1rem 3.5rem}
.more-examples h2 {font-size:clamp(1.85rem,3vw,2.4rem);font-weight:500;margin:0 0 1.5rem;letter-spacing:-.04em}
.more-example-grid {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}
.more-example {padding:1.3rem;border:1px solid var(--line);border-radius:16px;color:var(--ink);text-decoration:none;background:var(--white)}
.more-example:hover {background:var(--mist);border-color:var(--control-line)}
.more-example h3 {display:flex;align-items:start;justify-content:space-between;gap:.7rem;font-size:1.05rem;line-height:1.3;font-weight:600;letter-spacing:-.02em;margin:0}
.more-example h3 span {font-size:1rem;color:var(--blue);flex:none}
.more-example p {font-size:.9rem;line-height:1.55;color:var(--muted);margin:.5rem 0 0}
/* Keep each demo's familiar application layout within the site's quieter visual system. */
.example-preview .demo-card {font-family:var(--site-font);color:var(--ink)}
.example-preview .demo-pair .preview-top {
  min-height:3.25rem;
  padding:.9rem var(--demo-inset);
  font-size:.8125rem;
  font-weight:500;
  letter-spacing:-.015em;
  border-bottom:1px solid var(--line);
}
.example-preview .demo-pair .preview-top span + span {font-weight:500}
.example-preview .demo-pair .demo-after .preview-top {background:#f5f7ff;color:#244bd9}
.example-preview .receipt-stack,.example-preview .demo-pair-excel .demo-before,
.example-preview .demo-pair-quotes .demo-before {background:var(--mist)}
.example-preview .receipt-stack {padding-block:1rem;gap:.75rem}
.example-preview .receipt-stack li {padding:.8rem;width:min(100%,13rem);box-shadow:0 2px 5px #201f200a}
.example-preview .receipt-stack small {color:#626062}
.example-preview .sheet-bar {font:500 .8125rem/1.5 var(--site-font);padding:.65rem .7rem;background:var(--confirmed-ink);border-radius:8px 8px 0 0}
.example-preview .sheet-formula,.example-preview .sheet-tabs {padding:.5rem .6rem;background:#f7faf8}
.example-preview .showcase-body .demo-sheet :is(td,th) {font-family:var(--site-font);font-size:.8125rem;line-height:1.5;padding:.5rem .4rem;font-variant-numeric:tabular-nums}
.example-preview .demo-sheet th {font-weight:550}
.example-preview .demo-sheet .sheet-review {background:var(--pending-wash);color:var(--pending-ink)}
.example-preview .sheet-tabs span {font-weight:550}
.example-preview .inbox-toolbar {background:var(--mist);color:var(--ink);font-weight:500;border-radius:8px;padding:.6rem .7rem}
.example-preview .inbox-list li {font-size:.8125rem;line-height:1.55;gap:.15rem}
.example-preview .inbox-list strong {color:var(--ink);font-size:.75rem;font-weight:550}
.example-preview .inbox-list b {font-weight:550;letter-spacing:-.01em}
.example-preview .inbox-list li span {color:var(--muted)}
.example-preview .demo-pair-email .demo-after {background:var(--white)}
.example-preview .demo-pair-email .brief-title {padding:0 0 .75rem;background:none;border-radius:0;font-weight:550;font-size:.9375rem;letter-spacing:-.02em}
.example-preview .brief-title small {font-weight:400;font-size:.75rem}
.example-preview .demo-pair-email .demo-list li {border:0;border-bottom:1px solid var(--line);border-radius:0;padding:.85rem 0;background:transparent;font-size:.8125rem;line-height:1.55;gap:.3rem}
.example-preview .demo-list strong {font-weight:550}
.example-preview .brief-tag {font-size:.6875rem;font-weight:500;background:var(--wash);padding:.15rem .5rem}
.example-preview .quote-docs article {border-radius:10px;padding:1rem;box-shadow:none}
.example-preview .quote-docs article > strong {font-size:.9375rem;font-weight:550;letter-spacing:-.02em}
.example-preview .quote-docs small {font-size:.625rem;letter-spacing:.04em;color:#626062}
.example-preview .quote-docs dl {font-size:.8125rem;line-height:1.5;gap:.4rem;margin-top:.65rem}
.example-preview .quote-docs dt {font-weight:500}
.example-preview .quote-docs dd {color:var(--muted)}
.example-preview .quote-takeaway {background:var(--mist);font-size:.8125rem;line-height:1.55;border-radius:8px}
.example-preview .quote-matrix :is(th,td) {font-family:var(--site-font);font-size:.8125rem;line-height:1.5;padding:.65rem .35rem;font-variant-numeric:tabular-nums}
.example-preview .quote-matrix th {font-weight:550}
.example-preview .chat-heading {background:#edf5f0;color:#285640;font-size:.8125rem;padding:.85rem 1rem}
.example-preview .chat-heading strong {font-weight:550}
.example-preview .chat-heading small {font-weight:400;font-size:.6875rem}
.example-preview .chat-thread {background:#f7faf8;background-image:none;gap:.8rem;font-size:.8125rem;line-height:1.6}
.example-preview .chat-thread :is(p,blockquote) {padding:.8rem .9rem;border:1px solid #e1e9e4;box-shadow:none;border-radius:12px}
.example-preview .chat-thread blockquote {background:#eaf4ed;border-color:#d7e9dc}
.example-preview .chat-draft {font-size:.6875rem;color:#52675b}
.example-preview .demo-card-footer .demo-try {font-weight:500;font-size:.875rem;letter-spacing:-.01em}
.example-preview .demo-more summary {font-size:.75rem;font-weight:500}
.hub-course .excel-demo-action {margin-top:1rem;min-height:44px;padding:.6rem 1rem;font-size:.8125rem;font-weight:500;border:0;cursor:pointer;width:fit-content}
.excel-demo-action[aria-expanded=false] .demo-close,.excel-demo-action[aria-expanded=true] .demo-open {display:none}
.excel-example .demo-pair-excel {align-items:stretch}
.excel-example .demo-pair-excel > :is(.demo-before,.demo-after) {display:flex;flex-direction:column}
.excel-example .demo-after .showcase-body {padding:1rem;flex:1;background:#fff}
.excel-example .sheet-bar {display:flex;align-items:center;gap:.5rem;padding:.65rem .6rem;background:#fff;color:var(--ink);border:1px solid var(--line);border-bottom:0;border-radius:10px 10px 0 0;font-size:.75rem}
.excel-example .excel-app-mark {display:grid;place-items:center;width:23px;height:25px;border-radius:4px;background:#167548;color:white;font-weight:600;font-size:.8125rem}
.excel-example .sheet-menu {margin-left:auto;font-size:1rem;color:var(--muted)}
.excel-example .showcase-body .demo-sheet {border:1px solid var(--line);border-collapse:collapse;background:white;table-layout:fixed;width:100%}
.excel-example .showcase-body .demo-sheet :is(td,th) {padding:.8rem .55rem;font-size:.75rem;border:0;border-bottom:1px solid #edf0f2;vertical-align:middle;overflow-wrap:anywhere}
.excel-example .demo-sheet thead,.excel-example .demo-sheet tfoot {background:white;color:var(--ink)}
.excel-example .demo-sheet thead th {font-size:.6875rem;white-space:normal;font-weight:500;color:var(--muted)}
.excel-example .demo-sheet tr>:first-child {width:37%}.excel-example .demo-sheet tr>:nth-child(2) {width:35%}
.excel-example .demo-sheet .sheet-active {box-shadow:none;font-weight:550}.excel-example .demo-sheet .sheet-review {background:white}
.excel-example .sheet-review span {font-size:.75rem;color:#685536;border-bottom:1px dotted #b8aa8c;white-space:nowrap}
.excel-example .sheet-check-note {font-size:.6875rem;line-height:1.5;color:var(--muted);margin:.9rem 0 0}
.excel-example .example-preview .demo-pair-excel .preview-top {background:white;color:var(--ink);gap:12px;align-items:center;min-height:60px}
.excel-example .demo-pair-excel .preview-top span {font-size:.75rem;font-weight:500}
.excel-example .demo-after .showcase-body {display:flex;flex-direction:column;justify-content:center;padding:1.25rem}
.mentor-hero-image,.showcase-photo {background:#f7f8fa}
.excel-example .receipt-stack {padding-block:.8rem;gap:.6rem}
.excel-example .receipt-stack li {padding:.65rem .7rem;font-size:.6875rem}
.excel-example .receipt-stack small {font-size:.6rem}
@media(max-width:1023px) {.excel-example .excel-demo-action {margin-inline:auto}}
@media(min-width:601px) {.excel-example .demo-before .demo-more {flex:1;background:var(--mist)}}
@media(max-width:760px) {
  .more-example-grid {grid-template-columns:repeat(2,minmax(0,1fr))}
  .mentor-hero-image {width:calc(100% - 2rem);border-radius:18px}
}
@media(max-width:540px) {
  .hub-course .mentor-hero > .mentor-hero-copy {width:calc(100% - 2.5rem);padding-block:2.75rem 2rem}
  .hub-course .mentor-hero h1 {font-size:2.75rem}
  .hub-course .mentor-hero p {font-size:1rem;max-width:31ch}
  .mentor-hero-image img {height:clamp(220px,64vw,300px);object-fit:cover;object-position:48% center}
  .more-example-grid {grid-template-columns:1fr}
  .more-examples {padding-bottom:2rem}
}

.excel-example .inline-builder {scroll-margin-top:152px}

/* A shared rhythm for the remaining before/after examples. */
.hub-course .task-demo-action {margin-top:1.25rem;min-height:44px;padding:.6rem 1rem;font-size:.8125rem;font-weight:500;border:0;cursor:pointer;width:fit-content}
.task-demo-action[aria-expanded=false] .demo-close,.task-demo-action[aria-expanded=true] .demo-open {display:none}
.task-example .inline-builder {scroll-margin-top:152px}
@media(min-width:1024px) {
  .hub-course #examples .example-preview:has(.demo-pair-order) {align-self:center}
}
@media(max-width:1023px) {
  .hub-course #examples .demo-heading {margin-inline:auto}
}
.task-example .demo-pair {align-items:stretch;gap:24px;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.task-example .demo-pair > :is(.demo-before,.demo-after) {display:flex;flex-direction:column}
.task-example .demo-pair .preview-top {padding:1rem 1.1rem}
.task-example .demo-pair .showcase-body {padding:1.1rem;flex:1}
.task-example .demo-pair-email .inbox-toolbar {margin:1rem 1.1rem 0;padding:.6rem .7rem;background:#f7f7f8}
.task-example .inbox-folders {padding:.75rem 1.1rem .25rem;font-size:.6875rem;gap:1rem}
.task-example .inbox-list {padding-inline:1.1rem;padding-block:.6rem}
.task-example .demo-pair-email .inbox-list li {padding-block:.85rem;gap:.2rem;font-size:.75rem;line-height:1.6}
.task-example .inbox-list li::before {width:.3rem;height:.3rem;top:1.15rem}
.task-example .demo-pair-email .brief-title {display:flex;align-items:center;justify-content:space-between;gap:.5rem;padding:.25rem 0 1rem;margin:0;font-size:.875rem}
.task-example .brief-title small {white-space:nowrap;color:var(--muted);font-size:.6875rem}
.task-example .demo-pair-email .demo-list li {font-size:.75rem;padding:1rem 0;gap:.4rem}
.task-example .demo-pair-email .demo-list li:last-child {border-bottom:0}
.task-example .quote-docs {padding:1.1rem;gap:1rem;flex:1}
.task-example .quote-docs article {padding:1rem;background:var(--white);border:1px solid #e5e5e5;border-radius:10px;display:flex;flex-direction:column;justify-content:center}
.task-example .quote-docs dl {font-size:.75rem;gap:.5rem;line-height:1.6}
.task-example .quote-takeaway {margin:0 0 1rem;padding:.8rem;font-size:.75rem;background:#f7f7f8}
.task-example .quote-matrix {margin:0;width:100%;border-collapse:collapse}
.task-example .quote-matrix :is(td,th) {padding:.75rem .3rem;font-size:.75rem}
.task-example .quote-matrix th {font-size:.6875rem;font-weight:500}
.task-example .quote-matrix td {border-bottom:1px solid var(--line)}
.task-example .quote-matrix tbody tr:last-child td {border-bottom:0}
.task-example .chat-heading {padding:.9rem 1rem;background:#f0f7f3;border-bottom:1px solid #e2ece6}
.task-example .chat-thread {padding:1.2rem 1rem;gap:1rem;background:#fafcfb;font-size:.75rem;line-height:1.65}
.task-example .chat-thread :is(p,blockquote) {padding:.85rem .9rem;border-radius:12px;max-width:100%}
.task-example .chat-thread p {background:white;border-color:#e4ebe7}
.task-example .chat-thread blockquote {background:#eaf5ef;border-color:#d9eadf}
.task-example .chat-draft {margin-top:.15rem;font-size:.625rem}
.event-dialog-open {overflow:hidden}
.event-launcher {position:fixed;z-index:30;top:92px;right:max(24px,calc((100vw - 1176px)/2));display:flex;align-items:center;gap:.65rem;min-height:44px;padding:.65rem .85rem;background:var(--white);border:1px solid var(--line);border-radius:14px;color:var(--ink);box-shadow:0 4px 18px #201f2008;font-family:var(--site-font);cursor:pointer}
.event-launcher:hover {border-color:#bdcaff;background:#f9faff}
.event-launcher > svg {width:21px;height:21px;color:var(--blue);flex:none}
.event-launcher > span:not(.event-launcher-expand) {display:flex;align-items:center;gap:.55rem;font-size:.75rem}
.event-launcher strong {font-weight:550;white-space:nowrap}
.event-launcher-label {color:var(--muted)}
.event-launcher-expand {font-size:1.1rem;color:var(--blue);line-height:1}
@media(max-width:600px) {
  .event-launcher {top:86px;right:16px;gap:.5rem;padding:.6rem .75rem;border-radius:12px}
  .event-launcher-label {display:none}
  .event-launcher > svg {width:18px;height:18px}
  .landing-page:has(.event-launcher) .hub-course .mentor-hero > .mentor-hero-copy {padding-top:3.75rem}
}
@media(max-width:350px) {.event-launcher {top:82px}}
.event-dialog {box-sizing:border-box;width:min(520px,calc(100% - 2rem));max-height:calc(100dvh - 2rem);padding:2.5rem;border:1px solid var(--line);border-radius:24px;background:var(--white);color:var(--ink);box-shadow:0 24px 100px #201f2020;overflow:auto;font-family:var(--site-font)}
.event-dialog::backdrop {background:rgb(22 24 32 / .38);backdrop-filter:blur(5px)}
.event-dialog-close {position:absolute;right:14px;top:14px;display:grid;place-items:center;width:40px;height:40px;min-height:40px;padding:0;border:0;border-radius:50%;background:var(--mist);color:var(--muted);font-size:1.5rem;cursor:pointer}
.event-dialog-close:hover {background:var(--wash);color:var(--blue)}
.event-eyebrow {margin:.5rem 0 1rem;color:var(--blue);font-size:.8125rem;font-weight:500}
.event-dialog h2 {margin:0;font-size:clamp(2rem,6vw,2.75rem);line-height:1.08;font-weight:500;letter-spacing:-.045em}
.event-dialog #event-dialog-intro {margin:1.25rem 0 1.5rem;font-size:.9375rem;line-height:1.65;color:var(--muted)}
.event-details {display:grid;gap:1rem;margin:0 0 1.5rem;padding:1.25rem 0;border-block:1px solid var(--line);font-size:.875rem}
.event-details > div {display:grid;grid-template-columns:4rem 1fr;gap:.75rem;border:0;padding:0}
.event-details dt {color:var(--muted);font-weight:400}
.event-details dd {margin:0;font-weight:500}
.event-details dd small {display:block;margin-top:.25rem;font-weight:400;color:var(--muted)}
.event-offer {padding:1rem;margin-bottom:1.25rem;background:var(--wash);border-radius:12px;color:#244bd9}
.event-offer strong,.event-offer small,.event-offer span {display:block}
.event-offer small {font-size:.75rem;margin-top:.4rem;line-height:1.5}
.event-dialog .event-register {width:100%;min-height:48px;border:0;border-radius:999px;background:var(--blue);color:white;font:500 .875rem var(--site-font);cursor:pointer}
.event-dialog .event-register:disabled {background:var(--mist);color:var(--muted);cursor:default}
.event-registration-note {margin:1rem 0 0;font-size:.75rem;color:var(--muted);line-height:1.55;text-align:center}
.event-dialog {width:min(560px,calc(100% - 2rem));padding:2rem}
.event-dialog h2 {font-size:clamp(2rem,5vw,2.5rem)}
.event-dialog #event-dialog-intro {font-size:.875rem;margin:1rem 0 1.25rem}
.event-details {font-size:.8125rem;gap:.8rem;padding:1rem 0;margin-bottom:1.25rem}
.event-offer {padding:0;background:transparent;color:var(--ink);margin-bottom:1.25rem}
.event-offer > strong {font-size:.8125rem;font-weight:500;margin-bottom:.75rem}
.event-ticket-options {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.event-ticket-options :is(article,button) {padding:1rem;border:1px solid var(--line);border-radius:14px;background:#fff}
.event-ticket-options :is(article,button):first-child {background:#f5f7ff;border-color:#dce3ff}
.event-ticket-label {font-size:.8125rem;font-weight:500}
.event-ticket-price {font-size:2.25rem;line-height:1.1;font-weight:500;letter-spacing:-.04em;margin:.65rem 0 .25rem}
.event-ticket-unit {font-size:.6875rem;color:var(--muted)}
.event-ticket-options :is(article,button) small {font-size:.6875rem;color:var(--muted);margin-top:.75rem;line-height:1.5}
.event-ticket-options .event-saving {font-size:.6875rem;font-weight:500;color:#244bd9;margin-top:.5rem}
.event-offer .event-offer-terms {font-size:.6875rem;color:var(--muted);margin-top:.75rem;line-height:1.5}
@media(max-width:600px) {.event-dialog {padding:2rem 1.5rem;border-radius:20px}.event-eyebrow {padding-right:1.5rem;font-size:.75rem}}
@media(min-width:601px) {
  .task-example .demo-pair-email .demo-after .showcase-body {display:flex;flex-direction:column}
  .task-example .demo-pair-email .demo-after .showcase-body > .demo-list {flex:1;align-content:center}
  .task-example .demo-pair-email .demo-after .demo-more {flex:2;display:flex;flex-direction:column}
  .task-example .demo-pair-email .demo-after .demo-more > .demo-list {flex:1;grid-template-rows:repeat(2,1fr)}
  .task-example .demo-pair-email .demo-after .demo-more li {align-content:center}
}
@media(max-width:1023px) {.task-example .task-demo-action {margin-inline:auto}}
@media(max-width:600px) {
  .task-example .demo-pair {grid-template-columns:1fr;gap:24px}
  .hub-course #examples .task-example > div {padding-block:2.75rem}
  .task-example .demo-pair-email .brief-title {display:none}
  .task-example .demo-pair .showcase-body {padding:1.15rem}
  .task-example .demo-pair-email .inbox-list li {font-size:.8125rem}
  .task-example .demo-pair-email .demo-list li {font-size:.8125rem;padding:.75rem 0}
  .task-example .demo-more summary {padding:.85rem 1.1rem;min-height:44px}
}
/* Lead with the workshop date and practical registration details. */
.hub-course .mentor-hero .hero-event-details {display:grid;gap:.35rem;margin:1.6rem auto 0;padding:0}
.hero-event-details > strong {font-size:clamp(1.5rem,3vw,2rem);line-height:1.2;font-weight:550;letter-spacing:-.025em}
.hero-event-details > span {font-size:1.125rem;color:var(--muted)}
.hub-course .mentor-hero p.hero-event-price {font-size:.8125rem;margin:.85rem auto 0;max-width:none;color:var(--muted)}
.event-details > div:first-child {grid-template-columns:1fr;gap:.35rem}
.event-details > div:first-child dt {font-size:.6875rem}
.event-details [data-event-date] {font-size:clamp(1.5rem,4vw,1.85rem);font-weight:550;letter-spacing:-.035em;line-height:1.15}
.event-details dd small[data-event-time] {font-size:1rem;color:var(--ink);margin-top:.5rem}
.event-details [data-event-venue] {font-size:1.05rem}
.event-ticket-options [data-ticket-pick] {cursor:pointer;outline-offset:3px}
.event-ticket-options [data-ticket-pick][aria-pressed=true] {border-color:var(--blue);box-shadow:inset 0 0 0 1px var(--blue);background:var(--wash)}
.ticket-choice-list {border:0;margin:1.25rem 0;padding:0;display:grid;gap:.75rem}
.ticket-choice-list .ticket-choice {display:flex;align-items:center;gap:.8rem;margin:0;padding:1rem;border:1px solid var(--line);border-radius:14px;font-size:.875rem;cursor:pointer}
.ticket-choice:has(input:checked) {border-color:var(--blue);background:#f5f7ff;box-shadow:inset 0 0 0 1px var(--blue)}
.ticket-choice input {width:18px;height:18px;min-height:0;margin:0;flex:none}
.ticket-choice > span {flex:1}
.ticket-choice strong,.ticket-choice small {display:block}
.ticket-choice small {font-weight:400;color:var(--muted);font-size:.6875rem;line-height:1.5;margin-top:.2rem}
.ticket-choice b {font-size:1.2rem;font-weight:550;text-align:right;line-height:1.2}
.friend-name-field > small {font-size:.75rem;color:var(--muted);font-weight:400;line-height:1.5}
.registration-ticket {border:1px solid var(--line);padding:1.2rem;border-radius:14px;margin:1rem 0}
.registration-ticket h3 {margin:.8rem 0 .25rem;font-size:1.3rem;font-weight:550}
.registration-ticket p {margin:.45rem 0}
.registration-ticket small {color:var(--muted);line-height:1.6;display:block;margin-top:.75rem}
@media(max-width:600px) {.hero-event-details > span {font-size:1rem}.hub-course .mentor-hero p.hero-event-price {max-width:30ch}.ticket-choice-list .ticket-choice {padding:.85rem;gap:.6rem}.ticket-choice b {font-size:1.1rem}}

.event-ticket-options > button {font:inherit;text-align:left;appearance:none;color:var(--ink)}
.event-ticket-options:has(> [hidden]) {grid-template-columns:1fr}
.registration-ticket-review {padding:1rem;border:1px solid var(--line);border-radius:12px;background:var(--mist);font-size:.8125rem;line-height:1.6;color:var(--ink)}
.roster-row .claim-form > small {font-size:.75rem;color:var(--muted);line-height:1.5}

/* One-to-one consultation: the same quiet layout as the workshop. */
.consultation-section{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,7vw,96px);padding-block:clamp(56px,8vw,112px);border-block:1px solid #e6e6e9;align-items:center;scroll-margin-top:32px}.consultation-section h2{font-size:clamp(30px,4vw,48px);line-height:1.1;letter-spacing:-.045em;margin:0 0 20px}.consultation-section p{line-height:1.6;max-width:54ch}.consultation-section .hub-button{margin-top:16px}.consultation-price{font-size:44px;font-weight:600;letter-spacing:-.04em;margin:0 0 24px}.consultation-price span{font-size:16px;font-weight:400;letter-spacing:0;display:block;color:#595960}.consultation-details dl{margin:0 0 20px}.consultation-details dl div{display:grid;grid-template-columns:100px 1fr;gap:16px;padding:12px 0;border-bottom:1px solid #e6e6e9}.consultation-details dt{color:#65656d}.consultation-details dd{margin:0}.consultation-details small{color:#65656d;line-height:1.5;display:block}.consultation-page{max-width:760px;margin-inline:auto;padding-block:56px 80px}.consultation-page h1{font-size:clamp(36px,6vw,56px);letter-spacing:-.045em;line-height:1.1}.consultation-page .consultation-details{margin-block:32px}.consultation-modes{border:0;padding:0;margin:32px 0}.consultation-modes legend{font-weight:600;margin-bottom:16px}.consultation-mode-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.consultation-mode-grid label{display:flex;align-items:flex-start;gap:12px;border:1px solid #dedee3;border-radius:16px;padding:20px;cursor:pointer}.consultation-mode-grid label:has(:checked){border-color:#2e5bff;background:#f5f7ff}.consultation-mode-grid input{accent-color:#2e5bff;margin-top:5px;flex:0 0 auto}.consultation-mode-grid strong,.consultation-mode-grid small{display:block}.consultation-mode-grid small{font-weight:400;color:#65656d;line-height:1.5;margin-top:6px}.booking-status{background:#f7f8fc;border-radius:16px;padding:24px;margin-block:24px;line-height:1.6}.booking-status p{margin:0 0 12px}.booking-status p:last-child{margin-bottom:0}.original-footer{flex-wrap:wrap;gap:16px}.original-footer a{color:inherit}.consultation-back{display:inline-block;margin-bottom:12px}
@media(max-width:640px){.consultation-section{grid-template-columns:1fr;gap:32px}.consultation-mode-grid{grid-template-columns:1fr}.consultation-page{padding-block:32px 56px}.consultation-details dl div{grid-template-columns:86px 1fr}.consultation-section .hub-button{width:auto}.hub-header nav{gap:12px}.hub-header nav a{font-size:14px}}
.consultation-page .hub-button{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:12px 24px;border-radius:999px;background:#2e5bff;color:#fff;text-decoration:none;font-weight:500;line-height:1.4;border:1px solid #2e5bff}.consultation-page .hub-button:hover{background:#244bdf}.consultation-page .hub-button:focus-visible{outline:3px solid #99adff;outline-offset:4px}