/* AppReins website.
   Every value below comes from design/brand/template.html — the locked brand
   sheet, revision 3, all 24 areas settled. Section 24's token block is pasted
   verbatim; everything after it is built only on those tokens. */

:root {
  /* Palette · Harbour */
  --paper:   #F3F2ED;   /* background              */
  --surface: #FCFCF9;   /* cards, tables, inputs   */
  --ink:     #202D3B;   /* foreground              */
  --muted:   #58636D;   /* secondary text          */
  --line:    #CFD3D2;   /* divider — decorative    */
  --control: #75818A;   /* control edge            */
  --navy:    #233F65;   /* identity, filled action */
  --teal:    #146575;   /* primary                 */
  --brass:   #806522;   /* secondary               */
  --tint:    #E4EFF0;   /* hover, highlight        */

  /* Scales · 50 tint → 900 deepest */
  --neutral-50:  #FCFCF9; --neutral-100: #F3F2ED; --neutral-300: #CFD3D2;
  --neutral-600: #58636D; --neutral-900: #202D3B;
  --navy-50:  #EDF1F6; --navy-200:  #CCD8E6; --navy-500:  #496181;
  --navy-700: #233F65; --navy-900:  #17222F;
  --teal-50:  #E4EFF0; --teal-200:  #B7D7DA; --teal-500:  #357984;
  --teal-700: #146575; --teal-900:  #123C46;
  --brass-50:  #F6EED9; --brass-200: #D9BE78; --brass-500: #8A6D28;
  --brass-700: #806522; --brass-900: #483D1F;

  /* Modes · light is canonical */
  --dark-paper: #17222F;  --dark-surface: #223142;
  --dark-ink:   #F3F2ED;  --dark-muted:   #BAC5CE;
  --dark-line:  #81929F;  --dark-teal:    #88CDCF;  --dark-brass: #D9BE78;
  --on-filled:  #FCFCF9;  --dark-on-filled: #17222F;

  /* Typography · Editorial */
  --font-display: Georgia, "Times New Roman", serif;   /* ships as Tiempos Headline */
  --font-body:    "Segoe UI", Arial, sans-serif;       /* ships as Inter            */
  --font-mono:    Consolas, "Courier New", monospace;  /* ships as JetBrains Mono   */
  --size-hero:    76px;  --size-display: 56px;  --size-headline: 40px;
  --size-heading: 28px;  --size-intro:   20px;  --size-body:     16px;
  --size-ui:      14px;  --size-meta:    12px;
  --leading-display: 1.08;  --leading-body: 1.55;  --leading-ui: 1.45;
  --track-display: -.04em;  --track-wordmark: -.035em;  --track-meta: .09em;
  --weight-regular: 400;    --weight-semibold: 600;
  --numerals-data: tabular-nums;

  /* Shape · Keyed — square everywhere except one top-left chamfer */
  --radius: 0;
  --border-divider: 1px;   --border-control: 1px;
  --rule-emphasis: 3px;    /* --rule-signature retired: the cut replaces it */
  --elevation-flat:    none;
  --elevation-toast:   0 8px 24px #202D3B0D;
  --elevation-overlay: 0 16px 40px #202D3B1F;

  /* Density · Spacious */
  --row-min:       64px;  --row-padding: 22px;
  --panel-padding: 24px;  --group-gap:   24px;

  /* Motif · Corner — the cut is the mark; Datum retired in revision 3 */
  --ch:        16px;     /* chamfer size · top-left corner only  */
  --ch-edge:   #146575;  /* diagonal colour · #88CDCF on dark    */
  --ch-w:      3px;      /* diagonal weight                      */

  /* Spacing · 4 px rhythm */
  --space-unit: 4px;  --space-1:  4px;   --space-2:  8px;   --space-3: 12px;
  --space-4:  16px;   --space-6: 24px;   --space-8: 32px;   --space-12: 48px;
  --space-16: 64px;   --space-24: 96px;

  /* Layout · 1280 canvas */
  --container: 1152px;  --reading: 672px;  --gutter: 24px;
  --margin-lg: 64px;    --margin-md: 24px; --margin-sm: 16px;
  --bp-md: 900px;       --bp-sm: 640px;

  /* Semantic colour · text on tint */
  --success: #246144;  --success-bg: #EAF3ED;
  --warning: #78560C;  --warning-bg: #FBF2DB;
  --danger:  #A02F38;  --danger-bg:  #FBECEE;
  --info:    #245B83;  --info-bg:    #EAF2FA;

  /* Accessibility */
  --focus-light: #146575;  --focus-dark: #88CDCF;
  --focus-width: 3px;      --focus-offset: 3px;
  --target: 44px;          --target-gap: 8px;

  /* Motion */
  --duration-fast:  120ms;   /* direct feedback  */
  --duration-base:  180ms;   /* state change     */
  --duration-panel: 240ms;   /* new surface      */
  --ease: cubic-bezier(.2, 0, 0, 1);
  --motion-shift: 8px;
}

@media (prefers-reduced-motion: reduce) {
  :root { --duration-fast: 0ms; --duration-base: 0ms; --duration-panel: 0ms; --motion-shift: 0px; }
}

