/* ============================================================
   CHATAIGNE — UI COMPONENTS
   Faithful recreation of "UI Components.fig" (8 component frames).
   All glass recipes, gradients, radii and shadows are taken
   verbatim from the source frame values.
   Brand green = Chataigne Green #00C80A (rgb 0,200,10); glass variants
   rgb(0,220,11) fill · rgb(3,255,15) glow · rgb(0,214,11) rim · rgb(0,186,9) hover glow.
   ============================================================ */

:root {
  --ct-paper: #F8F8F6;      /* Off White (rgb 248,248,246) */
  --ct-ink: #000;
  --ct-title: #001D1A;      /* Ink */
  --ct-green: rgb(0,200,10);/* Chataigne Green */
  --ct-sage: #E5EDE0;       /* Sage */
  --ct-mist: #E5EDE0;       /* alias → Sage */

  /* ── EMAIL INPUT DIMENSIONS ───────────────────────────────────
     The input is a layout-sized field (not text-driven like the other
     components, which are now proportional / em off their own font-size).
     Defaults are the 1:1 canvas sizes; the web preset in marketing.css
     (.ct-page / .ct-web) overrides them to responsive web sizes. */
  --uic-input-w: 509px; --uic-input-h: 90px;  --uic-input-pl: 51px; --uic-input-pr: 30px; --uic-input-r: 47px; --uic-input-fs: 25.17px;
}

/* ---------- neutral pill (nav item / FAQ) ----------
   PROPORTIONAL: the only size control is font-size; padding (and hover shadow)
   are em, so the pill holds its shape at any size. Flat off-white, Medium text. */
.uic-pill {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: "F37 Bolton Trial", sans-serif; font-weight: 500; font-size: 35px; /* ← knob */
  line-height: 1.1; letter-spacing: -0.01em; color: #000; white-space: nowrap;
  padding: 0.71em 1.43em; border: 0; border-radius: 999px; cursor: pointer;
  background: var(--ct-paper);
  transition: box-shadow .2s ease, transform .12s ease, background .2s ease;
}
.uic-pill:hover { box-shadow: 0 0.5em 1.14em -0.34em rgba(74,74,74,0.22); }
.uic-pill:active { transform: scale(0.985); }

/* ---------- green glass pill (primary CTA / Subscribe / Contact) ----------
   FAITHFUL to the brand-button frame, and PROPORTIONAL so it scales from a
   single knob: the ONLY size control is font-size. Padding, rim, glows and
   drop shadow are all expressed in em, so the button holds identical
   proportions at any size — set font-size (or let it inherit) and the whole
   thing scales, no per-size pixel tuning. (Ratios are the frame values ÷ the
   35px frame text, so font-size:35px reproduces the frame 1:1.)
   Inactive = solid bright kelly rgb(0,220,11) + white diagonal sheen + green
   inner glow + 1px rim + soft green drop shadow. Hover = rgb(0,200,10). */
.uic-glass-green {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  font-family: "F37 Bolton Trial", sans-serif; font-weight: 500;
  font-size: 35px;                       /* ← the size knob (frame value) */
  line-height: 1.1; letter-spacing: -0.01em; color: #000; white-space: nowrap;
  padding: 0.74em 1.43em; border: 0; border-radius: 999px; cursor: pointer;
  background:
    linear-gradient(151.283deg, rgba(255,255,255,0.7) 16%, rgba(255,255,255,0) 48.61%, rgba(255,255,255,0) 75.28%),
    linear-gradient(rgb(0,220,11), rgb(0,220,11));
  box-shadow:
    inset 0 0 0 0.029em rgb(0,214,11),
    inset 0.029em -0.057em 0.089em 0 rgba(255,255,255,0.45),
    inset -0.224em -0.447em 0.447em 0 rgba(0,162,8,0.31),
    inset 0.112em 0.112em 0.458em 0 rgb(3,255,15),
    0 0.32em 0.68em -0.15em rgba(0,160,8,0.30);
  transition: box-shadow .22s ease, transform .12s ease, background .22s ease;
}
.uic-glass-green:hover, .uic-glass-green.is-hover {
  background:
    linear-gradient(133.528deg, rgb(255,255,255) -1.57%, rgba(255,255,255,0) 53.45%, rgba(255,255,255,0) 90.03%),
    linear-gradient(rgb(0,200,10), rgb(0,200,10));
  box-shadow:
    inset 0 0 0 0.029em rgb(0,214,11),
    inset 0.051em -0.102em 0.102em 0 rgba(255,255,255,0.2),
    inset -0.051em 0 0 0 rgba(255,255,255,0.8),
    inset 0.102em 0.102em 0.42em 0 rgb(0,186,9),
    0 0.46em 0.9em -0.14em rgba(0,160,8,0.36);
}
.uic-glass-green:active { transform: scale(0.985); }

