/* ==========================================================================
   Task It. — landing page
   Light mode only. One accent, one display face, a lot of air.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Ground */
  --white: #FFFFFF;
  --paper: #FAFAFA;      /* neutral grey band, no warmth */
  --panel: #F4F4F5;      /* the ground a screenshot sits on */

  /* Ink */
  --ink: #141317;        /* near-black, only the faintest warmth */
  --ink-2: #53525A;      /* body copy */
  --ink-3: #8A8992;      /* captions, meta */

  /* Accent — the app purple, spent in three places and nowhere else */
  --accent: #7759C2;
  --accent-deep: #5F44A6;
  --accent-soft: #F2EFF9;

  /* Lines */
  --line: #E7E7E9;
  --line-strong: #D6D6D9;

  /* Type */
  --display: 'Fraunces', 'Times New Roman', serif;
  --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Shape */
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-xl: 32px;

  /* Shadow — barely there, then a real one for lifted objects */
  --shadow-sm: 0 1px 2px rgba(22, 19, 31, .04), 0 2px 8px -4px rgba(22, 19, 31, .06);
  --shadow-lg: 0 24px 48px -24px rgba(22, 19, 31, .18), 0 8px 20px -12px rgba(22, 19, 31, .12);
  --shadow-phone: 0 40px 80px -32px rgba(22, 19, 31, .34), 0 12px 32px -16px rgba(22, 19, 31, .18);

  /* Rhythm */
  --gutter: 24px;
  --wrap: 1160px;
  --section-y: clamp(72px, 10vw, 136px);
}

/* --------------------------------------------------------------------------
   Reset
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 88px;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, p, figure, blockquote { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
button { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

/* --------------------------------------------------------------------------
   Layout primitives
   -------------------------------------------------------------------------- */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.wrap--narrow { max-width: 820px; }

.section { padding-block: var(--section-y); }
.section--paper { background: var(--paper); }
.section--tight { padding-block: clamp(56px, 7vw, 96px); }

.hr { height: 1px; background: var(--line); border: 0; margin: 0; }

/* --------------------------------------------------------------------------
   Type
   -------------------------------------------------------------------------- */
.display {
  font-family: var(--display);
  font-weight: 700;
  font-variation-settings: 'SOFT' 0, 'WONK' 0, 'opsz' 100;
  letter-spacing: -0.03em;
  line-height: 0.98;
  text-wrap: balance;
}

.h1 { font-size: clamp(2.9rem, 6.4vw, 5.25rem); }
.h2 { font-size: clamp(2.1rem, 4vw, 3.25rem); line-height: 1.02; }
.h3 { font-size: clamp(1.4rem, 2vw, 1.75rem); line-height: 1.14; letter-spacing: -0.02em; }

.lede {
  font-size: clamp(1.05rem, 1.35vw, 1.2rem);
  line-height: 1.6;
  color: var(--ink-2);
  text-wrap: pretty;
}

.body { color: var(--ink-2); text-wrap: pretty; }
.muted { color: var(--ink-3); }

/* The two-tone headline every one of the reference sites leans on */
.dim { color: var(--ink-3); }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.eyebrow::before {
  content: '';
  width: 18px;
  height: 1px;
  background: currentColor;
  opacity: 0.5;
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px 6px 8px;
  border: 1px solid var(--line);
  border-radius: 360px;
  background: var(--white);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--ink-2);
  box-shadow: var(--shadow-sm);
}

/* The same pill with no tag chip. The chip is what fills the narrow left
   inset above, so without it the text sits off centre. */
.pill--plain {
  gap: 0;
  padding: 9px 18px;
}

