/* dtangle Mystique: the single source of truth for the visual language.
 *
 * Every colour, type choice and surface treatment in the product resolves to a token declared here.
 * The approved reference is docs/design/mystique/dtangle_mystique.html, which carries its design as
 * a stack of accumulated overrides; that shape is right for a mockup and wrong for production, so
 * this file states each decision once and the templates spend tokens rather than hex literals.
 *
 * Two surface families, because the product has two moods:
 *   light  pale sage and forest ink, every signed-in page. Calm, continuous, legible for hours.
 *   dark   smoked green and chalk, the marketing homepage only. Cinematic, photographic.
 *
 * Phase colours are deliberately NOT themed. They encode meaning in the strands graph (build, plan,
 * coordinate, learn, distract) and a reader learns them; restyling them to match a palette would
 * change what the graph says.
 */

/* ---------------------------------------------------------------- light surfaces (the product) */
:root {
  /* surfaces, sage running continuously from page to panel so the app reads as one sheet rather
     than a tray of floating cards */
  --paper:        #E8ECE3;
  --surface:      #F3F5ED;
  --surface-high: #FAFBF7;
  --wash:         #DCE3D3;
  --line:         #C9D1C2;
  --line-soft:    #D2D9CC;

  /* text, forest green through to a sage-grey for captions */
  --ink:    #26352B;
  --ink-2:  #4A5648;
  --mid:    #5B6858;
  --muted:  #626D60;
  --faint:  #68735F;

  /* accents, restrained olive. --accent is the resting state, --accent-strong the selected one */
  --accent:        #53643B;
  --accent-strong: #475D3B;
  --accent-wash:   #DCE4CC;
  --accent-tint:   #EFF3E8;
  --link:          #42562F;

  /* narrative colours. --drift is the clay used for drift windows and declines in prose; it is a
     reading colour, distinct from --distract which is the distract PHASE in the graph */
  --positive: #4B6035;
  --drift:    #925743;

  /* brand. copper carries the strand mark, the wordmark stays forest so the mark reads as the
     accent and the name as the voice */
  --copper:       #B75A34;
  --copper-light: #DB956A;
  --brand-ink:    #24392D;

  /* focus, one visible ring everywhere */
  --focus: #53643B;

  /* semantic phase colours: meaning, not decoration. Do not theme these. */
  --build:#4F7CFF; --build-soft:#DCE6FF; --build-lane:#F4F7FF;
  --plan:#0D9488;  --plan-soft:#C7EAE4;  --plan-lane:#EEF9F7;
  --coord:#8A5CF6; --coord-soft:#E7DDFD; --coord-lane:#F6F1FF;
  --learn:#D8912C; --learn-soft:#F6E4C5; --learn-lane:#FFF8EC;
  --distract:#D85E52; --distract-soft:#F8D8D4; --distract-lane:#FDF2F0;

  /* type */
  --display: 'Cormorant Garamond', Georgia, serif;
  --sans: 'Manrope', system-ui, sans-serif;
}

/* ----------------------------------------------------------------------- daisyUI, re-pointed
 *
 * Several pages use daisyUI component classes (card, avatar, badge, btn, toggle) and the theme was
 * left at "emerald", so those components rendered in a bright stock green that has nothing to do
 * with this palette: a vivid avatar disc and an acid "Active" badge next to restrained olive.
 *
 * Re-pointing daisyUI's own theme variables fixes every one of them at once, without touching the
 * markup or swapping component classes for hand-rolled ones. daisyUI 4 expects unwrapped OKLCH
 * components; the hex each was derived from is in the comment.
 */
[data-theme="emerald"] {
  --p:  47.7988% 0.0652 127.05;   /* primary            #53643B olive */
  --pc: 98.7364% 0.0107 118.02;   /* primary-content    #FAFCF4 */
  --s:  57.3797% 0.1313 41.87;    /* secondary          #B75A34 copper */
  --sc: 97.7951% 0.0144 64.35;    /* secondary-content  #FFF6EE */
  --a:  45.0593% 0.0596 134.98;   /* accent             #475D3B */
  --ac: 98.7364% 0.0107 118.02;   /* accent-content     #FAFCF4 */
  --n:  31.2065% 0.0267 155.38;   /* neutral            #26352B forest */
  --nc: 93.7543% 0.0127 126.38;   /* neutral-content    #E8ECE3 */
  --b1: 96.6427% 0.0108 118.02;   /* base-100           #F3F5ED surface */
  --b2: 93.7543% 0.0127 126.38;   /* base-200           #E8ECE3 paper */
  --b3: 90.6085% 0.0227 126.25;   /* base-300           #DCE3D3 wash */
  --bc: 31.2065% 0.0267 155.38;   /* base-content       #26352B */
  --su: 46.0270% 0.0701 130.01;   /* success            #4B6035 */
  --wa: 57.3797% 0.1313 41.87;    /* warning            #B75A34 */
  --er: 47.0108% 0.1585 25.77;    /* error              #A12727 */
}