/* ============================================================
   DEMO CTAs BY PLATFORM
   ============================================================ */
/* PROPORTIONAL: layout (size, radius, label/icon/arrow placement) is all em off
   font-size, so the whole CTA scales from that one knob. font-size:14.79px
   reproduces the 286×82 frame. (Decorative rim-glint shadows below stay in px —
   they're sub-pixel glints; the SVG/gradient fills scale with the element.) */
.uic-cta {
  position: relative; display: inline-flex; align-items: center;
  width: 19.34em; height: 5.545em; border: 0; cursor: pointer; overflow: visible;
  border-radius: 3.369em;
  font-family: "F37 Bolton Trial", sans-serif; font-weight: 500; font-size: 14.79px; /* ← knob */
  letter-spacing: -0.01em; color: #000; transition: box-shadow .22s ease, transform .12s ease;
}
.uic-cta .uic-cta-label { position: absolute; left: 2.434em; top: 50%; transform: translateY(-50%); white-space: nowrap; }
.uic-cta:active { transform: scale(0.99); }

/* WhatsApp — bright lime-green glass (WhatsApp-leaning; inactive: flat, no shadow) */
.uic-cta--wa {
  -webkit-backdrop-filter: blur(6.228px); backdrop-filter: blur(6.228px);
  background:
    linear-gradient(rgba(255,255,255,0.9) 0%, rgba(255,255,255,0) 55%, rgba(255,255,255,0) 100%),
    linear-gradient(rgba(255,255,255,0.22), rgba(255,255,255,0.22)),
    linear-gradient(rgba(140,255,0,0.72), rgba(140,255,0,0.72));
  box-shadow: none;
}
.uic-cta--wa:hover, .uic-cta--wa.is-hover {
  box-shadow:
    12.455px 24.910px 37.366px -6.228px rgba(74,74,74,0.18),
    inset 1.557px 1.557px 3.114px -0.778px rgba(255,255,255,0.4),
    inset 1.557px 1.557px 6.383px 0 rgba(169,255,64,0.38),
    inset -0.778px 0 0 0 rgba(255,255,255,0.8),
    inset 0.778px -1.557px 1.557px 0 rgba(255,255,255,0.2);
}

/* Instagram — source gradient pill rendered from an SVG (assets/ig-cta-outer.svg)
   that mirrors the source fill node exactly: a white base + 0.72-opacity
   purple→orange→pink radial under a red→yellow radial blended in `saturation`.
   Both use skewed-ellipse gradientTransforms a CSS radial-gradient can't
   reproduce, so they're baked into the SVG. The white base gives the saturation
   blend the same opaque backdrop it has on source's white canvas.
   The glass rim is source's exact inset stack: white edge highlight + magenta
   top glow (#f06bff) + thin red edge. */
.uic-cta--ig {
  background: url("assets/ig-cta-outer.svg") center / 100% 100% no-repeat;
  box-shadow:
    inset 1.415px 1.415px 2.831px 0 rgba(255,255,255,0.8),
    inset 2.831px 5.661px 13.446px 0 #f06bff,
    inset 1.415px 1.415px 0.055px 0 rgba(255,68,68,0.4);
}
.uic-cta--ig:hover, .uic-cta--ig.is-hover {
  box-shadow:
    11.323px 22.646px 33.969px -5.661px rgba(74,74,74,0.18),
    1.415px 2.831px 11.323px 0 rgba(0,0,0,0.06),
    inset 1.415px 1.415px 2.831px 0 rgba(255,255,255,0.8),
    inset 2.831px 5.661px 13.446px 0 #f06bff,
    inset 1.415px 1.415px 0.055px 0 rgba(255,68,68,0.4);
}

