/* Shared Octave components, built only from tokens.css and sized to Tandem
   Health's system: 32px marketing pills, 44px controls, 38px serif section
   headings, 16px body, 10px feature cards. Used by the homepage, the Clinic
   Twin and /design. DESIGN.md lists usage and do/don't notes. */

.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* Pills: 32px, 14px text. Dark on white, white on film, outlines secondary. */
.pill {
  display:inline-flex; align-items:center; justify-content:center; gap:var(--space-2);
  height:var(--pill-h); padding:0 var(--pill-pad); border:1px solid transparent; border-radius:var(--radius-pill);
  font:400 var(--text-sm)/1 var(--font-sans); letter-spacing:0; text-decoration:none; white-space:nowrap; cursor:pointer;
  transition:background-color var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out);
}
.pill:hover,.pill:active { transform:none; box-shadow:none; }  /* site.css's older .pill lifts on hover */
.pill:disabled,.pill[aria-disabled="true"] { cursor:not-allowed; opacity:.32; }
.pill--dark { background:var(--accent); border-color:var(--accent); color:var(--accent-ink); }
.pill--dark:not(:disabled):hover { background:var(--accent-hover); border-color:var(--accent-hover); }
.pill--light { background:#fff; color:#000; }
.pill--light:hover { background:var(--field); }
.pill--outline { border-color:var(--hairline-strong); background:transparent; color:var(--ink); }
.pill--outline:hover { background:var(--field); }
.pill--outline-film { border-color:rgba(255,255,255,.72); background:transparent; color:var(--on-film); }
.pill--outline-film:hover { background:var(--glass); }
/* Controls: the sign-up page's 44px button in Inter. */
.pill--control { height:var(--control-h); padding:0 var(--space-4); font:500 var(--text-sm)/20px var(--font-ui); }
.pill:focus-visible { outline:none; box-shadow:var(--ring); }
.pill--light:focus-visible,.pill--outline-film:focus-visible { box-shadow:0 0 0 2px var(--on-film); }

/* Glass pill on film: a light tint that takes the footage's colour through
   the blur, a 1px inner edge, white text and a round outlined icon. */
/* Copies sequel.co's "Watch the film" button as computed live at 1440 and
   390: 44px with its 1px border, 12px to the icon, 9px to the label, 20px
   after it, and the hover wash inside the border over .3s. */
.pill--glass {
  position:relative; overflow:hidden; height:44px; padding:0 20px 0 12px; gap:9px;
  border:1px solid rgba(255,255,255,.2); background:rgba(200,200,200,.1);
  -webkit-backdrop-filter:blur(20px) saturate(1.4); backdrop-filter:blur(20px) saturate(1.4);
  box-shadow:0 10px 30px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.08);
  color:#fff; font:500 14px/21px var(--font-sans); letter-spacing:normal;
  transition:all .3s ease;
}
.pill--glass::after { content:""; position:absolute; inset:0; border-radius:inherit; background:rgba(255,255,255,.1); opacity:0; transition:opacity .3s ease; pointer-events:none; }
.pill--glass:hover { box-shadow:0 10px 30px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.08); }
.pill--glass:hover::after { opacity:1; }
.pill--glass:focus-visible { box-shadow:0 10px 30px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.08),0 0 0 2px var(--on-film); }
/* The 19px play icon: an 18.4px hairline ring and a 3.9 x 5.7px rounded triangle. */
.pill-icon { flex:none; width:19px; height:19px; }
.pill-icon circle { fill:none; stroke:currentColor; stroke-width:.565; }
.pill-icon path { fill:currentColor; }