.pill__tag {
  padding: 2px 8px;
  border-radius: 360px;
  background: var(--accent-soft);
  color: var(--accent-deep);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
.btn {
  --btn-bg: var(--ink);
  --btn-fg: var(--white);
  --btn-bd: var(--ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 24px;
  border: 1px solid var(--btn-bd);
  border-radius: 360px;
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  white-space: nowrap;
  cursor: pointer;
  transition: transform .18s ease, background-color .18s ease, border-color .18s ease, color .18s ease;
}

.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn--solid { --btn-bg: var(--ink); --btn-bd: var(--ink); }
.btn--solid:hover { --btn-bg: #000; --btn-bd: #000; }

/* the one deliberate spot of brand purple, on the closing CTA */
.btn--brand { --btn-bg: var(--accent); --btn-bd: var(--accent); --btn-fg: #fff; }
.btn--brand:hover { --btn-bg: var(--accent-deep); --btn-bd: var(--accent-deep); }

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--ink);
  --btn-bd: var(--line-strong);
}
.btn--ghost:hover { --btn-bg: var(--white); --btn-bd: var(--ink-3); }

.btn--light {
  --btn-bg: var(--white);
  --btn-fg: var(--ink);
  --btn-bd: var(--white);
}

.btn--sm { padding: 9px 18px; font-size: 0.875rem; }

.btn svg { width: 16px; height: 16px; flex: none; }

/* --------------------------------------------------------------------------
   Nav
   -------------------------------------------------------------------------- */
.nav {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(255, 255, 255, .82);
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  border-bottom: 1px solid transparent;
  transition: border-color .25s ease, background-color .25s ease;
}

.nav.is-stuck { border-bottom-color: var(--line); }

.nav .wrap {
  display: flex;
  align-items: center;
  gap: 32px;
  height: 72px;
}

/* the real wordmark, straight from assets/brand in the app repo */
.brand { display: flex; align-items: center; flex: none; }

.brand img {
  height: 27px;
  width: auto;
  display: block;
}

.brand--foot img { height: 30px; }

.nav__links {
  display: flex;
  gap: 4px;
  margin-inline-start: 12px;
}

.nav__links a {
  white-space: nowrap;
  padding: 8px 14px;
  border-radius: 360px;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--ink-2);
  transition: color .18s ease, background-color .18s ease;
}

.nav__links a:hover { color: var(--ink); background: var(--panel); }

/* only earns its place once the desktop nav collapses */
.nav__links-cta { display: none; }

.nav__actions {
  display: flex;
  align-items: center;
  gap: 12px;
  /* the spacer lives here, not on the links — the links vanish on mobile */
  margin-inline-start: auto;
}

/* Language toggle — a quiet segmented control */
.lang {
  display: flex;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 360px;
  background: var(--white);
}

.lang button {
  padding: 5px 11px;
  border: 0;
  border-radius: 360px;
  background: transparent;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--ink-3);
  cursor: pointer;
  transition: background-color .18s ease, color .18s ease;
}

.lang button[aria-pressed='true'] { background: var(--ink); color: var(--white); }

/* the legal pages switch language by navigating, so it is links plus a marker
   for the page you are already on */
.lang a,
.lang__on {
  padding: 5px 11px;
  border-radius: 360px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--ink-3);
  transition: background-color .18s ease, color .18s ease;
}

.lang a:hover { color: var(--ink); }
.lang__on { background: var(--ink); color: var(--white); }

.nav__burger {
  display: none;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--white);
  cursor: pointer;
}

.nav__burger svg { width: 18px; height: 18px; }

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  padding-top: clamp(56px, 8vw, 104px);
  padding-bottom: clamp(40px, 6vw, 88px);
  text-align: center;
  overflow: hidden;
  background: var(--white);
}

/* Wide enough for the headline to hold one line on desktop. At the clamp's top
   size it measures ~950px, so 1040 leaves room for the longer Romanian one; the
   lede keeps its own narrower measure regardless. */
.hero__inner { max-width: 1040px; margin-inline: auto; }

.hero .h1 { margin-top: 22px; }

/* Wide enough not to look pinched under a one-line headline, still short of a
   full measure so it stays readable. */
/* A little inside the headline rather than flush with it — the lines stop
   short of the headline edges on both sides.
   balance, not pretty: evens the lines instead of stranding the last few
   words on their own. */
.hero .lede {
  max-width: 56rem;
  margin: 22px auto 0;
  text-wrap: balance;
}

.hero__ctas {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 32px;
}

.hero__note {
  margin-top: 16px;
  font-size: 0.8125rem;
  color: var(--ink-3);
}

/* --------------------------------------------------------------------------
   Sample-task ticker — the hero's rolling row

   Two identical halves scrolling as one track, so the loop has no seam. The
   translate lands on -50% minus half a gap, which is exactly one half-width.
   -------------------------------------------------------------------------- */
.ticker {
  position: relative;
  margin-top: clamp(44px, 5.5vw, 68px);
  width: 100vw;
  margin-inline: calc(50% - 50vw);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}

