:root {
  --ink: #101426;
  --ink-soft: rgba(16, 20, 38, 0.66);
  --ink-faint: rgba(16, 20, 38, 0.42);
  --copper: #c2501c;
  /* Second accent, locked 30 July with the mark. Copper is the brand's steady
     voice; red is the one that says a thing is live right now. It carries the
     mark, the word OPEN, and nothing else without a reason. */
  --red: #e4222c;
  --red-soft: rgba(228, 34, 44, 0.12);
  --paper: #ffffff;
  --paper-soft: #f8f8f9;
  --line: rgba(16, 20, 38, 0.1);
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Hoefler Text",
    Garamond, serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial,
    sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --motion-fast: 180ms;
  --motion-panel: 280ms;
  --motion-section: 480ms;
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-state: cubic-bezier(.65, 0, .35, 1);
  --nav-height: 76px;
  --cinematic-nav-height: var(--nav-height);
  --layer-base: 0;
  --layer-hero: 10;
  --layer-nav: 40;
  --layer-overlay: 60;
}

* {
  box-sizing: border-box;
}

html {
  background: var(--paper);
  scroll-behavior: smooth;
}

body {
  margin: 0;
  overflow-x: clip;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
}

button,
input,
select,
textarea {
  font: inherit;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

a {
  color: var(--copper);
  text-decoration: none;
}

@media (hover: hover) {
  a:hover {
    color: var(--ink);
  }
}

:focus-visible {
  /* Solid accent, not 38% alpha. The faded ring measured about 1.7:1 against
     paper, under the 3:1 a focus indicator needs to be seen. Solid is 4.7:1. */
  outline: 3px solid var(--copper);
  outline-offset: 4px;
}

/* Text for screen readers only: read aloud, never painted. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* The skip link stays hidden until a keyboard reaches it. */
.skip-link:focus {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 200;
  width: auto;
  height: auto;
  margin: 0;
  padding: 12px 18px;
  clip: auto;
  clip-path: none;
  background: var(--ink);
  color: var(--paper);
  border-radius: 8px;
  font-size: 15px;
  text-decoration: none;
}

.serif {
  font-family: var(--serif);
  font-weight: 400;
}

.mono {
  font-family: var(--mono);
}

.wrap {
  width: min(1180px, calc(100% - 48px));
  margin-inline: auto;
}

/* The photo, the scrim, and the copy stack on POSITIVE layers, the way the
   shipped hero did before this rebuild. Negative z-index inside an isolated
   stacking context, and overflow:clip, both render inconsistently on older
   iOS, which left the hero a flat ink block on a real phone. */
/* Both selectors on purpose. Every cinematic hero also carries .hero, and the
   plain .hero padding further down the file has equal specificity, so it won and
   the nav-aware padding here never applied above 700px. The compound selector
   keeps the fixed bar off the eyebrow and the headline. */
.cinematic-hero,
.hero.cinematic-hero {
  position: relative;
  min-height: 620px;
  min-height: min(860px, 100svh);
  overflow: hidden;
  /* 190px of empty photograph sat under the trust line at 1440, 118px on a
     phone. The hero ends when the content ends now. */
  padding: max(clamp(88px, 11vw, 148px), calc(var(--cinematic-nav-height) + 28px)) 0 clamp(64px, 7vw, 104px);
  background: var(--ink);
  color: var(--paper);
}

.cinematic-media,
.cinematic-scrim {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.cinematic-media {
  z-index: 1;
  object-fit: cover;
  object-position: center;
  transform: scale(1.025);
  animation: cinematic-settle 800ms var(--ease-out) both;
}

.cinematic-scrim {
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(8, 11, 24, .9) 0%, rgba(8, 11, 24, .58) 47%, rgba(8, 11, 24, .18) 74%),
    linear-gradient(0deg, rgba(8, 11, 24, .68) 0%, transparent 46%);
}

.cinematic-content {
  position: relative;
  z-index: var(--layer-hero);
}

.hero-product {
  display: block;
  width: 100%;
}

.cinematic-hero .hero-grid {
  align-items: center;
}

.cinematic-hero .hero-message {
  color: var(--paper);
}

.cinematic-hero .eyebrow,
.cinematic-hero h1 em {
  color: #f0a17b;
}

.cinematic-hero .hero-copy {
  color: rgba(255, 255, 255, .8);
}

.cinematic-hero .small-note {
  color: rgba(255, 255, 255, .72);
}

.cinematic-hero .hero-product {
  max-width: 470px;
  justify-self: end;
}

/* The homepage wears the wide phone-thread scene from the design handoff. That
   file is 2400x1024 with the canvas extended leftward on purpose, so the phone
   lands near 60% and the OPEN sign near 77%, leaving the left third dark enough
   to carry the headline. 71% 46% is the crop the handoff specifies.
   Before this, the homepage was showing the annotated back-office scene, which
   is Siesie's photograph, so the two pages opened with the same picture. */
.home-hero .cinematic-media {
  object-position: 71% 46%;
}

.cinematic-hero .screen-top {
  color: rgba(16, 20, 38, .72);
}

.cinematic-hero .screen-top .status {
  color: #247447;
}

.cinematic-hero .result-actions a {
  color: #f0a17b;
}

.synkasa-hero .cinematic-media {
  object-position: 58% center;
}

.synkasa-stage {
  animation: synkasa-stage-settle var(--motion-panel) var(--ease-out) both;
}

.product-status-list {
  display: grid;
  gap: 10px;
}

.product-status-list > div {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  min-height: 52px;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--paper-soft);
  color: var(--ink);
}

.product-status-list > div span {
  color: var(--copper);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .08em;
}

.product-status-list > div strong {
  font-size: 14px;
  line-height: 1.35;
}

.synkasa-story .story-visual {
  overflow: hidden;
  border-radius: 22px;
}

