/* Inter Tight (SIL Open Font License), self-hosted: no request to Google from the visitor's browser. */
@font-face {
  font-family: "Inter Tight";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("fonts/InterTight-Light.woff") format("woff");
}
@font-face {
  font-family: "Inter Tight";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/InterTight-Regular.woff") format("woff");
}
@font-face {
  font-family: "Inter Tight";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/InterTight-Medium.woff") format("woff");
}
@font-face {
  font-family: "Inter Tight";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/InterTight-SemiBold.woff") format("woff");
}
:root {
  color-scheme: light;
  --bg: #fafaf7;
  --fg: #141414;
  --muted: #5e5e5e;
  --line: #e4e2dc;
  --card: #ffffff;
  --link: #0b57d0;
}
body {
  background-color: var(--bg);
  color: var(--fg);
  font-family: "Inter Tight", "GT America", "Helvetica Neue", Arial, sans-serif;
  margin: 0;
  line-height: 1.65;
  font-size: 1.06em;
}
main {
  max-width: 1000px;
  margin: 0 auto;
  padding: 24px clamp(20px, 6vw, 48px) 64px;
}
a {
  color: var(--link);
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}
nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: baseline;
  gap: 18px;
  font-size: 0.9em;
}
nav a {
  color: var(--muted);
}
nav .brand {
  color: var(--fg);
  font-weight: 600;
  margin-right: auto;
}
nav .lang {
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 0 10px;
}
.hero {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: clamp(24px, 5vw, 56px);
  align-items: center;
  padding: 48px 0 56px;
  border-bottom: 1px solid var(--line);
}
.hero img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 50% 55%;
  border-radius: 12px;
}
.kicker {
  color: var(--muted);
  margin: 0 0 8px;
}
h1 {
  font-size: clamp(2.4rem, 6vw, 3.6rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  margin: 0 0 20px;
  line-height: 1.05;
}
.lead {
  font-size: clamp(1.08rem, 2.1vw, 1.25rem);
  font-weight: 300;
  line-height: 1.45;
  margin: 0 0 28px;
}
.hero .lead {
  margin-bottom: 16px;
}
.hero .lead:last-of-type {
  margin-bottom: 28px;
}
/* Links under the intro paragraphs: on their own line, so they read as actions, not as text. */
.hero .lead .go {
  display: block;
  width: fit-content;
  margin-top: 8px;
  font-size: 0.8em;
  font-weight: 500;
}
.hero .lead .go::after {
  content: " →";
  display: inline-block;
  margin-left: 4px;
  transition: transform 0.15s;
}
.hero .lead .go:hover::after {
  transform: translateX(3px);
}
.cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.btn {
  display: inline-block;
  border: 1px solid var(--fg);
  color: var(--fg);
  background: none;
  font: inherit;
  font-size: 0.95em;
  padding: 8px 20px;
  border-radius: 40px;
  cursor: pointer;
}
.btn.primary {
  background: var(--fg);
  color: var(--bg);
}
.btn:hover {
  text-decoration: none;
  background: #ecebe6;
  color: var(--fg);
}
section {
  padding: 56px 0;
  border-bottom: 1px solid var(--line);
}
h2 {
  font-size: clamp(1.6rem, 4vw, 2.1rem);
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0 0 24px;
}
.sub {
  color: var(--muted);
  margin: -16px 0 32px;
  max-width: 720px;
}
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: 16px;
}
.grid.pairs {
  grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr));
}
.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.card h3 {
  font-size: 1.2em;
  font-weight: 600;
  margin: 0;
}
.card p {
  margin: 0;
}
.card .btn {
  align-self: flex-start;
  margin-top: auto;
}
.ideas .card p.big {
  font-size: 1.1em;
  font-weight: 500;
}
.timeline {
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.item {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 16px;
}
.item .when {
  color: var(--muted);
}
.item h3 {
  margin: 0 0 4px;
  font-size: 1.15em;
}
.item p {
  margin: 0;
}
.logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 24px 36px;
  margin-top: 16px;
}
.logos img {
  height: 40px;
  width: auto;
  object-fit: contain;
  filter: invert(1);
  mix-blend-mode: multiply;
  opacity: 0.8;
}
.logos img.short {
  height: 28px;
}
.logos img.tall {
  height: 76px;
  margin: -18px 0;
}
.press {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 4px 24px;
}
.press li {
  padding: 8px 0;
}
.src {
  display: block;
  color: var(--muted);
  font-size: 0.85em;
}
.more {
  margin-top: 24px;
}
.contact {
  border-bottom: none;
}
.contact p {
  max-width: 720px;
  margin: 0 0 24px;
}
footer {
  padding-top: 16px;
  color: var(--muted);
  font-size: 0.85em;
}
footer a {
  color: var(--muted);
}
@media (max-width: 720px) {
  .hero {
    grid-template-columns: 1fr;
    padding-top: 32px;
  }
  .hero img {
    max-width: 240px;
  }
  .item {
    grid-template-columns: 1fr;
    gap: 4px;
  }
}
.social-mini {
  display: flex;
  gap: 10px;
  margin-top: 20px;
}
/* Write-to-me button left, social icons right, on one row while they fit. */
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.hero-actions .social-mini {
  margin-top: 0;
}
.social-mini a {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--fg);
  display: grid;
  place-items: center;
}
.social-mini a:hover {
  color: #fff;
  border-color: transparent;
}
.social-mini a.li:hover {
  background: #0a66c2;
}
.social-mini a.ig:hover {
  background: linear-gradient(45deg, #f09433, #dc2743 50%, #bc1888);
}
.social-mini a.fb:hover {
  background: #0866ff;
}
.social-mini svg {
  width: 18px;
  height: 18px;
}
.social {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
}
.soc {
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 16px;
  color: var(--fg);
  transition: transform 0.15s, box-shadow 0.15s;
}
.soc:hover {
  text-decoration: none;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}
.soc .ico {
  flex: none;
  width: 52px;
  height: 52px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  color: #fff;
}
.soc .ico svg {
  width: 26px;
  height: 26px;
}
.soc.li .ico {
  background: #0a66c2;
}
.soc.ig .ico {
  background: linear-gradient(45deg, #f09433, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888);
}
.soc.fb .ico {
  background: #0866ff;
}
.soc .txt {
  display: flex;
  flex-direction: column;
  line-height: 1.3;
  min-width: 0;
}
.soc .txt span {
  color: var(--muted);
  font-size: 0.9em;
}
.soc .follow {
  margin-left: auto;
  flex: none;
  font-size: 0.9em;
  font-weight: 500;
  color: #fff;
  padding: 6px 16px;
  border-radius: 40px;
}
.soc.li .follow {
  background: #0a66c2;
}
.soc.ig .follow {
  background: #dc2743;
}
.soc.fb .follow {
  background: #0866ff;
}
.contact-form {
  display: grid;
  gap: 16px;
  max-width: 720px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 24px;
}
.contact-form .row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}
.contact-form label {
  display: grid;
  gap: 6px;
  font-size: 0.9em;
  font-weight: 500;
}
.contact-form label .opt {
  color: var(--muted);
  font-weight: 400;
}
.contact-form input,
.contact-form select,
.contact-form textarea {
  font: inherit;
  font-size: 1rem;
  font-weight: 400;
  color: var(--fg);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 12px;
  width: 100%;
  box-sizing: border-box;
}
.contact-form textarea {
  resize: vertical;
  min-height: 130px;
}
.contact-form input:focus-visible,
.contact-form select:focus-visible,
.contact-form textarea:focus-visible {
  outline: 2px solid var(--link);
  outline-offset: -1px;
}
.contact-form .hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.contact-form .form-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 20px;
}
.contact-form .fine {
  margin: 0;
  color: var(--muted);
  font-size: 0.85em;
}
.contact-form .fine a {
  color: var(--muted);
  text-decoration: underline;
}
.contact-form .form-status {
  margin: 0;
  font-size: 0.9em;
}
.contact-form .form-status:empty {
  display: none;
}
.contact-form .form-status.error {
  color: #b3261e;
}
.contact-form .form-done {
  margin: 0;
  font-size: 1.1em;
}
/* After a form is sent only the confirmation stays. */
.contact-form.sent > :not(.form-status) {
  display: none;
}
.contact-form .form-status.form-done:focus {
  outline: none;
}
/* "Noutăți pe email", its own section: the contact form's look, with the section title inside the form. */
.newsletter h2 {
  margin: 0;
}
.newsletter .nl-lead {
  margin: -8px 0 0;
  line-height: 1.55;
}
.contact-form label.check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-weight: 400;
}
.contact-form label.check input {
  flex: none;
  width: 18px;
  height: 18px;
  margin: 2px 0 0;
  padding: 0;
  accent-color: var(--fg);
}
.btn:disabled {
  opacity: 0.6;
  cursor: default;
}
/* Press: thumbnail, outlet and date, title, one line on what the piece is. Opens in a new tab. */
.press-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.press-list li {
  display: grid;
  grid-template-columns: clamp(140px, 22vw, 200px) minmax(0, 1fr);
  gap: 20px;
  align-items: start;
  padding: 20px 0;
  border-top: 1px solid var(--line);
}
.press-list li:first-child {
  border-top: none;
  padding-top: 0;
}
.press-list img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: 8px;
}
.press-meta {
  display: block;
  margin-bottom: 4px;
  color: var(--muted);
  font-size: 0.78em;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.press-t {
  display: block;
  color: var(--fg);
  font-size: 1.1em;
  font-weight: 600;
  line-height: 1.3;
}
.press-t:hover {
  color: var(--link);
  text-decoration: none;
}
.press-d {
  display: block;
  margin-top: 6px;
  font-size: 0.95em;
  line-height: 1.55;
}
@media (max-width: 560px) {
  .press-list li {
    grid-template-columns: 1fr;
    gap: 12px;
  }
}
.press-open {
  display: inline-block;
  margin-top: 10px;
  padding: 4px 12px;
  border-radius: 40px;
  background: #ecebe6;
  color: var(--fg);
  font-size: 0.82em;
  font-weight: 500;
}
.press-open:hover {
  background: #e0ded7;
  text-decoration: none;
}
/* "Vezi mai multe" under the press list expands the rest in place. */
.press-more summary {
  list-style: none;
  margin-top: 8px;
}
.press-more summary::-webkit-details-marker {
  display: none;
}
.press-more[open] > summary .closed,
.press-more:not([open]) > summary .open {
  display: none;
}
.press-more > .press-list {
  margin-top: 24px;
}
.press-more .press-more {
  margin-top: 8px;
}

/* reusimin.ro: additions to the antiu.com v5 system. */
/* Logo (01.11.2026): ".RO" in a blue pill, like the buttons. The favicon is the blue dot on ink. */
nav .brand .ro {
  display: inline-block;
  margin-left: 0.05em;
  padding: 0.08em 0.34em 0.12em 0.3em;
  border-radius: 999px;
  background: var(--link);
  color: #fafaf7;
  font-weight: 700;
  letter-spacing: 0;
}
.hero.solo {
  grid-template-columns: 1fr;
}
.hero.solo > div {
  max-width: 820px;
}
.hero.solo h1 {
  font-size: clamp(2.2rem, 5.5vw, 3.4rem);
}
.founder-grid {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: clamp(24px, 5vw, 56px);
  align-items: start;
}
.founder-grid img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 50% 55%;
  border-radius: 12px;
}
.founder-grid + .founder-grid {
  margin-top: 40px;
}
.founder-grid h3 {
  margin: 0 0 4px;
  font-size: 1.35em;
}
.founder-grid .role {
  color: var(--muted);
  margin: 0 0 16px;
}
.sign {
  color: var(--muted);
  margin: 0 0 28px;
}
.facts {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 14px;
}
.facts li {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 12px;
}
.facts .when {
  color: var(--muted);
}
/* Yellow marks what is not decided or not available yet. None may survive to launch. */
mark.todo {
  background: #fff3b0;
  color: var(--fg);
  padding: 0 4px;
  border-radius: 4px;
}
.doors {
  align-items: stretch;
}
.freq,
.tiles {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.freq button,
.tiles button {
  font: inherit;
  font-size: 0.95em;
  padding: 8px 16px;
  border-radius: 40px;
  border: 1px solid var(--line);
  background: var(--bg);
  color: var(--fg);
  cursor: pointer;
}
.freq button.on,
.tiles button.on {
  background: var(--fg);
  color: var(--bg);
  border-color: var(--fg);
}
.donate label.custom {
  display: grid;
  gap: 6px;
  font-size: 0.9em;
  font-weight: 500;
}
.donate input,
.calc input {
  font: inherit;
  font-size: 1rem;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--bg);
  color: var(--fg);
  width: 100%;
  box-sizing: border-box;
}
.donate input:focus-visible,
.calc input:focus-visible {
  outline: 2px solid var(--link);
  outline-offset: -1px;
}
.donate .go {
  align-self: flex-start;
  margin-top: 4px;
}
.fine {
  color: var(--muted);
  font-size: 0.85em;
  margin: 0;
}
.status-line {
  margin: 28px 0 0;
  color: var(--muted);
}
.legal {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 18px 32px;
  margin: 0 0 28px;
}
.legal div {
  min-width: 0;
}
.legal dt {
  color: var(--muted);
  font-size: 0.85em;
  margin: 0 0 2px;
}
.legal dd {
  margin: 0;
}
.quote {
  max-width: 720px;
  margin: 0 0 32px;
}
.calc {
  display: grid;
  gap: 16px;
  max-width: 560px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 24px;
}
.calc label {
  display: grid;
  gap: 6px;
  font-size: 0.9em;
  font-weight: 500;
}
.calc .out {
  font-size: 1.25em;
  font-weight: 600;
  margin: 0;
}
.calc .out:empty {
  display: none;
}
.steps {
  padding-left: 20px;
  margin: 0;
  display: grid;
  gap: 10px;
  max-width: 720px;
}
.page {
  max-width: 820px;
}
.page h1 {
  font-size: clamp(2rem, 5vw, 2.8rem);
  margin-top: 40px;
}
.page section:last-of-type {
  border-bottom: none;
}
@media (max-width: 720px) {
  .founder-grid {
    grid-template-columns: 1fr;
  }
  .founder-grid img {
    max-width: 160px;
  }
  .facts li {
    grid-template-columns: 1fr;
    gap: 2px;
  }
}
.donate label.custom[hidden],
.status-line[hidden] {
  display: none;
}