.ticker__track {
  display: flex;
  gap: 16px;
  width: max-content;
  padding-block: 6px;
  animation: ticker-roll 52s linear infinite;
}

.ticker:hover .ticker__track,
.ticker:focus-within .ticker__track { animation-play-state: paused; }

@keyframes ticker-roll {
  from { transform: translateX(0); }
  to { transform: translateX(calc(-50% - 8px)); }
}

.ticker__note {
  margin-top: 22px;
  text-align: center;
  font-size: 0.8125rem;
  color: var(--ink-3);
}

.tcard {
  flex: none;
  width: 290px;
  padding: 18px 20px 16px;
  text-align: start;          /* the hero centres its text; a card should not */
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--white);
  box-shadow: var(--shadow-sm);
}

.tcard__cat {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.tcard__cat svg { width: 15px; height: 15px; flex: none; }

/* pinned to exactly two lines: min-height holds the short ones open, the clamp
   stops a long one dropping onto a third and knocking the row out of line */
.tcard h4 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  margin-top: 12px;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.35;
  height: 2.7em;
}

.tcard__foot {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-top: 14px;
  padding-top: 13px;
  border-top: 1px solid var(--line);
}

.tcard__loc { font-size: 0.8125rem; color: var(--ink-3); }

.tcard__price {
  font-size: 0.9375rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--accent);
}

.tcard__price--open { font-weight: 500; color: var(--ink-3); }

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


/* --------------------------------------------------------------------------
   Showcase cards

   Three equal cards. Copy sits at the top of each, the capture below it and
   running off the bottom edge — so when one card ends up taller than another,
   the difference is absorbed by more screenshot rather than by dead space.
   -------------------------------------------------------------------------- */
.showcase {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: clamp(40px, 5vw, 64px);
}

.card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--white);
  overflow: hidden;
}

.card__body { padding: clamp(24px, 2.2vw, 30px); }

.card__body h3 {
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.25;
  text-wrap: balance;
}

.card__body p {
  margin-top: 10px;
  font-size: 0.9375rem;
  color: var(--ink-2);
  text-wrap: pretty;
}

.card__visual {
  position: relative;
  flex: 1;
  min-height: 420px;
  border-top: 1px solid var(--line);
  background: var(--paper);
  overflow: hidden;
}

/* No device frame — the capture itself, rounded, running off the bottom.
   Taken out of flow on purpose: in flow its full height would set the card's
   height, and the cards could no longer equalise against each other. */
.card__visual img {
  position: absolute;
  top: 26px;
  left: 50%;
  translate: -50% 0;
  width: min(312px, calc(100% - 48px));
  border: 1px solid var(--line-strong);
  border-bottom: 0;
  border-radius: 18px 18px 0 0;
  box-shadow: 0 18px 40px -22px rgba(20, 19, 23, .35);
}

/* --------------------------------------------------------------------------
   Section headers
   -------------------------------------------------------------------------- */
.sec-head { max-width: 720px; }
.sec-head--center { margin-inline: auto; text-align: center; }
.sec-head .h2 { margin-top: 18px; }
.sec-head .lede { margin-top: 18px; }
.sec-head--center .lede { margin-inline: auto; }

/* A split header: heading left, supporting copy right (Sendr / Gumloop) */
.sec-head--split {
  max-width: none;
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 48px;
  align-items: end;
}

.sec-head--split .lede { margin-top: 0; padding-bottom: 6px; }

/* --------------------------------------------------------------------------
   How it works — two tracks
   -------------------------------------------------------------------------- */
.tracks {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  margin-top: clamp(40px, 5vw, 64px);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--white);
  overflow: hidden;
}

.track { padding: clamp(28px, 3vw, 40px); }
.track + .track { border-inline-start: 1px solid var(--line); }

/* the icon lines up with the title, not with the centre of both lines */
.track__head { display: flex; align-items: flex-start; gap: 14px; }

.track__icon {
  display: flex;
  margin-top: 3px;
  color: var(--ink);
}

.track__icon svg { width: 26px; height: 26px; }

.track__head h3 { font-size: 1.25rem; font-weight: 700; letter-spacing: -0.02em; }
.track__head p { font-size: 0.8125rem; color: var(--ink-3); }

.steps { margin-top: 28px; }

.step {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 16px;
  padding-block: 20px;
  border-top: 1px solid var(--line);
}