.synkasa-story .story-step {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.synkasa-story .story-step h3 {
  margin: 18px 0 12px;
  font-family: var(--serif);
  font-size: clamp(34px, 4vw, 52px);
  font-weight: 400;
  letter-spacing: -.025em;
  line-height: 1;
}

.synkasa-story .story-step p {
  max-width: 32em;
  margin: 0;
  color: var(--ink-soft);
  font-size: 17px;
  line-height: 1.65;
}

.siesie-hero .role-list {
  border-color: rgba(255, 255, 255, .18);
  background: var(--ink);
  box-shadow: 0 28px 64px -42px rgba(0, 0, 0, .78);
}

.siesie-hero .role-row strong {
  color: var(--paper);
}

.siesie-hero .role-row p {
  color: rgba(255, 255, 255, .7);
}

.siesie-story .story-visual {
  min-height: min(620px, calc(100svh - var(--nav-height) - 56px));
  overflow: hidden;
  border-radius: 22px;
  background: var(--ink);
}

.siesie-story .story-visual img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.siesie-story .role-card {
  min-height: max(440px, 66svh);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* A column flex parent stretched the number into a full-width bar. */
.role-card .pill {
  align-self: flex-start;
}

/* Written for a dark cinematic hero. /synkasa now sits on paper, where white
   text made the price and the guarantee invisible. Ink by default, white only
   where the hero is actually dark. Fixed 31 July 2026. */
.hero-trust {
  position: relative;
  z-index: var(--layer-hero);
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  margin-top: clamp(22px, 3vw, 40px);
  padding-top: 16px;
  border-top: 1px solid var(--line);
  color: rgba(16, 20, 38, .62);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .08em;
  line-height: 1.5;
  text-transform: uppercase;
}

.hero-trust span:first-child {
  color: var(--copper);
}

.hero.dark .hero-trust,
.hero.cinematic-hero .hero-trust {
  border-top-color: rgba(255, 255, 255, .16);
  color: rgba(255, 255, 255, .86);
}

.hero.dark .hero-trust span:first-child,
.hero.cinematic-hero .hero-trust span:first-child {
  color: #fff;
}

.hero-trust span {
  display: inline-flex;
  min-height: 24px;
  align-items: center;
}

.paper-rise {
  position: relative;
  z-index: 12;
  margin-top: clamp(-72px, -6vw, -44px);
  border-radius: clamp(28px, 4vw, 58px) clamp(28px, 4vw, 58px) 0 0;
  background: var(--paper);
}

.compact-hero {
  min-height: min(680px, 82svh);
}

.sticky-story {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(300px, .7fr);
  gap: clamp(32px, 7vw, 92px);
  align-items: start;
}

.story-visual {
  position: sticky;
  top: calc(var(--nav-height) + 28px);
}

.story-steps {
  display: grid;
  gap: clamp(24px, 4vw, 48px);
}

.story-step {
  min-height: 58vh;
  opacity: .42;
  transform: translateY(18px);
  transition:
    opacity var(--motion-panel) var(--ease-out),
    transform var(--motion-panel) var(--ease-out);
}

.story-step.is-active {
  opacity: 1;
  transform: none;
}

/* Pages built on the handoff hero keep the solid sticky bar: the hero starts
   below it, so there is nothing to see through. Only the older full-bleed
   cinematic pages still float a transparent bar over their photograph. */
body[data-cinematic]:not(:has([data-photo-hero])) #fs-nav {
  border-bottom-color: transparent !important;
  background: transparent !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

body[data-cinematic] #fs-nav.is-past-hero {
  border-bottom-color: rgba(16, 20, 38, .08) !important;
  background: var(--paper) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  backdrop-filter: blur(12px) !important;
}

body[data-cinematic] #fs-nav.is-past-hero .fs-grid {
  padding: 12px 24px 10px !important;
}

body[data-cinematic] #fs-nav [data-navlink],
body[data-cinematic] #fs-nav [data-navcta] {
  display: inline-flex;
  min-width: 44px;
  min-height: 44px;
  align-items: center;
  justify-content: center;
}

body[data-cinematic]:not(:has([data-photo-hero])) #fs-nav:not(.is-past-hero) [data-navlink],
body[data-cinematic]:not(:has([data-photo-hero])) #fs-nav:not(.is-past-hero) [data-navcta] {
  padding-inline: 12px !important;
  border-radius: 5px;
  background: var(--ink) !important;
  color: var(--paper) !important;
}

/* Her iPad, 30 July: over the hero every nav item wears its own ink chip, and on
   a touch width the four links, the wordmark and the two actions wrapped into
   three rows of loose pills that landed on top of the headline and the eyebrow.
   One scrim behind the whole bar instead of seven separate chips, a row that is
   not allowed to wrap, and the bar reads as a bar again. */
@media (max-width: 960px) {
  #fs-nav .fs-grid > div {
    flex-wrap: nowrap !important;
  }

  body[data-cinematic]:not(:has([data-photo-hero])) #fs-nav:not(.is-past-hero) {
    background: linear-gradient(
      180deg,
      rgba(8, 11, 24, .94) 0%,
      rgba(8, 11, 24, .82) 58%,
      rgba(8, 11, 24, 0) 100%
    ) !important;
  }

  /* White type belongs to the bar that floats over the photograph. The
     handoff-hero pages keep their solid white bar, so these two rules carry
     the same :has guard as the scrim above them. Without it the wordmark and
     the four links were painted white on white on index and siesie, and the
     bar read as an empty band on every phone. Her iPhone, 30 July. */
  body[data-cinematic]:not(:has([data-photo-hero])) #fs-nav:not(.is-past-hero) [data-navlink] {
    padding-inline: 4px !important;
    border-radius: 0;
    background: transparent !important;
    color: rgba(255, 255, 255, .84) !important;
  }

  body[data-cinematic]:not(:has([data-photo-hero])) #fs-nav:not(.is-past-hero) [data-navcta] {
    background: var(--copper) !important;
  }

  body[data-cinematic] #fs-nav [data-navlink],
  body[data-cinematic] #fs-nav [data-navcta] {
    min-height: 40px;
  }
}

/* ---------- the interaction layer ----------
   Nothing on the page answered a finger or a cursor. Press feedback is the one
   state a touch device can actually show, so it goes on every pressable thing.
   Hover sits behind hover and fine pointer, because a tap on a phone fires hover
   and leaves the card stuck in its lifted state. */
.button,
button.button,
.choice,
.card-link,
.path-card,
.free-card,
.role-card {
  transition:
    background var(--motion-fast) var(--ease-out),
    border-color var(--motion-fast) var(--ease-out),
    color var(--motion-fast) var(--ease-out),
    box-shadow var(--motion-panel) var(--ease-out),
    transform var(--motion-fast) var(--ease-out);
}

.button:active,
button.button:active,
.choice:active,
.card-link:active {
  transform: scale(.975);
}

.path-card:active,
.free-card:active,
.role-card:active {
  transform: scale(.995);
}

