/* E.L.L.A.: wordmark hero, spoken-line moment, use-case screens, driver rules, price */

/* hero: the E.L.L.A. home screen (ella-uc2) in a navy device frame, never cropped */
.el-hero .el-screen{padding:clamp(10px,1.2vw,16px);border-radius:var(--radius);background:var(--navy-0);border:1px solid rgba(94,194,255,.28);
  box-shadow:0 0 0 6px rgba(51,161,255,.05),0 50px 100px -50px rgba(0,0,0,.85)}
.el-hero .el-screen img{display:block;max-height:none;object-fit:contain;filter:none;border-radius:12px}
.el-mark{height:clamp(44px,4.4vw,60px);width:auto;margin:6px 0 -4px;filter:drop-shadow(0 0 24px rgba(51,161,255,.35))}
.el-hero .phero-facts b{font-size:22px}

/* --- spoken line --- */
.el-voice{overflow:hidden}
.el-voice::before{content:"";position:absolute;left:50%;top:50%;width:min(1100px,120vw);aspect-ratio:1;transform:translate(-10%,-50%);pointer-events:none;
  background:radial-gradient(circle,rgba(51,161,255,.16),transparent 60%)}
.el-voice-in{position:relative;display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(40px,6vw,96px);align-items:center}
.el-voice-copy{display:grid;gap:22px;align-content:start}
.el-voice-copy h2{font-size:clamp(30px,3.4vw,48px);line-height:1.12;letter-spacing:-.03em;text-wrap:balance}
.el-voice-copy>p{color:var(--fg-2);line-height:1.75;max-width:54ch}
.el-systems{margin-top:6px}
.el-systems li{font-size:13.5px;min-height:36px;padding:6px 12px}

.el-say{margin:0;position:relative;padding:clamp(28px,3.6vw,52px);border-radius:var(--radius);border:1px solid rgba(94,194,255,.28);
  background:linear-gradient(160deg,rgba(11,42,82,.9),rgba(3,13,28,.9));box-shadow:0 50px 100px -50px rgba(0,0,0,.8),inset 0 1px 0 rgba(255,255,255,.06)}
.el-say blockquote p{font-family:var(--display);font-size:clamp(26px,2.9vw,42px);font-weight:500;line-height:1.25;letter-spacing:-.025em;color:#fff;text-wrap:balance}
.el-say figcaption{margin-top:22px;display:flex;align-items:center;gap:10px;font-size:14px;color:var(--fg-2)}
.el-say figcaption::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--electric);box-shadow:0 0 0 4px rgba(94,194,255,.18)}
.el-wave{display:flex;align-items:center;gap:4px;height:44px;margin-bottom:26px}
.el-wave i{flex:none;width:4px;height:100%;border-radius:2px;background:var(--electric);opacity:.85;transform:scaleY(var(--h,.3));transform-origin:center}
.el-wave i:nth-child(4n+1){--h:.28}.el-wave i:nth-child(4n+2){--h:.62}.el-wave i:nth-child(4n+3){--h:.95}.el-wave i:nth-child(4n){--h:.45}
.el-wave i:nth-child(5n){--h:.75}.el-wave i:nth-child(7n){--h:.2}
.el-wave i:nth-child(n+17){opacity:.35}
@media (prefers-reduced-motion:no-preference){
  .el-wave i{animation:el-talk 1.3s ease-in-out infinite alternate}
  .el-wave i:nth-child(3n){animation-duration:.9s}
  .el-wave i:nth-child(3n+1){animation-duration:1.1s;animation-delay:-.4s}
  .el-wave i:nth-child(2n){animation-delay:-.7s}
}
@keyframes el-talk{from{transform:scaleY(calc(var(--h) * .45))}to{transform:scaleY(var(--h))}}
@media (max-width:980px){.el-voice-in{grid-template-columns:1fr}.el-say{order:-1}}

