/* Marketing site layout - layers on top of colors_and_type.css */

* { box-sizing: border-box; }

html, body {
  background: var(--bg-page);
  min-height: 100vh;
}

.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

@media (max-width: 768px) {
  .container { padding-left: var(--gutter-mobile); padding-right: var(--gutter-mobile); }
}

/* ── Buttons ─────────────────────────────────────────────────────────── */
.btn {
  font: var(--type-button);
  border: none;
  cursor: pointer;
  padding: 14px 22px;
  border-radius: var(--radius-2);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transition: background var(--dur-hover) var(--ease-out),
              color var(--dur-hover) var(--ease-out),
              transform 80ms var(--ease-out);
  text-decoration: none;
}
.btn .arr { display: inline-block; transition: transform var(--dur-hover) var(--ease-out); }
.btn:hover .arr { transform: translateX(3px); }
.btn:active { transform: scale(0.98); }

.btn--primary { background: var(--nb-violet); color: var(--nb-sugar); }
.btn--primary:hover { background: var(--nb-violet-deep); color: var(--nb-sugar); }

.btn--dark { background: var(--nb-ink); color: var(--nb-sugar); }
.btn--dark:hover { background: var(--nb-violet-deep); }

.btn--outline {
  background: transparent;
  color: var(--fg-1);
  border: 1.5px solid var(--border-2);
}
.btn--outline:hover { background: rgba(23, 18, 28, 0.06); }

.btn--ghost { background: transparent; color: var(--nb-violet); padding: 14px 8px; }
.btn--ghost:hover { color: var(--nb-violet-deep); }

.btn--sm { padding: 10px 16px; font-size: 14px; border-radius: var(--radius-1); }
.btn--lg { padding: 18px 28px; font-size: 17px; }

/* ── Form inputs ─────────────────────────────────────────────────────── */
.input, .select, .textarea {
  font: 400 15px/1.4 var(--font-body);
  color: var(--fg-1);
  background: #fff;
  border: 1px solid var(--border-2);
  border-radius: var(--radius-2);
  padding: 13px 14px;
  width: 100%;
  outline: none;
  transition: border-color var(--dur-hover) var(--ease-out),
              box-shadow var(--dur-hover) var(--ease-out);
}
.input:focus, .select:focus, .textarea:focus {
  border-color: var(--border-focus);
  box-shadow: var(--shadow-focus);
}
.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.field-label {
  font: 600 13px/1 var(--font-body);
  color: var(--fg-1);
}
.field-helper {
  font: 500 12px/1.4 var(--font-body);
  color: var(--fg-2);
}

/* ── Chips ───────────────────────────────────────────────────────────── */
.chip {
  font: 500 13px/1 var(--font-body);
  padding: 8px 14px;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--fg-1);
  border: 1.5px solid var(--border-2);
  cursor: pointer;
  transition: background var(--dur-hover) var(--ease-out),
              color var(--dur-hover) var(--ease-out),
              border-color var(--dur-hover) var(--ease-out);
}
.chip:hover { background: rgba(23, 18, 28, 0.04); }
.chip[aria-pressed="true"] {
  background: var(--nb-ink);
  color: var(--nb-sugar);
  border-color: var(--nb-ink);
}

/* ── Card ────────────────────────────────────────────────────────────── */
.card {
  background: var(--bg-surface);
  border-radius: var(--radius-4);
  box-shadow: var(--shadow-2);
  overflow: hidden;
}

/* ── Icon utility ────────────────────────────────────────────────────── */
.icn {
  width: 1em;
  height: 1em;
  display: inline-block;
  vertical-align: middle;
  flex: none;
  object-fit: contain;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
img.icn { stroke-width: 0; }

/* Unicode-arrow renderer (.icn--uni). Used by Icon.ArrowRight et al — keeps
   the arrow as a text glyph so it inherits the surrounding font/colour and
   stays crisp at any size, matching the design-system decision to use →↑↓↖
   as Unicode in schedule tables. */
.icn.icn--uni {
  width: auto; height: auto;
  font-size: 1em;
  line-height: 1;
  color: currentColor;
  stroke: none;
  fill: none;
  font-weight: 600;
}

/* ── Section ─────────────────────────────────────────────────────────── */
.section { padding: var(--section-y) 0; }
@media (max-width: 768px) {
  .section { padding: var(--section-y-mobile) 0; }
}

/* ── Karoga ribbon divider ───────────────────────────────────────────── */
.karoga {
  height: 56px;
  display: flex;
  gap: 14px;
  padding: 0 var(--gutter);
  overflow: hidden;
}
.karoga .stripe {
  flex: 1;
  background: var(--nb-lavender);
  clip-path: polygon(0 0, 100% 0, 100% 36%, 62% 56%, 62% 100%, 0 100%);
}
.karoga .v1 { background: var(--nb-violet); }
.karoga .v2 { background: var(--nb-violet-deep); }

/* ── Eyebrow ─────────────────────────────────────────────────────────── */
.eyebrow {
  font: var(--type-eyebrow);
  letter-spacing: var(--tracking-loose);
  text-transform: uppercase;
  color: var(--fg-brand);
}