/* Doko Agent — page layer. Every colour, font, radius and component look comes from
   css/system.css (the design). This file only carries the pieces this page adds: the pinned
   session row, its progress bar, and one or two alignments. */

:root {
  --sk-top: 72px;
}

/* The hero sits on the parallax field; keep the drawn grid and the beam inside the frame. */
.hero--refract { position: relative; }
.hero--refract .hero__copy { gap: 26px; }
.hero--refract h1 { font-size: clamp(42px, 5.6vw, 88px); }
.hero--refract .hero__actions { margin-top: 4px; }
/* The Android app, small, under the hero's buttons. */
.app-get {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  justify-self: start;
  align-self: flex-start;
  margin-top: -6px;
  padding: 6px 12px 6px 9px;
  border-radius: 999px;
  font-family: var(--font-label);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--color-muted);
  text-decoration: none;
  box-shadow: inset 0 0 0 1px var(--color-border);
  transition: color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.app-get:hover { color: var(--color-ink); background: var(--color-strata); box-shadow: inset 0 0 0 1px var(--color-border-strong); }
.app-get:focus-visible { outline: 2px solid var(--color-accent, #86E5F2); outline-offset: 3px; }
.app-get svg { width: 15px; height: 15px; }
.app-get__meta { padding: 1px 6px; border-radius: 6px; font-size: 10px; letter-spacing: 0.12em; color: var(--color-ink); background: rgba(255, 255, 255, 0.07); }

/* Hero intro is driven by the kit: it only needs its own paint. */
.refractor__tag { backdrop-filter: blur(6px); }

/* ---------------------------------------------------------------- the pinned session row */

/* The section is the size container the row measures: 100cqw is the page's width without the scrollbar. */
#session { padding-block: clamp(56px, 7vw, 96px) 0; container-type: inline-size; }
#session .section__head { margin-bottom: clamp(20px, 2.4vw, 32px); }
#session .section__head--spread { align-items: end; }

.track-wrap {
  display: flex;
  flex-direction: column;
  gap: clamp(12px, 1.6vw, 20px);
  padding-bottom: clamp(20px, 3vw, 40px);
}

.track-bar {
  display: flex;
  align-items: center;
  gap: clamp(12px, 2vw, 24px);
  padding-top: 16px;
  border-top: 1px solid var(--color-border);
  font-family: var(--font-label);
  font-size: 11.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-muted);
}
.track-bar__label b { color: var(--color-ink); font-weight: 500; }
.track-bar__rail {
  position: relative;
  flex: 1;
  min-width: 40px;
  height: 1px;
  background: var(--color-border);
}
.track-bar__fill {
  position: absolute;
  inset: 0;
  background: var(--split-light);
  scale: 0 1;
  transform-origin: 0 50%;
  box-shadow: 0 0 12px rgba(134, 229, 242, 0.45);
}
.track-bar__hint { white-space: nowrap; color: #6F7A87; }

.session-track {
  align-items: stretch;
  /* The row runs edge to edge so the whole screen carries it and the last card travels fully in;
     its own inline padding keeps the first card off the edge. It reaches out of the container by the
     section's width (cqw), not the window's (vw), so it never runs under the scrollbar. */
  width: auto;
  margin-inline: calc(50% - 50cqw);
}

.session-card {
  position: relative;
  display: grid;
  grid-template-rows: auto auto 1fr auto auto;
  gap: 12px;
  align-content: start;
  width: min(78vw, 400px);
  padding: clamp(20px, 2.2vw, 28px);
  border-radius: var(--radius-card);
  background: linear-gradient(180deg, rgba(18, 24, 33, 0.86), rgba(9, 12, 17, 0.92));
  box-shadow: var(--rim), var(--shadow-card);
  border: 1px solid var(--color-border);
  transition: border-color 400ms var(--ease-slow), scale 500ms var(--ease-slow), background-color 400ms ease;
}
.session-card:hover { border-color: var(--color-border-strong); }
.session-card__no {
  font-family: var(--font-label);
  font-size: 11.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-muted);
}
.session-card h3 {
  font-family: var(--font-heading);
  font-size: clamp(20px, 1.9vw, 26px);
  font-weight: 400;
  letter-spacing: -0.024em;
  line-height: 1.16;
}
.session-card p { font-size: 14.5px; color: var(--color-muted); max-width: 34ch; }
.session-card__log {
  margin: 2px 0 0;
  padding: 14px 16px;
  border-radius: 8px;
  background: #05070A;
  box-shadow: inset 0 0 0 1px var(--color-border);
  font-family: var(--font-label);
  font-size: 12px;
  line-height: 1.8;
  color: #B4BDC7;
  overflow-x: auto;
  white-space: pre;
}
.session-card__foot {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-top: 12px;
  border-top: 1px solid var(--color-border);
  font-family: var(--font-label) !important;
  font-size: 11px !important;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-muted);
  max-width: none !important;
}
.session-card__foot::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--c, var(--band-ice));
  box-shadow: 0 0 10px var(--c, var(--band-ice));
  flex: none;
}