/* Direction B (20.10.2026): the antiu.com system, plus a Donate button in the nav and a tinted band for the money section. */
:root {
  --tint: #eef2f9;
}
nav .nav-cta {
  color: #fff;
  background: var(--link);
  padding: 6px 16px;
  border-radius: 40px;
  font-weight: 500;
}
nav .nav-cta:hover {
  text-decoration: none;
  background: #0a4cb6;
}
.facts-band {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  padding: 32px 0;
  border-bottom: 1px solid var(--line);
}
.facts-band div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.facts-band strong {
  font-size: clamp(1.6rem, 3.6vw, 2.1rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--link);
  line-height: 1.2;
}
.facts-band span {
  color: var(--muted);
  font-size: 0.92em;
}
.spec {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0 0 8px;
  border-top: 1px solid var(--line);
}
.spec div {
  padding: 20px 24px 20px 0;
  border-bottom: 1px solid var(--line);
}
.spec div:nth-child(even) {
  padding: 20px 0 20px 24px;
  border-left: 1px solid var(--line);
}
.spec dt {
  color: var(--muted);
  font-size: 0.85em;
  margin: 0 0 6px;
}
.spec dd {
  margin: 0;
}
section.band {
  background: var(--tint);
  border-bottom: none;
  border-radius: 16px;
  padding: 48px clamp(20px, 4vw, 40px);
  margin: 40px 0;
}
.num {
  color: var(--link);
  font-size: 0.75em;
  font-weight: 600;
  margin-right: 10px;
}
.cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--line);
}
.cols div {
  padding: 20px 24px 0;
  border-left: 1px solid var(--line);
}
.cols div:first-child {
  padding-left: 0;
  border-left: none;
}
.cols h3 {
  font-size: 1.05em;
  margin: 0 0 6px;
}
.cols p {
  margin: 0;
}
@media (max-width: 720px) {
  .facts-band,
  .spec,
  .cols {
    grid-template-columns: 1fr;
  }
  .facts-band {
    gap: 16px;
  }
  .spec div,
  .spec div:nth-child(even) {
    padding: 16px 0;
    border-left: none;
  }
  .cols div {
    padding: 16px 0 0;
    border-left: none;
  }
}

