/* Tessera — "Editorial Studio" theme for the customer site (@tessera/web).
   Layers on top of @tessera/ui (assets/app.css): re-tunes the custom properties
   to off-white paper / deep ink / a single cobalt accent, with a serif display
   and a larger editorial scale. The @tessera/ui component classes read these
   variables, so primitives stay authoritative and only the look changes. */
@import url("app.css");

:root,
[data-theme="light"] {
  /* paper + ink */
  --t-color-base: #f7f6f2;
  --t-color-base-deep: #efede7;
  --t-color-surface: #ffffff;
  --t-color-surface-raised: #ffffff;
  --t-color-surface-sunken: #f1efe9;
  --t-color-border: rgba(20, 22, 26, 0.12);
  --t-color-border-strong: rgba(20, 22, 26, 0.3);
  --t-color-text: #15171b;
  --t-color-text-muted: #4a4f57;
  --t-color-text-faint: #6c7178;
  /* the one confident accent: cobalt ink */
  --t-color-accent: #1e4fb8;
  --t-color-accent-strong: #163c8f;
  --t-color-accent-deep: #0f2c6b;
  --t-color-accent-tint: rgba(30, 79, 184, 0.075);
  --t-color-accent-line: rgba(30, 79, 184, 0.4);
  --t-color-focus: #163c8f;
  /* editorial scale: larger than the product default */
  --t-text-displayXl-size: clamp(2.9rem, 6.2vw, 4.75rem);
  --t-text-displayXl-weight: 400;
  --t-text-displayLg-size: clamp(2.05rem, 4.2vw, 3.15rem);
  --t-text-displayLg-weight: 400;
  --t-text-displayMd-size: clamp(1.5rem, 2.6vw, 2.1rem);
  --t-text-displayMd-weight: 400;
  --t-text-body-size: 1.0625rem;
  --t-text-bodySm-size: 0.9375rem;
  --t-text-caption-size: 0.8125rem;
  /* small, instrument-like radii and quiet shadows */
  --t-radius-xs: 2px;
  --t-radius-sm: 3px;
  --t-radius-md: 4px;
  --t-radius-lg: 8px;
  --t-shadow-sm: 0 1px 0 rgba(20, 22, 26, 0.04);
  --t-shadow-md: 0 22px 48px -36px rgba(20, 22, 26, 0.45);
  --t-shadow-lg: 0 50px 90px -60px rgba(20, 22, 26, 0.55);
  --t-layout-max: 74rem;
}

body {
  background-image:
    radial-gradient(120% 80% at 88% -12%, var(--t-color-accent-tint), transparent 58%),
    linear-gradient(180deg, #fbfaf7 0%, var(--t-color-base) 24%);
  background-attachment: fixed;
}

.t-nav { background: color-mix(in srgb, var(--t-color-base) 88%, transparent); }
.t-footer { background: var(--t-color-base-deep); }
.t-card, .t-product, .t-stat, .t-tape, .t-faq, .t-table-wrap, .t-code { border-color: rgba(20, 22, 26, 0.13); }
.t-hero::before { background: radial-gradient(52% 52% at 90% 0%, var(--t-color-accent-tint), transparent 70%); }
.t-hero { padding-block: var(--t-space-4xl) var(--t-space-3xl); }
.t-section__title, .t-hero__title { text-wrap: balance; }
.t-hero__lead, .t-section__lead { text-wrap: pretty; }
.t-code__pre { font-size: 0.8125rem; }
/* The @tessera/ui tape head carries an internal "read-only" marker; the sales
   site hides it (the tape here is a service summary, not the evidence ledger). */
.t-tape__head .t-mono { display: none; }

/* ------------------------------------------------------------ language pill */
.w-lang {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; min-height: 36px; padding: 0 var(--t-space-sm);
  font-family: var(--t-font-mono); font-size: var(--t-text-monoMicro-size);
  letter-spacing: 0.08em; color: var(--t-color-text-muted); text-decoration: none;
  border: 1px solid var(--t-color-border-strong); border-radius: var(--t-radius-xs);
  transition: color var(--t-dur-fast) var(--t-ease-standard), border-color var(--t-dur-fast) var(--t-ease-standard);
}
.w-lang:hover { color: var(--t-color-accent-strong); border-color: var(--t-color-accent); }
.w-nav-toggle {
  display: none; align-items: center; min-height: 36px; padding: 0 var(--t-space-sm);
  font-family: var(--t-font-mono); font-size: var(--t-text-monoMicro-size); letter-spacing: 0.06em;
  color: var(--t-color-text-muted); background: transparent;
  border: 1px solid var(--t-color-border-strong); border-radius: var(--t-radius-xs); cursor: pointer;
}

/* --------------------------------------------------------- page furniture */
.w-pagehead { padding-block: var(--t-space-4xl) var(--t-space-xl); }
.w-pagehead .t-section__title { max-width: 22ch; }
.w-breadcrumb {
  display: flex; align-items: center; gap: var(--t-space-xs);
  padding-block: var(--t-space-lg); font-size: var(--t-text-caption-size);
  color: var(--t-color-text-faint);
}
.w-breadcrumb a { color: var(--t-color-text-muted); text-decoration: none; }
.w-breadcrumb a:hover { color: var(--t-color-accent-strong); }
.w-more { margin-top: var(--t-space-lg); }

/* --------------------------------------------------------------- services */
.w-services { align-items: stretch; }
.w-service__summary { color: var(--t-color-text-muted); font-size: var(--t-text-bodySm-size); line-height: 1.6; }
.w-service__tag { margin-top: var(--t-space-xs); }

/* ---------------------------------------------------------------- process */
.w-steps { list-style: none; border-top: 1px solid var(--t-color-border); }
.w-step {
  display: grid; grid-template-columns: 3.5rem 1fr; gap: var(--t-space-lg);
  padding-block: var(--t-space-xl); border-bottom: 1px solid var(--t-color-border);
}
.w-step__num { font-family: var(--t-font-mono); font-size: var(--t-text-monoMicro-size); letter-spacing: 0.1em; color: var(--t-color-accent); padding-top: 0.35rem; }
.w-step__title { font-family: var(--t-font-display); font-size: 1.3rem; font-weight: 500; margin-bottom: 0.2rem; }
.w-step__body { color: var(--t-color-text-muted); max-width: 60ch; }

/* ------------------------------------------------------------ deliverables */
.w-deliverables { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--t-color-border); }
.w-deliverable { padding: var(--t-space-xl) var(--t-space-lg) var(--t-space-xl) 0; border-bottom: 1px solid var(--t-color-border); }
.w-deliverable + .w-deliverable { padding-left: var(--t-space-lg); border-left: 1px solid var(--t-color-border); }
.w-deliverable__title { font-family: var(--t-font-display); font-size: 1.15rem; font-weight: 500; margin-bottom: 0.3rem; }
.w-deliverable__body { color: var(--t-color-text-muted); font-size: var(--t-text-bodySm-size); line-height: 1.6; }