@media (hover: hover) and (pointer: fine) {
  .path-card:hover,
  .free-card:hover,
  .role-card:hover {
    border-color: rgba(194, 80, 28, .38);
    box-shadow: 0 18px 40px -28px rgba(16, 20, 38, .45);
    transform: translateY(-2px);
  }

  .path-card.featured:hover,
  .form-card.dark:hover {
    border-color: rgba(240, 161, 123, .5);
  }

  .card-link:hover {
    color: var(--ink);
  }

  .path-card.featured:hover .card-link {
    color: var(--paper);
  }
}

/* One authored entrance, driven by the scroll position itself rather than by a
   script. A browser that does not support view timelines never applies the
   animation at all and simply paints the content, so there is no state in which
   a reader can be left looking at an empty page. Only opacity and transform
   move, so it stays on the compositor. */
/* Deliberately no opacity in this keyframe. A fade needs a hidden starting
   state, and any starting state can strand content invisible when a browser
   reports scroll progress differently than expected, which is exactly what a
   full-height capture does. A settle that only moves can fail in one direction:
   the element sits fifteen pixels low and is perfectly readable. */
@keyframes settle-in {
  from {
    transform: translateY(15px);
  }

  to {
    transform: none;
  }
}

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .section-head,
    .card-grid > *,
    .free-grid > *,
    .role-grid > *,
    .workflow,
    .journey-strip,
    .proof-card,
    .site-close .wrap > * {
      animation: settle-in linear both;
      animation-timeline: view();
      animation-range: entry 4% entry 34%;
    }
  }
}

@keyframes cinematic-settle {
  to {
    transform: none;
  }
}

@keyframes synkasa-stage-settle {
  from {
    transform: perspective(900px) rotateY(-2deg) rotate(-1deg);
  }

  to {
    transform: none;
  }
}

.hero {
  overflow: hidden;
  padding: clamp(72px, 9vw, 132px) 0;
  background: var(--paper);
}

/* Supporting pages get a quieter paper stage than the photographic heroes.
   .hero.dark keeps its own background: two classes beat one. */
.compact-hero {
  min-height: auto;
  padding: clamp(76px, 9vw, 120px) 0 clamp(66px, 8vw, 104px);
  border-bottom: 1px solid var(--line);
  background:
    radial-gradient(circle at 85% 15%, rgba(194, 80, 28, .12), transparent 32%),
    var(--paper);
}

.hero.dark,
.section.dark,
.site-close {
  background:
    radial-gradient(
      circle at 82% 12%,
      rgba(194, 80, 28, 0.28),
      transparent 33%
    ),
    linear-gradient(145deg, #202a50 0%, #101426 58%, #080b18 100%);
  color: var(--paper);
}

.hero-grid,
.split {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(340px, 0.95fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
}

/* The hero is the one place centring earns its keep: the message and the panel
   are close in height, and the photograph reads better with both centred. */
.hero-grid {
  align-items: center;
}

/* Centring a 245px column beside a 528px one left 283px of white above and
   below the short side. free.html and portfolio.html both showed it at 1440.
   Aligning to the top removes the float, and the short column then travels with
   the long one instead of stranding a hole beside it. */
@media (min-width: 901px) {
  .split > :first-child {
    position: sticky;
    top: calc(var(--nav-height, 76px) + 28px);
  }
}

.eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 14px;
  color: var(--copper);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  line-height: 1.5;
  text-transform: uppercase;
}

.eyebrow::before {
  width: 46px;
  height: 1px;
  flex: 0 0 auto;
  background: currentColor;
  content: "";
}

.hero.dark .eyebrow,
.section.dark .eyebrow,
.site-close .eyebrow {
  color: #f0a17b;
}

h1,
h2,
h3,
p {
  text-wrap: pretty;
}

.hero h1 {
  max-width: 9.5em;
  margin: 0;
  text-wrap: balance;
  font-family: var(--serif);
  font-size: clamp(54px, 8vw, 116px);
  font-weight: 400;
  letter-spacing: -0.035em;
  line-height: 0.92;
}

.hero h1 em,
.section-title em {
  color: var(--copper);
  font-weight: 400;
}

.hero-copy {
  max-width: 46ch;
  margin: 18px 0 0;
  color: var(--ink-soft);
  font-size: clamp(17px, 1.7vw, 21px);
  line-height: 1.58;
}

.hero.dark .hero-copy,
.section.dark .section-intro,
.site-close p {
  color: rgba(255, 255, 255, 0.7);
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 22px;
}

.button,
button.button {
  display: inline-flex;
  min-height: 46px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 18px;
  border: 1px solid transparent;
  border-radius: 5px;
  background: var(--ink);
  color: var(--paper);
  cursor: pointer;
  font-size: 13px;
  line-height: 1.2;
  transition:
    background 180ms ease,
    border-color 180ms ease,
    color 180ms ease,
    transform 180ms ease;
}

.button.secondary,
button.button.secondary {
  border-color: var(--line);
  background: var(--paper);
  color: var(--ink);
}

@media (hover: hover) {
  .button:hover,
  button.button:hover {
    background: var(--copper);
    color: var(--paper);
    transform: translateY(-1px);
  }

  .button.secondary:hover,
  button.button.secondary:hover {
    border-color: var(--ink);
    background: var(--paper);
    color: var(--ink);
  }

  .dark .button.secondary:hover,
  .site-close .button.secondary:hover {
    border-color: var(--paper);
    color: var(--paper);
  }
}

.dark .button.secondary,
.site-close .button.secondary {
  border-color: rgba(255, 255, 255, 0.25);
  background: transparent;
  color: var(--paper);
}

.button[disabled] {
  cursor: wait;
  opacity: 0.58;
  transform: none;
}

/* 126px above and 126px below every section put a quarter of a laptop screen of
   nothing between one idea and the next. Sections still separate clearly at 92,
   and the page loses roughly 400px of empty scroll. */
.section {
  padding: clamp(56px, 6.5vw, 92px) 0;
}

.section.soft {
  border-block: 1px solid rgba(16, 20, 38, 0.06);
  background: var(--paper-soft);
}

/* Stacked, not split. The two-column head pinned a 53px paragraph to the bottom
   of a 198px headline, so every section on every page opened with about 145px of
   white in the right column. Measured at 1024, 1180 and 1440 on 30 July. One
   column, headline then intro, closes that hole everywhere at once. */
.section-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  margin-bottom: clamp(24px, 3vw, 38px);
}