/* CTA round icon (right) + paper-plane arrow */
.uic-cta-icon {
  position: absolute; right: 1.352em; top: 50%; transform: translateY(-50%);
  width: 4.395em; height: 3.516em; border-radius: 2.096em; overflow: hidden;
}
.uic-cta--wa .uic-cta-icon {
  -webkit-backdrop-filter: blur(5.661px); backdrop-filter: blur(5.661px);
  background: rgba(140,255,0,0.72);
  box-shadow:
    inset 1.415px 1.415px 2.831px -0.708px rgba(255,255,255,0.4),
    inset 2.831px 5.661px 13.446px 0 rgb(203,255,186),
    inset 1.415px 1.415px 7.300px 0 rgba(255,255,255,0.8),
    inset 1px 1px 3.100px 0 rgba(255,250,248,0.78),
    inset -2px -1px 3.100px 0 rgba(255,255,255,0.75);
}
.uic-cta--ig .uic-cta-icon {
  /* source bubble (node 6459:2345): its own 2-layer gradient (white base +
     0.72 purple→pink + red→yellow saturation, sized 65×52) in the SVG, plus
     source's exact 8-inset glass stack for the glossy rim and highlights. */
  background: url("assets/ig-cta-bubble.svg") center / 100% 100% no-repeat;
  box-shadow:
    inset 0.708px -1.415px 1.415px 0 rgba(255,255,255,0.2),
    inset -2.831px -1.415px 2.901px 0 rgba(255,250,248,0.4),
    inset 1.415px 1.415px 2.831px 0 rgba(255,255,255,0.8),
    inset 2.831px 5.661px 13.446px 0 #bf00ff,
    inset 1.415px 1.415px 2.831px 0 rgba(255,255,255,0.4),
    inset 1.415px 1.415px 2.831px 0 rgba(255,255,255,0.8),
    inset 2.831px 5.661px 13.446px 0 #f06bff,
    inset 1.415px 1.415px 0.055px 0 rgba(255,68,68,0.4);
}
.uic-cta-arrow {
  position: absolute; right: 2.569em; top: 50%; transform: translateY(-50%);
  width: 1.65em; height: 1.616em; z-index: 2;
}
/* arrow: white when inactive → black on hover. Size/position stay identical
   between states; only the fill changes (subtle motion). */