/* -------------------------------------------------------- problem/outcome */
.w-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--t-space-2xl); }
.w-col__label { font-family: var(--t-font-mono); font-size: var(--t-text-monoMicro-size); letter-spacing: 0.08em; color: var(--t-color-text-faint); padding-bottom: var(--t-space-sm); border-bottom: 1px solid var(--t-color-border); margin-bottom: var(--t-space-md); }
.w-col--outcome .w-col__label { color: var(--t-color-accent-strong); border-bottom-color: var(--t-color-accent-line); }
.w-list { list-style: none; display: grid; gap: var(--t-space-sm); }
.w-list li { position: relative; padding-left: 1.35rem; color: var(--t-color-text-muted); line-height: 1.55; }
.w-list li::before { position: absolute; left: 0; color: var(--t-color-text-faint); font-family: var(--t-font-mono); }
.w-list--problems li::before { content: "—"; }
.w-list--outcomes li::before { content: "✓"; color: var(--t-color-accent); }
.w-panel .w-list li { color: var(--t-color-text); }

/* ------------------------------------------------------------------ tiers */
.w-tiers { align-items: stretch; }
.w-tier {
  position: relative; display: flex; flex-direction: column; gap: var(--t-space-md);
  padding: var(--t-space-xl); background: var(--t-color-surface);
  border: 1px solid rgba(20, 22, 26, 0.14); border-radius: var(--t-radius-md);
}
.w-tier--featured { border-color: var(--t-color-accent-line); border-top: 3px solid var(--t-color-accent); background: var(--t-color-accent-tint); }
.w-tier__badge { position: absolute; top: var(--t-space-md); right: var(--t-space-md); }
.w-tier__name { font-family: var(--t-font-display); font-size: 1.4rem; font-weight: 500; }
.w-tier__desc { color: var(--t-color-text-muted); font-size: var(--t-text-bodySm-size); min-height: 2.6em; }
.w-tier__price { display: flex; align-items: baseline; gap: var(--t-space-xs); padding-block: var(--t-space-sm); border-block: 1px solid var(--t-color-border); }
.w-tier__from { font-family: var(--t-font-mono); font-size: var(--t-text-monoMicro-size); letter-spacing: 0.06em; color: var(--t-color-text-faint); }
.w-tier__custom { font-family: var(--t-font-display); font-size: 1.6rem; font-weight: 500; color: var(--t-color-accent-strong); }
.w-tier__features { list-style: none; display: grid; gap: var(--t-space-xs); flex: 1; }
.w-tier__feature { position: relative; padding-left: 1.25rem; color: var(--t-color-text-muted); font-size: var(--t-text-bodySm-size); line-height: 1.5; }
.w-tier__feature::before { content: "✓"; position: absolute; left: 0; color: var(--t-color-accent); }