.step__n {
  font-size: 0.75rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--accent);
  padding-top: 3px;
}

.step h4 { font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.02em; }
.step p { margin-top: 6px; font-size: 0.9375rem; color: var(--ink-2); }

/* --------------------------------------------------------------------------
   Categories
   -------------------------------------------------------------------------- */
.cats {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
  margin-top: clamp(40px, 5vw, 56px);
}

.cat {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--white);
  font-size: 0.9375rem;
  font-weight: 500;
  transition: border-color .18s ease, background-color .18s ease, transform .18s ease;
}

.cat:hover {
  border-color: var(--line-strong);
  background: var(--paper);
}

/* no container — the icon just sits next to the label */
.cat__icon {
  flex: none;
  display: flex;
  color: var(--ink-3);
  transition: color .18s ease;
}

.cat:hover .cat__icon { color: var(--accent); }
.cat__icon svg { width: 22px; height: 22px; }

/* --------------------------------------------------------------------------
   Trust
   -------------------------------------------------------------------------- */
.ledger {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-top: clamp(40px, 5vw, 64px);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--white);
}

/* the second column is the other side of the ledger, so it sits a shade back */
.ledger__col + .ledger__col {
  border-inline-start: 1px solid var(--line);
  background: var(--paper);
}

.ledger__col { padding: clamp(26px, 3vw, 38px); }

.ledger__head {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.ledger__head svg { width: 16px; height: 16px; flex: none; }

/* only the affirmative column gets colour; the limits stay grey */
.ledger__col:first-child .ledger__head svg { color: var(--accent); }

.ledger__list { margin-top: 10px; }

.ledger__list li {
  padding-block: 18px;
  border-top: 1px solid var(--line);
}

.ledger__list li:last-child { padding-bottom: 0; }

.ledger__list strong {
  display: block;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.ledger__list span {
  display: block;
  margin-top: 6px;
  font-size: 0.9375rem;
  color: var(--ink-2);
  text-wrap: pretty;
}

/* --------------------------------------------------------------------------
   FAQ
   -------------------------------------------------------------------------- */
.faq { margin-top: clamp(36px, 4vw, 56px); border-top: 1px solid var(--line); }

.faq__item { border-bottom: 1px solid var(--line); }

.faq__q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 22px 0;
  border: 0;
  background: none;
  text-align: start;
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  cursor: pointer;
  transition: color .18s ease;
}

.faq__q:hover { color: var(--ink-3); }

.faq__sign {
  width: 28px;
  height: 28px;
  flex: none;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 360px;
  color: var(--ink-3);
  transition: transform .28s ease, background-color .18s ease, color .18s ease, border-color .18s ease;
}

.faq__sign svg { width: 13px; height: 13px; }

.faq__item.is-open .faq__sign {
  transform: rotate(45deg);
  background: var(--ink);
  border-color: var(--ink);
  color: var(--white);
}

.faq__a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .32s cubic-bezier(.22, .61, .36, 1);
}

.faq__item.is-open .faq__a { grid-template-rows: 1fr; }

.faq__a > div { overflow: hidden; }

.faq__a p {
  max-width: 60ch;
  padding-bottom: 24px;
  font-size: 0.9375rem;
  color: var(--ink-2);
}

/* --------------------------------------------------------------------------
   Download CTA
   -------------------------------------------------------------------------- */
.cta {
  position: relative;
  padding: clamp(52px, 7vw, 92px) clamp(28px, 5vw, 72px);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  background: var(--paper);
  overflow: hidden;
  text-align: center;
}

.cta .h2 { margin-top: 18px; }

.cta__copy {
  max-width: 34rem;
  margin: 18px auto 0;
  font-size: 1.0625rem;
  color: var(--ink-2);
}

/* Store badges. These are Apple's and Google's own published files, one per
   language, so nothing here touches the artwork itself.

   Apple's SVG is edge to edge at 119.66x40. Google only publishes PNG, with its
   required clear space baked into a fixed 646x250 canvas, and the two languages
   sit differently inside it: the English badge is 564x168 with 41px all round,
   the Romanian one is wider text at 646x192 with no horizontal margin left. So
   the Play badge is placed in a window sized to its artwork and offset by that
   padding, which makes both badges the same height whichever language is on.
   The clear space Google asks for is then supplied by the flex gap. */
.stores {
  --badge-h: 52px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 34px;
}