.uic-cta-arrow path { fill: #fff; transition: fill .2s ease; }
.uic-cta:hover .uic-cta-arrow path,
.uic-cta.is-hover .uic-cta-arrow path { fill: #000; }
/* WhatsApp label black on bright green; Instagram label white on dark gradient */
.uic-cta--wa .uic-cta-label { color: #000; }
.uic-cta--ig .uic-cta-label { color: #fff; }
/* hover: icon circle glows brighter */
/* Icon circle stays constant between states — only the arrow fill changes,
   keeping hover motion subtle (no size jump, no gradient shift). */

/* ============================================================
   EMAIL SUBSCRIPTION
   ============================================================ */
/* source: input + green pill are both full pills, sitting tangent (touching at
   one point, gap 0). The green pill is on top via z-index, keeping its shadow.
   The input has no border so the two fills meet exactly at the boundary. */
.uic-form { position: relative; display: inline-flex; align-items: center; }
.uic-input {
  width: var(--uic-input-w); height: var(--uic-input-h); box-sizing: border-box;
  padding: 0 var(--uic-input-pr) 0 var(--uic-input-pl); border-radius: var(--uic-input-r); border: 0;
  background: var(--ct-paper); outline: none;
  font-family: "F37 Bolton Trial", sans-serif; font-size: var(--uic-input-fs); line-height: 1.5; color: #000;
  transition: box-shadow .2s ease, background .2s ease;
}
.uic-input::placeholder { color: rgba(0,0,0,0.5); }
.uic-form .uic-glass-green { z-index: 2; min-width: 274px; }
.uic-input:hover { background: #ECECEA; }
.uic-input:focus { box-shadow: inset 0 0 0 2px var(--ct-green); }

/* ============================================================
   ACCORDION
   ============================================================ */
/* PROPORTIONAL: one knob — .uic-accordion font-size. The question text is 1em;
   head padding, icon, bar, gap and the answer text are all em off it, so the
   whole accordion scales from that single value. font-size:27.16px = the frame. */
.uic-accordion { width: 1099px; max-width: 100%; display: flex; flex-direction: column; gap: 0.368em; font-size: 27.16px; }
.uic-acc {
  background: var(--ct-paper); border-radius: 1em; overflow: hidden;
  -webkit-backdrop-filter: blur(0.382em); backdrop-filter: blur(0.382em);
}
.uic-acc-head {
  display: flex; align-items: center; justify-content: space-between; gap: 0.736em;
  padding: 1.104em 1.988em; cursor: pointer; user-select: none;
}
.uic-acc-q {
  font-family: "F37 Bolton Trial", sans-serif; font-size: 1em; letter-spacing: -0.03em;
  color: #000; line-height: 1.1;
}
.uic-acc-ico { position: relative; width: 1.417em; height: 1.417em; flex: none; }
.uic-acc-bar {
  position: absolute; left: 0; top: 50%; width: 1.417em; height: 0.063em;
  background: rgba(0,0,0,0.6); border-radius: 2px; transform: translateY(-50%);
  transition: transform .25s ease, opacity .25s ease;
}
.uic-acc-bar.v { transform: translateY(-50%) rotate(90deg); }
.uic-acc.is-open .uic-acc-bar.v { transform: translateY(-50%) rotate(0); opacity: 0; }
.uic-acc-body {
  display: grid; grid-template-rows: 0fr; transition: grid-template-rows .3s ease;
}
.uic-acc.is-open .uic-acc-body { grid-template-rows: 1fr; }
.uic-acc-body-inner { overflow: hidden; }
.uic-acc-a {
  padding: 0 1.988em 1.325em; max-width: 30em;
  font-family: "F37 Bolton Trial", sans-serif; font-size: 0.774em; line-height: 1.4;
  letter-spacing: -0.03em; color: #000;
}

/* ============================================================
   GLASS CONTAINER
   ============================================================ */
.uic-glass-container {
  border-radius: 188.59px; background: #fff;
  box-shadow:
    44.373px 88.747px 133.120px -22.187px rgba(74,74,74,0.10),
    5.547px 11.093px 44.373px 0 rgba(0,0,0,0.04),
    inset 5.547px 5.547px 11.093px -2.773px rgba(255,255,255,0.4),
    inset 11.093px 22.187px 52.693px 0 rgb(255,255,255),
    inset 8.320px 8.320px 11.093px 0 rgba(255,255,255,0.8),
    inset -3.051px -3.051px 22.187px 0 rgba(199,199,199,0.4),
    inset 2.773px -5.547px 5.547px 0 rgba(255,255,255,0.2);
}

/* ============================================================
   NAVIGATION BAR
   source "Navigation Bar" (527px row): mascot pill + off-white nav pills +
   green-glass Contact. Items abut (gap 0); the rounded caps read as spacing.
   ============================================================ */
.uic-nav { display: inline-flex; align-items: center; gap: 0; }
.uic-nav-item {
  display: inline-flex; align-items: center; justify-content: center;
  height: 46px; padding: 0 25.6px; border: 0; cursor: pointer;
  border-radius: 999px; background: var(--ct-paper);
  font-family: "F37 Bolton Trial", sans-serif; font-weight: 500; font-size: 17.9px;
  letter-spacing: -0.01em; color: #000; white-space: nowrap;
  transition: background .18s ease;
}
.uic-nav-item:hover { background: #ECECEA; }
.uic-nav-mascot {
  width: 55px; height: 46px; padding: 0; flex: none; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px; background: var(--ct-paper); border: 0;
}
.uic-nav-mascot img { height: 37px; width: auto; display: block; }
/* Contact reuses the green-glass recipe — now proportional, so the nav size
   is just a smaller font-size knob; padding/glows/shadow scale in em. */
.uic-nav .uic-glass-green { font-size: 17.9px; padding-top: 0.5em; padding-bottom: 0.5em; }

/* ============================================================
   FOOTER — wordmark lockup with the brand icon as the "i" tittle
   ============================================================ */
.uic-footer { display: inline-flex; align-items: center; justify-content: center; }
/* The wordmark is the official vector logo (logo-wordmark-dotless.svg) — NOT live
   text. Set its size via .uic-footer-logo width. The "ı" is already dotless; the
   animated brand icon sits where its tittle would be. */
.uic-footer-wm { position: relative; display: inline-block; line-height: 0; }
.uic-footer-logo { display: block; width: 100%; height: auto; }
/* tittle stays fixed over the dotless ı; the brand icons fade through one another
   in place. Placement is % of the wordmark box — tune via footer-tittle-anim/tuner.html */
.uic-footer-tittle {
  position: absolute; left: 60.3%; bottom: 82.5%; transform: translateX(-50%);
  display: block; pointer-events: none;
  width: 6.5%; aspect-ratio: 1 / 1;
}
.uic-footer-tittle img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: contain; object-position: center;
  opacity: 0;
  animation: uic-footer-cycle 24s ease-in-out infinite;
}
.uic-footer-tittle img:nth-child(1)  { animation-delay: -24s; }
.uic-footer-tittle img:nth-child(2)  { animation-delay: -21.6s; }
.uic-footer-tittle img:nth-child(3)  { animation-delay: -19.2s; }
.uic-footer-tittle img:nth-child(4)  { animation-delay: -16.8s; }
.uic-footer-tittle img:nth-child(5)  { animation-delay: -14.4s; }
.uic-footer-tittle img:nth-child(6)  { animation-delay: -12s; }
.uic-footer-tittle img:nth-child(7)  { animation-delay: -9.6s; }
.uic-footer-tittle img:nth-child(8)  { animation-delay: -7.2s; }
.uic-footer-tittle img:nth-child(9)  { animation-delay: -4.8s; }
.uic-footer-tittle img:nth-child(10) { animation-delay: -2.4s; }
/* Sequential, not overlapping: each icon fades in fast (~0.1s), holds (~1.65s),
   fades out slower (~0.45s), then an empty beat (~0.2s) before the next.
   10 icons x 2.4s = 24s loop. Tuned via footer-tittle-anim/tuner.html — re-tune there. */
@keyframes uic-footer-cycle {
  0%     { opacity: 0; }
  0.42%  { opacity: 1; }
  7.29%  { opacity: 1; }
  9.17%  { opacity: 0; }
  100%   { opacity: 0; }
}