/* ==========================================
 Global Theme – iView Labs (Custom GPTs)
 Single source of truth for colors, spacing,
 typography, components, and layout rails.
 Usage: <link rel="stylesheet" href="/assets/theme.css">
 =========================================== */

/* ---- Brand Tokens ------------------------------------------------------ */
:root{
  /* Colors */
  --text:#0F172A; --muted:#475569; --bg:#FAFAFA;
  --card:#FFFFFF; --border:#E5E7EB; --accent:#bb2821;

  /* Layout */
  --page-max:1100px;
  --inner:1.4rem;          /* horizontal rails */
  --section-y:2rem;        /* vertical rhythm */

  /* Type */
  --font-sans:Inter, system-ui, Arial, sans-serif;
  --h1:1.9rem; --h2:1.25rem; --lead:1.05rem;

  /* Primary (variant token) */
  --primary:#0F172A;       /* classic default */
  --step:var(--primary);   /* timeline icon color */
}
@media (max-width:859px){ :root{ --inner:1rem } }

/* ---- Base -------------------------------------------------------------- */
html,body{ height:100% }
body{
  margin:0; font-family:var(--font-sans); color:var(--text);
  background:var(--bg); line-height:1.55; display:flex; flex-direction:column;
}
main{ flex:1 0 auto }

.wrap{ max-width:var(--page-max); margin:0 auto; padding:var(--section-y) 1rem }
.narrow{ width:min(100%,840px); margin-inline:auto }

h1{ font-size:var(--h1); margin:.2rem 0 .35rem; font-weight:700 }
h2{ font-size:var(--h2); margin:.2rem 0 .8rem;  font-weight:600 }
.lead{ color:var(--muted); margin:0 0 .8rem; font-size:var(--lead) }
a{ color:var(--text); text-underline-offset:2px }
.muted{ color:var(--muted) }

/* ================= RAILS & ALIGNMENT (global) ================= */
/* One owner of side padding per section to keep rails consistent */
.wrap > .narrow{ padding-inline:var(--inner) }   /* plain sections use .narrow for rails */
.wrap > .narrow.block{ padding-inline:0 }        /* card sections let .block own the rails */

/* Cards own the rails when used as section wrappers */
.block{
  background:var(--card); border:1px solid var(--border); border-radius:12px;
  padding:1rem var(--inner); margin:1rem 0;
}

/* ---- Components -------------------------------------------------------- */
.btn{ display:inline-block; padding:.64rem 1rem; border-radius:12px;
  border:1px solid var(--border); background:#fff; color:var(--text);
  text-decoration:none; font-weight:500; transition:background .15s ease, box-shadow .15s ease }
.btn:hover{ background:#F8FAFC }
.btn.primary{ background:var(--primary); color:#fff; border-color:var(--primary) }
.btn.primary:hover{ filter:brightness(.98) }
.btn.ghost{ background:transparent; border-color:transparent; color:var(--text) }
.btn.block{ display:flex; align-items:center; justify-content:center; width:100% }

.grid-2{ display:grid; gap:.75rem; align-items:stretch }
@media (min-width:860px){ .grid-2{ grid-template-columns:repeat(2,1fr) } }

.h2line{ display:flex; align-items:center; gap:.5rem; margin-top:.2rem; flex-wrap:wrap; line-height:1.2 }
.h2line svg{ width:22px; height:22px; flex:0 0 22px; color:var(--primary); display:inline-block; stroke:currentColor; vector-effect:non-scaling-stroke }

.price-row{ display:flex; align-items:baseline; gap:.4rem; margin:.2rem 0 .2rem }
.price{ font-size:1.7rem; font-weight:700; color:#0F172A }
.per{ color:var(--muted); font-size:.95rem }

.divider{ height:1px; background:#F1F5F9; margin:1rem 0 }
.list{ margin:.5rem 0 0; padding-left:1.1rem; color:var(--muted) }
.cta-row{ display:flex; gap:.6rem; flex-wrap:wrap; align-items:center; margin-top:auto }
.inline-note{ margin:.35rem 0 0; font-size:.9rem; color:var(--muted) }
.hint{ font-size:.85rem; color:var(--muted) }

.table{ width:100%; border-collapse:collapse; font-size:.95rem }
.table th, .table td{ border-top:1px solid #F1F5F9; padding:.55rem .2rem; text-align:left }
.table th{ color:var(--muted); font-weight:600; border-top:0 }

/* ---- Timeline (shared pattern) ---------------------------------------- */
.timeline{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  align-items:flex-start; justify-items:center; gap:1.5rem;
  margin:1.6rem 0; position:relative; padding:0;   /* ← no inner padding */
}
.timeline::before{
  content:""; position:absolute; top:30px; left:16.666%; width:66.666%;
  height:2px; background:#E5E7EB; z-index:0;
}
.step{ text-align:center; position:relative; z-index:1; padding:0; display:flex; flex-direction:column; align-items:center; max-width:240px; margin-inline:auto }
.step-icon{ width:56px; height:56px; border-radius:50%; background:var(--step); color:#fff; display:flex; align-items:center; justify-content:center; margin:0 auto .6rem }
.step-icon svg{ width:26px; height:26px; stroke:#fff; vector-effect:non-scaling-stroke }
.step-title{ font-weight:600; margin-bottom:.2rem; font-size:1rem }
.step-desc{ font-size:.9rem; color:var(--muted); max-width:220px; margin:0 auto }
.step-time{ font-size:.8rem; color:var(--muted); margin-top:.25rem; font-style:italic }

/* ---- Dark mode / Variant ---------------------------------------------- */
:root[data-theme="dark"]{
  --text:#F8FAFC; --muted:#CBD5E1; --bg:#0B1220; --card:#0F172A; --border:#1F2937; --accent:#e03a32; --primary:#e03a32; --step:var(--primary);
}
:root[data-variant="red"]{ --primary:var(--accent); --step:var(--primary) }