/* ----------------------------------------------------------------- panels */
.w-panel {
  padding: var(--t-space-2xl); background: var(--t-color-surface);
  border: 1px solid rgba(20, 22, 26, 0.14); border-radius: var(--t-radius-md);
  border-left: 3px solid var(--t-color-accent); display: grid; gap: var(--t-space-md); max-width: 60rem;
}
.w-panel__lead { color: var(--t-color-text-muted); max-width: 62ch; }
.w-panel__note { margin-top: var(--t-space-md); }
.w-guarantee .w-panel { border-left-color: var(--t-color-success); }
.w-band-wrap { border-top: 1px solid var(--t-color-border); }
.w-band {
  text-align: center; display: grid; justify-items: center; gap: var(--t-space-md);
  padding: var(--t-space-3xl) var(--t-space-xl); background: var(--t-color-surface);
  border: 1px solid var(--t-color-accent-line); border-radius: var(--t-radius-md);
}
.w-band .t-section__title { max-width: 26ch; }
.w-band__lead { color: var(--t-color-text-muted); max-width: 56ch; }
.w-cta-row { display: flex; flex-wrap: wrap; gap: var(--t-space-sm); align-items: center; justify-content: center; margin-top: var(--t-space-xs); }
.w-panel .w-cta-row, .w-form .w-cta-row { justify-content: flex-start; }

/* ----------------------------------------------------------------- sample */
.w-sample__caption { font-family: var(--t-font-mono); font-size: var(--t-text-caption-size); color: var(--t-color-text-faint); }

/* ---------------------------------------------------------------- contact */
.w-contact { display: grid; grid-template-columns: 1.25fr 0.75fr; gap: var(--t-space-2xl); align-items: start; }
.w-form { display: grid; gap: var(--t-space-md); padding: var(--t-space-2xl); background: var(--t-color-surface); border: 1px solid rgba(20, 22, 26, 0.14); border-radius: var(--t-radius-md); }
.w-channels { display: flex; flex-wrap: wrap; gap: var(--t-space-sm); }
.w-form__fields { display: grid; gap: var(--t-space-md); }
.w-field { display: grid; gap: var(--t-space-2xs); }
.w-field__label { font-size: var(--t-text-caption-size); color: var(--t-color-text-muted); }
.w-input {
  width: 100%; min-height: 44px; padding: var(--t-space-sm) var(--t-space-md);
  background: var(--t-color-base); color: var(--t-color-text);
  border: 1px solid var(--t-color-border-strong); border-radius: var(--t-radius-sm);
  font-family: var(--t-font-sans); font-size: var(--t-text-bodySm-size);
}
.w-input:focus-visible { outline: none; border-color: var(--t-color-accent); box-shadow: var(--t-shadow-ring); }
textarea.w-input { padding-top: var(--t-space-sm); resize: vertical; }
.w-aside { display: grid; gap: var(--t-space-md); padding: var(--t-space-xl); background: var(--t-color-base-deep); border-radius: var(--t-radius-md); }
.w-aside__title { font-family: var(--t-font-mono); font-size: var(--t-text-monoMicro-size); letter-spacing: 0.06em; color: var(--t-color-text-faint); }
.w-facts { display: grid; gap: var(--t-space-sm); }
.w-fact { display: flex; justify-content: space-between; gap: var(--t-space-md); border-bottom: 1px solid var(--t-color-border); padding-bottom: var(--t-space-xs); }
.w-fact dt { color: var(--t-color-text-muted); font-size: var(--t-text-bodySm-size); }
.w-fact dd { margin: 0; font-family: var(--t-font-mono); font-size: var(--t-text-monoData-size); }

/* -------------------------------------------------------------- responsive */
@media (max-width: 960px) {
  .w-contact { grid-template-columns: 1fr; }
  .w-deliverables { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .w-deliverable:nth-child(odd) { padding-left: 0; border-left: 0; }
}
@media (max-width: 720px) {
  .w-columns { grid-template-columns: 1fr; gap: var(--t-space-xl); }
  .w-deliverables { grid-template-columns: 1fr; }
  .w-deliverable { padding-left: 0; border-left: 0; }
  .w-step { grid-template-columns: 2.5rem 1fr; gap: var(--t-space-md); }
  .w-nav-toggle { display: inline-flex; }
  .t-nav.w-nav-open .t-nav__links {
    display: flex; flex-direction: column; align-items: flex-start; gap: var(--t-space-md);
    position: absolute; left: 0; right: 0; top: 100%; padding: var(--t-space-lg) var(--t-layout-gutter);
    background: var(--t-color-surface); border-bottom: 1px solid var(--t-color-border-strong);
    box-shadow: var(--t-shadow-md);
  }
}