/* The near card is the one the row is currently on. */
html.sk-on #session .session-card.is-near { border-color: var(--color-border-strong); }

/* ---------------------------------------------------------------- build and engineering */

/* The session cards, laid out as a still grid rather than the pinned row. */
.build-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.build-grid .session-card { width: auto; }
.build-grid .session-card p:not(.session-card__no):not(.session-card__foot) { max-width: none; }

.engineering { align-items: start; }
.engineering__run { gap: 18px; }
.engineering__run .muted { font-size: 15px; max-width: 52ch; }

@media (max-width: 960px) {
  .build-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .engineering { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .build-grid { grid-template-columns: 1fr; }
  .build-grid .session-card { width: auto; }
}

/* ---------------------------------------------------------------- in the field (scrollytelling) */

#field { padding-bottom: clamp(48px, 6vw, 80px); }

.field-story { align-items: start; }

.field-media {
  /* The kit makes this sticky; the frame keeps the photo inside a hairline and a dark well. */
  align-self: start;
  /* How tall a picture shows; each frame takes its own picture's shape (--ratio, width over height). */
  --shot-h: min(64svh, 560px);
}

.field-shot {
  position: relative;
  display: grid;
  width: min(100%, calc(var(--shot-h) * var(--ratio, 1)));
  margin: 0 auto;
  border-radius: var(--radius-card);
  overflow: hidden;
  background: #05070A;
  box-shadow: inset 0 0 0 1px var(--color-border), 0 40px 80px -50px rgba(0, 0, 0, 0.95);
}
/* Each picture whole and as it was made: no crop and no filter, in the dark well. */
.field-shot img {
  display: block;
  width: 100%;
  height: auto;
}
/* A video plays in the same well, the size of its own frame, with a sound switch in its corner. */
.field-shot video {
  display: block;
  width: 100%;
  height: auto;
  background: #05070A;
}
.field-shot__sound {
  position: absolute;
  top: 12px;
  right: 12px;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 50%;
  background: rgba(5, 7, 10, 0.62);
  color: var(--color-ink);
  cursor: pointer;
  backdrop-filter: blur(6px);
  transition: background 0.2s ease, border-color 0.2s ease;
}
.field-shot__sound:hover { background: rgba(5, 7, 10, 0.85); border-color: rgba(255, 255, 255, 0.32); }
.field-shot__sound:focus-visible { outline: 2px solid var(--color-accent, #86E5F2); outline-offset: 2px; }
.field-shot__sound svg { width: 17px; height: 17px; }
.field-shot__sound[aria-pressed="false"] .lucide-volume-2,
.field-shot__sound[aria-pressed="true"] .lucide-volume-x { display: none; }
.field-shot figcaption {
  display: grid;
  gap: 4px;
  padding: 14px 16px 16px;
  border-top: 1px solid var(--color-border);
  background: linear-gradient(180deg, rgba(18, 24, 33, 0.9), rgba(7, 9, 13, 0.96));
  font-family: var(--font-label);
  font-size: 11px;
  line-height: 1.5;
  letter-spacing: 0.06em;
  color: var(--color-muted);
}
.field-shot figcaption b {
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-ink);
}

.field-steps { display: grid; }

.field-step {
  display: grid;
  gap: 10px;
  align-content: center;
  max-width: 40ch;
  padding-block: clamp(24px, 5vw, 56px);
}
.field-step h3 {
  font-family: var(--font-heading);
  font-size: clamp(22px, 2.4vw, 32px);
  font-weight: 300;
  letter-spacing: -0.028em;
  line-height: 1.12;
}
.field-step p { color: var(--color-muted); font-size: 15.5px; }
.field-step .sect-no { color: #6F7A87; }

@media (max-width: 960px) {
  .field-media { position: relative; }
  .field-media { --shot-h: min(56svh, 420px); }
  .field-step { max-width: none; padding-block: 28px; }
}

/* ---------------------------------------------------------------- small polish */

.answer-sheet__body code,
.session-card__log code,
.gate-log code {
  font-family: var(--font-label);
  font-size: 0.92em;
  color: var(--color-ink);
}

.band-tier .btn, .hero__actions .btn { will-change: translate; }

/* The nav's current section link. */
.nav__links a[aria-current="page"] { color: var(--color-ink); background-size: 100% 1px; }

/* ---------------------------------------------------------------- the site's pages */

/* The Product menu in the bar: opens on hover or keyboard focus, with no script. */
.nav__group { position: relative; }
.nav__trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 14px;
  color: var(--color-muted);
  cursor: pointer;
}
.nav__trigger .icon { width: 14px; height: 14px; color: inherit; transition: rotate 200ms ease; }
.nav__group:hover .nav__trigger, .nav__group:focus-within .nav__trigger, .nav__trigger.is-current { color: var(--color-ink); }
.nav__group:hover .nav__trigger .icon, .nav__group:focus-within .nav__trigger .icon { rotate: 180deg; }
.nav__panel {
  position: absolute;
  top: 100%;
  left: -14px;
  z-index: 30;
  display: grid;
  gap: 2px;
  width: 316px;
  margin-top: 12px;
  padding: 8px;
  border: 1px solid var(--color-border);
  border-radius: 14px;
  background: rgba(10, 13, 18, 0.97);
  box-shadow: var(--rim), var(--shadow-card);
  opacity: 0;
  visibility: hidden;
  translate: 0 -4px;
  transition: opacity 160ms ease, translate 220ms var(--ease-slow), visibility 0s linear 220ms;
}
/* A bridge over the gap, so the menu stays open on the way down to it. */
.nav__panel::before { content: ""; position: absolute; inset: -14px 0 auto; height: 14px; }
.nav__group:hover .nav__panel, .nav__group:focus-within .nav__panel { opacity: 1; visibility: visible; translate: 0 0; transition-delay: 0s; }
.nav__links .nav__panel a { display: grid; gap: 2px; padding: 10px 12px; border-radius: 9px; background: none; }
.nav__links .nav__panel a:hover, .nav__links .nav__panel a:focus-visible, .nav__links .nav__panel [aria-current="page"] { background: rgba(237, 241, 244, 0.05); }
.nav__panel b { font-size: 14px; font-weight: 500; color: var(--color-ink); }
.nav__panel span { font-size: 12.5px; color: var(--color-muted); }
.nav__drawer .nav__drawer-label { margin-top: 6px; font-family: var(--font-label); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--color-muted); }

/* A page's opening: words on one side, the thing itself on the other. */
.page-hero { position: relative; padding-block: clamp(48px, 7vw, 104px) clamp(32px, 5vw, 72px); }
.page-hero__inner { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.page-hero--plain .page-hero__inner { grid-template-columns: minmax(0, 1fr); max-width: 880px; }
.page-hero__copy { display: grid; gap: 22px; align-content: center; }
.page-hero h1 { font-size: clamp(40px, 5vw, 74px); }
.page-hero .hero__actions { margin-top: 4px; }

/* A site as it would look in a browser: a thin bar, the page, and what it is. */
.site-shot {
  display: grid;
  margin: 0;
  border-radius: var(--radius-card);
  overflow: hidden;
  background: #05070A;
  box-shadow: inset 0 0 0 1px var(--color-border), 0 40px 80px -50px rgba(0, 0, 0, 0.95);
}
.site-shot__bar { display: flex; gap: 6px; padding: 10px 12px; border-bottom: 1px solid var(--color-border); background: rgba(18, 24, 33, 0.92); }
.site-shot__bar i { width: 9px; height: 9px; border-radius: 50%; background: rgba(237, 241, 244, 0.16); }
.site-shot img { display: block; width: 100%; height: auto; }
/* A whole page in the card: the frame shows its top, and the page scrolls through it while pointed at. */
.site-shot__view { position: relative; display: block; width: 100%; padding: 0; border: 0; background: none; color: inherit; text-align: left; cursor: zoom-in; }
.site-shot__window { display: block; aspect-ratio: 16 / 10; overflow: hidden; }
.site-shot__window img { transform: translateY(0); transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1); }
.site-shot__view.is-scrolling .site-shot__window img { transform: translateY(var(--page-shift, 0)); transition: transform var(--page-time, 8s) cubic-bezier(0.45, 0, 0.55, 1); }
.site-shot__hint { position: absolute; right: 14px; bottom: 14px; display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border: 1px solid rgba(237, 241, 244, 0.18); border-radius: 999px; background: rgba(5, 7, 10, 0.78); color: var(--color-ink); font-family: var(--font-label); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; opacity: 0; transform: translateY(6px); transition: opacity 0.25s ease, transform 0.25s ease; pointer-events: none; }
.site-shot__hint svg { width: 14px; height: 14px; }
.site-shot__view:hover .site-shot__hint, .site-shot__view:focus-visible .site-shot__hint { opacity: 1; transform: none; }
.site-shot__view:focus-visible { outline: 2px solid var(--color-accent, #86E5F2); outline-offset: -2px; }
@media (hover: none) { .site-shot__hint { opacity: 1; transform: none; } }
/* The page at full size, to scroll by hand. */
.page-view { width: min(1100px, calc(100% - 32px)); height: min(92svh, 1400px); max-width: none; max-height: none; padding: 0; border: 1px solid var(--color-border); border-radius: var(--radius-card); background: #05070A; overflow: hidden; }
.page-view::backdrop { background: rgba(3, 4, 6, 0.84); backdrop-filter: blur(4px); }
.page-view__scroll { height: 100%; overflow-y: auto; overscroll-behavior: contain; }
.page-view__scroll img { display: block; width: 100%; height: auto; }
.page-view__close { position: absolute; top: 12px; right: 12px; z-index: 1; display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid rgba(237, 241, 244, 0.22); border-radius: 50%; background: rgba(5, 7, 10, 0.8); color: var(--color-ink); cursor: pointer; }
.page-view__close:focus-visible { outline: 2px solid var(--color-accent, #86E5F2); outline-offset: 2px; }
.site-shot figcaption {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 4px 12px;
  padding: 12px 14px;
  border-top: 1px solid var(--color-border);
  font-family: var(--font-label);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--color-muted);
}
.site-shot figcaption b { font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-ink); }

/* What a page explains, one idea at a time, the words and the picture taking turns. */
.feature-rows { display: grid; gap: clamp(72px, 10vw, 136px); }
.feature-row { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: clamp(32px, 6vw, 88px); align-items: center; }
.feature-row:nth-child(even) .feature-row__copy { order: 2; }
.feature-row__copy { display: grid; gap: 16px; align-content: center; max-width: 46ch; }
.feature-row__copy h2 { font-size: clamp(28px, 3.2vw, 44px); }
.feature-row__copy p { font-size: 16.5px; color: var(--color-muted); }
.feature-row__media { min-width: 0; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.chips li { padding: 7px 12px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--color-border); font-family: var(--font-label); font-size: 12px; letter-spacing: 0.04em; color: #C9D0D7; }

.more-link { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-label); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-ink); text-decoration: none; }
/* The arrow is drawn (a stroke and its head), not typed after the words. */
.more-link::after {
  content: "";
  flex: none;
  width: 11px;
  height: 9px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 9' fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 4.5h9M6.5 1l3.5 3.5L6.5 8'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 9' fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 4.5h9M6.5 1l3.5 3.5L6.5 8'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: translate 200ms ease;
}
.more-link:hover::after { translate: 3px 0; }
.section__more { margin-top: clamp(24px, 3vw, 36px); }

.showcase-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(20px, 3vw, 36px); }
/* Phone apps as they look on a phone: the screen in a dark bezel, four in a row (two on a phone). */
.phone-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(16px, 2.4vw, 32px); align-items: start; }
.phone-shot { display: grid; gap: 14px; margin: 0; }
.phone-shot img { display: block; width: 100%; height: auto; border: 7px solid #05070A; border-radius: 30px; background: #05070A; box-shadow: 0 0 0 1px var(--color-border), 0 40px 80px -50px rgba(0, 0, 0, 0.95); }
.phone-shot figcaption { display: grid; gap: 4px; font-family: var(--font-mono); font-size: 12px; line-height: 1.5; color: var(--color-muted); }
.phone-shot figcaption b { font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-ink); }
/* The showcase in parts (websites, apps, code, video), each with its own head; a row of links jumps to them. */
.showcase-jump { display: flex; flex-wrap: wrap; gap: 8px; margin-top: clamp(24px, 3vw, 36px); }
.showcase-jump a { padding: 8px 14px; border: 1px solid var(--color-border); border-radius: 999px; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-muted); text-decoration: none; transition: color 0.2s ease, border-color 0.2s ease; }
.showcase-jump a:hover { color: var(--color-ink); border-color: var(--color-ink); }
.showcase-part { scroll-margin-top: 80px; }
.showcase-part .section__head { margin-bottom: clamp(24px, 3vw, 40px); }
/* A head that is also the container keeps the container's width and edge; only its words stay narrow. */
.showcase-part .container.section__head { max-width: var(--container, 1240px); }
.showcase-part .container.section__head > * { max-width: 720px; }
.showcase-split { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(24px, 4vw, 64px); align-items: center; }
.showcase-split .section__head { margin-bottom: 0; }
/* The films side by side from the left edge, each the shape it was made in, their feet on one line. */
.showcase-films { display: flex; flex-wrap: wrap; gap: clamp(20px, 3vw, 36px); align-items: flex-end; }
.showcase-films .field-shot { --shot-h: min(70svh, 600px); margin: 0; }
/* Three films still share one row on a wide screen. */
.showcase-films:has(> .field-shot:nth-child(3)) .field-shot { --shot-h: min(62svh, 436px); }
.showcase-more { display: grid; gap: 18px; margin-top: clamp(28px, 3.5vw, 44px); }
.showcase-more > * { max-width: 640px; }
.showcase-more p { margin: 0; color: var(--color-muted); }