/* Keyboard users: a skip link to the content and visible focus on every control. */
.skip {
  position: absolute;
  left: 16px;
  top: -48px;
  background: var(--fg);
  color: var(--bg);
  padding: 8px 16px;
  border-radius: 40px;
  z-index: 10;
}
.skip:focus {
  top: 12px;
}
a:focus-visible,
button:focus-visible,
.btn:focus-visible {
  outline: 2px solid var(--link);
  outline-offset: 2px;
}

/* Susține (30.10.2026, after RBL and World Vision): the donation gets a wide block of its own, with
   the explanation on the left and the form on the right. 3.5% and companies sit below as two cards. */
.give {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: 32px;
  align-items: start;
  margin: 0 0 16px;
}
.give h3 {
  font-size: 1.35em;
  font-weight: 600;
  margin: 0 0 10px;
}
.give-text p {
  margin: 0 0 16px;
}
.give .iban {
  color: var(--muted);
  font-size: 0.92em;
}
.give .iban span {
  color: var(--fg);
}
.donate .freq,
.donate .tiles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.donate .tiles {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.donate .freq button,
.donate .tiles button {
  padding: 10px 4px;
  text-align: center;
}
.donate .go {
  align-self: stretch;
  padding: 12px 20px;
  font-size: 1em;
}
@media (max-width: 720px) {
  .give {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}
/* Four amount tiles only when the card itself is wide enough, otherwise two by two. */
.donate {
  container-type: inline-size;
}
@container (max-width: 359px) {
  .donate .tiles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* The sponsorship contract form on /sponsorizare. */
.contract-form {
  max-width: none;
}
.contract-form .row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.contract-form .cui-row {
  display: flex;
  gap: 8px;
}
.contract-form .cui-row input {
  max-width: 240px;
}
.contract-form .opt {
  color: var(--muted);
  font-weight: 400;
}
.contract-form .cui-status:empty {
  display: none;
}
.contract-form .cui-status {
  margin: -8px 0 0;
}
.contract-form > .btn.primary {
  justify-self: start;
}
@media (max-width: 560px) {
  .contract-form .row {
    grid-template-columns: 1fr;
  }
}

/* Design pass (31.10.2026, after a review by Fable and Codex): same palette, type and components,
   with tighter headings, clearer form fields and a mobile layout that wraps on purpose. */
nav {
  align-items: center;
}
h2 {
  line-height: 1.2;
  margin-bottom: 20px;
}
h3 {
  line-height: 1.3;
}
.hero.solo h1,
.page h1 {
  text-wrap: balance;
}
.sub {
  margin: -8px 0 28px;
}
.page > .lead {
  margin-bottom: 0;
}
section.band {
  margin: 56px 0;
}

/* Field borders a shade darker than the card borders, so empty fields read as fields. */
.contact-form input:not([type="checkbox"]),
.contact-form select,
.contact-form textarea,
.donate input,
.calc input,
.freq button,
.tiles button {
  border-color: #aeaba2;
}
.freq button.on,
.tiles button.on {
  border-color: var(--fg);
}
.contact-form label.check {
  align-items: center;
}
.contact-form label.check input {
  margin: 0;
}

/* Ce facem: the links sit at the bottom of their cards, level with each other. */
#ce-facem .card > .fine {
  margin-top: auto;
}

/* Bursa Reușim: the labels are what people scan, so they get the text color and weight. */
.spec dt {
  color: var(--fg);
  font-size: 0.95em;
  font-weight: 600;
}
section > .fine,
.calc .fine {
  max-width: 720px;
}

/* Cine suntem: no extra space after the last profile link. */
.founder-grid .sign {
  margin: 16px 0 0;
}

/* /sponsorizare: both forms share the page width, the calculator's two fields side by side. */
#calc {
  max-width: none;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
#calc .out,
#calc .fine {
  grid-column: 1 / -1;
}
#calc input,
#calc .out {
  font-variant-numeric: tabular-nums;
}
#calc .out:not(:empty) {
  padding: 14px 16px;
  background: var(--tint);
  border-radius: 8px;
  font-size: 1.1em;
  line-height: 1.5;
}
.contract-form .cui-row {
  align-items: flex-end;
}
.contract-form .cui-row > label {
  flex: 0 1 240px;
  min-width: 0;
}
.contract-form .cui-row input {
  max-width: none;
  height: 48px;
}
.contract-form .cui-row > .lookup {
  flex: none;
  height: 48px;
  padding: 0 20px;
}
.steps {
  padding-left: 1.6em;
}
.steps li {
  padding-left: 6px;
}
.steps li::marker {
  color: var(--muted);
  font-weight: 500;
}
.legal div {
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}