.store {
  display: block;
  transition: transform .18s ease, opacity .18s ease;
}

.store:hover { transform: translateY(-1px); opacity: .88; }
.store:focus-visible { outline-offset: 4px; }

.store--apple img {
  display: block;
  height: var(--badge-h);
  width: auto;
}

.store--play {
  position: relative;
  overflow: hidden;
  height: var(--badge-h);
  width: calc(var(--badge-h) * 564 / 168);
}

.store--play img {
  position: absolute;
  max-width: none;
  height: calc(var(--badge-h) * 250 / 168);
  top: calc(var(--badge-h) * -41 / 168);
  left: calc(var(--badge-h) * -41 / 168);
}

/* the Romanian Play badge is a different size inside the same canvas */
html[lang="ro"] .store--play { width: calc(var(--badge-h) * 646 / 192); }

html[lang="ro"] .store--play img {
  height: calc(var(--badge-h) * 250 / 192);
  top: calc(var(--badge-h) * -29 / 192);
  left: 0;
}

/* On a narrow phone the pair would wrap onto two rows, which reads as a stack
   of two unrelated buttons. Shrinking them keeps the row, and 40px is the
   smallest height Apple allows the badge to be shown at on the web. */
@media (max-width: 430px) {
  .stores { --badge-h: 40px; gap: 12px; }
}

/* --------------------------------------------------------------------------
   Legal documents — terms.html and privacy.html

   A single readable column. These pages carry no JavaScript at all: a legal
   document that needs a script to render is one that can fail to render.
   -------------------------------------------------------------------------- */
.doc .wrap { max-width: 860px; }

.doc__head { padding-bottom: 36px; border-bottom: 1px solid var(--line); }
.doc__head .h2 { margin-top: 16px; }
.doc__meta { margin-top: 14px; font-size: 0.875rem; color: var(--ink-3); }

.doc__toc {
  margin-top: 36px;
  padding: 26px 30px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--paper);
}

.doc__toc h2 {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.doc__toc ol {
  columns: 2;
  column-gap: 36px;
  margin-top: 14px;
  counter-reset: toc;
}

.doc__toc li {
  break-inside: avoid;
  counter-increment: toc;
  padding-block: 5px;
  font-size: 0.9375rem;
}

.doc__toc a { color: var(--ink-2); }
.doc__toc a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }

.doc__body { margin-top: 44px; }

/* the note that marks a translated document */
.doc__note {
  margin-top: 0 !important;
  padding: 14px 18px;
  border-inline-start: 3px solid var(--accent);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  background: var(--paper);
  font-size: 0.9375rem;
}

.doc__body h2 {
  margin-top: 52px;
  padding-top: 28px;
  border-top: 1px solid var(--line);
  font-family: var(--display);
  font-weight: 700;
  font-variation-settings: 'SOFT' 0, 'WONK' 0, 'opsz' 60;
  font-size: 1.625rem;
  letter-spacing: -0.02em;
  line-height: 1.15;
  scroll-margin-top: 96px;
}

.doc__body h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }

.doc__body h3 {
  margin-top: 32px;
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.doc__body p {
  margin-top: 16px;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--ink-2);
  text-wrap: pretty;
}

.doc__body strong { color: var(--ink); font-weight: 600; }

.doc__body a {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--line-strong);
}

.doc__body a:hover { text-decoration-color: var(--ink); }

.doc__body ul { margin-top: 16px; }

.doc__body li {
  position: relative;
  padding-left: 22px;
  padding-block: 6px;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--ink-2);
}

.doc__body li::before {
  content: '';
  position: absolute;
  left: 4px;
  top: 17px;
  width: 5px;
  height: 5px;
  border-radius: 360px;
  background: var(--line-strong);
}

/* Numbered steps, used for the account-deletion instructions. Every other list
   item in a document gets the small dot above, so the marker is replaced with a
   counter rather than layered on top of it. */
.doc__body .doc__steps {
  margin-top: 16px;
  counter-reset: step;
}

.doc__body .doc__steps li {
  counter-increment: step;
  padding-left: 38px;
}

.doc__body .doc__steps li::before {
  content: counter(step);
  left: 0;
  top: 9px;
  width: 24px;
  height: 24px;
  border-radius: 360px;
  background: var(--accent-soft);
  color: var(--accent-deep);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 24px;
  text-align: center;
}