/* Left on "pretty" on purpose. Section titles carry a grey opening phrase inside
   a span, and "balance" evened the line lengths by breaking that phrase across
   two lines, which reads worse than a slightly ragged right edge. The hero
   headline has no span and does take "balance". */
.section-title {
  max-width: 19ch;
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(38px, 5vw, 66px);
  font-weight: 400;
  letter-spacing: -0.025em;
  line-height: 1;
}

.section-title span {
  color: var(--ink-faint);
}

.section-intro {
  max-width: 64ch;
  margin: 0;
  color: var(--ink-soft);
  font-size: 16px;
  line-height: 1.65;
}

.card-grid,
.free-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.path-card,
.proof-card,
.free-card,
.form-card,
.role-card {
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--paper);
}

.path-card,
.free-card,
.form-card,
.role-card {
  padding: 26px;
}

.path-card.featured,
.form-card.dark {
  border-color: transparent;
  background: var(--ink);
  color: var(--paper);
}

.path-card h3,
.free-card h3,
.form-card h3,
.role-card h3 {
  margin: 16px 0 10px;
  font-family: var(--serif);
  font-size: clamp(25px, 2.5vw, 34px);
  font-weight: 400;
  letter-spacing: -0.015em;
  line-height: 1.08;
}

.path-card p,
.free-card p,
.form-card p,
.role-card p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 14px;
  line-height: 1.62;
}

.path-card.featured p,
.form-card.dark p {
  color: rgba(255, 255, 255, 0.64);
}

.card-link {
  display: inline-flex;
  margin-top: 16px;
  align-items: center;
  border: 0;
  background: none;
  color: var(--copper);
  cursor: pointer;
  font-size: 13px;
  padding: 0;
}

.path-card.featured .card-link {
  color: #f0a17b;
}

.screen {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: var(--paper);
  box-shadow: 0 32px 70px -50px rgba(16, 20, 38, 0.55);
}

.screen-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--line);
  color: var(--ink-faint);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.status {
  color: #2f8f5b;
}

.screen-body {
  padding: 20px;
}

.choice-list {
  display: grid;
  gap: 8px;
}

.choice {
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--paper);
  color: var(--ink);
  cursor: pointer;
  text-align: left;
}

.choice:hover,
.choice.is-selected {
  border-color: var(--copper);
  background: rgba(194, 80, 28, 0.05);
}

.result {
  min-height: 180px;
  margin-top: 14px;
  padding: 20px;
  border-radius: 14px;
  background: var(--ink);
  color: var(--paper);
}

.result .mono,
.result-label {
  color: #f0a17b;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.result h3,
.result strong {
  display: block;
  margin: 18px 0 10px;
  font-family: var(--serif);
  font-size: clamp(26px, 3vw, 38px);
  font-weight: 400;
  line-height: 1.03;
}

.result p,
.result > span:not(.mono) {
  display: block;
  margin: 0;
  color: rgba(255, 255, 255, 0.64);
  font-size: 14px;
  line-height: 1.58;
}

.result-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 20px;
}

.result-actions a {
  font-size: 13px;
}

.result-actions a:first-child {
  color: rgba(255, 255, 255, 0.62);
}

.site-close {
  padding: clamp(84px, 10vw, 136px) 0;
}

.site-close h2 {
  max-width: 13em;
  margin: 16px 0 20px;
  font-family: var(--serif);
  font-size: clamp(42px, 6vw, 78px);
  font-weight: 400;
  letter-spacing: -0.03em;
  line-height: 0.98;
}

.site-close p {
  max-width: 38em;
  margin: 0;
  font-size: 16px;
  line-height: 1.65;
}

.proof-grid {
  display: grid;
  gap: 24px;
}

.proof-card {
  display: grid;
  grid-template-columns: minmax(280px, 0.9fr) minmax(0, 1.1fr);
  overflow: hidden;
}

.proof-media {
  min-height: 330px;
  background: var(--ink);
}

.proof-media video {
  width: 100%;
  height: 100%;
  min-height: 330px;
  display: block;
  object-fit: cover;
}

.proof-copy {
  padding: clamp(28px, 4vw, 48px);
}

.proof-copy h3 {
  margin: 16px 0 12px;
  font-family: var(--serif);
  font-size: clamp(30px, 4vw, 48px);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1;
}

.proof-copy p {
  margin: 0;
  color: var(--ink-soft);
  line-height: 1.62;
}

.steal-flow {
  margin-top: 24px;
  padding: 16px;
  border-left: 3px solid var(--copper);
  background: var(--paper-soft);
  color: var(--ink-soft);
  font-size: 13.5px;
  line-height: 1.55;
}

.steal-flow strong {
  color: var(--ink);
}

.free-grid {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.free-card {
  grid-column: span 2;
}

.free-card:nth-child(4) {
  grid-column: 2 / span 2;
}

.free-card:nth-child(5) {
  grid-column: 4 / span 2;
}

.script-box {
  padding: clamp(28px, 4vw, 46px);
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--paper);
}

.script-copy {
  margin: 24px 0 0;
  padding: 20px;
  border: 1px dashed rgba(16, 20, 38, 0.2);
  border-radius: 12px;
  background: var(--paper-soft);
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.75;
  white-space: pre-line;
}

.calc {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 0.8fr);
  gap: 28px;
  align-items: stretch;
}

.fields,
.form-grid-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.field {
  display: grid;
  gap: 8px;
}

.field.full {
  grid-column: 1 / -1;
}

.field label,
label.field {
  color: var(--ink);
  font-size: 13px;
  line-height: 1.45;
}

.field input,
.field select,
.field textarea,
label.field input,
label.field select,
label.field textarea {
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  border: 1px solid rgba(16, 20, 38, 0.16);
  border-radius: 8px;
  background: var(--paper);
  color: var(--ink);
}

.field textarea,
label.field textarea {
  min-height: 130px;
  resize: vertical;
}

.field small {
  color: var(--ink-faint);
  line-height: 1.45;
}

.calc-result,
.audit-output {
  min-height: 100%;
  padding: clamp(26px, 4vw, 42px);
  border-radius: 20px;
  background: var(--ink);
  color: var(--paper);
}

.calc-number {
  margin: 20px 0 8px;
  color: #f0a17b;
  font-family: var(--serif);
  font-size: clamp(54px, 7vw, 86px);
  letter-spacing: -0.04em;
  line-height: 0.9;
}

