/* ==========================================================================
   The public site — Turf Intelligence (Home.razor + LandingLayout, and the
   register / sign-in pages in the same clothes).
   v6 (26.10) — the marketing deck's narrative folded in (the block near the end).
   v5 — the brand pivot (ADR-0013): the page READS THE SYSTEM TOKENS
   (css/tokens.css, loaded before this file; the layout root carries
   `tip-theme`). The marketing names below are aliases of the system roles,
   kept so the 600 lines under them stay readable; the dark bands (hero,
   promise, final call, footer) are `data-scheme="dark"` islands and the
   console composite inside the hero is a `data-scheme="light"` island, so the
   same role names flip per band — nothing is picked "for dark" by hand.
   Type: Geist, one family — display sizes at 600 with tight tracking (v4 was
   Poppins over Roboto; a serif display was tried and rejected on 24.10). Every product visual is still a drawn console
   composite — on the NEW console tokens, i.e. the console as phase 2 will
   paint it (docs/DESIGN_SYSTEM.md).
   Prefixes: .ti-*  — the marketing page;
             .tic-* — the console art kit (frames, widgets, tables, map).
   ========================================================================== */

/* The aliases are re-declared on every scheme island so they re-resolve
   against that island's --m3-* roles (an inherited custom property carries its
   COMPUTED value, so an alias declared only on .ti-page would stay light). */
.ti-page,
.ti-page [data-scheme="dark"],
.ti-page [data-scheme="light"] {
    /* marketing palette → system roles */
    --ti-moss: var(--m3-primary);                    /* text / outline / active / fill — one primary now */
    --ti-brand: var(--m3-primary);                   /* the old "fill only" name; same colour, kept for the art kit */
    --ti-lime: var(--m3-primary-container);          /* tonal ground: step icons, promo, the phone's chips */
    --ti-lime-soft: color-mix(in srgb, var(--m3-primary-container) 45%, var(--m3-surface-container-lowest));
    --ti-on-lime: var(--m3-on-primary-container);
    --ti-cta: var(--m3-primary-fixed);               /* the CTA on a dark band — fixed, same in both schemes */
    --ti-on-cta: var(--m3-on-primary-fixed);
    --ti-on-moss: var(--m3-on-primary);                /* labels on the primary fill */
    --ti-accent-on-dark: var(--m3-primary-fixed-dim);/* eyebrows, links, figures on the dark bands (7:1 on the seed) */
    --ti-paper: var(--m3-surface);                   /* light marketing ground */
    --ti-wash: var(--m3-surface-container-low);      /* alt band wash */
    --ti-card: var(--m3-surface-container-lowest);
    --ti-line: var(--m3-outline-variant);
    --ti-text: var(--m3-on-surface);
    --ti-muted: var(--m3-on-surface-variant);
    --ti-ink: var(--tip-band-deep);                  /* the dark bands' deep end */
    --ti-pine: var(--tip-band-top);                  /* …and their top: the seed itself */
    --ti-floor: var(--tip-band-floor);               /* the footer */
    --ti-snow: #eef2ea;                              /* body text on the dark bands (neutral 95) */
    --ti-dusk: rgba(238, 242, 234, .74);             /* secondary text on the dark bands */

    /* console tokens — the art is drawn on the real thing (DESIGN_SYSTEM.md §4) */
    --tic-chrome: var(--m3-surface-container-high);  /* top bar + rail, one L-shaped surface */
    --tic-panel: var(--m3-surface);                  /* the page panel inside the chrome */
    --tic-surface: var(--m3-surface-container-low);  /* widget zone */
    --tic-card: var(--m3-surface-container-lowest);
    --tic-low: var(--m3-surface-container);          /* tonal panels inside widgets */
    --tic-high: var(--m3-surface-container-high);
    --tic-outline: var(--m3-outline-variant);
    --tic-on: var(--m3-on-surface);
    --tic-onvar: var(--m3-on-surface-variant);
    --tic-slate: var(--m3-on-surface);               /* chrome text — the slate is retired, one ink */
    --tic-tertiary: var(--m3-tertiary);              /* the intelligence accent: AI, sensors, provenance */
    --tic-tertiary-container: var(--m3-tertiary-container);
    --tic-on-tertiary-container: var(--m3-on-tertiary-container);

    /* semantic — one meaning, one fill/text pair (DESIGN_SYSTEM.md §5) */
    --ok-fill: var(--tip-ok-fill);     --ok-text: var(--tip-ok-text);
    --warn-fill: var(--tip-warn-fill); --warn-text: var(--tip-warn-text);
    --bad-fill: var(--tip-bad-fill);   --bad-text: var(--tip-bad-text);
    --err: var(--m3-error);
    --info: var(--tip-info-fill);      --info-text: var(--tip-info-text);
    --mild-fill: var(--tip-mild-fill); --mild-text: var(--tip-mild-text);
    --mute-fill: var(--tip-mute-fill); --mute-text: var(--tip-mute-text);
    --nodata: var(--tip-nodata);

    /* shape scale (M3 Expressive large steps, as before) */
    --r-xl: var(--m3-radius-2xl); --r-lg: 24px; --r-md: var(--m3-radius-lg); --r-sm: var(--m3-radius-md); --r-xs: var(--m3-radius-sm);

    /* type */
    --f-display: var(--m3-font-brand);
    --f-body: var(--m3-font);
    --f-mono: var(--m3-font-mono);

    /* elevation */
    --e1: var(--m3-elev-1);
    --e2: var(--m3-elev-2);
    --e3: var(--m3-elev-3);

    /* M3 standard easing */
    --ease: var(--m3-ease-standard);
}

.ti-page {
    /* faint Garmin-style contour tile for the light bands (strokes in the seed) */
    --ti-topo: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='680' height='680' viewBox='0 0 680 680' fill='none'><g stroke='%230b4021' fill='none'><path d='M110 170C70 120 110 60 180 55C250 50 290 90 285 150C280 210 220 240 165 225C120 213 135 200 110 170Z' stroke-opacity='.05' stroke-width='1.2'/><path d='M125 165C95 128 125 85 178 80C231 75 262 105 258 150C254 195 210 218 170 207C138 198 148 190 125 165Z' stroke-opacity='.04' stroke-width='1'/><path d='M470 540C430 500 450 430 520 415C590 400 640 440 635 500C630 560 560 590 515 575C480 563 495 560 470 540Z' stroke-opacity='.05' stroke-width='1.2'/><path d='M485 532C455 502 470 452 520 441C570 430 606 458 602 500C598 542 548 563 515 552C489 544 500 548 485 532Z' stroke-opacity='.038' stroke-width='1'/><path d='M-20 360C80 330 160 370 260 340C360 310 420 340 520 310C590 289 650 300 700 285' stroke-opacity='.06' stroke-width='1.3'/><path d='M-20 420C90 395 170 430 270 402C370 374 440 402 540 374C610 355 660 365 700 352' stroke-opacity='.04' stroke-width='1'/><path d='M-20 60C60 40 140 70 220 50C300 30 380 55 460 38C540 21 620 40 700 25' stroke-opacity='.04' stroke-width='1'/></g></svg>");

    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--ti-paper);
    color: var(--ti-text);
    font-family: var(--f-body);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
html { scroll-behavior: smooth; }

/* Material Symbols helper — the icon font is loaded in index.html */
.msi {
    font-family: "Material Symbols Outlined" !important; /* wins over shorthand font: on ancestors */
    font-weight: normal; font-style: normal;
    font-size: 18px; line-height: 1;
    display: inline-block; flex: 0 0 auto;
    letter-spacing: normal; text-transform: none; white-space: nowrap;
    direction: ltr; -webkit-font-smoothing: antialiased;
    font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 20;
    user-select: none;
}

/* ---------------------------------------------------------------- header -- */
.ti-top { position: sticky; top: 0; z-index: 60; display: flex; align-items: center; gap: 18px; padding: 10px max(24px, calc((100% - 1240px) / 2)); background: color-mix(in srgb, var(--ti-paper) 86%, transparent); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border-bottom: 1px solid color-mix(in srgb, var(--ti-line) 55%, transparent); }
.ti-topnav { display: flex; gap: 2px; padding: 4px; border-radius: 999px; background: color-mix(in srgb, var(--ti-wash) 72%, transparent); }
.ti-topnav a { font: 500 14px/20px var(--f-body); color: var(--ti-muted); text-decoration: none; padding: 8px 16px; border-radius: 999px; transition: background .2s var(--ease), color .2s var(--ease); }
.ti-topnav a:hover { background: var(--ti-card); color: var(--ti-text); box-shadow: var(--e1); }
.ti-topcta { margin-left: auto; display: flex; gap: 10px; align-items: center; }

/* ---------------------------------------------------- the TI cell & word -- */
.ti-logo { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: inherit; }
/* the mark (Layout/TipMark, DESIGN_SYSTEM.md §3.1): the shield in currentColor, sized by height —
   bare in the moss beside the wordmark, the accent on the dark bands; .ti-tile is the app-icon
   form (the shield on a white tile) where the mark stands for the product as an object */
.ti-cell { display: inline-block; height: 36px; aspect-ratio: 175 / 185; width: auto; color: var(--ti-moss); flex: 0 0 auto; }
.ti-cell.is-big { height: 96px; color: var(--ti-accent-on-dark); filter: drop-shadow(0 0 28px rgba(158, 211, 168, .30)); }
.ti-tile { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 22%; background: var(--ti-card); box-shadow: 0 10px 30px rgba(11, 64, 33, .22); flex: 0 0 auto; }
.ti-tile .tip-mark { height: 70%; color: var(--ti-moss); }
.ti-word { display: flex; flex-direction: column; line-height: 1; }
.ti-word b { font: 600 16px/20px var(--f-display); letter-spacing: -.01em; white-space: nowrap; }
.ti-word small { font: 600 9px/13px var(--f-body); letter-spacing: 2px; text-transform: uppercase; color: var(--ti-muted); }