/* Questions, one open at a time if the reader likes. */
.faq-wrap { display: grid; grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.faq { border-top: 1px solid var(--color-border); }
.faq details { border-bottom: 1px solid var(--color-border); }
.faq summary { padding: 22px 0; font-size: clamp(17px, 1.5vw, 20px); color: var(--color-ink); }
.faq summary::after { content: "+"; flex: none; font-family: var(--font-label); color: var(--color-muted); transition: rotate 200ms ease; }
.faq details[open] summary::after { rotate: 45deg; }
.faq details p { max-width: 68ch; padding-bottom: 22px; color: var(--color-muted); }

/* Monthly or yearly, above the plans; shown once the price script runs. A lit pill slides to the
   choice, and the prices that change rise into place, one plan after the other. The two choices are
   the same width, so the pill only ever moves (transform), it never has to grow or shrink. */
.period-switch { position: relative; isolation: isolate; display: inline-grid; grid-template-columns: 1fr 1fr; gap: 4px; margin-bottom: 22px; padding: 4px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--color-border); background: rgba(12, 16, 22, 0.6); }
.period-switch[hidden] { display: none; }
.period-switch__thumb {
  position: absolute;
  z-index: -1;
  top: 4px;
  bottom: 4px;
  left: 0;
  width: var(--thumb-w, 0px);
  transform: translateX(var(--thumb-x, 0px));
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(237, 241, 244, 0.13), rgba(237, 241, 244, 0.04));
  box-shadow: inset 0 0 0 1px var(--color-border-strong), 0 8px 22px -10px rgba(134, 229, 242, 0.55);
  transition: transform 520ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 420ms ease;
}
/* A thread of the spectrum under the pill, wider and brighter on yearly: drawn at its yearly width and scaled down for monthly. */
.period-switch__thumb::after { content: ""; position: absolute; left: 12%; right: 12%; bottom: -1px; height: 1px; border-radius: 1px; background: var(--split-light); opacity: 0.5; transform: scaleX(0.684); transition: opacity 420ms ease, transform 520ms cubic-bezier(0.22, 1, 0.36, 1); }
.period-switch[data-on="year"] .period-switch__thumb { box-shadow: inset 0 0 0 1px var(--color-border-strong), 0 10px 26px -10px rgba(154, 140, 255, 0.65); }
.period-switch[data-on="year"] .period-switch__thumb::after { transform: none; opacity: 1; }
/* Placed once before it is seen, so it does not slide in from the left on load. */
.period-switch:not(.is-placed) .period-switch__thumb { opacity: 0; transition: none; }
.period-switch button { position: relative; display: inline-flex; align-items: baseline; justify-content: center; gap: 8px; padding: 9px 18px; border: 0; border-radius: 999px; background: none; font-family: var(--font-label); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-muted); cursor: pointer; transition: color 320ms ease; }
.period-switch button:hover, .period-switch button[aria-pressed="true"] { color: var(--color-ink); }
.period-switch button:focus-visible { outline: 2px solid var(--band-ice); outline-offset: 2px; }
.period-switch button small { font-size: 10.5px; letter-spacing: 0.08em; color: var(--band-ice); transition: text-shadow 420ms ease; }
.period-switch button[aria-pressed="true"] small { text-shadow: 0 0 12px rgba(134, 229, 242, 0.7); }
.band-tier__save { margin-top: -4px; font-size: 14px; color: var(--band-ice); }
.band-tier__price [data-when] { display: inline-block; }
@keyframes price-in {
  from { opacity: 0; transform: translateY(12px) scale(0.98); filter: blur(6px); }
  to { opacity: 1; transform: none; filter: none; }
}
.is-entering { animation: price-in 560ms cubic-bezier(0.22, 1, 0.36, 1) both; animation-delay: var(--delay, 0ms); }
@media (prefers-reduced-motion: reduce) {
  .period-switch__thumb, .period-switch__thumb::after, .period-switch button { transition: none; }
  .is-entering { animation: none; }
}