.calc-secondary {
  margin-top: 20px;
  color: rgba(255, 255, 255, 0.68);
  font-size: 14px;
}

.formula {
  margin-top: 22px;
  color: rgba(255, 255, 255, 0.46);
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1.6;
}

.form-error,
.form-status {
  min-height: 1.4em;
  margin: 12px 0 0;
  color: #9f361c;
  font-size: 13px;
  line-height: 1.5;
}

/* Flex, not a fixed column count. A grid of five steps in three columns leaves a
   sixth cell with nothing in it, and that hole reads as a grey box inside the
   border however the container is painted. Wrapping flex items grow to fill
   whatever is left of the last row, so a strip of any length closes itself:
   five steps, siesie's seven, the twelve on the fit page. */
.workflow,
.journey-strip {
  display: flex;
  flex-wrap: wrap;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--paper);
}

.workflow-step,
.journey-step {
  /* 18% basis puts five on a row and leaves no room for a sixth. */
  flex: 1 1 18%;
  min-width: 0;
  min-height: 120px;
  padding: 20px;
  background: var(--paper);
  box-shadow: 1px 0 0 var(--line), 0 1px 0 var(--line);
}

.workflow-step strong,
.journey-step strong {
  display: block;
  margin-top: 20px;
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 400;
}

.role-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
}

.role-card {
  min-height: 240px;
}

.role-list {
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.05);
}

.role-row {
  display: grid;
  grid-template-columns: 38px minmax(120px, 0.8fr) minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  min-height: 78px;
  padding: 14px 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.role-row:last-child {
  border-bottom: 0;
}

.role-row p {
  margin: 0;
  color: rgba(255, 255, 255, 0.58);
  font-size: 12px;
  line-height: 1.5;
}

.role-number {
  color: #f0a17b;
  font-family: var(--serif);
  font-size: 25px;
}

.audit-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 0.9fr);
  gap: 28px;
}

.audit-list {
  display: grid;
  gap: 10px;
}

.audit-item,
.check-option {
  display: flex;
  min-height: 52px;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--paper);
  cursor: pointer;
  line-height: 1.45;
}

/* flex-shrink would squeeze these to 13px next to a long label, so each box
   renders a different size down the list. Hold the square. */
.audit-item input,
.check-option input {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  accent-color: var(--copper);
}

.audit-output h3 {
  margin: 18px 0 10px;
  font-family: var(--serif);
  font-size: clamp(36px, 5vw, 56px);
  font-weight: 400;
  line-height: 0.98;
}

.audit-output p {
  color: rgba(255, 255, 255, 0.64);
  line-height: 1.6;
}