/* --------------------------------------------------------------- buttons -- */
.ti-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; padding: 0 24px; border-radius: 999px; border: 1px solid var(--ti-line); background: var(--ti-card); color: var(--ti-text); font: 600 14px/20px var(--f-body); letter-spacing: .1px; text-decoration: none; white-space: nowrap; transition: background .2s var(--ease), border-color .2s var(--ease), box-shadow .2s var(--ease), transform .2s var(--ease); }
.ti-btn .msi { font-size: 19px; }
.ti-btn:hover { border-color: var(--ti-moss); background: var(--ti-lime-soft); }
.ti-btn.is-ghost { border-color: transparent; background: transparent; color: var(--ti-muted); }
.ti-btn.is-ghost:hover { background: var(--ti-wash); color: var(--ti-text); }
.ti-btn.is-primary { background: var(--ti-moss); border-color: transparent; color: var(--ti-on-moss); box-shadow: var(--e1); }
.ti-btn.is-primary:hover { background: var(--m3-primary-hover); box-shadow: var(--e2); }
.ti-btn.is-big { height: 54px; padding: 0 32px; font-size: 15px; }
.ti-cta { display: flex; gap: 12px; flex-wrap: wrap; }
/* light buttons sitting on the dark bands */
.is-dark .ti-btn.is-primary { background: var(--ti-cta); color: var(--ti-on-cta); box-shadow: 0 6px 26px rgba(158, 211, 168, .28); }
.is-dark .ti-btn.is-primary:hover { background: color-mix(in srgb, var(--ti-cta) 86%, #ffffff); }
.is-dark .ti-btn:not(.is-primary) { background: transparent; border-color: rgba(238, 242, 234, .32); color: var(--ti-snow); }
.is-dark .ti-btn:not(.is-primary):hover { background: rgba(238, 242, 234, .08); border-color: var(--ti-accent-on-dark); }

/* =================================================================== hero == */
.ti-hero { position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); gap: 56px; align-items: center; padding: 64px max(24px, calc((100% - 1200px) / 2)) 0; background: radial-gradient(70% 55% at 50% -12%, rgba(158, 211, 168, .16), transparent 62%), radial-gradient(50% 60% at -8% 85%, rgba(158, 211, 168, .10), transparent 65%), radial-gradient(50% 60% at 108% 80%, rgba(158, 211, 168, .08), transparent 65%), linear-gradient(168deg, var(--ti-pine) 0%, var(--ti-ink) 58%, var(--ti-floor) 100%); color: var(--ti-snow); }
.ti-hero-topo { position: absolute; right: -4%; top: -14%; width: 52%; height: auto; opacity: .32; pointer-events: none; }
.ti-hero-topo.is-left { right: auto; left: -8%; top: auto; bottom: -10%; transform: scaleX(-1); opacity: .2; }
.ti-hero-copy { position: relative; display: flex; flex-direction: column; gap: 22px; align-items: flex-start; text-align: left; }
.ti-eyebrow { display: inline-flex; align-items: center; gap: 9px; font: 600 11.5px/16px var(--f-body); letter-spacing: 1.4px; text-transform: uppercase; color: var(--ti-accent-on-dark); border: 1px solid rgba(158, 211, 168, .32); border-radius: 999px; padding: 6px 16px 6px 7px; background: rgba(158, 211, 168, .07); }
.ti-eyebrow-cell { display: inline-block; height: 18px; aspect-ratio: 175 / 185; width: auto; color: var(--ti-accent-on-dark); }
.ti-hero h1 { margin: 0; font: 600 clamp(38px, 3.8vw, 54px)/1.05 var(--f-display); letter-spacing: var(--m3-tracking-display); color: #fff; text-wrap: balance; }
.ti-hero-copy > p { margin: 0; font: 400 16.5px/26px var(--f-body); color: var(--ti-dusk); max-width: 54ch; }
.ti-riskline { margin: 0; font: 400 13px/18px var(--f-body); color: var(--ti-dusk); }

/* the console sits right of the copy, on a lime glow */
.ti-hero-shot { position: relative; width: 100%; z-index: 1; }
.ti-hero-shot::before { content: ""; position: absolute; inset: -6% -8%; background: radial-gradient(60% 55% at 50% 45%, rgba(158, 211, 168, .15), transparent 70%); pointer-events: none; }

/* the two quiet lines that close the hero: modules, then what it's built on */
.ti-hero-foot { position: relative; grid-column: 1 / -1; width: 100%; max-width: 1150px; margin: 0 auto; display: flex; flex-direction: column; gap: 18px; padding: 44px 0; }
.ti-modules { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; }
.ti-modules-label { flex-basis: 100%; text-align: center; font: 700 10.5px/15px var(--f-body); letter-spacing: 2px; text-transform: uppercase; color: var(--ti-dusk); margin-bottom: 4px; }
.ti-module { display: inline-flex; align-items: center; gap: 7px; font: 500 12.5px/16px var(--f-body); color: var(--ti-snow); border: 1px solid rgba(238, 242, 234, .20); border-radius: 999px; padding: 7px 14px 7px 10px; background: rgba(238, 242, 234, .05); }
.ti-module .msi { font-size: 16px; color: var(--ti-accent-on-dark); }
.ti-builton { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 6px 22px; padding-top: 18px; border-top: 1px solid rgba(238, 242, 234, .10); font: 600 11px/16px var(--f-body); letter-spacing: 1.6px; text-transform: uppercase; color: var(--ti-dusk); }
.ti-builton b { color: rgba(238, 242, 234, .92); font-weight: 600; }
.ti-builton .is-label { color: rgba(238, 242, 234, .45); letter-spacing: 2.2px; font-size: 10px; }

/* ====================================================== console art kit == */
/* the frame: chrome surface, top bar + rail + inset panel — the real shell  */
.tic-frame { position: relative; border-radius: 20px; background: var(--tic-chrome); color: var(--tic-on); font-family: var(--f-body); overflow: hidden; box-shadow: 0 60px 120px rgba(0, 0, 0, .45), 0 24px 48px rgba(0, 0, 0, .28), 0 0 0 1px rgba(158, 211, 168, .14); text-align: left; }
/* compact variant — the hero's half-width console: icon rail, tighter chrome */
.tic-frame.is-compact { border-radius: 18px; box-shadow: 0 40px 90px rgba(0, 0, 0, .42), 0 16px 36px rgba(0, 0, 0, .26), 0 0 0 1px rgba(158, 211, 168, .14); }
.tic-frame.is-compact .tic-top { height: 46px; gap: 10px; padding: 0 12px; }
.tic-frame.is-compact .tic-search { display: none; }
.tic-frame.is-compact .tic-body { grid-template-columns: 52px minmax(0, 1fr); }
.tic-frame.is-compact .tic-nav { justify-content: center; padding: 0; height: 32px; }
.tic-frame.is-compact .tic-nav em, .tic-frame.is-compact .tic-nav .is-chev { display: none; }
.tic-frame.is-compact .tic-panel { padding: 12px 12px 14px; gap: 10px; border-radius: 16px 0 0 0; }
.tic-frame.is-compact .tic-greet h4 { font-size: 15px; line-height: 20px; }
.tic-frame.is-compact .tic-advisor { padding: 8px 12px 8px 9px; font-size: 12px; line-height: 16px; }
.tic-frame.is-compact .tic-w { padding: 11px 12px; gap: 8px; }
.tic-top { display: flex; align-items: center; gap: 12px; height: 52px; padding: 0 14px 0 16px; }
.tic-brand { display: inline-flex; align-items: center; gap: 9px; }
.tic-brand .tic-cell { display: inline-block; height: 22px; aspect-ratio: 175 / 185; width: auto; color: var(--ti-moss); }
.tic-brand > b { font: 600 13px/16px var(--f-display); color: var(--tic-slate); letter-spacing: -.01em; }
.tic-club { display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 13px 0 9px; border-radius: 999px; background: var(--tic-card); border: 1px solid var(--tic-outline); font: 500 12px/16px var(--f-body); color: var(--tic-slate); }
.tic-club .msi { font-size: 16px; color: var(--ti-moss); }
.tic-top-spacer { flex: 1 1 auto; }
.tic-search { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 14px; min-width: 210px; border-radius: 999px; background: var(--tic-card); border: 1px solid var(--tic-outline); font: 400 12px/16px var(--f-body); color: var(--mute-text); }
.tic-search .msi { font-size: 16px; color: var(--tic-onvar); }
.tic-iconbtn { position: relative; display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--tic-card); border: 1px solid var(--tic-outline); color: var(--tic-slate); }
.tic-iconbtn .msi { font-size: 17px; }
.tic-iconbtn.has-dot::after { content: ""; position: absolute; top: 6px; right: 7px; width: 7px; height: 7px; border-radius: 50%; background: var(--warn-fill); border: 1.5px solid var(--tic-card); }
.tic-avatar { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--ti-moss); color: var(--ti-on-moss); font: 600 11px/14px var(--f-body); }
.tic-body { display: grid; grid-template-columns: 196px minmax(0, 1fr); }
.tic-rail { display: flex; flex-direction: column; gap: 2px; padding: 8px 8px 14px; }
.tic-nav { display: flex; align-items: center; gap: 10px; height: 34px; padding: 0 10px; border-radius: 10px; font: 500 12.5px/16px var(--f-body); color: var(--tic-slate); }
.tic-nav .msi { font-size: 18px; color: var(--tic-onvar); }
.tic-nav em { font-style: normal; flex: 1 1 auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tic-nav .msi.is-chev { font-size: 16px; color: var(--m3-outline); }
.tic-nav.is-active { background: var(--tic-card); color: var(--ti-moss); font-weight: 600; box-shadow: var(--e1); }
.tic-nav.is-active .msi { color: var(--ti-moss); }
.tic-rail-label { margin: 10px 10px 4px; font: 600 9px/12px var(--f-body); letter-spacing: 1.2px; text-transform: uppercase; color: var(--m3-outline); }
.tic-panel { display: flex; flex-direction: column; gap: 12px; padding: 16px 16px 18px; background: var(--tic-panel); border-radius: 18px 0 0 0; min-width: 0; }
.tic-greet { display: flex; align-items: center; gap: 12px; }
.tic-greet h4 { margin: 0; font: 600 18px/24px var(--f-display); letter-spacing: var(--m3-tracking-title); color: var(--tic-on); }
.tic-greet .tic-meta-line { font: 400 12px/16px var(--f-body); color: var(--tic-onvar); }
.tic-greet .tic-actions { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; }
.tic-advisor { display: flex; align-items: center; gap: 10px; padding: 9px 14px 9px 10px; border-radius: 12px; background: var(--tic-tertiary-container); color: var(--tic-on-tertiary-container); font: 500 12.5px/17px var(--f-body); }
.tic-advisor .tic-ai { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 5px; font: 700 9.5px/14px var(--f-body); letter-spacing: .6px; background: var(--tic-tertiary); color: var(--m3-on-tertiary); border-radius: 7px; padding: 3px 8px; }
.tic-advisor .tic-ai .msi { font-size: 13px; }
.tic-advisor a { margin-left: auto; flex: 0 0 auto; font: 600 11.5px/15px var(--f-body); color: var(--tic-tertiary); text-decoration: none; white-space: nowrap; }

/* widget grid — Ivan's manager default, compressed */
.tic-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 10px; }
.tic-w { display: flex; flex-direction: column; gap: 9px; padding: 12px 14px; border-radius: 14px; background: var(--tic-card); border: 1px solid var(--tic-outline); box-shadow: var(--e1); min-width: 0; }
.tic-w.sp4 { grid-column: span 4; } .tic-w.sp5 { grid-column: span 5; }
.tic-w.sp6 { grid-column: span 6; } .tic-w.sp7 { grid-column: span 7; }
.tic-w.sp12 { grid-column: span 12; }
.tic-w.rs2 { grid-row: span 2; }
.tic-wt { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 8px; }
.tic-wt small { font: 600 10px/14px var(--f-body); letter-spacing: .8px; text-transform: uppercase; color: var(--tic-onvar); }
.tic-wt .msi { font-size: 15px; color: var(--m3-outline); }
.tic-chip { display: inline-flex; align-items: center; gap: 5px; font: 600 10px/14px var(--f-body); border: 1px solid var(--tic-outline); border-radius: 8px; padding: 2px 8px; background: var(--tic-card); color: var(--tic-onvar); white-space: nowrap; }
.tic-chip.is-tonal { background: var(--tic-low); border-color: transparent; }