/* ------------------------------------------------------------- dark surfaces (homepage only) */
.mys-dark {
  --paper:        #151B18;
  --surface:      #1B221D;
  --surface-high: #263025;
  --wash:         #263025;
  --line:         rgba(233,233,221,.13);
  --line-soft:    rgba(233,233,221,.09);

  --ink:   #E9E9DD;
  --ink-2: #D1D6C9;
  --mid:   #C1C6B9;
  --muted: #B9C2B3;
  --faint: #B6C0AF;

  --accent:        #B8C27B;
  --accent-strong: #CDD8A6;
  --accent-wash:   rgba(184,194,123,.14);
  --accent-tint:   rgba(184,194,123,.08);
  --link:          #CDD8A6;

  --copper: var(--copper-light);
  --focus:  #B8C27B;
}

/* A light panel sitting on a dark page. Without this the panel inherits the dark tokens and puts
   chalk text on near-white, which measured 1.11:1. Re-declaring the light palette inside it keeps
   one rule responsible for the exception instead of a scatter of inline overrides. */
.mys-dark .mys-on-light {
  --paper: #E8ECE3; --surface: #F3F5ED; --surface-high: #FAFBF7; --wash: #DCE3D3;
  --line: #C9D1C2; --line-soft: #D2D9CC;
  --ink: #26352B; --ink-2: #4A5648; --mid: #5B6858; --muted: #626D60; --faint: #68735F;
  --accent: #53643B; --accent-strong: #475D3B; --accent-wash: #DCE4CC; --accent-tint: #EFF3E8;
  --link: #42562F; --copper: #B75A34; --focus: #53643B;
  color: var(--ink);
}

/* ------------------------------------------------------------------------------- typography */
body { font-family: var(--sans); }

.mys-display {
  font-family: var(--display);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.02;
}

/* The wordmark. One treatment, used at every size, so "dtangle" is the same object everywhere. */
.mys-wordmark {
  font-family: var(--display);
  font-weight: 600;
  letter-spacing: -0.035em;
  color: var(--brand-ink);
  line-height: 1;
}
.mys-dark .mys-wordmark { color: var(--ink); }

.mys-eyebrow {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ------------------------------------------------------------------------------- brand mark */
/* The untangling strands symbol: two paths that cross and resolve. Stroked with currentColor so a
   single SVG serves header, footer, sign in and favicon, taking its colour from the surface. */
.mys-mark {
  display: block;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  color: var(--copper);
}
.mys-dark .mys-mark { color: var(--copper-light); }

.mys-brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  text-decoration: none;
}

/* ----------------------------------------------------------------------------------- surfaces */
.mys-panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 20px;
}

/* The strands container. Olive light enters at the top left and fades through chalk into white,
   so the graph's own white canvas is never fenced off by a hard edge: the surface arrives at it. */
.mys-flow-shell,
.melo-flow-shell {
  background:
    radial-gradient(ellipse at 0% 0%, rgba(197,211,153,.52), rgba(224,233,202,.24) 34%, transparent 67%),
    linear-gradient(110deg, #F0F3E8 0%, #FAFBF7 56%, #FFFFFF 100%);
  border: 1px solid #CED6C3;
  border-radius: 22px;
  color: #354A32;
}

/* The graph's own canvas stays white and untouched. Every phase colour in it was chosen to be read
   against white, so tinting this surface would quietly change what the visualization says. */
.mys-flow-panel,
.melo-flow-panel {
  background: #FFFFFF;
  border: 1px solid #E4E9DC;
  border-radius: 18px;
}

/* ------------------------------------------------------------------------------------ controls */
/* Navigation reads as text, not chrome: the selected item is weighted and underlined rather than
   filled, which keeps the dashboard quiet while still answering "where am I". */
.mys-tab {
  position: relative;
  background: none;
  border: 0;
  padding: 9px 0;
  min-height: 38px;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  color: var(--mid);
  cursor: pointer;
  transition: color .18s ease;
}
.mys-tab:hover:not([aria-selected="true"]) {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 6px;
}
.mys-tab[aria-selected="true"] { color: var(--ink); font-weight: 700; }
.mys-tab[aria-selected="true"]::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: var(--accent-strong);
}