/* Email pill: glass field, solid contrasting button inside. 16px type so iOS does not zoom. */
.email-pill {
  display:flex; align-items:center; gap:8px; width:min(100%,440px); height:var(--control-h); margin:0; padding:4px 4px 4px 18px;
  border:1px solid rgba(214,228,240,.72); border-radius:var(--radius-pill); background:rgba(226,236,244,.55);
  -webkit-backdrop-filter:blur(18px) saturate(1.45); backdrop-filter:blur(18px) saturate(1.45);
  box-shadow:inset 0 1px 0 rgba(236,246,252,.9),0 8px 22px rgba(8,18,32,.18);
  transition:border-color .2s ease,box-shadow .2s ease;
}
.email-pill:focus-within {
  border-color:rgba(255,255,255,.9);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 0 0 2px rgba(255,255,255,.7);
  outline:none;
}
.email-pill input {
  flex:1; min-width:0; height:100%; padding:0; border:0; outline:none; background:transparent; box-shadow:none;
  color:rgb(16,32,40); font:400 16px/1 var(--font-sans); caret-color:rgb(16,32,40);
}
.email-pill input:focus { outline:none; }
.email-pill input::placeholder { color:rgb(16,32,40); opacity:1; }
.email-pill .pill {
  flex:none; height:34px; padding:0 16px; border:0; border-radius:var(--radius-pill);
  background:#102028; color:#fff; font:400 14px/21px var(--font-sans);
}
.email-pill .pill:hover { background:#243844; }
.email-pill .pill:focus { outline:none; }
.email-pill .pill:focus-visible { outline:2px solid #fff; outline-offset:2px; }
.email-pill.is-locked input { cursor:default; }
.email-pill-error { min-height:20px; margin:8px 0 0 18px; font:400 14px/1.4 var(--font-sans); color:#fff; }
@supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))) {
  .email-pill { background:var(--glass-fill-fallback); -webkit-backdrop-filter:none; backdrop-filter:none; color:#27272c; }
  .email-pill input { color:#27272c; caret-color:#27272c; }
  .email-pill input::placeholder { color:rgba(39,39,44,.55); }
  .email-pill .pill { background:#27272c; color:#fff; }
}

/* Pause control for every autoplaying film: dark on film, light on white. */
.media-toggle {
  display:grid; place-items:center; flex:none; width:32px; height:32px; padding:0;
  border:1px solid rgba(255,255,255,.2); border-radius:50%; background:rgba(13,13,13,.5); color:#f5f5f4; cursor:pointer;
  transition:background-color var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out);
}
.media-toggle[hidden] { display:none; }
.media-toggle:hover { background:rgba(13,13,13,.8); border-color:rgba(255,255,255,.4); }
.media-toggle:focus-visible { outline:2px solid var(--on-film); outline-offset:3px; }
.media-toggle svg { width:12px; height:12px; fill:currentColor; }
.media-toggle .media-play,.media-toggle[data-paused="true"] .media-pause { display:none; }
.media-toggle[data-paused="true"] .media-play { display:block; }
.media-toggle--light { border-color:var(--hairline); background:rgba(255,255,255,.86); color:var(--muted); }
.media-toggle--light:hover { border-color:var(--hairline-strong); background:#fff; color:var(--ink); }
.media-toggle--light:focus-visible { outline:none; box-shadow:var(--ring); }

/* Blurred-film card: a baked blur loop over its poster. */
.film-card { position:relative; isolation:isolate; overflow:hidden; border-radius:var(--radius-lg); background:var(--film-warm); color:var(--on-film); }
.film-card-poster,.film-card-media { position:absolute; inset:0; z-index:0; display:block; width:100%; height:100%; object-fit:cover; }
.film-card-media { opacity:0; transition:opacity var(--dur-slow) var(--ease-out); }
.film-card-media.is-playing { opacity:1; }
.film-card > .media-toggle { position:absolute; right:var(--space-4); bottom:var(--space-4); z-index:3; }

/* Frosted chip: white glass over light footage, a 16px line icon, a label
   and a quiet value on the right. Generic states only. */
.glass-chip {
  display:flex; align-items:center; gap:var(--space-3); padding:12px 16px; border-radius:var(--radius-md);
  background:var(--glass-light); -webkit-backdrop-filter:blur(var(--blur-glass)) saturate(1.4); backdrop-filter:blur(var(--blur-glass)) saturate(1.4);
  box-shadow:var(--shadow-chip); color:var(--ink); font:500 var(--text-sm)/1.3 var(--font-sans); letter-spacing:var(--tracking-body);
}
.glass-chip-icon { flex:none; display:grid; place-items:center; width:16px; height:16px; color:var(--ink); }
.glass-chip-icon svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.glass-chip small { display:block; margin-top:2px; font:400 13px/1.3 var(--font-sans); color:var(--muted); }
.glass-chip-state { margin-left:auto; padding-left:var(--space-4); font:400 var(--text-sm)/1 var(--font-sans); color:var(--muted); white-space:nowrap; }

/* Section headings: the serif at 38/1.2, black, with a softer second line. */
.section-title {
  margin:0; color:var(--ink); text-align:center; text-wrap:balance;
  font:400 var(--display-lg)/var(--leading-display) var(--font-serif); letter-spacing:var(--tracking-display);
}
.section-title-soft { display:block; color:var(--muted); }

/* Feature section, as Tandem lays it out: heading and subline above, then a
   square blurred-film card with frosted chips and a list of three points. */
.feature,section.feature {  /* section.feature matches site.css's older feature band, which would otherwise win. */
  background:var(--bg); color:var(--ink); padding:var(--section-y) var(--study-gutter,24px); text-align:left; font-family:var(--font-sans);
}
.feature-inner { max-width:var(--content); margin:0 auto; }
.feature-head h2 {
  max-width:none; margin:0; color:var(--ink); text-align:left; text-wrap:balance;
  font:400 var(--display-md)/var(--leading-display) var(--font-serif); letter-spacing:var(--tracking-display);
}
.feature-head .section-title-soft { display:inline; }
.feature-sub { max-width:var(--measure); margin:10px 0 0; font:400 var(--text-base)/var(--leading-body) var(--font-sans); letter-spacing:var(--tracking-body); color:var(--muted); }
.feature-grid { display:grid; grid-template-columns:minmax(0,570px) minmax(0,var(--measure-narrow)); column-gap:88px; align-items:start; margin-top:var(--space-7); }
.feature--reverse .feature-card { order:2; }
.feature-card { aspect-ratio:1; border-radius:var(--radius-card); }
.feature-card .glass-chip { position:absolute; z-index:2; left:50%; top:56%; width:min(76%,330px); transform:translate(-50%,-50%); }
.feature-card .glass-chip + .glass-chip { top:calc(56% + 64px); left:calc(50% + 28px); width:min(70%,300px); }
.feature-points { list-style:none; display:grid; gap:var(--space-5); margin:0; padding:0; }
.feature-point { display:grid; grid-template-columns:16px minmax(0,1fr); column-gap:var(--space-2); }
.feature-point svg { width:16px; height:16px; margin-top:3px; fill:none; stroke:var(--ink); stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.feature-point h3 { margin:0; font:500 var(--text-base)/var(--leading-body) var(--font-sans); letter-spacing:var(--tracking-medium); color:var(--ink); }
.feature-point p { margin:6px 0 0; font:400 var(--text-base)/var(--leading-body) var(--font-sans); letter-spacing:var(--tracking-body); color:var(--muted); }

@media (max-width:1100px) {
  .feature-grid { grid-template-columns:minmax(0,1fr) minmax(0,var(--measure-narrow)); column-gap:var(--space-7); }
}
@media (max-width:800px) {
  .feature-grid { grid-template-columns:minmax(0,1fr); row-gap:var(--space-6); }
  .feature--reverse .feature-card { order:0; }
}
@media (max-width:560px) {
  .feature-card .glass-chip { width:84%; }
  .feature-card .glass-chip + .glass-chip { left:calc(50% + 12px); width:78%; }
}