/* --- use cases: alternating screen + text rows --- */
.el-uses{list-style:none;display:grid;border-top:1px solid var(--line)}
.el-use{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(32px,5.5vw,88px);align-items:center;padding:clamp(40px,5vw,72px) 0;border-bottom:1px solid var(--line)}
.el-use:nth-child(even) .el-use-pic{order:2}
.el-use-pic{margin:0;padding:clamp(10px,1.2vw,16px);border-radius:var(--radius);background:var(--navy-0);box-shadow:0 40px 80px -48px rgba(3,13,28,.7)}
.el-use-pic img{width:100%;height:auto;border-radius:12px}
.el-use-txt{display:grid;gap:16px;justify-items:start;align-content:center}
.el-use-txt h3{font-size:clamp(26px,2.6vw,38px);line-height:1.14;letter-spacing:-.03em;text-wrap:balance}
.el-use-txt>p{color:var(--ink-2);line-height:1.75;max-width:52ch}
.el-tag{display:inline-flex;align-items:center;min-height:30px;padding:4px 12px;border-radius:999px;background:#fff;border:1px solid var(--line);font-size:13.5px;font-weight:600;color:var(--brand)}
.el-avail{margin-top:24px}
/* use-case spec: trigger line + three-step behaviour (flyer F4 p5–7) */
.el-spec{width:100%;max-width:560px;margin-top:6px;border:1px solid var(--line);border-radius:16px;background:#fff;box-shadow:0 24px 48px -36px rgba(3,13,28,.35);overflow:hidden}
.el-trig{display:grid;grid-template-columns:auto minmax(0,1fr);gap:6px 16px;align-items:baseline;padding:16px 20px;background:var(--navy-1);color:#fff;font-size:15px;line-height:1.55}
.el-trig-k{font-family:var(--mono);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--electric)}
.el-steps{list-style:none;display:grid;padding:4px 20px}
.el-steps li{display:grid;grid-template-columns:30px minmax(0,1fr);gap:14px;padding:14px 0;border-bottom:1px solid var(--line)}
.el-steps li:last-child{border-bottom:0}
.el-step-n{font-family:var(--mono);font-size:12.5px;font-weight:500;letter-spacing:.06em;color:var(--brand);padding-top:3px}
.el-steps h4{font-family:var(--display);font-size:16.5px;font-weight:600;line-height:1.3;letter-spacing:-.01em;color:var(--ink);margin-bottom:3px}
.el-steps p{font-size:15px;line-height:1.55;color:var(--ink-2)}
@media (max-width:900px){
  .el-use{grid-template-columns:1fr;gap:24px}
  .el-spec{max-width:none}
  .el-use:nth-child(even) .el-use-pic{order:0}
}

/* --- driver rules --- */
.el-safe{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(40px,6vw,104px);align-items:start}
.el-safe-h{display:grid;gap:20px;justify-items:start;position:sticky;top:calc(var(--hdr-h) + 40px)}
.el-safe-h h2{font-size:clamp(32px,4vw,56px);line-height:1.08;letter-spacing:-.035em;text-wrap:balance}
.el-safe-h p{color:var(--ink-2);font-size:clamp(17px,1.35vw,19px);line-height:1.7;max-width:44ch}
.el-safe-h .inline-link{font-size:16px;font-weight:500}
.el-rules{list-style:none;display:grid;border-top:1px solid var(--line)}
.el-rules li{display:grid;grid-template-columns:52px minmax(0,1fr);gap:22px;padding:30px 0;border-bottom:1px solid var(--line)}
.el-rule-ico{width:52px;height:52px;border-radius:14px;display:grid;place-items:center;background:var(--navy-1);color:var(--electric)}
.el-rule-ico svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.el-rules h3{font-size:clamp(21px,1.9vw,26px);line-height:1.2;letter-spacing:-.02em;margin-bottom:8px}
.el-rules p{color:var(--ink-2);line-height:1.7;max-width:54ch}
@media (max-width:900px){.el-safe{grid-template-columns:1fr}.el-safe-h{position:static}}
@media (max-width:600px){.el-rules li{grid-template-columns:44px minmax(0,1fr);gap:16px;padding:24px 0}.el-rule-ico{width:44px;height:44px;border-radius:12px}}

/* --- price --- */
.el-price{overflow:hidden}
.el-price::before{content:"";position:absolute;left:-10%;bottom:-40%;width:min(900px,100vw);aspect-ratio:1;pointer-events:none;background:radial-gradient(circle,rgba(51,161,255,.18),transparent 60%)}
.el-price-in{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(40px,6vw,104px);align-items:center}
.el-price-l{display:grid;gap:24px;justify-items:start}
.el-price-l h2{font-size:clamp(30px,3.4vw,48px);line-height:1.1;letter-spacing:-.03em;text-wrap:balance;max-width:16ch}
.el-price-l>p{color:var(--fg-2);line-height:1.75;max-width:50ch}
.el-price-big{display:flex;align-items:flex-end;gap:16px}
.el-price-big span{font-family:var(--display);font-size:clamp(96px,11vw,168px);font-weight:600;letter-spacing:-.06em;line-height:.82;color:#fff;font-variant-numeric:tabular-nums}
.el-price-big small{font-size:17px;line-height:1.4;color:var(--electric);font-weight:500;padding-bottom:6px}
.el-out{padding:clamp(24px,3vw,40px);border:1px solid var(--rule);border-radius:var(--radius);background:rgba(255,255,255,.03)}
.el-out-h{font-size:19px;letter-spacing:-.01em;margin-bottom:8px}
.el-out dl{display:grid}
.el-out dl div{display:grid;gap:4px;padding:18px 0;border-bottom:1px solid var(--rule)}
.el-out dl div:last-child{border-bottom:0;padding-bottom:0}
.el-out dt{font-family:var(--display);font-size:18px;font-weight:600;color:#fff;letter-spacing:-.01em}
.el-out dd{color:var(--fg-2);font-size:15.5px;line-height:1.6}
@media (max-width:900px){.el-price-in{grid-template-columns:1fr}}
@media (max-width:600px){.el-price-l .btn-row{width:100%}.el-price-l .btn-row .btn{flex:1 1 auto;justify-content:center}}

/* round-1 fixes */
.el-price-big{margin:6px 0 4px}
.el-safe-h .inline-link{display:inline-flex;align-items:center;min-height:44px}
@media (max-width:600px){
  .el-hero .phero-facts{gap:14px 24px}
  .el-hero .phero-facts b{font-size:18px}
}

/* .el-crop: zoomed crop of a use-case screen inside the standard 768x548 frame */
.el-use-pic.is-crop{display:grid}
.el-crop{position:relative;display:grid;place-items:center;width:100%;aspect-ratio:768/548;border-radius:12px;overflow:hidden;
  background:radial-gradient(120% 90% at 50% 0%,#0f3360,#061a33 70%)}
.el-crop img{position:absolute;max-width:none;height:auto;border-radius:0;
}

/* system-health crop of ella-uc5: only the health list, so the placeholder profile line above it never shows.
   The list panel spans x 18–256, y 142–394 of the 768x548 source (centre 137, 268). */
.el-crop.is-health img{
  --k:calc(.86 * 548 / 252);
  width:calc(var(--k) * 100%);
  left:calc(50% - var(--k) * 100% * 137 / 768);
  top:calc(50% - var(--k) * 100% * 268 / 548);
  clip-path:inset(25.9% 66.7% 28.1% 2.3% round 1.6%)
}
/* parking screen (ella-uc4): trim the top 135px so the exit banner is cropped off */
.el-trim{display:block;overflow:hidden;border-radius:12px}
.el-trim img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 100%;border-radius:0}
.el-trim.is-park{aspect-ratio:768/413}

/* round 3: price numeral gets air under the headline; unit label sits on the numeral's baseline */
.el-price-big{margin:28px 0 4px;align-items:flex-end}
.el-price-big small{padding-bottom:0;margin-bottom:-.12em;line-height:1.3}

/* knowledge center (ella-uc3, right panel) rebuilt in HTML so the text stays sharp at any size.
   Copy and layout follow the approved screen; sizes scale with the frame via container units. */
.el-uses{grid-template-columns:minmax(0,1fr)}
.el-use-pic.is-kc{display:grid;grid-template-columns:minmax(0,1fr);min-width:0}
.el-kc{container-type:inline-size;display:grid;place-items:center;width:100%;aspect-ratio:768/548;padding:6% 0;border-radius:12px;
  background:radial-gradient(120% 90% at 50% 0%,#0f3360,#061a33 70%)}
.el-kc-card{width:74%;display:grid;gap:clamp(12px,3cqw,20px);padding:clamp(16px,3.6cqw,26px);border-radius:clamp(12px,2cqw,16px);
  border:1px solid rgba(190,225,255,.55);background:linear-gradient(170deg,rgba(40,80,125,.55),rgba(14,40,74,.55));
  box-shadow:0 0 0 1px rgba(94,194,255,.12),0 30px 60px -30px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,255,255,.12);
  font-family:var(--body);color:#fff;font-size:clamp(12.5px,2.45cqw,16px);line-height:1.4}
.el-kc-h{font-family:var(--display);font-size:clamp(11.5px,1.9cqw,13px);font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.85)}
.el-kc-row{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(10px,2cqw,14px);align-items:start}
.el-kc-row.is-ella{grid-template-columns:minmax(0,1fr) auto;align-items:end}
.el-kc-av{display:grid;place-items:center;width:clamp(30px,5.6cqw,40px);aspect-ratio:1;border-radius:50%;flex:none;
  background:linear-gradient(150deg,#3f6f9e,#1d4472);border:1px solid rgba(255,255,255,.3);font-family:var(--display);font-weight:600;font-size:.95em}
.el-kc-row.is-ella .el-kc-av{margin-bottom:1.6em;background:rgba(255,255,255,.12)}
.el-kc-av img{width:72%;height:auto}
.el-kc-msg{display:grid;gap:6px;min-width:0}
.el-kc-msg small{justify-self:end;font-size:clamp(11px,1.7cqw,12.5px);color:rgba(255,255,255,.7)}
.el-kc-bub{padding:.75em 1em;border-radius:10px;background:rgba(255,255,255,.1)}
.el-kc-row.is-ella .el-kc-bub{display:grid;justify-items:end;gap:.8em;text-align:right;background:rgba(255,255,255,.08)}
.el-kc-btn{padding:.35em .9em;border-radius:6px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.18);font-size:.86em;font-weight:500;letter-spacing:.1em;text-transform:uppercase}
.el-kc-help{display:flex;align-items:center;gap:.6em;font-size:.9em;color:rgba(255,255,255,.88)}
.el-kc-help i{display:grid;place-items:center;width:1.9em;aspect-ratio:1;border-radius:50%;border:1px solid rgba(255,255,255,.45);box-shadow:0 0 10px rgba(94,194,255,.35)}
.el-kc-help svg{width:62%;height:62%;fill:none;stroke:#fff;stroke-width:1.6;stroke-linejoin:round}
@media (max-width:600px){.el-kc{padding:16px 0}.el-kc-card{width:90%}}
@media (max-width:600px){
  .el-use-txt{gap:14px}
  .el-trig{grid-template-columns:1fr;gap:4px;padding:14px 16px}
  .el-steps{padding:2px 16px}
  .el-steps li{grid-template-columns:26px minmax(0,1fr);gap:10px;padding:12px 0}
  .el-steps h4{font-size:16px}
  .el-steps p{font-size:14.5px}
}