.mys-range {
  background: none;
  border: 0;
  padding: 8px 0;
  min-height: 36px;
  font-family: var(--sans);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--mid);
  cursor: pointer;
  transition: color .18s ease;
}
.mys-range.on {
  color: var(--ink);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 7px;
  text-decoration-thickness: 2px;
}

.mys-select {
  background: var(--surface-high);
  border: 1px solid #BCC7B3;
  border-radius: 3px;
  min-height: 36px;
  padding: 7px 12px;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-2);
  cursor: pointer;
}

.mys-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 11px 20px;
  min-height: 44px;
  border: 1px solid var(--accent-strong);
  border-radius: 3px;
  background: var(--accent-strong);
  color: #FAFCF4;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: background .18s ease, border-color .18s ease;
}
.mys-button:hover { background: var(--accent); border-color: var(--accent); }

.mys-button.secondary {
  background: transparent;
  color: var(--link);
  border-color: var(--line);
}
.mys-button.secondary:hover { background: var(--accent-tint); border-color: var(--accent); }

.mys-dark .mys-button {
  background: #B8C27B;
  border-color: #B8C27B;
  color: #182216;
  border-radius: 2px;
}
.mys-dark .mys-button:hover { background: #CDD8A6; border-color: #CDD8A6; }
.mys-dark .mys-button.secondary {
  background: transparent;
  color: #D1DBB1;
  border-color: #71815F;
}

/* A link that behaves like an action. Used for the autopsy disclosure, where a filled button would
   overstate a reveal. */
.mys-textlink {
  background: none;
  border: 0;
  padding: 0;
  font-family: var(--sans);
  font-size: 12.5px;
  font-weight: 700;
  color: var(--link);
  text-decoration: underline;
  text-underline-offset: 4px;
  cursor: pointer;
}
.mys-textlink:hover { color: var(--ink); }

/* One focus treatment, applied to anything focusable. Never removed. */
.mys-tab:focus-visible,
.mys-range:focus-visible,
.mys-select:focus-visible,
.mys-button:focus-visible,
.mys-textlink:focus-visible,
.mys-brand:focus-visible,
a:focus-visible,
button:focus-visible,
select:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 4px;
  border-radius: 2px;
}

/* Section photography on the dark homepage.
 *
 * The images below the hero are warm floral stock from the previous theme and there is no approved
 * replacement for them. Grading them into the smoked-green world is the honest interim: desaturate,
 * cool and darken so they read as atmosphere rather than as a bouquet sitting on a dark page. Delete
 * this rule the day real photography lands, nothing else depends on it.
 */
.mys-dark img[data-graded] {
  filter: grayscale(.52) sepia(.22) saturate(.8) brightness(.78) contrast(1.08);
}

/* --------------------------------------------------------------------- homepage, cinematic hero */
/* The photograph moves, the words do not. Pointer parallax is damped and small (the image is scaled
   6.5% so it can drift without exposing an edge); text sits in its own stacking context and stays
   put, because a headline that slides with the cursor is a toy, not a product. */
.mys-hero { position: relative; overflow: hidden; isolation: isolate; }

.mys-hero-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
  /* Scaled so the image has room to drift without ever exposing an edge. */
  transform: scale(1.065);
  transform-origin: center;
  backface-visibility: hidden;
  will-change: transform;
}

/* The scrim. Dense at the left where the words are, clearing to nothing at the right so the
   photograph is still a photograph. */
.mys-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(12,20,15,.53), transparent 65%);
}

.mys-hero-inner { position: relative; z-index: 1; }

@media (max-width: 760px) {
  .mys-hero::after { background: linear-gradient(90deg, rgba(12,20,15,.79), rgba(12,20,15,.13)); }
}
@media (max-width: 600px) {
  .mys-hero::after {
    background: linear-gradient(180deg, rgba(12,20,15,.85), rgba(12,20,15,.72) 54%, rgba(12,20,15,.09));
  }
}