/* Plans side by side, row by row. */
.plan-table th, .plan-table td { padding: 14px 16px; border-bottom: 1px solid var(--color-border); font-size: 14.5px; vertical-align: top; }
.plan-table thead th { font-family: var(--font-label); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--color-muted); }
.plan-table tbody th { font-weight: 400; color: var(--color-muted); white-space: normal; }
.plan-table td { color: var(--color-ink); }
.plan-table .plan-table__group th { padding-top: 30px; font-family: var(--font-label); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--color-ink); }
.pricing-note { margin-top: 20px; max-width: 72ch; font-size: 14px; color: var(--color-muted); }

@media (max-width: 960px) {
  .page-hero__inner, .feature-row, .faq-wrap { grid-template-columns: 1fr; }
  .feature-row:nth-child(even) .feature-row__copy { order: 0; }
}
@media (max-width: 760px) {
  .showcase-grid { grid-template-columns: 1fr; }
  .showcase-split, .showcase-films { grid-template-columns: 1fr; }
  .phone-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------------------------------------------------------------- phones */

@media (max-width: 960px) {
  #session { padding-bottom: 8px; }
  .session-card { width: min(84vw, 380px); }
}

/* One icon set, one stroke width, one size per context. */
.icon {
  width: 15px;
  height: 15px;
  flex: none;
  color: var(--color-muted);
  vertical-align: -2px;
}
.session-card__no {
  display: inline-flex;
  align-items: center;
  gap: 9px;
}
.session-card__no .icon { width: 16px; height: 16px; color: var(--band-ice); }
.beam-step__no {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.beam-step__no .icon { width: 17px; height: 17px; color: var(--color-ink); }
.band-tier__name {
  display: inline-flex;
  align-items: center;
  gap: 9px;
}
.band-tier__name .icon { width: 16px; height: 16px; }
.band-tier--lit .band-tier__name .icon { color: var(--color-accent); }

.footer__social {
  display: flex;
  gap: 8px;
  margin-top: 4px;
}
.footer__social a {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 8px;
  box-shadow: inset 0 0 0 1px var(--color-border);
  color: #B4BDC7;
  transition: color 200ms ease, box-shadow 200ms ease, translate 300ms var(--ease-slow);
}
.footer__social a:hover {
  color: var(--color-ink);
  box-shadow: inset 0 0 0 1px var(--color-border-strong);
  translate: 0 -2px;
}
.footer__social .icon { width: 18px; height: 18px; color: inherit; }

@media (max-width: 640px) {
  .track-bar__hint { display: none; }
  .session-card { width: 84vw; padding: 20px; }
  .session-card__log { font-size: 12px; }
  .session-card__no, .session-card__foot { font-size: 12px !important; }
  .track-bar { font-size: 12px; }
  .hero--refract h1 { font-size: clamp(38px, 10vw, 52px); }
  .band-key { font-size: 13px; }
  .footer__base { font-size: 12px; }
  .refractor__note { font-size: 12px; }
}

/* Nothing on the page may scroll sideways. */
html, body { overflow-x: clip; max-width: 100%; }

@media (prefers-reduced-motion: reduce) {
  .session-card, .track-bar__fill { transition: none !important; }
}

/* The official Doko Agent logo in the nav and footer. */
.nav__logo { width: 28px; height: 28px; border-radius: 7px; box-shadow: 0 0 0 1px rgba(237, 241, 244, 0.16); flex: none; }

/* The company, linked in the footer only. */
.footer__base a:hover { color: var(--color-ink); }