/* tables are wide; let them scroll rather than squash the page */
.doc__table {
  margin-top: 24px;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}

.doc__table table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; }

.doc__table th,
.doc__table td {
  padding: 14px 16px;
  text-align: start;
  vertical-align: top;
  border-bottom: 1px solid var(--line);
  line-height: 1.6;
}

.doc__table th {
  background: var(--paper);
  font-weight: 600;
  font-size: 0.8125rem;
  letter-spacing: 0.02em;
  color: var(--ink);
  white-space: nowrap;
}

.doc__table td { color: var(--ink-2); min-width: 180px; }
.doc__table tr:last-child td { border-bottom: 0; }

/* Narrow: a three-column table has nowhere to go sideways, and a cut-off
   column reads as broken rather than scrollable. So each row becomes a stack
   of labelled blocks, the heading row moving into data-label. */
@media (max-width: 720px) {
  .doc__table { border-radius: var(--r-md); overflow: hidden; }
  .doc__table table,
  .doc__table tbody,
  .doc__table tr,
  .doc__table td { display: block; width: 100%; }

  .doc__table thead { display: none; }

  .doc__table tr {
    padding: 18px 18px 20px;
    border-bottom: 1px solid var(--line);
  }

  .doc__table tr:last-child { border-bottom: 0; }

  .doc__table td {
    min-width: 0;
    padding: 0;
    border: 0;
    font-size: 0.9375rem;
  }

  .doc__table td + td { margin-top: 14px; }

  .doc__table td::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 3px;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-3);
  }

  /* the first cell is the row's subject, so it carries the weight */
  .doc__table td:first-child { font-weight: 600; color: var(--ink); }
}

@media (max-width: 620px) {
  .doc__toc { padding: 20px 22px; }
  .doc__toc ol { columns: 1; }
  .doc__body h2 { font-size: 1.375rem; margin-top: 40px; }
}

@media print {
  .nav, .footer, .doc__toc { display: none; }
  .doc__body h2 { break-after: avoid; }
  .doc__body { margin-top: 24px; }
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.footer { padding-block: clamp(56px, 7vw, 88px) 40px; border-top: 1px solid var(--line); }

.footer__grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 48px;
}

.footer__brand p { margin-top: 16px; max-width: 26rem; font-size: 0.9375rem; color: var(--ink-2); }
.footer__legal { margin-top: 18px; font-size: 0.8125rem; color: var(--ink-3); }

.footer__col h5 {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.footer__col a,
.footer__col button {
  display: block;
  margin-top: 12px;
  padding: 0;
  border: 0;
  background: none;
  text-align: start;
  font-size: 0.9375rem;
  color: var(--ink-2);
  cursor: pointer;
  transition: color .18s ease;
}

.footer__col a:hover,
.footer__col button:hover { color: var(--ink); }

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
  margin-top: clamp(40px, 5vw, 64px);
  padding-top: 24px;
  border-top: 1px solid var(--line);
  font-size: 0.8125rem;
  color: var(--ink-3);
}

/* --------------------------------------------------------------------------
   Modals
   -------------------------------------------------------------------------- */
.modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(22, 19, 31, .42);
  backdrop-filter: blur(4px);
  opacity: 0;
  visibility: hidden;
  transition: opacity .24s ease, visibility .24s ease;
}

.modal.is-open { opacity: 1; visibility: visible; }

.modal__panel {
  position: relative;
  width: min(600px, 100%);
  max-height: min(80vh, 720px);
  overflow-y: auto;
  padding: clamp(28px, 4vw, 40px);
  border-radius: var(--r-lg);
  background: var(--white);
  box-shadow: var(--shadow-lg);
  transform: translateY(10px) scale(.99);
  transition: transform .24s cubic-bezier(.22, .61, .36, 1);
}

.modal.is-open .modal__panel { transform: none; }

.modal__close {
  position: absolute;
  top: 18px;
  inset-inline-end: 18px;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 360px;
  background: var(--white);
  color: var(--ink-3);
  cursor: pointer;
  transition: color .18s ease, border-color .18s ease;
}

.modal__close:hover { color: var(--ink); border-color: var(--line-strong); }
.modal__close svg { width: 14px; height: 14px; }

.modal__panel h2 {
  padding-inline-end: 40px;
  font-family: var(--display);
  font-weight: 700;
  font-variation-settings: 'SOFT' 0, 'WONK' 0, 'opsz' 60;
  font-size: 1.75rem;
  letter-spacing: -0.03em;
  line-height: 1.1;
}

