/* ==========================================================================
   The Fresh Agent — Hybrid visual refresh (LOCAL PROTOTYPE)
   Loaded AFTER tokens.css + site.css. Surgical re-skin only — no structural
   changes. Re-tints the canvas toward the Hybrid cream/sand system, swaps the
   primary accent to Hybrid tomato, and points the phone composition at the
   Hybrid app screens. NOT deployed.
   ========================================================================== */

:root {
  /* Canvas → warm cream/sand (Hybrid) */
  --paper:   #F6F1E7;   /* sand-50  — page canvas */
  --paper-2: #FBF8F1;   /* cream-100 — alternating band */
  /* Text → Hybrid ink (slightly warmer) */
  --ink:   #1E1B16;
  --ink-2: #262219;
  /* Primary action / brand accent → Hybrid tomato (was navy) */
  --navy:       #C9402F;
  --navy-hover: #B23A2A;
  --navy-press: #9E3325;
  /* Secondary → Hybrid leaf */
  --forest:       #2F8F4E;
  --forest-hover: #287A43;
  /* Focus ring tuned to the tomato accent */
  --focus-ring: 0 0 0 3px rgba(201, 64, 47, 0.20);
}

/* Mobile section shows the website-ready product strip (3 staged devices)
   instead of the old CSS four-phone mockup. */
.mobile__visual { display: block; max-width: 1120px; }
.mobile__visual img { width: 100%; height: auto; display: block; border-radius: 16px; }

/* Feature tiles are website-ready renders (device staged on warm cream) —
   present them cleanly: no card frame, gradient, hairline, or tilt. */
.feature__visual {
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  transform: none;
}
.feature__visual::after { display: none; }
.feature__grid--reverse .feature__visual { transform: none; }
.feature__visual img {
  width: 100%;
  height: auto;
  max-width: 100%;
  margin: 0;
  border: 0;
  border-radius: 16px;
  box-shadow: 0 20px 50px -26px rgba(30, 27, 22, 0.20);
}

/* ==========================================================================
   Hero visual — standalone floating product render. The transparent PNG bakes
   its own device, soft shadow and faint halo into its alpha, so it floats
   directly on the cream hero canvas. The CSS only sizes and centers it: no
   panel, frame, plate, CSS shadow, crop, object-fit, or scale transform.
   ========================================================================== */
.hero__visual {
  position: relative;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;            /* never clip the floating render */
}
.hero__visual::before,
.hero__visual::after { display: none; }
.hero__visual img {
  display: block;
  width: 100%;
  max-width: 420px;             /* float at a balanced device size, not column-wide */
  height: auto;                 /* natural aspect ratio — no crop, no object-fit */
  margin: 0 auto;               /* center the floating device in the right column */
  border: 0;
  border-radius: 0;
  box-shadow: none;             /* the asset carries its own shadow + halo */
}

/* Keep the lemon/tomato mark crisp and a touch larger in the nav lockup. */
.nav__brand img { height: 30px; }