.form-shell {
  max-width: 820px;
  margin-inline: auto;
  padding: clamp(28px, 5vw, 54px);
  border: 1px solid var(--line);
  border-radius: 24px;
  background: var(--paper);
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

.form-card {
  min-height: 380px;
}

.form-card .button {
  margin-top: 30px;
}

.small-note,
noscript {
  display: block;
  margin-top: 18px;
  color: var(--ink-faint);
  font-size: 13px;
  line-height: 1.55;
}

.pill {
  display: inline-flex;
  padding: 6px 9px;
  border-radius: 999px;
  background: rgba(194, 80, 28, 0.09);
  color: var(--copper);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* The rig is drawn in percentages of this box, so the box holds a fixed
   square and the cords, the pegs and the board keep their relationship at
   every column width. Change the ratio and the pegs slide off the corners. */
.open-sign {
  position: relative;
  aspect-ratio: 1 / 1;
  min-height: 340px;
}

/* The rig hangs from one point. Each cord is a bar pinned at the apex and
   swung 45 degrees, and its peg is a child pinned to the far end, so the peg
   travels with the cord instead of being placed by a second set of numbers
   that drift the moment the column changes width. */
.open-cord {
  position: absolute;
  top: 4%;
  left: 50%;
  z-index: 2;
  width: 60%;
  height: 3px;
  border-radius: 99px;
  background: var(--ink);
  transform-origin: 0 50%;
}

.open-cord.right {
  transform: rotate(45deg);
}

.open-cord.left {
  transform: rotate(135deg);
}

.open-cord::after {
  position: absolute;
  top: 50%;
  right: 0;
  width: clamp(17px, 2vw, 26px);
  height: clamp(17px, 2vw, 26px);
  border-radius: 999px;
  background: var(--red);
  content: "";
  transform: translate(50%, -50%);
}

.open-peg {
  position: absolute;
  top: 4%;
  left: 50%;
  z-index: 2;
  width: clamp(17px, 2vw, 26px);
  height: clamp(17px, 2vw, 26px);
  border-radius: 999px;
  background: var(--red);
  transform: translate(-50%, -50%);
}

.open-board {
  position: absolute;
  inset: 46% 5% 4%;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 28px;
  background: linear-gradient(160deg, #ffffff, #e6e7eb);
  box-shadow: 0 70px 100px -58px rgba(16, 20, 38, 0.6);
  color: var(--red);
  font-size: clamp(64px, 9vw, 132px);
  font-weight: 800;
  letter-spacing: 0.01em;
  transform: perspective(900px) rotateY(-8deg) rotate(-4deg);
}

/* The SynKasa lede is set in the serif italic so the sentence under the
   headline reads as a spoken line rather than a second deck. */
.synkasa-hero .hero-lede {
  max-width: 26ch;
  font-family: var(--serif);
  font-style: italic;
}

.hero-formerly {
  margin: 10px 0 0;
  color: var(--ink-faint);
  font-family: var(--serif);
  font-size: 15px;
  font-style: italic;
}

.form-card.dark .pill,
.featured .pill {
  background: rgba(240, 161, 123, 0.13);
  color: #f0a17b;
}

.faq-list {
  border-top: 1px solid var(--line);
}

.faq-list details {
  border-bottom: 1px solid var(--line);
}

.faq-list summary {
  position: relative;
  padding: 20px 42px 20px 0;
  cursor: pointer;
  font-family: var(--serif);
  font-size: 22px;
  list-style: none;
}

.faq-list summary::-webkit-details-marker {
  display: none;
}

.faq-list summary::after {
  position: absolute;
  top: 18px;
  right: 4px;
  color: var(--copper);
  content: "+";
  font-family: var(--sans);
  font-size: 26px;
}

.faq-list details[open] summary::after {
  content: "−";
}

.faq-list details p {
  margin: 0;
  padding: 0 40px 22px 0;
  color: var(--ink-soft);
  line-height: 1.62;
}

@media (max-width: 900px) {
  /* 16px is the threshold under which iOS zooms the page on focus. Every
     control was 13px, so one tap on a form field shifted the whole layout. */
  .field input,
  .field select,
  .field textarea,
  label.field input,
  label.field select,
  label.field textarea {
    font-size: 16px;
  }

  .section {
    padding: clamp(44px, 5.5vw, 64px) 0;
  }

  .hero-grid,
  .split,
  .section-head,
  .proof-card,
  .calc,
  .audit-grid {
    grid-template-columns: 1fr;
  }

  .card-grid,
  .role-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .free-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .free-card,
  .free-card:nth-child(4),
  .free-card:nth-child(5) {
    grid-column: auto;
  }

  .workflow-step,
  .journey-step {
    /* Three on a row from here down. */
    flex-basis: 30%;
  }

  .sticky-story {
    grid-template-columns: 1fr;
  }

  .synkasa-story .story-visual {
    position: static;
  }

  .siesie-story .story-visual {
    position: static;
    min-height: min(440px, 58vw);
  }

  .siesie-story .story-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  .synkasa-story .story-step,
  .siesie-story .story-step {
    min-height: 0;
    opacity: 1;
    transform: none;
  }

  .cinematic-hero .hero-product {
    justify-self: start;
  }
}

@media (max-width: 620px) {
  .wrap {
    width: min(100% - 32px, 1180px);
  }

  .hero {
    padding: 58px 0 72px;
  }

  /* The photograph carries its own labels. On a narrow crop they land
     behind the headline, so the scrim gets heavier here. */
  .cinematic-scrim {
    background:
      linear-gradient(180deg, rgba(8, 11, 24, .82) 0%, rgba(8, 11, 24, .68) 46%, rgba(8, 11, 24, .78) 100%),
      linear-gradient(90deg, rgba(8, 11, 24, .58) 0%, rgba(8, 11, 24, .34) 100%);
  }

  .hero h1 {
    font-size: clamp(48px, 16vw, 72px);
  }

  /* Phone density. Desktop spacing put 140px to 250px of empty page between
     every section here, and the numbered strips gave one short line its own
     120px box. */
  .section {
    padding: 42px 0;
  }

  .section-head {
    gap: 14px;
    margin-bottom: 24px;
  }

  .card-grid,
  .free-grid,
  .role-grid,
  .fields,
  .form-grid-fields,
  .form-grid {
    grid-template-columns: 1fr;
  }

  .workflow-step,
  .journey-step {
    flex-basis: 100%;
  }

  .path-card,
  .free-card,
  .form-card,
  .role-card {
    padding: 18px;
  }

  /* One row per step: number and label side by side, no empty box. */
  .workflow-step,
  .journey-step {
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 0;
    padding: 13px 16px;
  }

  .workflow-step strong,
  .journey-step strong {
    margin-top: 0;
    font-size: 19px;
    line-height: 1.25;
  }

  .workflow-step p,
  .journey-step p {
    flex-basis: 100%;
  }

  .proof-media,
  .proof-media video {
    min-height: 210px;
    max-height: 56vh;
  }

  /* contain, not cover: each clip has its title in the frame, and cover
     cropped it off the top. */
  .proof-media video {
    object-fit: contain;
  }

  .calc-result,
  .audit-output {
    padding: 20px;
  }

  /* Desktop min-heights that equalise side-by-side cards leave dead space
     once the cards stack. */
  .form-card,
  .path-card,
  .free-card {
    min-height: 0;
  }

  /* 28px between a label and the line under it reads as a hole on a phone. */
  .path-card h3,
  .free-card h3,
  .form-card h3,
  .role-card h3 {
    margin: 14px 0 8px;
  }

  .role-row {
    min-height: 0;
  }

  .site-close {
    padding: 48px 0;
  }

  .role-row {
    grid-template-columns: 34px 1fr;
  }

  .role-row p {
    grid-column: 2;
  }

  .open-sign {
    min-height: 330px;
  }

  .cinematic-hero .cinematic-media {
    object-position: 62% center;
    transform: scale(1.01);
  }

  /* Narrow crop for the wide scene: the handoff moves it to 74% 50% under 660px
     so the phone stays in frame instead of sliding off the right edge. */
  .home-hero .cinematic-media {
    object-position: 74% 50%;
  }

  .synkasa-hero .cinematic-media {
    object-position: 58% center;
  }

  .siesie-hero .cinematic-media {
    object-position: center;
  }

  .siesie-story .story-steps {
    grid-template-columns: 1fr;
  }

  .hero-trust {
    gap: 8px 14px;
  }
}

/* The stacked two-row bar. fsnav.js stacks the links onto their own row at this
   same width, so the reservation and the bar have to change at the same number
   or the hero eyebrow ends up underneath the pills. */
@media (max-width: 960px) {
  :root {
    --cinematic-nav-height: 118px;
  }

  .hero.cinematic-hero {
    padding-top: calc(var(--cinematic-nav-height) + 24px);
  }
}

/* An iPad in landscape is 1024 to 1366 css px wide, so a width breakpoint never
   catches it. Pointer does. Under 16px iOS zooms the whole page the moment a
   field takes focus, whichever way the tablet is turned. */
@media (pointer: coarse) {
  .field input,
  .field select,
  .field textarea,
  label.field input,
  label.field select,
  label.field textarea {
    font-size: 16px;
  }
}

/* Card columns follow the width the card actually needs, not a single tablet
   breakpoint. A card holds a serif headline of up to 34px, so below about 240px
   of content width the headline breaks across five or six lines. Two across
   needs 720px, three across needs 1024px. */
@media (min-width: 621px) and (max-width: 719px) {
  .card-grid,
  .free-grid,
  .role-grid,
  .form-grid,
  .siesie-story .story-steps {
    grid-template-columns: 1fr;
  }
}

@media (min-width: 901px) and (max-width: 1023px) {
  .card-grid,
  .free-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Three cards on two tracks left the third card alone with a whole empty cell
   beside it. An odd last card takes the full row instead, so the grid always has
   exactly as many cells as there are cards. */
@media (min-width: 720px) and (max-width: 1023px) {
  .card-grid > :last-child:nth-child(odd),
  .free-grid > :last-child:nth-child(odd),
  .role-grid > :last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }
}

/* The free page lays its five cards on six tracks so the short last row sits
   centred. Any override of that track count has to release the placements too,
   or cards four and five keep their old column numbers and collapse to 34px. */
@media (min-width: 621px) and (max-width: 1023px) {
  .free-card,
  .free-card:nth-child(4),
  .free-card:nth-child(5) {
    grid-column: auto;
  }
}

/* Without this the headline shrank as the screen grew: 72px on a phone at 620,
   then 54px on a tablet at 621, back to 72px at 900. Hold the phone size across
   the band so the curve only ever climbs. */
@media (min-width: 621px) and (max-width: 900px) {
  .hero h1 {
    font-size: clamp(72px, 8vw, 116px);
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .cinematic-media,
  .cinematic-hero .cinematic-media {
    animation: none;
    transform: none;
  }

  .synkasa-stage {
    animation: none;
    transform: none;
  }

  .story-visual {
    position: static;
  }

  .story-step {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ============================================================
   DESIGN HANDOFF BUILD - 30 July 2026
   Three pieces built to the pasted spec: the button shape, the
   photographic hero, and the nine-seconds proof replay.
   Values here are literal from the spec. Do not round them.
   ============================================================ */

/* ---------- 1. one button shape ---------- */

.button,
button.button {
  display: inline-flex;
  min-height: 0;
  align-items: center;
  gap: 11px;
  padding: 13px 19px;
  border: 1px solid transparent;
  border-radius: 5px;
  background: var(--ink);
  color: var(--paper);
  cursor: pointer;
  font-size: 12.5px;
  letter-spacing: .02em;
  line-height: 1.2;
  transition:
    gap .25s ease,
    background .25s ease,
    border-color .25s ease,
    color .25s ease,
    transform var(--motion-fast) var(--ease-out);
}

/* The arrow is its own element so the gap can open on hover. A glyph sitting
   inside the label is a text node, and gap does nothing to a text node. */
.button-arrow {
  font-size: 13px;
  line-height: 1;
}

.button.secondary,
button.button.secondary {
  border-color: rgba(16, 20, 38, .16);
  background: var(--paper);
  color: var(--ink);
}

@media (hover: hover) and (pointer: fine) {
  .button:hover,
  button.button:hover {
    gap: 15px;
    background: var(--copper);
    color: var(--paper);
    transform: none;
  }

  .button.secondary:hover,
  button.button.secondary:hover {
    gap: 15px;
    border-color: var(--ink);
    background: var(--paper);
    color: var(--ink);
  }
}

/* ---------- 2. the photographic hero ---------- */

.photo-hero {
  position: relative;
  overflow: hidden;
  background: #0b1120;
}

.photo-hero-parallax,
.photo-hero-media,
.photo-hero-angle,
.photo-hero-vert {
  position: absolute;
  inset: 0;
}

/* The parallax wrapper carries the scroll transform and the media carries the
   entrance zoom. They are separate elements on purpose: a CSS animation beats an
   inline style, so one element cannot hold both without the zoom freezing the
   parallax for the life of the page. */
.photo-hero-parallax {
  will-change: transform;
}

.photo-hero-media {
  background-position: 71% 46%;
  background-repeat: no-repeat;
  background-size: cover;
  animation: photo-hero-zoom 2.6s cubic-bezier(.2, .7, .2, 1) both;
}

.photo-hero-angle {
  background: linear-gradient(
    96deg,
    rgba(6, 10, 20, .6) 0%,
    rgba(6, 10, 20, .4) 40%,
    rgba(6, 10, 20, .16) 62%,
    rgba(6, 10, 20, 0) 82%
  );
}

.photo-hero-vert {
  background: linear-gradient(
    180deg,
    rgba(6, 10, 20, .32) 0%,
    rgba(0, 0, 0, 0) 20%,
    rgba(0, 0, 0, 0) 58%,
    rgba(6, 10, 20, .24) 82%,
    rgba(6, 10, 20, .34) 100%
  );
}

/* Bounded, not full bleed. It ends before the right edge so the bright part of
   the photograph stays clean, and the top edge is masked so no band shows
   across the sky. */
.photo-hero-plate {
  position: absolute;
  left: 0;
  bottom: 0;
  width: min(72%, 900px);
  height: 72%;
  background: linear-gradient(
    102deg,
    rgba(6, 10, 20, .9) 0%,
    rgba(6, 10, 20, .76) 40%,
    rgba(6, 10, 20, .44) 66%,
    rgba(6, 10, 20, .12) 86%,
    rgba(6, 10, 20, 0) 97%
  );
  -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 2%, rgba(0, 0, 0, 1) 34%);
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 2%, rgba(0, 0, 0, 1) 34%);
  pointer-events: none;
}

.photo-hero-well {
  position: relative;
  z-index: 6;
  display: flex;
  max-width: 1180px;
  min-height: min(700px, calc(100svh - 68px));
  margin: 0 auto;
  padding: clamp(60px, 8vw, 140px) 24px clamp(38px, 4.6vw, 72px);
  align-items: flex-end;
}

.photo-hero-copy {
  position: relative;
  z-index: 7;
  width: min(780px, 64%);
}

.photo-hero-eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 20px;
  color: var(--copper-light, #e9a178);
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.photo-hero-eyebrow::before {
  width: 46px;
  height: 1px;
  flex: 0 0 auto;
  background: var(--copper);
  content: "";
}

.photo-hero h1 {
  max-width: none;
  margin: 0 0 clamp(20px, 2.4vw, 30px);
  color: #fcfaf6;
  font-family: var(--serif);
  font-size: clamp(48px, 7.8vw, 118px);
  font-weight: 400;
  letter-spacing: -.025em;
  line-height: 1;
  text-shadow: 0 4px 40px rgba(6, 10, 22, .6);
  text-wrap: normal;
}

.photo-hero h1 .hero-line {
  display: block;
}

.photo-hero h1 em {
  display: block;
  color: inherit;
  font-style: italic;
  font-weight: 400;
}

.photo-hero .copper {
  color: var(--copper);
}

.photo-hero-sub {
  max-width: 26em;
  margin: 0 0 clamp(26px, 3vw, 36px);
  color: rgba(252, 250, 246, .8);
  font-family: var(--serif);
  font-size: clamp(19px, 1.9vw, 26px);
  font-style: italic;
  font-weight: 400;
  line-height: 1.45;
  text-shadow:
    0 1px 18px rgba(6, 10, 22, .8),
    0 0 3px rgba(6, 10, 22, .55);
}

/* Brighter, not bolder: the weight stays at 400 and only the colour lifts. */
.photo-hero-sub .solid {
  color: #ffffff;
  font-weight: 400;
}

.photo-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
}

.photo-hero-actions .button {
  box-shadow: 0 14px 30px -18px rgba(6, 10, 22, .9);
}

.siesie-photo-hero .photo-hero-media {
  background-position: 56% 46%;
}

@media (max-width: 1120px) {
  .photo-hero-copy {
    width: 100%;
    max-width: 100%;
  }
}

@media (max-width: 660px) {
  .home-photo-hero .photo-hero-media {
    background-position: 74% 50%;
  }

  .siesie-photo-hero .photo-hero-media {
    background-position: 64% 46%;
  }
}

@keyframes photo-hero-zoom {
  from {
    transform: scale(1.08);
  }

  to {
    transform: scale(1);
  }
}

@keyframes photo-hero-rise {
  from {
    opacity: 0;
    transform: translateY(26px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .photo-hero [data-rise] {
    animation: photo-hero-rise .85s cubic-bezier(.2, .7, .2, 1) both;
  }

  .photo-hero [data-rise="0"] { animation-delay: 0s; }
  .photo-hero [data-rise="1"] { animation-delay: .06s; }
  .photo-hero [data-rise="2"] { animation-delay: .18s; }
  .photo-hero [data-rise="3"] { animation-delay: .3s; }
  .photo-hero [data-rise="4"] { animation-delay: .42s; }
}

@media (prefers-reduced-motion: reduce) {
  .photo-hero-media {
    animation: none;
  }
}

/* ---------- 3. the nine seconds proof replay ---------- */

.proof-replay {
  border-top: 1px solid rgba(16, 20, 38, .07);
  background: var(--paper);
}

.proof-replay-inner {
  display: grid;
  max-width: 1180px;
  margin: 0 auto;
  padding: 88px 24px 92px;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: 56px;
  align-items: center;
}

.proof-replay-eyebrow {
  margin: 0 0 16px;
  color: var(--copper);
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.proof-replay h2 {
  margin: 0 0 20px;
  font-family: var(--serif);
  font-size: clamp(34px, 4.4vw, 56px);
  font-weight: 400;
  letter-spacing: -.02em;
  line-height: 1.06;
}

.proof-replay-body {
  max-width: 34em;
  margin: 0 0 26px;
  color: rgba(16, 20, 38, .68);
  font-size: 17px;
  line-height: 1.62;
  text-wrap: pretty;
}

.proof-replay-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
}

.proof-replay-controls .button {
  padding: 13px 18px;
}

/* Holds its space from the start, so the row does not jump when the thread
   finishes and the line arrives. */
.proof-replay-note {
  color: rgba(16, 20, 38, .44);
  font-size: 13.5px;
  opacity: 0;
  transition: opacity .5s ease;
}

.proof-replay.is-done .proof-replay-note {
  opacity: 1;
}

.proof-phone {
  justify-self: center;
  width: min(360px, 100%);
}

.proof-phone-card {
  padding: 12px 10px 16px;
  border: 1px solid rgba(16, 20, 38, .14);
  border-radius: 34px;
  background: var(--paper);
  box-shadow: 0 44px 90px -54px rgba(12, 22, 60, .6);
}

.proof-phone-head {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 14px 14px;
  border-bottom: 1px solid rgba(16, 20, 38, .07);
  color: rgba(16, 20, 38, .46);
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.proof-phone-dot {
  width: 7px;
  height: 7px;
  flex: 0 0 auto;
  border-radius: 999px;
  background: #2f8f5b;
}

/* The fixed floor stops the card growing as each message lands. */
.proof-thread {
  display: flex;
  flex-direction: column;
  min-height: 392px;
  gap: 10px;
  padding: 16px 8px 6px;
}

.proof-msg {
  max-width: 86%;
  opacity: 0;
  transform: translateY(10px);
  transition:
    opacity .45s cubic-bezier(.2, .7, .2, 1),
    transform .45s cubic-bezier(.2, .7, .2, 1);
}

.proof-msg.is-in {
  opacity: 1;
  transform: translateY(0);
}

.proof-msg .bubble {
  border-radius: 16px;
  padding: 11px 14px;
  font-size: 14px;
  line-height: 1.5;
}

.proof-msg .tag {
  margin-top: 5px;
  color: rgba(16, 20, 38, .4);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.proof-msg[data-role="sys"] {
  align-self: center;
  text-align: center;
}

.proof-msg[data-role="sys"] .bubble {
  background: transparent;
  color: rgba(16, 20, 38, .42);
}

.proof-msg[data-role="shop"] {
  align-self: flex-end;
  text-align: right;
}

.proof-msg[data-role="shop"] .bubble {
  background: var(--ink);
  color: #f2f4f9;
  text-align: left;
}

.proof-msg[data-role="cust"] {
  align-self: flex-start;
}

.proof-msg[data-role="cust"] .bubble {
  background: rgba(16, 20, 38, .055);
  color: var(--ink);
}

.proof-phone-caption {
  margin: 14px 0 0;
  color: rgba(16, 20, 38, .4);
  font-size: 12.5px;
  text-align: center;
}

@media (prefers-reduced-motion: reduce) {
  .proof-msg {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .proof-replay-note {
    transition: none;
  }
}

/* ---------- 4. thumb-sized targets on touch screens ---------- */

/* The button spec above sets the painted box and stays untouched on a mouse.
   A finger needs 44px, and a bare text link needs 24px, so the floor is raised
   only where the pointer is a thumb. */
@media (pointer: coarse) {
  .button,
  button.button {
    min-height: 44px;
  }

  .card-link {
    min-height: 24px;
  }

  .result-actions a {
    padding: 4px 0;
  }
}

/* ---------- 5. the SynKasa sign on a phone ---------- */

/* The board carries a 148px word, so under 900px it needs its own height or
   the sign lands on top of the trust line. */
@media (max-width: 900px) {
  .open-sign {
    min-height: 260px;
    margin-top: 8px;
  }

  .open-board {
    font-size: clamp(52px, 15vw, 92px);
  }
}