/* weather tiles (morning) */
.tic-wx { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; }
.tic-wx.is-5 { grid-template-columns: repeat(5, 1fr); }
.tic-wx span { display: flex; flex-direction: column; gap: 1px; background: var(--tic-low); border-radius: 10px; padding: 7px 9px; min-width: 0; }
.tic-wx em { font: 600 8.5px/11px var(--f-body); font-style: normal; text-transform: uppercase; letter-spacing: .4px; color: var(--tic-onvar); }
.tic-wx b { font: 600 13px/18px var(--f-body); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tic-wx i { font: 600 10px/13px var(--f-body); font-style: normal; }
.tic-wx i.is-down { color: var(--warn-text); } .tic-wx i.is-up { color: var(--ok-text); }

/* dense tables */
.tic-tbl { display: flex; flex-direction: column; border: 1px solid var(--tic-outline); border-radius: 10px; overflow: hidden; background: var(--tic-card); }
.tic-tbl-h, .tic-tbl-r { display: grid; gap: 8px; padding: 5px 11px; font: 400 11.5px/16px var(--f-body); align-items: baseline; grid-template-columns: 1.5fr .65fr .65fr .65fr .75fr; }
.tic-tbl-h { background: var(--tic-surface); border-bottom: 1px solid var(--tic-outline); font: 600 9px/13px var(--f-body); text-transform: uppercase; letter-spacing: .5px; color: var(--tic-onvar); }
.tic-tbl-r + .tic-tbl-r { border-top: 1px solid var(--tic-high); }
.tic-tbl-r span { font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.tic-tbl-r span:first-child { font-weight: 500; color: var(--tic-onvar); }
.tic-tbl-r b { font-weight: 600; font-variant-numeric: tabular-nums; }
.tic-tbl .is-bad { color: var(--bad-text); font-weight: 600; }
.tic-tbl .is-warn { color: var(--warn-text); font-weight: 600; }
.tic-tbl .is-ok { color: var(--ok-text); font-weight: 600; }
.tic-tbl .is-todo { color: var(--tic-tertiary); border: 1px dashed color-mix(in srgb, var(--tic-tertiary) 45%, transparent); border-radius: 6px; padding: 0 6px; text-align: center; font-size: 9px; text-transform: uppercase; letter-spacing: .4px; justify-self: start; }
/* variants */
.tic-tbl.is-holes .tic-tbl-h, .tic-tbl.is-holes .tic-tbl-r { grid-template-columns: .9fr .8fr 1.7fr .6fr; }
.tic-tbl.is-calls .tic-tbl-h, .tic-tbl.is-calls .tic-tbl-r { grid-template-columns: .9fr .7fr .7fr 1.9fr; }
.tic-tbl.is-lots .tic-tbl-h, .tic-tbl.is-lots .tic-tbl-r { grid-template-columns: .9fr 1.1fr .9fr .8fr 1.2fr; }
.tic-tbl.is-fleet .tic-tbl-h, .tic-tbl.is-fleet .tic-tbl-r { grid-template-columns: 1.4fr .8fr 1fr 1fr; }

/* rows with a status dot */
.tic-row { display: flex; align-items: center; gap: 8px; font: 400 12px/17px var(--f-body); min-width: 0; }
.tic-row i { width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto; }
.tic-row i.is-ok { background: var(--ok-fill); }
.tic-row i.is-warn { background: var(--warn-fill); }
.tic-row i.is-bad { background: var(--bad-fill); }
.tic-row span { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--tic-onvar); }
.tic-row span b { color: var(--tic-on); font-weight: 600; }
.tic-row em { font: 600 10.5px/14px var(--f-body); font-style: normal; color: var(--tic-onvar); white-space: nowrap; }

/* course-health pieces */
.tic-ringrow { display: flex; align-items: center; gap: 14px; }
.tic-ring { --deg: 313deg; --ring: var(--ok-fill); position: relative; width: 64px; height: 64px; border-radius: 50%; background: conic-gradient(var(--ring) var(--deg), var(--tic-high) 0); display: grid; place-items: center; flex: 0 0 auto; }
.tic-ring b { width: 48px; height: 48px; border-radius: 50%; background: var(--tic-card); display: grid; place-items: center; font: 600 19px/22px var(--f-body); font-variant-numeric: tabular-nums; letter-spacing: -.3px; }
.tic-ring.is-sm { width: 48px; height: 48px; }
.tic-ring.is-sm b { width: 36px; height: 36px; font-size: 14px; }
.tic-ringtext { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.tic-ringtext b { font: 600 13.5px/18px var(--f-body); }
.tic-ringtext em { font: 500 11px/14px var(--f-body); font-style: normal; color: var(--bad-text); }
.tic-ringtext em.is-up { color: var(--ok-text); }
.tic-spark { width: 100%; height: auto; display: block; }
.tic-buckets { display: flex; gap: 6px; flex-wrap: wrap; }
.tic-bucket { display: inline-flex; align-items: center; gap: 6px; font: 600 10.5px/14px var(--f-body); color: var(--tic-onvar); border-radius: 8px; padding: 3px 9px; background: var(--tic-low); }
.tic-bucket i { width: 7px; height: 7px; border-radius: 50%; }
.tic-bucket b { font-weight: 700; color: var(--tic-on); font-variant-numeric: tabular-nums; }
.tic-meta { font: 400 10.5px/14px var(--f-body); color: var(--tic-onvar); }

/* work board pieces */
.tic-counters { display: flex; gap: 7px; flex-wrap: wrap; }
.tic-counters span { display: flex; flex-direction: column; align-items: center; gap: 0; border: 1px solid var(--tic-outline); border-radius: 10px; padding: 6px 11px 5px; font: 500 8.5px/11px var(--f-body); letter-spacing: .3px; text-transform: uppercase; color: var(--tic-onvar); }
.tic-counters b { font: 600 16px/20px var(--f-body); font-variant-numeric: tabular-nums; color: var(--tic-on); }
.tic-counters span.is-bad { border-color: color-mix(in srgb, var(--bad-fill) 55%, transparent); }
.tic-counters span.is-bad b { color: var(--bad-text); }
.tic-counters span.is-warn b { color: var(--warn-text); }
.tic-counters span.is-ok b { color: var(--ok-text); }
.tic-task { display: flex; align-items: center; gap: 10px; border: 1px solid var(--tic-outline); border-radius: 10px; padding: 7px 11px 7px 0; background: var(--tic-card); min-width: 0; }
.tic-task::before { content: ""; align-self: stretch; width: 3px; border-radius: 0 3px 3px 0; margin-right: 1px; background: var(--track, var(--mute-fill)); }
.tic-task .tic-task-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 0; }
.tic-task b { font: 600 12px/16px var(--f-body); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tic-task em { font: 400 10.5px/14px var(--f-body); font-style: normal; color: var(--tic-onvar); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tic-status { flex: 0 0 auto; font: 600 9.5px/13px var(--f-body); letter-spacing: .3px; border-radius: 7px; padding: 3px 8px; }
.tic-status.is-overdue { background: rgba(179, 38, 30, .12); color: var(--err); }
.tic-status.is-due { background: rgba(227, 154, 47, .16); color: var(--warn-text); }
.tic-status.is-progress { background: color-mix(in srgb, var(--info) 13%, transparent); color: var(--info-text); }
.tic-status.is-done { background: rgba(143, 177, 76, .18); color: var(--ok-text); }
.tic-status.is-repair { background: color-mix(in srgb, var(--tic-tertiary) 13%, transparent); color: var(--tic-tertiary); }
.tic-rhythm { display: grid; grid-template-columns: minmax(74px, auto) 1fr auto; align-items: center; gap: 9px; }
.tic-rhythm span { font: 500 10.5px/14px var(--f-body); color: var(--tic-onvar); white-space: nowrap; }
.tic-rhythm div { height: 7px; border-radius: 4px; background: var(--tic-high); overflow: hidden; }
.tic-rhythm div i { display: block; height: 100%; border-radius: 4px; background: var(--ok-fill); }
.tic-rhythm div i.is-warn { background: var(--warn-fill); }
.tic-rhythm div i.is-bad { background: var(--bad-fill); }
.tic-rhythm em { font: 600 10px/13px var(--f-body); font-style: normal; color: var(--tic-onvar); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* PAW bars */
.tic-paw { display: grid; grid-template-columns: minmax(38px, auto) 1fr auto; align-items: center; gap: 9px; }
.tic-paw span { font: 600 11px/14px var(--f-body); color: var(--tic-onvar); white-space: nowrap; }
.tic-paw div { height: 8px; border-radius: 4px; background: var(--tic-high); overflow: hidden; }
.tic-paw div i { display: block; height: 100%; border-radius: 4px; background: var(--ok-fill); }
.tic-paw div i.is-warn { background: var(--warn-fill); }
.tic-paw div i.is-bad { background: var(--bad-fill); }
.tic-paw em { font: 600 11px/14px var(--f-body); font-style: normal; font-variant-numeric: tabular-nums; }

/* the course map — the console's satellite map, drawn: dark canopy, bright
   course overlay, Leaflet-style controls, white-ring sensor dots (§6) */
.tic-map { position: relative; border-radius: 12px; overflow: hidden; background: #22301b; }
.tic-map svg.tic-map-art { width: 100%; height: auto; display: block; }
.tic-map .tic-dot { position: absolute; width: 11px; height: 11px; border-radius: 50%; transform: translate(-50%, -50%); background: var(--ok-fill); box-shadow: 0 0 0 3px #fff, 0 1px 7px rgba(0, 0, 0, .5); }
.tic-map .tic-dot.is-warn { background: var(--warn-fill); }
.tic-map .tic-dot.is-bad { background: var(--bad-fill); animation: tic-pulse 2.2s var(--ease) infinite; }
.tic-map .tic-dot.is-info { background: var(--tip-above-fill); }
.tic-map .tic-dot.is-mute { background: var(--mute-fill); }
@keyframes tic-pulse { 0%, 100% { box-shadow: 0 0 0 3px #fff, 0 0 0 0 rgba(204, 93, 93, .5); } 50% { box-shadow: 0 0 0 3px #fff, 0 0 0 8px rgba(204, 93, 93, 0); } }
.tic-maplabel { position: absolute; transform: translate(-50%, 0); font: 600 9.5px/13px var(--f-body); background: rgba(255, 255, 255, .95); border: 1px solid var(--tic-outline); border-radius: 999px; padding: 2px 8px; white-space: nowrap; box-shadow: 0 2px 8px rgba(0, 0, 0, .35); }
.tic-maplabel.is-warn { color: var(--warn-text); border-color: color-mix(in srgb, var(--warn-fill) 55%, transparent); }
.tic-maplabel.is-bad { color: var(--bad-text); border-color: color-mix(in srgb, var(--bad-fill) 55%, transparent); }
/* Leaflet-style chrome */
.tic-zoom { position: absolute; top: 8px; left: 8px; display: flex; flex-direction: column; width: 26px; border-radius: 8px; overflow: hidden; background: #fff; box-shadow: 0 2px 8px rgba(0, 0, 0, .35); }
.tic-zoom b { display: grid; place-items: center; height: 24px; font: 600 15px/1 var(--f-body); color: var(--tic-slate); }
.tic-zoom b + b { border-top: 1px solid var(--tic-high); }
.tic-layers { position: absolute; top: 8px; right: 8px; width: 28px; height: 28px; border-radius: 8px; background: #fff; display: grid; place-items: center; box-shadow: 0 2px 8px rgba(0, 0, 0, .35); }
.tic-layers .msi { font-size: 16px; color: var(--tic-slate); }
.tic-map .tic-expand { position: absolute; top: 8px; right: 42px; width: 28px; height: 28px; border-radius: 8px; background: rgba(255, 255, 255, .95); display: grid; place-items: center; box-shadow: 0 2px 8px rgba(0, 0, 0, .35); }
.tic-map .tic-expand .msi { font-size: 15px; color: var(--tic-slate); }
.tic-legend { display: flex; align-items: center; gap: 13px; font: 500 10.5px/14px var(--f-body); color: var(--tic-onvar); flex-wrap: wrap; }
.tic-legend span { display: inline-flex; align-items: center; gap: 5px; }
.tic-legend i { width: 7px; height: 7px; border-radius: 50%; }
.tic-legend i.is-bad { background: var(--bad-fill); }
.tic-legend i.is-warn { background: var(--warn-fill); }
.tic-legend i.is-ok { background: var(--ok-fill); }
.tic-legend i.is-mute { background: var(--nodata); }
.tic-legend .is-right { margin-left: auto; font-weight: 400; }

/* Holes Pro cards — the console's hole list: number badge, accent, PAW + status */
.tic-hole { --hc: var(--ok-fill); --ht: var(--ok-text); display: flex; align-items: center; gap: 9px; padding: 5px 10px 5px 8px; border: 1px solid var(--tic-outline); border-left: 4px solid var(--hc); border-radius: 12px; background: var(--tic-card); min-width: 0; }
.tic-hole.is-active { background: var(--ti-lime-soft); border-color: var(--ok-text); border-left-color: var(--hc); }
.tic-hole-no { display: grid; place-items: center; width: 25px; height: 25px; border-radius: 50%; background: var(--hc); color: var(--ti-on-moss); font: 600 11.5px/1 var(--f-body); flex: 0 0 auto; }
.tic-hole-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 0; }
.tic-hole-main b { font: 600 12px/16px var(--f-body); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tic-hole-main em { font: 400 10px/13px var(--f-body); font-style: normal; color: var(--tic-onvar); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tic-hole-val { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; gap: 0; }
.tic-hole-val b { font: 700 13px/16px var(--f-body); font-variant-numeric: tabular-nums; }
.tic-hole-val b small { font: 600 8px/10px var(--f-body); letter-spacing: .4px; color: var(--tic-onvar); margin-left: 2px; }
.tic-hole-val em { font: 600 10px/13px var(--f-body); font-style: normal; color: var(--ht); white-space: nowrap; }
.tic-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
@media (max-width: 560px) { .tic-pair { grid-template-columns: 1fr; } }

/* charts */
.tic-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.tic-chips span { display: inline-flex; align-items: center; gap: 4px; font: 600 10.5px/15px var(--f-body); border: 1px solid var(--tic-outline); border-radius: 8px; padding: 3px 10px; background: var(--tic-surface); color: var(--tic-on); font-variant-numeric: tabular-nums; }
.tic-chips i { font-style: normal; font-weight: 700; }
.tic-chips i.is-up { color: var(--bad-text); }
.tic-chips i.is-ok { color: var(--ok-text); }
.tic-bars { display: flex; align-items: flex-end; gap: 6px; height: 74px; margin-bottom: 15px; }
.tic-bars span { position: relative; flex: 1 1 0; height: var(--h, 30%); background: var(--tic-high); border-radius: 4px 4px 2px 2px; }
.tic-bars span.is-now { background: var(--ti-brand); }
.tic-bars span em { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); padding-top: 4px; font: 500 8.5px/10px var(--f-body); font-style: normal; color: var(--tic-onvar); white-space: nowrap; }
.tic-money { font: 600 21px/26px var(--f-body); font-variant-numeric: tabular-nums; letter-spacing: -.3px; }
/* budget vs actual rows: budget is the track, actual is the fill */
.tic-bvsa { display: grid; grid-template-columns: minmax(72px, auto) 1fr auto auto; align-items: center; gap: 10px; }
.tic-bvsa > span { font: 500 11px/14px var(--f-body); color: var(--tic-onvar); white-space: nowrap; }
.tic-bvsa div { height: 9px; border-radius: 5px; background: var(--tic-high); overflow: hidden; box-shadow: inset 0 0 0 1px var(--tic-outline); }
.tic-bvsa div i { display: block; height: 100%; border-radius: 5px; background: var(--ok-fill); }
.tic-bvsa div i.is-over { background: var(--bad-fill); }
.tic-bvsa em { font: 500 10.5px/14px var(--f-body); font-style: normal; color: var(--tic-onvar); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tic-bvsa b { font: 700 10.5px/14px var(--f-body); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tic-bvsa b.is-ok { color: var(--ok-text); }
.tic-bvsa b.is-warn { color: var(--warn-text); }
.tic-bvsa b.is-bad { color: var(--bad-text); }
.tic-kpis { display: flex; gap: 7px; flex-wrap: wrap; }
.tic-kpis span { display: inline-flex; align-items: baseline; gap: 5px; font: 500 10.5px/14px var(--f-body); color: var(--tic-onvar); background: var(--tic-low); border-radius: 8px; padding: 4px 10px; }
.tic-kpis b { font: 600 13px/16px var(--f-body); color: var(--tic-on); font-variant-numeric: tabular-nums; }
.tic-kpis .is-warn b { color: var(--warn-text); }
.tic-kpis .is-bad b { color: var(--bad-text); }
/* small tonal button inside widgets */
.tic-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 30px; padding: 0 14px; border-radius: 999px; background: var(--ti-moss); color: var(--ti-on-moss); font: 600 11.5px/15px var(--f-body); white-space: nowrap; flex: 0 0 auto; }
.tic-btn .msi { font-size: 14px; }
.tic-btn.is-outline { background: var(--tic-card); border: 1px solid var(--tic-outline); color: var(--tic-slate); }
/* widget footer line: button + meta, never stretched */
.tic-foot { display: flex; align-items: center; gap: 10px; margin-top: 1px; }
.tic-foot em { margin-left: auto; font: 500 10.5px/14px var(--f-body); font-style: normal; color: var(--tic-onvar); white-space: nowrap; }

/* ---------------------------------------------- feature art panels (crops) */
.ti-row-art { position: relative; display: flex; flex-direction: column; align-items: stretch; justify-content: center; gap: 0; padding: 40px 34px 34px; border-radius: var(--r-xl); background: linear-gradient(180deg, color-mix(in srgb, var(--ti-lime) 26%, var(--tic-panel)), var(--tic-panel) 55%); border: 1px solid var(--tic-outline); min-width: 0; }
.ti-art-path { position: absolute; top: 12px; left: 14px; display: inline-flex; align-items: center; gap: 6px; font: 600 10px/14px var(--f-body); letter-spacing: .4px; color: var(--tic-onvar); background: rgba(255, 255, 255, .85); border: 1px solid var(--tic-outline); border-radius: 999px; padding: 3px 10px; }
.ti-art-path .msi { font-size: 13px; color: var(--ti-moss); }
.ti-art-path i { font-style: normal; color: var(--m3-outline); }
.tic-crop { display: flex; flex-direction: column; gap: 11px; width: 100%; padding: 16px 18px; border-radius: 16px; background: var(--tic-card); border: 1px solid var(--tic-outline); box-shadow: var(--e2); min-width: 0; }
.tic-crop .tic-wt small { font-size: 10.5px; }

/* ================================================================= bands == */
.ti-section { padding: 92px max(24px, calc((100% - 1140px) / 2)); background-image: var(--ti-topo); background-size: 680px auto; }
.ti-section.is-cont { padding-top: 56px; }
.ti-section.is-alt { background-color: var(--ti-wash); }
.ti-section h2 { margin: 0; font: 600 clamp(30px, 3.2vw, 42px)/1.1 var(--f-display); letter-spacing: var(--m3-tracking-display); text-align: center; text-wrap: balance; }
.ti-lead { margin: 16px auto 0; font: 400 16.5px/26px var(--f-body); color: var(--ti-muted); text-align: center; max-width: 62ch; }
.ti-num { font: 700 11px/16px var(--f-body); letter-spacing: 1.8px; text-transform: uppercase; color: var(--ti-moss); }
.ti-sechead { display: flex; flex-direction: column; gap: 10px; max-width: 780px; }
.ti-sechead h2 { margin: 0; font: 600 clamp(30px, 3.2vw, 42px)/1.1 var(--f-display); letter-spacing: var(--m3-tracking-display); text-align: left; text-wrap: balance; }

/* problem band */
.ti-problem { padding: 84px max(24px, calc((100% - 1140px) / 2)); background-color: var(--ti-paper); background-image: var(--ti-topo); background-size: 680px auto; border-bottom: 1px solid color-mix(in srgb, var(--ti-line) 55%, transparent); }
.ti-problem-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 40px; }
.ti-problem-item { display: flex; flex-direction: column; gap: 10px; padding: 26px 26px 24px; border-radius: var(--r-lg); background: var(--ti-card); border: 1px solid color-mix(in srgb, var(--ti-line) 70%, transparent); box-shadow: var(--e1); }
.ti-problem-item .msi { width: 40px; height: 40px; font-size: 21px; border-radius: 12px; display: grid; place-items: center; background: color-mix(in srgb, var(--warn-fill) 16%, #fff); color: var(--warn-text); }
.ti-problem-item b { font: 600 16px/22px var(--f-body); letter-spacing: -.1px; }
.ti-problem-item p { margin: 0; font: 400 13.5px/20px var(--f-body); color: var(--ti-muted); }
.ti-problem-answer { margin: 36px 0 0; font: 500 17px/26px var(--f-body); color: var(--ti-text); max-width: 68ch; }
.ti-problem-answer b { color: var(--ti-moss); }

/* alternating feature rows */
.ti-row { display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); gap: 64px; align-items: center; margin-top: 96px; }
.ti-row:first-of-type { margin-top: 64px; }
.ti-row.is-flip { grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); }
.ti-row.is-flip .ti-row-copy { order: 2; }
.ti-row-copy { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.ti-row-copy h3 { margin: 14px 0 10px; font: 600 27px/34px var(--f-display); letter-spacing: -.02em; text-wrap: balance; }
.ti-row-copy > p { margin: 0; font: 400 15px/24px var(--f-body); color: var(--ti-muted); max-width: 52ch; }
.ti-row-copy > p + p { margin-top: 12px; }
.ti-row-copy ul { list-style: none; margin: 20px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.ti-row-copy li { display: flex; gap: 10px; align-items: flex-start; font: 400 13.5px/20px var(--f-body); color: var(--ti-muted); }
.ti-row-copy li .msi { font-size: 17px; color: var(--ti-moss); margin-top: 1px; }

/* mid CTA */
.ti-midcta { display: flex; align-items: center; justify-content: center; gap: 24px; flex-wrap: wrap; padding: 38px max(24px, calc((100% - 1140px) / 2)); background-color: var(--ti-wash); border-block: 1px solid color-mix(in srgb, var(--ti-line) 60%, transparent); }
.ti-midcta p { margin: 0; font: 600 18px/24px var(--f-display); letter-spacing: var(--m3-tracking-title); }

/* the mobile band */
.ti-mobile { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 72px; align-items: center; padding: 88px max(24px, calc((100% - 1040px) / 2)); background-color: color-mix(in srgb, var(--m3-primary-container) 22%, var(--ti-paper)); background-image: var(--ti-topo); background-size: 680px auto; }
.ti-mobile-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.ti-mobile-copy h2 { margin: 0; font: 600 clamp(26px, 3vw, 38px)/1.12 var(--f-display); letter-spacing: var(--m3-tracking-display); text-wrap: balance; }
.ti-mobile-copy p { margin: 0; font: 400 15px/24px var(--f-body); color: var(--ti-muted); max-width: 52ch; }
.ti-mobile-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.ti-mobile-chips span { display: inline-flex; align-items: center; gap: 6px; font: 600 12px/16px var(--f-body); border: 1px solid var(--ti-line); border-radius: 999px; padding: 6px 14px; background: var(--ti-card); color: var(--ti-muted); }
.ti-mobile-chips .msi { font-size: 15px; color: var(--ti-moss); }

/* the drawn phone — thin bezel, status bar, M3 bottom bar */
.ti-phone { width: 258px; border-radius: 40px; padding: 9px; background: #0a0f0b; box-shadow: 0 34px 80px rgba(0, 33, 13, .32), inset 0 0 0 1.5px rgba(238, 242, 234, .10); justify-self: center; flex: 0 0 auto; }
.ti-phone-screen { position: relative; background: var(--tic-panel); border-radius: 32px; padding: 10px 12px 8px; display: flex; flex-direction: column; gap: 9px; min-height: 440px; overflow: hidden; font-family: var(--f-body); }
.ti-phone-status { display: flex; align-items: center; justify-content: space-between; padding: 2px 8px 0; font: 600 11px/14px var(--f-body); color: var(--tic-on); }
.ti-phone-status .ti-phone-pill { position: absolute; left: 50%; top: 8px; transform: translateX(-50%); width: 58px; height: 16px; border-radius: 999px; background: #0a0f0b; }
.ti-phone-status span { display: inline-flex; gap: 4px; }
.ti-phone-status .msi { font-size: 13px; }
.ti-phone-appbar { display: flex; align-items: center; gap: 8px; padding: 2px 4px; }
.ti-phone-appbar .ti-eyebrow-cell { height: 20px; color: var(--ti-moss); }
.ti-phone-appbar b { font: 600 14px/18px var(--f-display); letter-spacing: -.01em; color: var(--tic-on); }
.ti-phone-appbar em { margin-left: auto; font: 500 11px/14px var(--f-body); font-style: normal; color: var(--tic-onvar); }
.ti-phone .tic-advisor { padding: 7px 10px 7px 8px; font-size: 11px; line-height: 15px; border-radius: 11px; }
.ti-phone .tic-advisor .tic-ai { font-size: 8.5px; padding: 2px 6px; }
.ti-phone .tic-w { padding: 10px 11px; border-radius: 12px; gap: 7px; }
.ti-phone .tic-paw span { font-size: 10.5px; }
.ti-phone .tic-paw em { font-size: 10.5px; }
.ti-phone-task { display: flex; align-items: center; justify-content: space-between; gap: 8px; border: 1px solid var(--tic-outline); border-radius: 13px; padding: 10px 11px; background: var(--tic-card); }
.ti-phone-task > div { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.ti-phone-task b { font: 600 12px/16px var(--f-body); }
.ti-phone-task em { font: 400 10px/13px var(--f-body); font-style: normal; color: var(--tic-onvar); }
.ti-phone-task span { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 4px; font: 700 11px/14px var(--f-body); background: var(--ti-lime); color: var(--ti-on-lime); border-radius: 999px; padding: 5px 12px; }
.ti-phone-task span .msi { font-size: 13px; }
.ti-phone-task.is-done span { background: var(--tic-high); color: var(--tic-onvar); }
.ti-phone-nav { margin-top: auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; padding: 6px 2px 2px; border-top: 1px solid var(--tic-high); }
.ti-phone-nav span { display: flex; flex-direction: column; align-items: center; gap: 2px; font: 500 8.5px/11px var(--f-body); color: var(--tic-onvar); }
.ti-phone-nav .msi { font-size: 18px; color: var(--tic-onvar); }
.ti-phone-nav span.is-on .msi { color: var(--ti-on-lime); background: var(--ti-lime); border-radius: 999px; padding: 2px 12px; font-size: 16px; }
.ti-phone-nav span.is-on { color: var(--ti-moss); font-weight: 600; }

/* how it works — connected steps */
.ti-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 52px; }
.ti-steps.is-two { grid-template-columns: repeat(2, 1fr); max-width: 820px; margin-inline: auto; }   /* Sense · Act & account (27.10) */
.ti-step { position: relative; display: flex; flex-direction: column; padding: 30px 28px; border-radius: var(--r-lg); background: var(--ti-card); border: 1px solid color-mix(in srgb, var(--ti-line) 70%, transparent); box-shadow: var(--e1); }
.ti-step-no { display: inline-flex; align-items: center; gap: 8px; }
.ti-step-no .msi { width: 44px; height: 44px; font-size: 22px; border-radius: 14px; display: grid; place-items: center; background: var(--ti-lime); color: var(--ti-on-lime); }
.ti-step-no em { font: 700 11px/15px var(--f-body); font-style: normal; letter-spacing: 1.4px; color: var(--ti-moss); }
.ti-step h3 { margin: 16px 0 8px; font: 600 18px/24px var(--f-body); letter-spacing: -.1px; }
.ti-step p { margin: 0; font: 400 14px/21px var(--f-body); color: var(--ti-muted); }
.ti-step::after { content: "east"; font-family: "Material Symbols Outlined"; position: absolute; top: 44px; right: -21px; z-index: 1; font-size: 18px; color: var(--ti-moss); background: var(--ti-wash); border: 1px solid var(--ti-line); width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; }
.ti-step:last-child::after { content: none; }

/* promise band */
.ti-promise { display: flex; flex-direction: column; align-items: center; gap: 38px; padding: 92px max(24px, calc((100% - 980px) / 2)); background: radial-gradient(60% 80% at 50% -10%, rgba(158, 211, 168, .14), transparent 60%), linear-gradient(170deg, var(--ti-pine), var(--ti-ink) 75%); color: var(--ti-snow); }
.ti-promise blockquote { margin: 0; font: 500 clamp(22px, 2.6vw, 31px)/1.4 var(--f-display); letter-spacing: -.015em; text-align: center; color: #fff; max-width: 26ch; text-wrap: balance; }
.ti-promise blockquote b { color: var(--ti-accent-on-dark); font-weight: 600; }
.ti-promise-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; width: 100%; }
.ti-promise-item { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.ti-promise-item b { font: 500 36px/40px var(--f-body); letter-spacing: -.8px; color: var(--ti-accent-on-dark); font-variant-numeric: tabular-nums; }
.ti-promise-item span { font: 400 12.5px/18px var(--f-body); color: var(--ti-dusk); max-width: 30ch; }

/* pricing */
.ti-promo { display: flex; align-items: center; justify-content: center; gap: 12px; max-width: 720px; margin: 26px auto 0; padding: 14px 22px; border-radius: var(--r-md); background: var(--ti-lime); color: var(--ti-on-lime); font: 400 14.5px/21px var(--f-body); box-shadow: var(--e1); }
.ti-promo .msi { font-size: 22px; color: var(--ti-moss); }
.ti-promo b { font-weight: 700; }
.ti-tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: stretch; margin-top: 56px; }
.ti-tier { position: relative; display: flex; flex-direction: column; gap: 12px; padding: 32px 28px; border-radius: var(--r-xl); background: var(--ti-card); border: 1px solid color-mix(in srgb, var(--ti-line) 70%, transparent); box-shadow: var(--e1); }
.ti-tier.is-featured { border: 2px solid var(--ti-moss); box-shadow: var(--e3); background: linear-gradient(180deg, var(--ti-lime-soft), var(--ti-card) 34%); }
.ti-tier-badge { position: absolute; top: -14px; left: 28px; display: inline-flex; align-items: center; gap: 5px; font: 700 11px/16px var(--f-body); letter-spacing: .3px; background: var(--ti-moss); color: var(--ti-on-moss); border-radius: 999px; padding: 5px 14px; box-shadow: var(--e1); }
.ti-tier h3 { margin: 0; font: 600 18px/24px var(--f-body); letter-spacing: -.1px; }
.ti-price { display: flex; align-items: baseline; gap: 8px; }
.ti-price b { font: 500 42px/48px var(--f-body); letter-spacing: -1.2px; font-variant-numeric: tabular-nums; }
.ti-price span { font: 400 12px/16px var(--f-body); color: var(--ti-muted); }
.ti-tier-for { margin: 0; font: 400 13px/19px var(--f-body); color: var(--ti-muted); }
.ti-tier ul { list-style: none; margin: 6px 0 12px; padding: 0; display: flex; flex-direction: column; gap: 10px; flex: 1 1 auto; }
.ti-tier li { display: flex; gap: 9px; align-items: flex-start; font: 400 13px/19px var(--f-body); color: var(--ti-muted); }
.ti-tier li .msi { font-size: 16px; color: var(--ti-moss); margin-top: 1px; }
.ti-tier .ti-btn { width: 100%; }

/* faq */
.ti-faq { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 52px; }
.ti-faq-item { padding: 26px 28px; border-radius: var(--r-md); background: var(--ti-card); border: 1px solid color-mix(in srgb, var(--ti-line) 65%, transparent); box-shadow: var(--e1); }
.ti-faq-item h3 { margin: 0 0 8px; font: 600 15.5px/21px var(--f-body); letter-spacing: -.1px; }
.ti-faq-item p { margin: 0; font: 400 13.5px/21px var(--f-body); color: var(--ti-muted); }

/* ------------------------------------------------------- closing + footer -- */
.ti-final { display: flex; flex-direction: column; align-items: center; gap: 20px; text-align: center; padding: 104px max(24px, calc((100% - 860px) / 2)); background: radial-gradient(70% 110% at 50% -20%, rgba(158, 211, 168, .18), transparent 60%), linear-gradient(170deg, var(--ti-pine), var(--ti-ink) 70%); color: var(--ti-snow); }
.ti-final h2 { margin: 6px 0 0; font: 600 clamp(28px, 3.3vw, 40px)/1.12 var(--f-display); letter-spacing: var(--m3-tracking-display); color: #fff; max-width: 22ch; text-wrap: balance; }
.ti-final p { margin: 0; font: 400 15px/23px var(--f-body); color: var(--ti-dusk); max-width: 54ch; }
.ti-footer { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 36px; padding: 60px max(24px, calc((100% - 1140px) / 2)) 30px; background: var(--ti-floor); color: var(--ti-snow); }
.ti-footer .ti-cell { color: var(--ti-accent-on-dark); }
.ti-footer .ti-word b { color: var(--ti-snow); }
.ti-footer .ti-word small { color: var(--ti-dusk); }
.ti-footer-brand p { margin: 14px 0 0; font: 400 13px/20px var(--f-body); color: var(--ti-dusk); max-width: 36ch; }
.ti-footer-col { display: flex; flex-direction: column; gap: 9px; }
.ti-footer-col b { font: 700 11px/16px var(--f-body); letter-spacing: 1.4px; text-transform: uppercase; color: var(--ti-dusk); margin-bottom: 5px; }
.ti-footer-col a { font: 400 14px/20px var(--f-body); color: var(--ti-snow); text-decoration: none; }
.ti-footer-col a:hover { color: var(--ti-accent-on-dark); }
.ti-footer-legal { grid-column: 1 / -1; display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; border-top: 1px solid rgba(238, 242, 234, .14); margin-top: 22px; padding-top: 20px; font: 400 12px/16px var(--f-body); color: var(--ti-dusk); }

/* the integrations diagram (06 · Open) */
.ti-flow { position: relative; display: grid; grid-template-columns: 1fr auto 1fr; gap: 18px; align-items: center; width: 100%; }
.ti-flow-col { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.ti-flow-col > small { font: 700 9.5px/13px var(--f-body); letter-spacing: 1.4px; text-transform: uppercase; color: var(--tic-onvar); margin-bottom: 2px; }
.ti-flow-item { display: flex; align-items: center; gap: 9px; padding: 8px 12px; border-radius: 11px; background: var(--tic-card); border: 1px solid var(--tic-outline); box-shadow: var(--e1); min-width: 0; }
.ti-flow-item .msi { font-size: 17px; color: var(--ti-moss); }
.ti-flow-item b { font: 600 12px/16px var(--f-body); white-space: nowrap; }
.ti-flow-item em { font: 400 10px/13px var(--f-body); font-style: normal; color: var(--tic-onvar); white-space: nowrap; }
.ti-flow-core { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 0 10px; }
.ti-flow-core small { font: 600 10px/14px var(--f-body); color: var(--tic-onvar); text-align: center; max-width: 14ch; }
.ti-flow-links { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }

/* ------------------------------------- auth & register, in the site's clothes -- */
.ti-authpage { display: flex; justify-content: center; align-items: center; min-height: calc(100vh - 67px); padding: 48px max(24px, calc((100% - 1140px) / 2)); background-color: var(--ti-paper); background-image: var(--ti-topo); background-size: 680px auto; }
.ti-authpage.is-top { align-items: flex-start; }
.ti-panel { display: flex; flex-direction: column; gap: 14px; width: 100%; max-width: 560px; background: var(--ti-card); border: 1px solid var(--ti-line); border-radius: var(--r-lg); padding: 40px 42px; box-shadow: 0 24px 60px rgba(0, 33, 13, .10); }
.ti-panel.is-center { align-items: center; text-align: center; max-width: 460px; }
.ti-panel .ti-cell { height: 44px; }
.ti-panel.is-form { max-width: 640px; }
.ti-panel h1 { margin: 0; font: 600 clamp(24px, 2.6vw, 32px)/1.15 var(--f-display); letter-spacing: var(--m3-tracking-display); text-wrap: balance; }
.ti-panel > p, .ti-panel-lead { margin: 0; font: 400 14.5px/22px var(--f-body); color: var(--ti-muted); }
.ti-cta.is-center { justify-content: center; }
.ti-spin { width: 34px; height: 34px; border-radius: 50%; border: 3.5px solid var(--ti-lime); border-top-color: var(--ti-moss); animation: ti-rotate .9s linear infinite; }
@keyframes ti-rotate { to { transform: rotate(360deg); } }
.ti-alert { display: flex; flex-direction: column; gap: 10px; border-radius: var(--r-md); padding: 16px 18px; font: 400 13.5px/20px var(--f-body); }
.ti-alert.is-error { background: var(--m3-error-container); border: 1px solid color-mix(in srgb, var(--m3-error) 40%, transparent); color: var(--m3-on-error-container); }
.ti-alert.is-ok { background: var(--ti-lime-soft); border: 1px solid var(--ti-moss); color: var(--ti-text); }
.ti-alert.is-ok > b { font: 600 15px/20px var(--f-body); }
.ti-alert.is-ok .ti-btn { align-self: flex-start; }
.ti-form { display: flex; flex-direction: column; gap: 14px; margin-top: 6px; }
.ti-form-sub { font: 700 11px/16px var(--f-body); letter-spacing: 1.4px; text-transform: uppercase; color: var(--ti-moss); margin-top: 8px; }
.ti-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; }
.ti-form .ti-btn { width: 100%; margin-top: 6px; }
.ti-form .ti-btn:disabled { opacity: .55; pointer-events: none; }
.ti-form-foot { margin: 0; font: 400 12px/17px var(--f-body); color: var(--ti-muted); text-align: center; }
@media (max-width: 560px) { .ti-form-grid { grid-template-columns: 1fr; } .ti-panel { padding: 28px 22px; } }

/* the one registration form + its status page (ADR-0015) */
.ti-form-foot a { color: var(--ti-moss); font-weight: 600; }
.ti-trap { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; opacity: 0; }   /* the honeypot: off-screen, never display:none (some bots skip hidden fields) */
.ti-panel.ti-status { max-width: 760px; }
.ti-status-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 10px; }
.ti-status-card { display: flex; flex-direction: column; gap: 12px; padding: 22px 22px 20px; border-radius: var(--r-lg); background: var(--ti-paper); border: 1px solid color-mix(in srgb, var(--ti-line) 70%, transparent); }
.ti-status-head { display: inline-flex; align-items: center; gap: 8px; font: 700 11px/16px var(--f-body); letter-spacing: 1.6px; text-transform: uppercase; color: var(--ti-moss); }
.ti-status-head .msi { font-size: 18px; }
.ti-status-card dl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 14px; margin: 0; }
.ti-status-card dt { font: 500 12.5px/20px var(--f-body); color: var(--ti-muted); }
.ti-status-card dd { margin: 0; font: 500 14px/20px var(--f-body); color: var(--ti-text); overflow-wrap: anywhere; }
.ti-status-ok, .ti-status-todo { display: inline-flex; align-items: center; gap: 6px; }
.ti-status-ok { color: var(--ok-text); }
.ti-status-ok .msi { font-size: 18px; color: var(--ok-fill); }
.ti-status-todo { color: var(--ti-muted); }
.ti-status-todo .msi { font-size: 18px; }
.ti-status-card .ti-btn { align-self: flex-start; margin-top: 4px; }
.ti-status-card small { font: 400 12.5px/18px var(--f-body); color: var(--ti-muted); }
.ti-status-steps { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 0; }
.ti-status-steps li { position: relative; display: flex; flex-direction: column; padding: 4px 0 12px 26px; }
.ti-status-steps li::before { content: ""; position: absolute; left: 6px; top: 9px; width: 10px; height: 10px; border-radius: 50%; background: var(--ti-card); border: 2px solid var(--ti-line); }
.ti-status-steps li::after { content: ""; position: absolute; left: 11px; top: 23px; bottom: -2px; width: 2px; background: var(--ti-line); }
.ti-status-steps li:last-child::after { content: none; }
.ti-status-steps li b { font: 600 13.5px/18px var(--f-body); color: var(--ti-muted); }
.ti-status-steps li span { font: 400 12px/16px var(--f-body); color: var(--ti-muted); }
.ti-status-steps li.is-done::before { background: var(--ok-fill); border-color: var(--ok-fill); }
.ti-status-steps li.is-done b { color: var(--ti-text); }
.ti-status-steps li.is-now::before { background: var(--ti-moss); border-color: var(--ti-moss); box-shadow: 0 0 0 4px color-mix(in srgb, var(--ti-moss) 18%, transparent); }
.ti-status-steps li.is-now b { color: var(--ti-moss); }
.ti-status-steps li.is-stopped::before { background: var(--bad-fill); border-color: var(--bad-fill); }
.ti-status-steps li.is-stopped b { color: var(--bad-text); }
.ti-status-now { margin: 0; padding: 10px 12px; border-radius: var(--r-sm); background: var(--ti-lime-soft); font: 500 13px/19px var(--f-body); color: var(--ti-text); }
@media (max-width: 640px) { .ti-status-grid { grid-template-columns: 1fr; } }

/* ======================================================== the deck's narrative (v6, 26.10) ==
   "Signal over noise" (AGIF 2026) folded into the page: the noisy morning, the five verbs
   as the spine, "you are the standard", the Hirsala proof + the passport, the oxygen
   cases, the Monday take-home, prices on request. Every block reads the aliases above;
   the deck's lime/teal and Montserrat stay in the deck. */

/* the hero's strap — v4's headline, one line under the new one */
.ti-hero-strap { margin: -6px 0 0; font: 600 20px/28px var(--f-display); letter-spacing: var(--m3-tracking-title); color: var(--ti-accent-on-dark); }

/* a section head's lead, left-aligned under the title (the centred .ti-lead stays for centred bands) */
.ti-sechead-lead { margin: 4px 0 0; font: 400 16px/25px var(--f-body); color: var(--ti-muted); max-width: 60ch; }

/* ---- signal over noise: three vignettes on a timeline ------------------------------------- */
.ti-noise { padding: 84px max(24px, calc((100% - 1140px) / 2)) 72px; background-color: var(--ti-paper); background-image: var(--ti-topo); background-size: 680px auto; }
.ti-noise-tools { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; }
.ti-noise-tools span { display: inline-flex; align-items: center; gap: 8px; font: 500 12.5px/16px var(--f-body); color: var(--ti-muted); border: 1px solid color-mix(in srgb, var(--ti-line) 80%, transparent); border-radius: 999px; padding: 6px 12px 6px 6px; background: var(--ti-card); }
.ti-noise-tools i { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 6px; font: 700 10px/1 var(--f-body); font-style: normal; color: var(--ti-on-lime); background: var(--ti-lime); }
.ti-noise-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 36px; position: relative; }
.ti-noise-item { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 24px 24px 22px; border-radius: var(--r-lg); background: var(--ti-card); border: 1px solid color-mix(in srgb, var(--ti-line) 70%, transparent); box-shadow: var(--e1); }
.ti-noise-item::before { content: ""; position: absolute; left: 0; top: 22px; bottom: 22px; width: 3px; border-radius: 3px; background: var(--warn-fill); }
.ti-noise-item b { font: 500 22px/26px var(--f-mono); letter-spacing: -.3px; color: var(--ti-text); font-variant-numeric: tabular-nums; }
.ti-noise-item p { margin: 0; font: 400 14.5px/22px var(--f-body); color: var(--ti-text); }
.ti-noise-item em { font: 700 10.5px/14px var(--f-body); font-style: normal; letter-spacing: 1.4px; text-transform: uppercase; color: var(--warn-text); }
.ti-noise-line { margin: 40px 0 0; font: 600 clamp(20px, 2.2vw, 26px)/1.3 var(--f-display); letter-spacing: var(--m3-tracking-title); color: var(--ti-text); max-width: 30ch; text-wrap: balance; }
.ti-noise-sub { margin: 10px 0 0; font: 400 15.5px/24px var(--f-body); color: var(--ti-muted); max-width: 56ch; }

/* ---- the five verbs: the spine -------------------------------------------------------------- */
.ti-verbs { padding: 84px max(24px, calc((100% - 1140px) / 2)); background-color: var(--ti-wash); }
.ti-verbs-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; margin-top: 40px; }
.ti-verb { display: flex; flex-direction: column; gap: 10px; padding: 22px 20px 20px; border-radius: var(--r-lg); background: var(--ti-card); border: 1px solid color-mix(in srgb, var(--ti-line) 70%, transparent); box-shadow: var(--e1); min-width: 0; }
.ti-verb-no { font: 700 11px/16px var(--f-mono); letter-spacing: 1.6px; color: var(--ti-moss); }
.ti-verb h3 { margin: -4px 0 4px; font: 600 22px/26px var(--f-display); letter-spacing: -.02em; }
.ti-verb p { margin: 0; display: flex; flex-direction: column; gap: 4px; font: 400 13px/19px var(--f-body); }
.ti-verb p small { font: 700 9.5px/13px var(--f-body); letter-spacing: 1.4px; text-transform: uppercase; }
.ti-verb-exp { color: var(--ti-muted); font-style: italic; }
.ti-verb-exp small { color: var(--mute-text); font-style: normal; }
.ti-verb-data { color: var(--ti-text); padding: 10px 12px; border-radius: var(--r-sm); background: var(--ti-lime-soft); margin-top: auto; }
.ti-verb-data small { color: var(--ti-moss); }
.ti-verbs-line { margin: 36px 0 0; font: 600 clamp(20px, 2.2vw, 26px)/1.3 var(--f-display); letter-spacing: var(--m3-tracking-title); max-width: 30ch; text-wrap: balance; }
.ti-verbs-line b, .ti-standard-line b, .ti-learns-line b { color: var(--ti-moss); font-weight: 600; }

/* the brief in words (the Prioritise row) */
.ti-brief { margin: 22px 0 0; padding: 16px 18px 16px 20px; border-left: 3px solid var(--ti-moss); border-radius: 0 var(--r-md) var(--r-md) 0; background: var(--ti-lime-soft); font: 400 14.5px/23px var(--f-body); color: var(--ti-text); max-width: 52ch; }
.ti-brief small { display: block; margin-bottom: 6px; font: 700 10px/14px var(--f-body); letter-spacing: 1.4px; text-transform: uppercase; color: var(--ti-moss); }
.ti-brief b { font-weight: 600; }

/* ---- you are the standard -------------------------------------------------------------------- */
.ti-standard { padding: 84px max(24px, calc((100% - 1140px) / 2)); background-color: var(--ti-paper); background-image: var(--ti-topo); background-size: 680px auto; border-top: 1px solid color-mix(in srgb, var(--ti-line) 55%, transparent); }
.ti-ways { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 36px; }
.ti-way { padding: 24px 26px; border-radius: var(--r-lg); background: var(--ti-card); border: 1px solid color-mix(in srgb, var(--ti-line) 70%, transparent); box-shadow: var(--e1); }
.ti-way.is-better { border: 2px solid var(--ti-moss); background: linear-gradient(180deg, var(--ti-lime-soft), var(--ti-card) 60%); }
.ti-way > b { display: block; font: 600 15px/20px var(--f-body); margin-bottom: 12px; }
.ti-way ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.ti-way li { display: flex; gap: 10px; align-items: flex-start; font: 400 14px/21px var(--f-body); color: var(--ti-text); }
.ti-way li .msi { font-size: 18px; margin-top: 1px; }
.ti-way.is-usual li .msi { color: var(--mute-text); }
.ti-way.is-usual li { color: var(--ti-muted); }
.ti-way.is-better li .msi { color: var(--ti-moss); }

/* normal, for the whole course: four rows, a drawn glance each */
.ti-normal { margin-top: 48px; padding: 26px 28px 22px; border-radius: var(--r-xl); background: var(--ti-card); border: 1px solid color-mix(in srgb, var(--ti-line) 70%, transparent); box-shadow: var(--e1); }
.ti-normal-head { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin-bottom: 12px; }
.ti-normal-head b { font: 600 17px/22px var(--f-body); letter-spacing: -.1px; }
.ti-normal-head span { font: 400 13.5px/20px var(--f-body); color: var(--ti-muted); }
.ti-normal-row { display: grid; grid-template-columns: 118px minmax(0, 1fr) minmax(0, 1.1fr); gap: 18px; align-items: center; padding: 12px 0; border-top: 1px solid color-mix(in srgb, var(--ti-line) 60%, transparent); }
.ti-normal-lab { display: flex; flex-direction: column; font: 600 14px/18px var(--f-body); }
.ti-normal-lab small { font: 400 11.5px/15px var(--f-body); color: var(--ti-muted); }
.ti-normal-art { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
.ti-normal-art i { display: grid; place-items: center; width: 14px; height: 14px; border-radius: 50%; background: var(--ok-fill); font: 700 9px/1 var(--f-body); font-style: normal; color: #fff; }
.ti-normal-art i.is-bad { width: 22px; height: 22px; background: var(--bad-fill); box-shadow: 0 0 0 4px color-mix(in srgb, var(--bad-fill) 22%, transparent); }
.ti-normal-art.is-people i { width: 11px; height: 11px; border-radius: 4px; background: var(--ti-moss); }
.ti-normal-art.is-people i.is-off { background: transparent; border: 1.5px dashed var(--mute-text); }
.ti-normal-art.is-fleet i { width: auto; height: 22px; padding: 0 8px; border-radius: 6px; background: var(--tic-low); color: var(--ti-text); font: 600 10.5px/1 var(--f-mono); }
.ti-normal-art.is-fleet i.is-bad { background: var(--bad-fill); color: #fff; box-shadow: none; }
.ti-normal-art.is-money { gap: 12px; margin-bottom: 14px; }
.ti-normal-art.is-money i { position: relative; width: 84px; height: 8px; border-radius: 4px; background: var(--tic-low); overflow: visible; }
.ti-normal-art.is-money i::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: var(--w); border-radius: 4px; background: var(--ti-moss); }
.ti-normal-art.is-money i.is-warn::before { background: var(--warn-fill); }
.ti-normal-art.is-money i em { position: absolute; left: 0; top: 11px; font: 500 9.5px/12px var(--f-body); font-style: normal; color: var(--ti-muted); white-space: nowrap; }
.ti-normal-say { font: 500 13.5px/20px var(--f-body); color: var(--ti-text); }
.ti-normal-foot { margin: 14px 0 0; font: 400 13.5px/20px var(--f-body); color: var(--ti-muted); }

/* same heat, different greens */
.ti-heat { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 40px; align-items: center; margin-top: 56px; }
.ti-heat-copy { display: flex; flex-direction: column; align-items: flex-start; }
.ti-heat-copy h3 { margin: 12px 0 10px; font: 600 26px/32px var(--f-display); letter-spacing: -.02em; }
.ti-heat-copy p { margin: 0; font: 400 15px/24px var(--f-body); color: var(--ti-muted); max-width: 50ch; }
.ti-heat-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.ti-heat-card { display: flex; flex-direction: column; gap: 4px; padding: 20px 20px 18px; border-radius: var(--r-lg); background: var(--ti-card); border: 1px solid color-mix(in srgb, var(--ti-line) 70%, transparent); box-shadow: var(--e1); }
.ti-heat-card.is-low { border-color: color-mix(in srgb, var(--warn-fill) 60%, transparent); }
.ti-heat-card b { font: 600 16px/22px var(--f-body); }
.ti-heat-card em { font: 400 12.5px/16px var(--f-body); font-style: normal; color: var(--ti-muted); }
.ti-heat-card small { margin-top: 8px; font: 400 12.5px/18px var(--f-body); color: var(--ti-text); }
.ti-range { position: relative; display: block; height: 10px; margin: 14px 0 6px; border-radius: 5px; background: var(--tic-low); }
.ti-range i { position: absolute; top: 0; bottom: 0; left: var(--lo); width: calc(var(--hi) - var(--lo)); border-radius: 5px; background: color-mix(in srgb, var(--ok-fill) 45%, var(--tic-low)); }
.ti-range u { position: absolute; top: -4px; left: var(--v); width: 18px; height: 18px; margin-left: -9px; border-radius: 50%; background: var(--ok-fill); border: 3px solid var(--ti-card); box-shadow: var(--e1); text-decoration: none; }
.ti-heat-card.is-low .ti-range u { background: var(--warn-fill); }
.ti-standard-line { margin: 44px 0 0; font: 600 clamp(20px, 2.2vw, 26px)/1.3 var(--f-display); letter-spacing: var(--m3-tracking-title); max-width: 32ch; text-wrap: balance; }

/* ---- it learns: Hirsala, the passport -------------------------------------------------------- */
.ti-learns { padding: 84px max(24px, calc((100% - 1140px) / 2)); background-color: var(--ti-wash); }
.ti-learn-nums { display: flex; align-items: stretch; justify-content: center; gap: 18px; flex-wrap: wrap; margin-top: 40px; }
.ti-learn-num { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-width: 200px; padding: 22px 24px 20px; border-radius: var(--r-lg); background: var(--ti-card); border: 1px solid color-mix(in srgb, var(--ti-line) 70%, transparent); box-shadow: var(--e1); text-align: center; }
.ti-learn-num b { font: 500 56px/60px var(--f-body); letter-spacing: -2px; color: var(--mute-text); font-variant-numeric: tabular-nums; }
.ti-learn-num.is-now b, .ti-learn-num.is-zero b { color: var(--ti-moss); }
.ti-learn-num.is-zero { border: 2px solid var(--ti-moss); background: linear-gradient(180deg, var(--ti-lime-soft), var(--ti-card) 70%); }
.ti-learn-num span { font: 400 13px/18px var(--f-body); color: var(--ti-muted); max-width: 20ch; }
.ti-learn-arrow { font-size: 26px; color: var(--mute-text); align-self: center; }
.ti-learn-time { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; max-width: 760px; margin: 22px auto 0; }
.ti-learn-time div { display: flex; flex-direction: column; gap: 2px; padding: 12px 16px; border-left: 3px solid var(--ti-moss); background: var(--ti-card); border-radius: 0 var(--r-sm) var(--r-sm) 0; }
.ti-learn-time small { font: 700 10px/14px var(--f-body); letter-spacing: 1.4px; text-transform: uppercase; color: var(--ti-moss); }
.ti-learn-time b { font: 600 15px/20px var(--f-body); }
.ti-quotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 44px; }
.ti-quote { margin: 0; display: flex; flex-direction: column; gap: 8px; padding: 22px 22px 20px; border-radius: var(--r-lg); background: var(--ti-card); border: 1px solid color-mix(in srgb, var(--ti-line) 70%, transparent); box-shadow: var(--e1); }
.ti-quote p { margin: 0; font: 600 17px/24px var(--f-display); letter-spacing: -.01em; text-wrap: balance; }
.ti-quote span { font: 400 13px/20px var(--f-body); color: var(--ti-muted); }
.ti-quotes cite { grid-column: 1 / -1; font: 500 12.5px/18px var(--f-body); font-style: normal; color: var(--ti-muted); }
.ti-quotes cite::before { content: "— "; }
.ti-passport { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 40px; align-items: center; margin-top: 52px; }
.ti-passport-copy { display: flex; flex-direction: column; align-items: flex-start; }
.ti-passport-copy h3 { margin: 12px 0 10px; font: 600 26px/32px var(--f-display); letter-spacing: -.02em; }
.ti-passport-copy p { margin: 0; font: 400 15px/24px var(--f-body); color: var(--ti-muted); max-width: 48ch; }
.ti-passport-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; counter-reset: pp; }
.ti-passport-list li { counter-increment: pp; display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 4px 14px; align-items: start; padding: 16px 18px; border-radius: var(--r-md); background: var(--ti-card); border: 1px solid color-mix(in srgb, var(--ti-line) 70%, transparent); box-shadow: var(--e1); }
.ti-passport-list li::before { content: counter(pp); grid-row: span 2; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--ti-lime); color: var(--ti-on-lime); font: 700 14px/1 var(--f-body); }
.ti-passport-list b { font: 600 15px/20px var(--f-body); }
.ti-passport-list span { font: 400 13px/20px var(--f-body); color: var(--ti-muted); }
.ti-learns-line { margin: 44px 0 0; font: 600 clamp(20px, 2.2vw, 26px)/1.3 var(--f-display); letter-spacing: var(--m3-tracking-title); max-width: 32ch; text-wrap: balance; }

/* prices on request */
.ti-price.is-request b { font: 500 28px/48px var(--f-body); letter-spacing: -.5px; }

/* ---- Monday morning: the take-home -------------------------------------------------------------- */
.ti-monday { padding: 84px max(24px, calc((100% - 1140px) / 2)); background-color: var(--ti-paper); background-image: var(--ti-topo); background-size: 680px auto; }
.ti-monday-grid { list-style: none; margin: 36px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; counter-reset: md; }
.ti-monday-grid li { counter-increment: md; display: flex; flex-direction: column; gap: 8px; padding: 26px 26px 24px; border-radius: var(--r-lg); background: var(--ti-card); border: 1px solid color-mix(in srgb, var(--ti-line) 70%, transparent); box-shadow: var(--e1); }
.ti-monday-grid li::before { content: counter(md); display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--ti-lime); color: var(--ti-on-lime); font: 700 16px/1 var(--f-body); margin-bottom: 4px; }
.ti-monday-grid b { font: 600 16px/22px var(--f-body); letter-spacing: -.1px; }
.ti-monday-grid p { margin: 0; font: 400 13.5px/20px var(--f-body); color: var(--ti-muted); }
.ti-monday-cta { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-top: 32px; padding: 18px 24px; border-radius: var(--r-md); background: var(--ti-wash); border: 1px solid color-mix(in srgb, var(--ti-line) 60%, transparent); }
.ti-monday-cta p { margin: 0; font: 500 15px/22px var(--f-body); }

/* ------------------------------------------------------------- responsive -- */
@media (max-width: 1100px) {
    .tic-body { grid-template-columns: 56px minmax(0, 1fr); }
    .tic-nav em, .tic-nav .is-chev, .tic-rail-label { display: none; }
    .tic-nav { justify-content: center; padding: 0; }
    .tic-search { min-width: 0; width: 38px; padding: 0; justify-content: center; }
    .tic-search span { display: none; }
}
@media (max-width: 1040px) {
    .ti-topnav { display: none; }
    .ti-hero { grid-template-columns: 1fr; gap: 44px; padding-top: 52px; }
    .ti-hero-copy { align-items: center; text-align: center; }
    .ti-hero-copy > p { max-width: 62ch; }
    .ti-hero .ti-cta { justify-content: center; }
    .ti-hero-shot { max-width: 640px; margin: 0 auto; }
    .ti-row, .ti-row.is-flip { grid-template-columns: 1fr; gap: 30px; margin-top: 64px; }
    .ti-row.is-flip .ti-row-copy { order: 0; }
    .ti-steps, .ti-tiers { grid-template-columns: 1fr; }
    .ti-step::after { content: none; }
    .ti-tier.is-featured { order: -1; }
    .ti-faq { grid-template-columns: 1fr; }
    .ti-footer { grid-template-columns: 1fr; gap: 26px; }
    .ti-section { padding-top: 64px; padding-bottom: 64px; }
    .ti-mobile { grid-template-columns: 1fr; gap: 44px; }
    .ti-problem-grid, .ti-promise-grid { grid-template-columns: 1fr; }
    .ti-noise-grid, .ti-ways, .ti-heat-pair, .ti-quotes, .ti-learn-time, .ti-monday-grid { grid-template-columns: 1fr; }
    .ti-verbs-grid { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
    .ti-heat, .ti-passport { grid-template-columns: 1fr; gap: 28px; }
    .ti-normal-row { grid-template-columns: 1fr; gap: 8px; }
    .ti-noise, .ti-verbs, .ti-standard, .ti-learns, .ti-monday { padding-top: 64px; padding-bottom: 64px; }
    .ti-learn-nums { flex-direction: column; align-items: stretch; }
    .ti-learn-arrow { transform: rotate(90deg); }
    .ti-flow { grid-template-columns: 1fr; }
    .ti-flow-core { order: -1; }
    /* hero console simplifies: hide the two bottom widgets' span changes */
    .tic-grid { grid-template-columns: 1fr; }
    .tic-w.sp4, .tic-w.sp5, .tic-w.sp6, .tic-w.sp7 { grid-column: span 1; }
}
@media (max-width: 560px) {
    .ti-word small { display: none; }
    .ti-word b { font-size: 15px; }
    .ti-topcta .is-ghost { display: none; }
    .ti-row-art { padding: 34px 14px 18px; }
    .tic-top { gap: 8px; }
    .tic-club, .tic-search { display: none; }
    .tic-body, .tic-frame.is-compact .tic-body { grid-template-columns: 1fr; }
    .tic-rail { flex-direction: row; justify-content: center; padding: 4px 8px 8px; }
    .tic-panel { border-radius: 14px 14px 0 0; padding: 12px; }
    .tic-wx, .tic-wx.is-5 { grid-template-columns: 1fr 1fr; }
    .tic-tbl-h, .tic-tbl-r { gap: 6px; padding: 5px 8px; font-size: 10.5px; }
    .tic-tbl .is-todo { font-size: 8px; padding: 0 4px; }
    .ti-phone { width: 236px; }
    .ti-builton { gap: 6px 14px; }
}
@media (prefers-reduced-motion: reduce) {
    .tic-map .tic-dot.is-bad { animation: none; }
    html { scroll-behavior: auto; }
}

/* ---- the register form's Mud inputs, in the site's colours ------------------------------
   The public site is light by design whatever the app's scheme (its root re-declares the
   light tokens), but the Mud controls inside it read the MudThemeProvider's palette — the
   DARK one when the person's scheme is dark, which painted the form's text light grey on a
   white panel (27.10). So the palette variables Mud's inputs, labels, helper texts, borders
   and adornments read are re-declared here from the page's own aliases; every Mud control on
   the public pages follows, whatever the scheme. (A select's popover renders at the body and
   keeps the app's palette — readable either way.) */
.ti-page {
    --mud-palette-text-primary: var(--ti-text);
    --mud-palette-text-secondary: var(--ti-muted);
    --mud-palette-text-disabled: var(--mute-text);
    --mud-palette-lines-inputs: var(--ti-line);
    --mud-palette-lines-default: var(--ti-line);
    --mud-palette-action-default: var(--ti-muted);
    --mud-palette-background: var(--ti-paper);
    --mud-palette-surface: var(--ti-card);
    --mud-palette-primary: var(--ti-moss);
    --mud-palette-primary-text: var(--ti-on-moss);
}
.ti-page .mud-input:focus-within ~ label.mud-input-label.mud-input-label-inputcontrol { color: var(--ti-moss); }
.ti-page .mud-input.mud-input-outlined:focus-within > .mud-input-outlined-border,
.ti-page .mud-input.mud-input-outlined:focus-within .mud-shrink > .mud-input-outlined-border { border-color: var(--ti-moss); }
.ti-page .mud-input.mud-input-underline:after { border-bottom-color: var(--ti-moss); }
.ti-page .mud-checkbox .mud-checked .mud-icon-root, .ti-page .mud-primary-text { color: var(--ti-moss) !important; }
.ti-page .mud-progress-circular.mud-primary-text { color: var(--ti-moss) !important; }
.ti-page .mud-button-filled.mud-button-filled-primary { background-color: var(--ti-moss); color: var(--ti-on-moss); }
.ti-page .mud-button-filled.mud-button-filled-primary:hover { background-color: var(--m3-primary-hover); }

/* keyboard focus is visible everywhere on the site: the primary ring, offset on dark bands */
.ti-page :is(a, button, [tabindex]):focus-visible { outline: 2px solid var(--ti-moss); outline-offset: 3px; border-radius: inherit; }
.ti-page .is-dark :is(a, button):focus-visible, .ti-page [data-scheme="dark"] :is(a, button):focus-visible { outline-color: var(--ti-accent-on-dark); }