.modal__intro { margin-top: 14px; font-size: 0.9375rem; color: var(--ink-2); }

.modal__list { margin-top: 22px; }

.modal__list li {
  display: flex;
  gap: 12px;
  padding-block: 14px;
  border-top: 1px solid var(--line);
  font-size: 0.9375rem;
  color: var(--ink-2);
}

.modal__list li::before {
  content: '';
  width: 5px;
  height: 5px;
  flex: none;
  margin-top: 10px;
  border-radius: 360px;
  background: var(--line-strong);
}

.modal__foot {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  font-size: 0.8125rem;
  color: var(--ink-3);
}

.modal__foot a { color: var(--ink); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }

.contact-card {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 24px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}

.contact-card svg { width: 20px; height: 20px; color: var(--ink-3); flex: none; }
.contact-card span { display: block; font-size: 0.75rem; color: var(--ink-3); }
.contact-card a { font-size: 1rem; font-weight: 600; letter-spacing: -0.01em; }

/* --------------------------------------------------------------------------
   Scroll reveal
   -------------------------------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .6s cubic-bezier(.22, .61, .36, 1), transform .6s cubic-bezier(.22, .61, .36, 1);
}

.reveal.is-in { opacity: 1; transform: none; }

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1000px) {
  .sec-head--split { grid-template-columns: 1fr; gap: 24px; align-items: start; }
  .footer__grid { grid-template-columns: 1fr 1fr; gap: 40px; }
  .footer__brand { grid-column: 1 / -1; }
}

/* Between here and the collapse point the nav is tight but still whole. Romanian
   is the constraint: its labels and CTA run about 56px wider than English. */
@media (max-width: 1100px) {
  .nav .wrap { gap: 20px; }
  .nav__links { gap: 2px; margin-inline-start: 8px; }
  .nav__links a { padding: 8px 10px; }
  .nav__actions { gap: 10px; }
  .nav__actions .btn--sm { padding: 9px 14px; }
}

@media (max-width: 920px) {
  .nav__links { display: none; }
  .nav__burger { display: flex; }
  .nav .wrap { gap: 16px; }
  .nav__links.is-open {
    display: flex;
    position: absolute;
    top: 72px;
    inset-inline: var(--gutter);
    flex-direction: column;
    gap: 2px;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background: var(--white);
    box-shadow: var(--shadow-lg);
    margin: 0;
  }

  .nav__links a.nav__links-cta {
    display: block;
    margin-top: 6px;
    padding: 12px 14px;
    background: var(--ink);
    color: var(--white);
    font-weight: 600;
    text-align: center;
  }

  .nav__links a.nav__links-cta:hover { background: var(--ink); color: var(--white); }

  /* the header CTA duplicates the one now inside the menu */
  .nav__actions > .btn { display: none; }

  /* three cards into two columns leaves an orphan — let it take the whole row */
  .showcase { grid-template-columns: 1fr 1fr; }
  .showcase .card:last-child { grid-column: 1 / -1; }
  .showcase .card:last-child .card__body { max-width: 46ch; }

  .tracks { grid-template-columns: 1fr; }
  .track + .track { border-inline-start: 0; border-top: 1px solid var(--line); }


}

@media (max-width: 620px) {
  :root { --gutter: 20px; }

  .ledger { grid-template-columns: 1fr; }
  .ledger__col + .ledger__col { border-inline-start: 0; border-top: 1px solid var(--line); }

  .hero__ctas .btn { flex: 1 1 100%; }

  .pill { font-size: 0.75rem; padding: 5px 12px 5px 6px; text-align: start; }
  /* after .pill here, or the rule above would win on source order */
  .pill--plain { padding: 8px 15px; text-align: center; }
  .pill__tag { font-size: 0.625rem; }

  .tcard { width: 250px; }
  .ticker__track { animation-duration: 40s; }

  .showcase { grid-template-columns: 1fr; }
  .card__visual { min-height: 380px; }

  .footer__grid { grid-template-columns: 1fr; gap: 32px; }
  .cats { grid-template-columns: 1fr 1fr; }
  .cat { flex-direction: column; align-items: flex-start; gap: 10px; font-size: 0.875rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
  .reveal { opacity: 1; transform: none; }
}