/* The hero photograph is deliberately exempt from the reduced-motion rule below: its movement is
   the homepage's one piece of art direction and it was specified as unconditional. Every other
   transition in the product still stops. */
@media (prefers-reduced-motion: reduce) {
  .mys-tab, .mys-range, .mys-button, .mys-select, .mys-textlink { transition: none !important; }
}

/* ------------------------------------------------------- homepage sections (public marketing) */
.mys-kicker {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #C5CFB2;
}
.mys-story-band .mys-kicker { color: #586947; }

.mys-section {
  max-width: 1500px;
  margin: 0 auto;
  padding: 90px 64px;
}

.mys-section-intro {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 50px;
  margin-bottom: 35px;
}
.mys-section-intro h2 {
  /* Wide enough to hold the longest line the <br>s produce, so the headline breaks only where it
     is told to and never orphans a word. */
  max-width: 920px;
  font-size: clamp(38px, 4.1vw, 60px);
  line-height: 1.02;
  letter-spacing: -1.2px;
}
.mys-section-intro p {
  max-width: 340px;
  font-size: 14px;
  line-height: 1.75;
  color: var(--muted);
}

/* The link out of the showcase. Widens on hover rather than changing colour, so the arrow reads as
   travel rather than as a state change. */
.mys-showcase-link {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-size: 13px;
  font-weight: 700;
  color: #42562F;
  text-decoration: none;
  transition: gap .2s ease;
}
.mys-showcase-link:hover { gap: 22px; text-decoration: underline; text-underline-offset: 5px; }

.mys-explore {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  padding: 12px 0;
  font-size: 11px;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid rgba(192,201,182,.4);
  transition: color .18s ease;
}
.mys-explore:hover { color: #DCE7AF; }

/* The single light band. It carries the how-it-works sequence, and being the one inversion on the
   page is what makes that section read as a different kind of content. */
.mys-story-band {
  background: #DEE1D4;
  color: #243125;
}
.mys-story-item {
  padding: 27px 0;
  border-top: 1px solid rgba(139,156,130,.4);
}
.mys-story-item:first-child { padding-top: 0; border-top: 0; }
.mys-story-item .number {
  display: block;
  margin-bottom: 13px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  color: #5A6B4D;
}
.mys-story-item h3 {
  margin-bottom: 12px;
  font-size: 21px;
  line-height: 1.35;
  letter-spacing: -.6px;
}
.mys-story-item p {
  max-width: 430px;
  font-size: 14px;
  line-height: 1.8;
  color: #4C594A;
}

.mys-pricing-title {
  font-size: clamp(40px, 5vw, 67px);
  line-height: 1.05;
  letter-spacing: -1.6px;
  margin: 14px 0 43px;
}

.mys-plan { border-top: 1px solid #68775E; padding-top: 25px; }
.mys-plan .plan_label { display: flex; justify-content: space-between; font-size: 12px; font-weight: 700; }
.mys-plan .plan_price {
  margin: 14px 0;
  font-size: clamp(55px, 6vw, 78px);
  line-height: 1.2;
  letter-spacing: -2px;
}
.mys-plan .plan_price span {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--muted);
}
.mys-plan .plan_description { font-size: 13px; max-width: 420px; min-height: 42px; color: var(--muted); }
.mys-plan ul { list-style: none; padding: 0; margin: 25px 0; }
.mys-plan li {
  padding: 9px 0;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
  color: var(--ink-2);
}

/* ------------------------------------------------------- the strands showcase, made readable */
.mys-teaser { min-height: 300px; }
.mys-teaser svg { display: block; }

/* Isolating a phase dims the rest rather than hiding it, so the shape of the whole day stays
   visible behind the lane being read. */
.hs-lane, .hs-strand, .hs-curve { transition: opacity .2s ease; }
.mys-teaser svg.isolating :is(.hs-lane, .hs-strand, .hs-curve) { opacity: .12; }
.mys-teaser svg.isolating[data-only="build"]      :is(.hs-lane, .hs-strand, .hs-curve)[data-phase="build"],
.mys-teaser svg.isolating[data-only="plan"]       :is(.hs-lane, .hs-strand, .hs-curve)[data-phase="plan"],
.mys-teaser svg.isolating[data-only="coordinate"] :is(.hs-lane, .hs-strand, .hs-curve)[data-phase="coordinate"],
.mys-teaser svg.isolating[data-only="learn"]      :is(.hs-lane, .hs-strand, .hs-curve)[data-phase="learn"],
.mys-teaser svg.isolating[data-only="distracted"] :is(.hs-lane, .hs-strand, .hs-curve)[data-phase="distracted"] {
  opacity: 1;
}

.hs-strand, .hs-info, .hs-away { cursor: pointer; }
.hs-away rect { transition: fill-opacity .15s ease; }
.hs-away:hover rect { fill-opacity: .96; }
.hs-away:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
/* The away run sits outside every phase, so isolating a phase must not dim it into nothing:
   it is the gap the phases are measured around. */
.mys-teaser svg.isolating .hs-away { opacity: .45; }
.hs-strand rect { transition: filter .15s ease; }
.hs-strand:hover rect { filter: brightness(.94); }
.hs-info circle { transition: opacity .15s ease, fill .15s ease; }
.hs-info:hover circle { opacity: 1; fill: rgba(255,255,255,.75); }
.hs-strand:focus-visible, .hs-info:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }

/* The "i" repeated inline in the hint, so the sentence points at the real thing. */
.hs-inline-i {
  display: inline-grid;
  place-items: center;
  width: 15px; height: 15px;
  margin: 0 1px;
  border: 1px solid #8C9787;
  border-radius: 50%;
  font-size: 9px;
  font-weight: 700;
  color: #5E6C58;
  vertical-align: -2px;
}

/* The AFK band repeated inline in the hint, so the sentence points at the real thing. */
.hs-inline-afk {
  display: inline-block;
  padding: 1px 6px;
  margin: 0 1px;
  border: 1px dashed #A9B49F;
  border-radius: 7px;
  background: #FFFFFF;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .06em;
  color: #5E6C58;
  vertical-align: 1px;
}

/* ------------------------------------------------------------------------- showcase popup --- */
.hs-pop {
  position: absolute;
  z-index: 20;
  padding: 15px 17px 16px;
  background: #FFFFFF;
  border: 1px solid #C9D3BE;
  border-radius: 14px;
  box-shadow: 0 18px 44px -20px rgba(38, 53, 43, .45);
  font-family: var(--sans);
  text-align: left;
}
.hs-pop-close {
  position: absolute;
  top: 8px; right: 10px;
  padding: 2px 5px;
  border: 0;
  background: none;
  font-size: 16px;
  line-height: 1;
  color: #8C9787;
  cursor: pointer;
}
.hs-pop-close:hover { color: #26352B; }

.hs-pop-eyebrow {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #7C8A74;
  margin: 0 18px 0 0;
}
.hs-pop-title {
  margin: 5px 0 9px;
  font-size: 15px;
  font-weight: 700;
  color: #26352B;
}
.hs-pop-body {
  margin: 0 0 8px;
  font-size: 11.5px;
  line-height: 1.55;
  color: #55634F;
}
.hs-pop-body b { color: #2C3A2E; font-weight: 700; }

/* The one claim on this page worth a raised voice: same site, two different kinds of work. */
.hs-pop-callout {
  padding: 10px 11px;
  border-left: 2px solid #D8912C;
  border-radius: 0 6px 6px 0;
  background: #FFF7EA;
  color: #4A5648;
}
/* The away note is reassurance, not a warning, so it takes the sage tint rather than the amber
   one the YouTube callout uses to raise its voice. */
.hs-pop-callout-calm { border-left-color: #7E9160; background: #F2F6EA; }

.hs-pop-foot {
  margin: 9px 0 0;
  padding-top: 9px;
  border-top: 1px solid #E2E8DB;
  font-size: 11px;
  color: #7C8A74;
}

/* came from -> this stretch -> went to */
.hs-chain { margin-top: 10px; }
.hs-step {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1px 9px;
  padding: 6px 9px;
  border: 1px solid #E2E8DB;
  border-radius: 8px;
  background: #F7F9F3;
}
.hs-step.is-current { border-color: #B6C4A8; background: #EFF3E8; }
.hs-step-empty { opacity: .6; }
.hs-step-role {
  grid-column: 1 / -1;
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #8C9787;
}
.hs-step-app {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  color: #26352B;
}
.hs-step-app i { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.hs-step-meta { font-size: 10.5px; color: #7C8A74; text-align: right; align-self: center; }
.hs-arrow {
  display: block;
  padding: 1px 0;
  text-align: center;
  font-size: 11px;
  color: #A8B3A0;
}

.mys-teaser-guide { margin-top: 22px; }

.mys-teaser-grammar {
  display: grid;
  gap: 10px 34px;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  padding-top: 18px;
  border-top: 1px solid #CED6C3;
}
.mys-teaser-grammar p { font-size: 12px; line-height: 1.65; color: #61705B; margin: 0; }
.mys-teaser-grammar b { color: #354A32; font-weight: 700; }

.mys-teaser-hint {
  margin: 18px 0 0;
  font-size: 11px;
  line-height: 1.7;
  color: #7C8A74;
}
.mys-teaser-hint .on-touch { display: none; }
@media (hover: none), (pointer: coarse) {
  .mys-teaser-hint .on-hover { display: none; }
  .mys-teaser-hint .on-touch { display: inline; }
}

@media (max-width: 600px) {
  .mys-teaser-grammar { gap: 9px; }
  .hs-pop { padding: 13px 14px 14px; }
}

/* --------------------------------------------------------------- the forecast, as two lanes */
/* Approved variation from the reference. A label column, two tracks on one shared clock, a single
   now rule crossing both, one axis. Positions arrive as inline percentages from the brief data, so
   nothing here encodes a time. */
.fc-lanes {
  display: grid;
  grid-template-columns: 70px minmax(0, 1fr);
  column-gap: 14px;
  padding-top: 19px;
  font-family: var(--sans);
}

.fc-labels { display: flex; flex-direction: column; gap: 16px; }
.fc-labels > div {
  height: 28px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
}
.fc-labels strong { font-size: 11px; font-weight: 700; color: #53663F; }
.fc-drift-label strong { color: var(--drift); }
.fc-labels span { font-size: 10px; color: #67735D; }

.fc-tracks { position: relative; display: flex; flex-direction: column; gap: 16px; }
.fc-track {
  position: relative;
  height: 28px;
  background: #D9E1D1;
  border: 1px solid #C0CDB5;
  border-radius: 4px;
}
.fc-focus, .fc-drift { position: absolute; top: 0; bottom: 0; border-radius: 3px; }
.fc-focus { background: #718953; border: 1px solid #546D3C; }
.fc-drift { background: #D4AA96; border: 1px solid #AE7B63; }

/* One rule through both lanes, because the whole point is that they share a clock. */
.fc-now {
  position: absolute;
  top: -6px;
  bottom: -5px;
  border-left: 2px solid #58654E;
  z-index: 1;
}
.fc-now b {
  position: absolute;
  top: -19px;
  left: 0;
  transform: translateX(-50%);
  font-size: 10px;
  font-weight: 400;
  color: #526148;
}

.fc-axis { position: relative; height: 25px; margin-top: 9px; color: #69735F; font-size: 10px; }
.fc-axis span { position: absolute; transform: translateX(-50%); }
.fc-axis span:first-child { transform: none; }
.fc-axis span:last-child { transform: translateX(-100%); }

.fc-caption { grid-column: 2; margin: 0; font-size: 10px; color: #69735F; }

@media (max-width: 600px) {
  .fc-lanes { grid-template-columns: 57px minmax(0, 1fr); column-gap: 9px; padding-top: 22px; }
  .fc-labels strong { font-size: 10px; }
  .fc-labels span { font-size: 9px; }
  .fc-axis { font-size: 8px; }
  .fc-caption { font-size: 9px; }
}

/* ------------------------------------------------------------------------------ settings --- */
/* The reference has no cards on the account surface. Sections are separated by a hairline on the
   same continuous sage as everything else, which is what stops a settings page reading as a stack
   of trays. daisyUI's .card carries a white ground and a drop shadow, so both are unset here rather
   than by editing every occurrence in the markup. */
.mys-settings .card,
.mys-settings .card.bg-base-100 {
  background: transparent;
  box-shadow: none;
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
  max-width: none;
  margin-bottom: 0;
}
.mys-settings .card:first-of-type { border-top: 0; }
.mys-settings .card-body { padding: 26px 0; }
.mys-settings .card-title { font-size: 15px; font-weight: 700; color: var(--ink); }

/* Section heading, matching the reference's account_intro. */
.mys-section-title {
  font-size: 29px;
  font-weight: 700;
  letter-spacing: -1px;
  color: var(--ink);
}
.mys-section-title + p { margin: 9px 0 6px; color: var(--muted); font-size: 13px; }

/* Label / value pairs: the reference's key_values. */
.mys-key-values { margin-top: 20px; max-width: 490px; }
.mys-key-values > div {
  display: flex;
  justify-content: space-between;
  gap: 25px;
  padding: 7px 0;
  font-size: 13px;
}
.mys-key-values dt { color: var(--muted); }
.mys-key-values dd { margin: 0; color: var(--ink); }

/* --------------------------------------------------------------------- contact and about --- */
.mys-contact-top {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr);
  gap: 60px;
  align-items: start;
}

.mys-contact-lede {
  margin-top: 22px;
  max-width: 480px;
  font-size: 14px;
  line-height: 1.8;
  color: var(--muted);
}

.mys-contact-details { display: grid; gap: 34px; }

.mys-contact-email {
  display: inline-block;
  margin-top: 9px;
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid rgba(192,201,182,.45);
  padding-bottom: 2px;
  transition: color .18s ease, border-color .18s ease;
}
.mys-contact-email:hover { color: var(--accent); border-color: var(--accent); }

/* The address ships as an image, so it is sized in CSS rather than by its intrinsic pixels, and
   the source has a lot of vertical air baked into it. */
.mys-contact-address {
  display: block;
  margin-top: 12px;
  width: 125px;
  height: auto;
  opacity: .9;
}

.mys-contact-second { border-top: 1px solid var(--line); padding-top: 70px; }

/* Long-form prose, used by the about page. Wider line height and a real measure, because this is
   the one place on the site someone reads rather than scans. */
.mys-prose { margin-top: 34px; max-width: 620px; }
.mys-prose p {
  margin: 0 0 22px;
  font-size: 15px;
  line-height: 1.85;
  color: var(--ink-2);
}
.mys-prose p:last-child { margin-bottom: 0; }
.mys-prose a {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(192,201,182,.5);
}
.mys-prose a:hover { color: var(--accent); text-decoration-color: var(--accent); }

.mys-about-foot {
  margin-top: 44px;
  padding-top: 30px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  align-items: center;
}

@media (max-width: 860px) {
  .mys-contact-top { grid-template-columns: 1fr; gap: 44px; }
  .mys-contact-second { padding-top: 50px; }
}

/* Questions. A hairline between each rather than a card per question, so a list of seven reads as
   one document instead of seven objects. */
.mys-question {
  border-top: 1px solid #68775E;
  padding: 19px 0;
}
.mys-question summary {
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 20px;
  align-items: baseline;
}
.mys-question summary::-webkit-details-marker { display: none; }
.mys-question summary::after {
  content: "+";
  font-weight: 400;
  color: var(--accent);
}
.mys-question[open] summary::after { content: "\2212"; }
.mys-question summary:hover { color: var(--accent-strong); }
.mys-question p {
  padding-top: 14px;
  font-size: 13px;
  line-height: 1.8;
  color: var(--muted);
  max-width: 660px;
}
.mys-question p a { color: var(--link); text-decoration: underline; text-underline-offset: 3px; }

.mys-end {
  background: #263025;
  padding: 80px 40px;
  text-align: center;
}

@media (max-width: 1100px) {
  .mys-section { padding: 70px 40px; }
  .mys-section-intro { gap: 35px; }
}
/* Stack before the flex row squeezes the headline. Side by side, the h2 and the support text
   share the row, and below this width the h2's column gets narrow enough that the first line wraps
   and the deliberate breaks stop reading as deliberate. */
@media (max-width: 900px) {
  .mys-section-intro { display: block; }
  .mys-section-intro p { max-width: 450px; margin-top: 20px; }
}
@media (max-width: 600px) {
  .mys-section { padding: 58px 23px; }
  .mys-section-intro h2 { font-size: 38px; line-height: 1.08; }
  .mys-story-item h3 { font-size: 20px; }
  .mys-story-item p { font-size: 13px; }
  .mys-end { padding: 60px 23px; }
}