/* Page-specific styles for the workshop landing page.
   Lifted verbatim out of the old cowork.html <style> block during the
   Next migration. Served as a plain file alongside styles.css for the same
   reason that one is: it is hand-written and uses the shared design tokens,
   so there is nothing for a bundler to add. */
.cw-hero{ padding-block:clamp(3rem,7vw,5.5rem); }
  .cw-hero .cw-eyebrow{
    display:inline-block; font-size:var(--fs-eyebrow); font-weight:700; letter-spacing:.12em;
    text-transform:uppercase; color:var(--lime-500); margin-block-end:var(--sp-4);
  }
  .cw-hero h1{ font-size:var(--fs-h2); line-height:1.1; margin:0 0 var(--sp-6); max-width:18ch; }
  .cw-hero .cw-lead{ font-size:1.3rem; line-height:1.65; max-width:58ch; color:#d8d6ea; margin:0 0 var(--sp-8); }
  .cw-facts{ display:flex; flex-wrap:wrap; gap:var(--sp-6); list-style:none; padding:0; margin:0; }
  .cw-facts li{ display:grid; gap:.15rem; }
  .cw-facts b{ font-size:1.05rem; color:var(--lime-500); }
  .cw-facts span{ font-size:var(--fs-small); color:#a9a6c4; }

  .cw-main{ padding-block:clamp(3rem,6vw,5rem); }
  .cw-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(2rem,4vw,4rem); align-items:start; }
  @media (max-width:900px){ .cw-grid{ grid-template-columns:1fr; } }

  .cw-sec{ margin-block-end:var(--sp-12); }
  .cw-sec h2{ font-size:1.65rem; margin:0 0 var(--sp-4); }
  .cw-list{ display:grid; gap:var(--sp-3); padding:0; margin:0; list-style:none; }
  .cw-list li{ position:relative; padding-inline-start:1.75rem; line-height:1.65; }
  .cw-list li::before{
    content:""; position:absolute; inset-inline-start:0; inset-block-start:.62em;
    width:.6rem; height:.6rem; border-radius:50%; background:var(--violet-600);
  }

  /* The syllabus is numbered rather than bulleted: these four happen in this
     order, and the last one is the hour people are really buying. */
  .cw-syllabus{ counter-reset:cw; display:grid; gap:var(--sp-4); padding:0; margin:0; list-style:none; }
  .cw-syllabus li{
    counter-increment:cw; position:relative; padding-inline-start:3rem; min-height:2.1rem;
  }
  .cw-syllabus li::before{
    content:counter(cw); position:absolute; inset-inline-start:0; inset-block-start:0;
    width:2.1rem; height:2.1rem; border-radius:50%;
    background:var(--violet-50); color:var(--violet-600);
    font-weight:900; font-size:.95rem;
    display:grid; place-items:center;
  }
  .cw-syllabus b{ display:block; line-height:1.45; }
  .cw-syllabus span{ display:block; color:var(--n-600); font-size:var(--fs-small); line-height:1.6; }

  /* The registration card sticks beside the copy on a wide screen, so the price
     and the button stay on screen however far the reader scrolls. */
  .cw-card{
    position:sticky; top:var(--sp-6); background:var(--n-0); border:1px solid var(--n-200);
    border-radius:var(--r-xl); box-shadow:var(--shadow-lg); padding:clamp(1.5rem,3vw,2.25rem);
  }
  @media (max-width:900px){ .cw-card{ position:static; } }

  /* A legend is the one element whose display is unreliable across browsers,
     so it is never asked to be a grid item - it just carries the label type
     used by .field > span elsewhere on the site. */
  .cw-fieldset{ border:0; padding:0; margin:0; }
  .cw-legend{
    padding:0; margin-block-end:.4rem; font-size:.87rem; font-weight:700;
    color:var(--text-muted); letter-spacing:.05em; text-transform:uppercase;
  }

  .cw-tiers{ display:grid; gap:var(--sp-3); margin-block-end:var(--sp-6); }
  .cw-tier{
    display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:var(--sp-3);
    border:2px solid var(--n-200); border-radius:var(--r-lg); padding:var(--sp-4);
    cursor:pointer; transition:border-color .15s var(--ease), background .15s var(--ease);
  }
  .cw-tier:hover{ border-color:var(--violet-300); }
  .cw-tier:has(input:checked){ border-color:var(--violet-600); background:var(--violet-50); }
  .cw-tier:has(input:focus-visible){ outline:3px solid var(--violet-300); outline-offset:2px; }
  .cw-tier input{ width:1.15rem; height:1.15rem; accent-color:var(--violet-600); margin:0; }
  .cw-tier .cw-t-name{ font-weight:700; display:grid; gap:.1rem; }
  .cw-tier .cw-t-sub{ font-weight:500; font-size:var(--fs-small); color:var(--n-600); }
  .cw-tier .cw-t-price{ font-weight:900; font-size:1.35rem; white-space:nowrap; }
  .cw-tier .cw-t-save{
    display:inline-block; font-size:.78rem; font-weight:700; color:var(--green-600);
    background:#e6f6ec; border-radius:var(--r-pill); padding:.1rem .5rem; margin-inline-start:.4rem;
  }

  .cw-guest{ display:none; }
  .cw-guest.is-on{ display:grid; }

  /* An unfilled logistics placeholder. Deliberately quieter than a real value
     and NOT lime: lime is the hero's accent, and a "to be confirmed" should not
     read louder than the date it is standing in for. */
  .cw-facts b.cw-tbd{ color:var(--text-muted); font-weight:500; }