/* ---- page ------------------------------------------------------------- */

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: var(--size-body)/var(--leading-body) var(--font-body);
}

.wrap { width: min(var(--container), calc(100% - (var(--margin-lg) * 2))); margin-inline: auto; }

a { color: var(--teal); text-underline-offset: 4px; }

h1, h2, h3 { margin: 0; }

p { margin: 0 0 var(--space-4); }
p:last-child { margin-bottom: 0; }

.eyebrow {
  font: var(--size-meta)/var(--leading-ui) var(--font-mono);
  letter-spacing: var(--track-meta);
  text-transform: uppercase;
  color: var(--teal);
}

.muted { color: var(--muted); }

:focus-visible {
  outline: var(--focus-width) solid var(--focus-light);
  outline-offset: var(--focus-offset);
}

/* ---- masthead · section 16, with the section 20 underline -------------- */

.masthead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  flex-wrap: wrap;
  padding: var(--space-8) 0;
  border-bottom: var(--border-divider) solid var(--line);
}

.brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: 24px;
  font-weight: var(--weight-semibold);
  letter-spacing: var(--track-wordmark);
  color: var(--ink);
  text-decoration: none;
}

/* The exported mark is transparent and keeps its original proportions. */
.brand img { width: 64px; height: auto; display: block; }

.sitenav { display: flex; gap: var(--space-6); flex-wrap: wrap; }

.sitenav a {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: var(--target);
  font-size: var(--size-ui);
  text-decoration: none;
  color: var(--ink);
}

.sitenav a::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: 10px;
  height: 2px;
  background: var(--teal);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--duration-base) var(--ease);
}

.sitenav a:hover::after, .sitenav a:focus-visible::after { transform: scaleX(1); }

/* ---- hero · sections 05 and 08 ----------------------------------------- */

.hero { display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--space-16); padding: 72px 0 var(--space-16); }

.hero h1 {
  font: var(--weight-regular) var(--size-hero)/1.04 var(--font-display);
  letter-spacing: -.045em;
  margin: var(--space-6) 0;
}

.hero h1 em { color: var(--teal); font-style: normal; }

.hero p { max-width: 550px; font-size: 18px; }

.hero-art { display: grid; place-items: center; border-left: var(--border-divider) solid var(--line); }
.hero-art img { width: min(260px, 100%); height: auto; display: block; }

.actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-8); }

/* ---- buttons · section 13 · never chamfered ---------------------------- */

.button {
  min-height: var(--target);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 11px 18px;
  border: var(--border-control) solid var(--navy);
  background: var(--navy);
  color: var(--on-filled);
  font: var(--weight-semibold) var(--size-ui)/1.3 var(--font-body);
  text-decoration: none;
  transition: background-color var(--duration-fast) var(--ease);
}

.button:hover { background: #172B46; }
.button:active { background: #102036; }

.button.secondary { background: var(--surface); color: var(--navy); border-color: var(--control); }
.button.secondary:hover { background: var(--tint); }

/* ---- sections and panels · section 07 ---------------------------------- */

section[id] { padding-bottom: var(--space-16); margin-bottom: var(--space-16); border-bottom: var(--border-divider) solid var(--line); scroll-margin-top: var(--space-6); }

.section-head { margin-bottom: var(--space-8); }
.section-head h2 { margin-top: var(--space-3); font-size: var(--size-heading); font-weight: var(--weight-semibold); letter-spacing: var(--track-wordmark); }
.section-head p { margin-top: var(--space-4); max-width: var(--reading); font-size: var(--size-intro); color: var(--muted); }

.grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--group-gap); }
.grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.panel {
  padding: var(--panel-padding);
  border: var(--border-divider) solid var(--line);
  min-width: 0;
  clip-path: polygon(var(--ch) 0, 100% 0, 100% 100%, 0 100%, 0 var(--ch));
  background:
    linear-gradient(135deg, var(--ch-edge) 0 calc(var(--ch) * .707 + var(--ch-w)), transparent 0),
    var(--surface);
}

.panel h3 { font-size: var(--size-intro); font-weight: var(--weight-semibold); margin-bottom: var(--space-3); }

.facts { list-style: none; margin: var(--space-6) 0 0; padding: 0; }
.facts li { padding: var(--space-3) 0; border-bottom: var(--border-divider) solid var(--line); }
.facts li:last-child { border-bottom: 0; }

.product { display: grid; grid-template-columns: 1fr 1fr; gap: var(--group-gap); align-items: start; }

footer { padding: 0 0 var(--space-12); font-size: var(--size-ui); color: var(--muted); }

/* ---- responsive · --bp-md 900, --bp-sm 640 ----------------------------- */

@media (max-width: 900px) {
  .wrap { width: calc(100% - (var(--margin-md) * 2)); }
  .hero { grid-template-columns: 1fr; gap: var(--space-6); }
  .hero h1 { font-size: 58px; }
  .hero-art { display: none; }
  .grid, .product { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .wrap { width: calc(100% - (var(--margin-sm) * 2)); }
  .hero { padding-top: var(--space-12); }
  .hero h1 { font-size: 48px; }
  .actions .button { flex: 1 1 100%; justify-content: center; }
}