@media (max-width: 720px) {
  section {
    padding: 36px 0;
  }
  .hero.solo {
    padding: 32px 0 36px;
  }
  section.band {
    margin: 36px 0;
    padding: 32px 16px;
    border-radius: 12px;
  }
  .band .card {
    padding: 20px;
  }
  /* The photo next to the name and role, the bio under both. */
  .founder-grid {
    grid-template-columns: 88px minmax(0, 1fr);
    gap: 6px 16px;
  }
  .founder-grid > img {
    grid-column: 1;
    grid-row: 1 / span 2;
    max-width: none;
  }
  .founder-grid > div {
    display: contents;
  }
  .founder-grid h3 {
    grid-column: 2;
    align-self: end;
    margin: 0;
    font-size: 1.15em;
  }
  .founder-grid .role {
    grid-column: 2;
    align-self: start;
    margin: 0;
    font-size: 0.95em;
  }
  .founder-grid > div > p:not(.role) {
    grid-column: 1 / -1;
    margin: 12px 0 0;
  }
  .founder-grid + .founder-grid {
    margin-top: 28px;
    padding-top: 28px;
    border-top: 1px solid var(--line);
  }
}

@media (max-width: 560px) {
  /* Brand and the blue button on the first row, the other links on the second. */
  nav {
    justify-content: flex-start;
    gap: 0 18px;
  }
  nav .nav-cta {
    order: 1;
  }
  nav::after {
    content: "";
    order: 2;
    flex-basis: 100%;
  }
  nav a:not(.brand):not(.nav-cta) {
    order: 3;
    padding: 10px 0;
  }
  #calc {
    grid-template-columns: 1fr;
  }
  .contact-form {
    padding: 20px;
  }
  .contact-form .form-foot {
    display: grid;
  }
  .contract-form > .btn.primary {
    justify-self: stretch;
  }
}

/* Donate: the chosen frequency and amount are marked in blue outline, so the only solid button in the
   card is the one that pays, in the same blue as the nav button. */
.donate .freq button.on,
.donate .tiles button.on {
  background: var(--tint);
  color: var(--fg);
  border-color: var(--link);
  box-shadow: inset 0 0 0 1px var(--link);
  font-weight: 600;
}
.donate .go {
  margin-top: 8px;
  padding: 14px 20px;
  font-size: 1.05em;
  font-weight: 600;
  background: var(--link);
  border-color: var(--link);
  color: #fff;
}
.donate .go:hover:not(:disabled) {
  background: #0a4cb6;
  border-color: #0a4cb6;
  color: #fff;
}

/* "În curând" (31.10.2026): card payments, 3.5% and company sponsorship are not open yet.
   Removing the "soon" class from .donate and putting the links back turns them on. */
.donate.soon .freq,
.donate.soon .tiles {
  opacity: 0.5;
}
.btn:not(.primary):disabled:hover {
  background: none;
}