/* Agent4Job landing v8: "the road to the interview".
   Palette r2: charcoal + the logo's cyan (sampled #12F2FA). Two actors get one colour each:
   Joni = brand cyan, the system = the board's own blue. Mobile first. */
@font-face{font-family:Heebo;src:url('fonts/heebo-600.ttf') format('truetype');font-weight:500 700;font-display:swap}
@font-face{font-family:Heebo;src:url('fonts/heebo-400.ttf') format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:'Baloo 2';src:url('fonts/baloo2-800.ttf') format('truetype');font-weight:800;font-display:swap}
/* wordmark: the logo's type, the 4 in brand turquoise, no icon */
.wm{font-family:'Baloo 2',Heebo,Arial,sans-serif;font-weight:800;letter-spacing:-.2px;direction:ltr;unicode-bidi:isolate;display:inline-block;color:inherit}
.wm b{color:var(--brand);font-weight:800}
.eyebrow .wm{color:var(--paper)}
.how .wm{color:var(--ink)}
:root{
  --ink:#151719; --ink-2:#1b1e21; --paper:#f3f4f5; --white:#fff;
  --brand:#79dfcc; --brand-deep:#2f7a6c;
  --blue:#2f7fe0; --blue-deep:#1f62b8;
  --g-300:#c2c7cc; --g-400:#9aa2a9; --g-600:#5f676e;
  --line-dark:#ffffff14; --line-light:#1517191a;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;overflow-x:hidden}
body{margin:0;background:var(--ink);color:var(--paper);font-family:Heebo,Arial,sans-serif;line-height:1.6;overflow-x:hidden}
a{color:inherit}
img{display:block;max-width:100%;height:auto}
svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.svg-defs{position:absolute;width:0;height:0;overflow:hidden}
h1,h2,h3{font-weight:600;margin:0;text-wrap:balance}
a:focus-visible,button:focus-visible,input:focus-visible{outline:3px solid var(--brand);outline-offset:4px}

/* header */
.site-header{max-width:1240px;margin:auto;padding:20px 20px;display:flex;align-items:center;justify-content:center;border-bottom:1px solid var(--line-dark)}
@media(min-width:700px){.site-header{justify-content:flex-start}}
.site-header img{width:132px}
.header-link{font-size:14px;text-decoration:none;color:var(--g-300)}
.header-link:hover{color:var(--white)}

/* hero */
.intro{margin-inline:auto}
.eyebrow{font-size:20px;line-height:1.3;font-weight:500;letter-spacing:0;color:var(--brand);margin:0 0 14px}
h1{font-size:34px;line-height:1.22;letter-spacing:-.5px;margin-bottom:18px}
.accent{color:var(--brand)}
.intro{font-size:16px;line-height:1.8;color:var(--g-300);margin:0 0 26px;max-width:560px}
.cta{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 26px;border-radius:12px;background:var(--brand);border:1px solid #a1eadb;color:#102320;font:600 15.5px/1 Heebo,Arial,sans-serif;text-decoration:none;cursor:pointer;transition:filter .15s,box-shadow .15s}
.cta:hover{filter:brightness(1.06);box-shadow:0 6px 18px #0004}
.hero .cta{width:auto;min-width:220px}

/* the duo: board (system) behind, WhatsApp (Joni) in front */
.browser{width:100%;border-radius:12px;overflow:hidden;background:#f4f5f7;box-shadow:0 0 0 1px #ffffff1c,0 30px 60px #0007}
.browser-bar{height:30px;display:flex;align-items:center;gap:10px;padding:0 12px;background:#e9ebee;direction:ltr}
.dots{display:flex;gap:6px}.dots i{width:9px;height:9px;border-radius:50%;background:#c9cdd2}
.address{flex:1;max-width:240px;margin:0 auto;height:18px;border-radius:6px;background:#fff;font-size:10px;color:#6b7279;display:flex;align-items:center;justify-content:center;gap:4px;direction:rtl}
.address svg{width:10px;height:10px;stroke-width:2}
.browser img{width:100%}

.device{position:relative;width:300px;border-radius:44px;background:#1b1d20;padding:7px;border:1.5px solid #787e83;box-shadow:0 0 0 2px #090b0c,0 30px 60px #0008,inset 0 0 0 2px #363b40;z-index:2}
.screen{overflow:hidden;border-radius:37px;background:#f7f8f7;color:#111b21;height:622px;display:flex;flex-direction:column}
.status{height:40px;display:flex;align-items:center;justify-content:space-between;padding:6px 22px 0;font:600 12px Arial,sans-serif;position:relative}
.island{position:absolute;top:8px;left:50%;transform:translateX(-50%);width:84px;height:24px;border-radius:20px;background:#141817}
.reception{display:flex;align-items:center;gap:4px}.reception svg{width:14px;height:12px;stroke-width:1.8}
.battery{display:inline-block;width:20px;height:10px;border:1px solid #59645e;border-radius:3px;position:relative}
.battery:before{content:'';position:absolute;inset:1px 3px 1px 1px;background:#20382c;border-radius:1px}
.chat-header{height:56px;display:flex;align-items:center;gap:8px;padding:4px 11px;border-bottom:1px solid #d9ddd6}
.chat-header svg{width:19px;height:19px;color:#008069}
.chat-header .back{width:15px;height:20px}
.avatar{width:36px;height:36px;overflow:hidden;border-radius:50%;flex-shrink:0;background:#d6f8fb;display:grid;place-items:center}
.avatar img{width:31px;height:auto;margin-top:4px}
.contact{flex:1;line-height:1.35}.contact strong{font-size:14.5px;display:block}.contact small{font-size:9.5px;color:#667781}

.conversation,.chat-tile{background-color:#efeae2;background-size:120px 120px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%23000' stroke-opacity='.05' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 12h16a4 4 0 0 1 4 4v8a4 4 0 0 1-4 4h-9l-5 4v-4h-2a4 4 0 0 1-4-4v-8a4 4 0 0 1 4-4Z'/%3E%3Cpath d='m84 10 2.4 5 5.6.8-4 3.9 1 5.5-5-2.6-5 2.6 1-5.5-4-3.9 5.6-.8Z'/%3E%3Cpath d='M58 52c-3-5-11-3-10 3 1 4 10 9 10 9s9-5 10-9c1-6-7-8-10-3Z'/%3E%3Ccircle cx='20' cy='78' r='6'/%3E%3Cpath d='M96 64h12v16H96zM99 69h6M99 73h6'/%3E%3Cpath d='M30 104c4-4 8 4 12 0s8 4 12 0'/%3E%3C/g%3E%3C/svg%3E")}
.conversation{flex:1;padding:12px 10px 12px;display:flex;flex-direction:column;gap:8px;justify-content:flex-end}
.today{align-self:center;background:#ffffffe8;color:#54656f;border-radius:6px;padding:1px 10px;font-size:9.5px;box-shadow:0 1px .5px #0b141a1a}
.message{position:relative;max-width:88%;font-size:12px;line-height:1.55;padding:6px 9px 4px;border-radius:8px;box-shadow:0 1px .5px #0b141a21;color:#111b21}
.message small{display:flex;align-items:center;justify-content:flex-end;gap:3px;font:9px Arial,sans-serif;color:#667781;margin-top:2px;direction:rtl}
.message ul{margin:4px 0 6px;padding:0 16px 0 0}.message li{margin:1px 0}
.message strong{font-weight:600}
.incoming{align-self:flex-start;background:#fff;border-top-right-radius:0}
.outgoing{align-self:flex-end;background:#d9fdd3;border-top-left-radius:0}
.incoming + .incoming{border-top-right-radius:8px}
.incoming:not(.incoming + .incoming)::before,.outgoing:not(.outgoing + .outgoing)::before{content:'';position:absolute;top:0;width:8px;height:12px;background:inherit}
.incoming:not(.incoming + .incoming)::before{right:-7px;clip-path:polygon(0 0,100% 0,0 100%)}
.outgoing:not(.outgoing + .outgoing)::before{left:-7px;clip-path:polygon(0 0,100% 0,100% 100%)}
.ticks{width:13px;height:9px;stroke:#53bdeb;stroke-width:1.6}
.message.link{padding-top:4px}
.link-card{display:flex;align-items:center;gap:9px;background:var(--brand);color:#102320;border-radius:7px;padding:8px 10px;margin:0 -4px 6px}
.link-icon{width:30px;height:30px;border-radius:7px;background:#ffffff8c;display:grid;place-items:center;flex-shrink:0}
.link-icon svg{width:17px;height:17px;stroke-width:1.8}
.link-card strong{display:block;font-size:12px;line-height:1.3}
.link-card small{display:block;font:10px Heebo,Arial,sans-serif;color:#1d3f3a;margin:0;justify-content:flex-start}
.composer{display:flex;align-items:center;gap:8px;padding:7px 10px 3px;color:#54656f;background:#f7f8f7}
.composer .plus{width:20px;height:20px}
.input-placeholder{flex:1;display:flex;align-items:center;justify-content:space-between;background:#fff;border-radius:20px;padding:5px 11px;font-size:11px;color:#8696a0}
.input-placeholder svg{width:17px;height:17px}
.home-bar{height:4px;width:96px;border-radius:4px;background:#1b1d20;margin:9px auto 6px}

/* legend: who does what */
.legend{grid-column:1/-1;margin-top:22px;display:flex;flex-direction:column;gap:8px;font-size:13.5px;color:var(--g-300);justify-self:stretch}
.who{display:flex;align-items:center;gap:9px}
.who i,.actor i{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.who b{color:var(--white);font-weight:600}
.joni i{background:var(--brand)} .sys i{background:var(--blue)}

/* why: the agenda, in one breath */
.why{background:var(--ink);color:var(--paper);padding:0 20px 60px}
.why .section-inner{max-width:1180px;margin:auto;border-top:1px solid var(--line-dark);padding-top:52px}
.why h2{font-size:34px;line-height:1.25;letter-spacing:-.5px;max-width:760px}
.why .lead{font-size:16px;line-height:1.8;color:var(--g-300);max-width:720px;margin:16px 0 0}
/* how: the road to the interview */
.how{background:var(--paper);color:var(--ink);padding:56px 20px 60px}
.section-inner{max-width:1180px;margin:auto}
.section-heading .eyebrow{color:var(--brand-deep);margin-bottom:8px}
.section-heading h2{font-size:34px;line-height:1.25;letter-spacing:-.5px}
.path{display:none}
.journey{list-style:none;margin:30px 0 0;padding:0;display:grid;gap:34px}
.step{position:relative}
.tile{height:372px;border-radius:16px;overflow:hidden;position:relative;box-shadow:0 0 0 1px var(--line-light),0 14px 34px #1517190f}
.tile::after{content:'';position:absolute;inset:auto 0 0 0;height:56px;pointer-events:none}
.shot-tile{background:#f4f5f7;display:flex;align-items:center;justify-content:center;padding:0 4px}
.shot-tile::after{display:none}
.shot-tile img{width:100%;max-width:282px}
.chat-tile{padding:18px 16px;display:flex;flex-direction:column;justify-content:center;gap:9px}
.chat-tile .message{font-size:13px;max-width:86%}
.chat-tile .message small{font-size:10px}
.chat-tile blockquote{margin:7px 0 2px;padding:7px 10px;background:#f0f2f5;border-right:3px solid var(--brand-deep);border-radius:4px;color:#3b4a54}
.doc{padding:4px 4px 3px;min-width:210px}
.doc-card{display:flex;align-items:center;gap:10px;background:#0b141a0d;border-radius:6px;padding:9px 10px}
.doc-icon{width:26px;height:33px;flex-shrink:0}
.doc-meta{display:flex;flex-direction:column;line-height:1.4}
.doc-name{font-size:12.5px}.doc-sub{font-size:10px;color:#667781}
.doc>small{padding:2px 6px 0}
.actor{display:flex;align-items:center;gap:8px;margin:18px 0 6px;font-size:12.5px;color:var(--g-600)}
.step h3{font-size:20px;line-height:1.3;font-weight:500;display:flex;align-items:baseline;gap:10px}
.step .n{font-size:12px;font-weight:400;color:var(--g-600);font-variant-numeric:tabular-nums}
.step>p:last-child{font-size:14.5px;line-height:1.75;color:var(--g-600);margin:8px 0 0}
.sample-note{margin:34px 0 0;font-size:12px;color:var(--g-600)}

/* start: the signup block (markup + script copied verbatim from live) */
.start{background:var(--ink-2);border-top:1px solid var(--line-dark);text-align:center;padding:56px 20px 60px}
.avatar.large{width:72px;height:72px;margin:0 auto 18px;box-shadow:0 0 0 1px #ffffff1f}
.avatar.large img{width:58px;margin-top:6px}
.start .eyebrow{margin-bottom:10px}
.start h2{font-size:34px;line-height:1.25;letter-spacing:-.5px}
.consent{display:flex;text-align:right;gap:10px;max-width:470px;margin:26px auto 22px;font-size:13.5px;line-height:1.7;color:var(--g-300)}
.consent input{width:20px;height:20px;accent-color:var(--brand);flex-shrink:0;margin-top:3px}
.consent a{text-decoration:underline}
.start .cta{width:auto;min-width:260px;max-width:100%}
.cta:disabled{opacity:.45;cursor:not-allowed;filter:none;box-shadow:none}
#entry-status{font-size:12.5px;color:var(--g-400);margin:16px auto 0}
footer{max-width:1180px;margin:auto;padding:24px 20px;border-top:1px solid var(--line-dark);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;font-size:12px;color:var(--g-400)}
footer img{width:104px}
footer>span{order:3;flex-basis:100%;text-align:center}

/* reveal */
.js .reveal{opacity:0;transform:translateY(14px);transition:opacity .7s ease,transform .7s ease}
.js .reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.js .reveal{opacity:1;transform:none;transition:none}}

/* small phones */
@media(max-width:360px){h1{font-size:33px}}

/* tablet and up */
@media(min-width:700px){
  .site-header{padding:24px 32px}.site-header img{width:150px}
  h1{font-size:46px}
  .hero .cta{width:auto}
  .why{padding-bottom:80px}.why .section-inner{padding-top:72px}.why h2{font-size:46px}.why .lead{font-size:17px}
  .eyebrow{font-size:22px}.step h3{font-size:22px}
  .how{padding:80px 32px 84px}
  .section-heading h2{font-size:46px}
  .journey{grid-template-columns:1fr 1fr;gap:44px 28px}
  .start{padding:76px 32px 80px}.start h2{font-size:46px}
  footer{padding:26px 32px}footer>span{order:0;flex-basis:auto}
}

/* desktop */
@media(min-width:1080px){
  h1{font-size:50px;line-height:1.2;letter-spacing:-.8px}
  .intro{font-size:18px}
  .path{display:grid;grid-template-columns:repeat(4,1fr) auto;align-items:center;position:relative;margin:46px 0 0;height:30px}
  .rail{position:absolute;inset:50% 0 auto 0;height:1px;background:linear-gradient(to left,var(--line-light),var(--brand-deep))}
  .node{position:relative;justify-self:start;width:30px;height:30px;border-radius:50%;background:var(--paper);box-shadow:0 0 0 1px #15171933;display:grid;place-items:center;font-size:11px;color:var(--g-600)}
  .goal{position:relative;background:var(--ink);color:var(--brand);border-radius:20px;padding:5px 16px;font-size:13px;font-weight:600}
  .journey{grid-template-columns:repeat(4,1fr);gap:24px;margin-top:22px}
  .tile{height:372px}
  .step .n{display:none}
}

/* ===== hero r9: a desktop layout. Copy on the right, one "family" picture on the left:
   the system on a screen with a real-proportion phone in front, bleeding past the left edge.
   On narrow screens the same picture is scaled as one unit (zoom set in motion.js). ===== */
.hero{max-width:1240px;margin:auto;padding:40px 20px 48px}
.hero-copy{text-align:right}
.scene{position:relative;width:820px;height:680px;margin:28px 0 0 auto}
.scene .browser{position:absolute;right:0;top:0;width:720px}
.scene .device{position:absolute;left:0;bottom:0}
.scene .legend{position:absolute;right:0;bottom:-44px;margin:0;flex-direction:row;gap:28px;width:auto;white-space:nowrap}
.scene-wrap{padding-bottom:54px}
@media(min-width:1080px){
  .hero{display:grid;grid-template-columns:minmax(0,4.4fr) minmax(0,7.6fr);gap:20px;align-items:center;padding:48px 32px 100px}
  .hero-copy{max-width:520px}
  .scene-wrap{position:relative;height:680px;padding:0}
  .scene{position:absolute;right:0;top:0;margin:0}
  .scene .browser{right:0}
  .scene .device{left:0}
}

/* October 2026 design refinement. Shared by both presentation variants. */
:root{--blue:var(--brand);--blue-deep:var(--brand-deep)}
.site-header{justify-content:space-between;max-width:1320px;border:0;padding:24px 28px}
.site-header img{width:150px}
.site-header nav{display:flex;gap:28px;font-size:14px;color:var(--g-300)}
.site-header nav a{text-decoration:none}.site-header nav a:hover{color:var(--brand)}
.hero{max-width:1320px;padding:48px 28px 90px;position:relative}
h1{font-size:clamp(36px,4vw,54px);line-height:1.24;letter-spacing:-1.2px}
.intro{font-size:18px;line-height:1.9;color:#bdc4c8;max-width:480px}
.cta{min-height:54px;border-radius:12px;font-size:16px;padding-inline:24px;box-shadow:0 7px 22px #0002}
.hero-copy{position:relative;z-index:3}
.scene-wrap{height:auto;padding:0;margin-top:36px;width:100%;aspect-ratio:840/640}
.scene{width:840px;height:640px;margin:0;isolation:isolate;transform-origin:top right}
.scene::before{content:'';position:absolute;inset:0 -30px 60px;background:radial-gradient(ellipse at 50% 53%,#79dfcc12, #343c4330 43%,transparent 72%);z-index:-2}
.scene::after{content:'';position:absolute;left:25px;right:10px;bottom:66px;height:65px;background:radial-gradient(ellipse,#000b,transparent 70%);filter:blur(13px);z-index:-1}
.floor{position:absolute;bottom:85px;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,#ffffff18,transparent)}
.mac{position:absolute;right:0;top:35px;width:760px;height:509.6px;filter:drop-shadow(0 22px 20px #0009)}
.mac .frame{position:absolute;inset:0;width:100%;height:100%;z-index:1}
.mac .shot{position:absolute;left:79.5px;top:59.6px;width:601px;height:390.4px;object-fit:cover;object-position:top;border-radius:5px}
.iphone{position:absolute;left:8px;bottom:86px;width:215px;height:423.6px;filter:drop-shadow(12px 22px 16px #000b);z-index:2;direction:rtl}
.iphone .frame{position:absolute;inset:0;width:100%;height:100%;z-index:2;pointer-events:none}
.iphone .screen{position:absolute;left:18.2px;top:18.2px;width:300px;height:650.4px;zoom:.5955;border-radius:39px}
.iphone .status{height:44px;flex-shrink:0}.iphone .chat-header{flex-shrink:0}
.scene .legend{bottom:10px;right:24px;left:24px;width:auto;white-space:normal;gap:12px;flex-direction:column;font-size:17px}
.legend .who{gap:8px}.sys i{background:var(--brand)}
.why{padding:0 28px 84px}.why .section-inner{max-width:1264px;padding-top:68px}
.why h2,.section-heading h2,.start h2{font-size:clamp(32px,3.3vw,46px);line-height:1.3;letter-spacing:-.8px}
.why .lead{font-size:18px;line-height:1.9;max-width:790px}
.how{background:#1b1e21;color:var(--paper);padding:76px 28px 90px;border-block:1px solid var(--line-dark)}
.section-inner{max-width:1264px}.section-heading .eyebrow{color:var(--brand)}
.journey{gap:24px}.step{background:#202428;border:1px solid #ffffff0d;border-radius:20px;padding:14px 14px 22px}
.tile{height:330px;border-radius:12px;box-shadow:none}.shot-tile{padding:12px;background:#edf0f1}
.shot-tile img{max-height:100%;object-fit:contain;width:auto;max-width:100%}
.chat-tile{padding:16px 12px}.chat-tile .message{font-size:12.5px;max-width:93%}
.actor{color:#adb7be;font-size:13px;margin-top:20px}.step h3{font-size:22px;line-height:1.4;font-weight:600}
.step>p:last-child{font-size:16px;line-height:1.8;color:#bfc6cb;margin-top:12px}.step .n{color:var(--brand)}
.rail{background:#ffffff20}.node{background:#202428;color:var(--brand);box-shadow:0 0 0 1px #79dfcc50}
.goal{background:var(--brand);color:var(--ink)}
.js .reveal{opacity:1;transform:none}
.start{padding:88px 28px;background:var(--ink);border:0}
.signup-panel{max-width:790px;margin:auto;background:radial-gradient(ellipse at 50% 0,#79dfcc0b,transparent 70%),#1b1e21;border:1px solid #79dfcc25;border-radius:24px;padding:48px 32px;box-shadow:0 30px 80px #0002}
.avatar.large{width:52px;height:52px;background:#79dfcc17}.avatar.large img{width:44px;margin-top:4px}
.consent{font-size:15px;max-width:460px}.start .cta{width:100%;max-width:460px}
#entry-status{font-size:14px}footer{max-width:1264px;padding:28px;font-size:13px}footer .wm{font-size:22px}
@media(min-width:1080px){
 .hero{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:24px;align-items:center;min-height:660px;padding-top:40px}
 .hero-copy{max-width:520px}.scene-wrap{position:relative;margin:0;height:auto;aspect-ratio:840/640}
 .scene{position:absolute;right:0;top:0}.path{margin-top:38px}.journey{margin-top:26px}
 .tile{height:330px}.step h3{font-size:21px}.step>p:last-child{font-size:15px}
}
@media(max-width:699px){
 .site-header{padding:20px}.site-header img{width:126px}.site-header nav{font-size:13px;gap:18px}
 .hero{padding:30px 20px 54px}.hero .cta{width:100%;margin-top:2px}.intro{font-size:17px;line-height:1.85;margin-bottom:24px}
 h1{font-size:36px;letter-spacing:-.7px}.scene-wrap{margin-top:30px}.why{padding:0 20px 52px}.why .section-inner{padding-top:40px}
 .why .lead{font-size:17px}.eyebrow{font-size:17px}.how{padding:48px 20px 54px}
 .journey{gap:20px}.step{padding:16px 16px 24px}.tile{height:340px}.step h3{font-size:23px}.step>p:last-child{font-size:17px}
 .chat-tile .message{font-size:15px}.start{padding:54px 20px}.signup-panel{padding:32px 20px;border-radius:20px}
 .start h2{font-size:30px}.consent{font-size:14px}.start .cta{font-size:14px;padding-inline:12px}
 .scene .legend{font-size:23px;gap:8px;bottom:0}.scene{height:650px}
 footer{justify-content:center;text-align:center;gap:14px}
}

/* Real photographic stage with exact product content overlaid. */
.site-header{justify-content:flex-start;border-bottom:1px solid #ffffff09}
.hero{max-width:none;padding:64px max(28px,calc((100vw - 1320px)/2 + 28px)) 76px;gap:10px;isolation:isolate;
background:radial-gradient(ellipse at 23% 38%,#79dfcc11,transparent 46%),linear-gradient(115deg,#202a2b,#191e20 42%,#151719 78%)}
.hero:before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(165deg,transparent 12%,#79dfcc09 38%,transparent 63%),radial-gradient(ellipse at 10% 70%,#79dfcc0b,transparent 58%);opacity:1}
.hero-copy{max-width:520px}.hero-copy .intro{max-width:495px}
.scene-wrap{aspect-ratio:900/695}
.scene{width:900px;height:695px;overflow:visible;isolation:isolate}
.scene::before,.scene::after{display:none}
.stage-photo{position:absolute;inset:0;width:900px;height:600px;object-fit:cover;max-width:none;mask-image:linear-gradient(to bottom,transparent,black 12%,black 84%,transparent 100%),linear-gradient(to right,transparent,black 5%,black 93%,transparent);mask-composite:intersect}
.live-board{position:absolute;left:259.6px;top:116.6px;width:485.7px;height:278.9px;clip-path:polygon(1.45% 0,97.95% 0,100% 100%,0 100%);overflow:hidden;border-radius:4px;transform-origin:top left}
.live-board img{width:100%;height:100%;object-fit:cover;object-position:top}
.iphone{position:absolute;left:103.7px;top:243.8px;bottom:auto;width:111.9px;height:239.1px;filter:none;z-index:3}
.iphone .screen{left:0;top:0;width:300px;height:641px;zoom:.373;border-radius:49px;box-shadow:none}
.iphone .status{height:40px}.iphone .conversation{gap:7px;padding-block:10px}
.scene .legend{bottom:10px;right:48px;left:48px;gap:10px;font-size:18px}
.how{background:linear-gradient(#1a1e20,#1b1e21)}
.signup-panel{box-shadow:none;border:1px solid #ffffff12;background:radial-gradient(ellipse at 50% 0,#79dfcc08,transparent 70%),#1b1e21}
.live-chat .message{transition:opacity .35s ease,transform .35s ease}
.live-chat .message.pending{display:none}.live-chat .message.entering{animation:chat-enter .4s ease both}
.typing-bubble{display:flex;gap:4px;padding:12px 14px;background:white;border-radius:8px;align-self:flex-start;box-shadow:0 1px .5px #0b141a21;max-width:60px}
.typing-bubble[hidden]{display:none}.typing-bubble i{height:5px;width:5px;background:#81908b;border-radius:50%;animation:typing-dot 1.1s ease-in-out infinite}
.typing-bubble i:nth-child(2){animation-delay:.15s}.typing-bubble i:nth-child(3){animation-delay:.3s}
@keyframes typing-dot{50%{transform:translateY(-3px);opacity:.45}}
@keyframes chat-enter{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){.live-chat .message.entering{animation:none}.typing-bubble i{animation:none}}
@media(min-width:1080px){.hero{grid-template-columns:minmax(0,5fr) minmax(0,7fr);min-height:720px}.scene-wrap{height:auto;aspect-ratio:900/695}.hero h1{font-size:52px}}
@media(max-width:699px){.hero{padding:32px 20px 46px;background:radial-gradient(ellipse at 50% 68%,#79dfcc0d,transparent 50%),linear-gradient(#171b1d,#1c2325 66%,#151719)}.hero h1{font-size:36px}.scene-wrap{margin-top:32px}.scene .legend{font-size:24px;right:24px;left:24px;bottom:0}.scene{height:715px}.site-header{justify-content:flex-start}.how{padding-top:48px}}

/* Quiet office refinement: softened mint ambience and natural workspace. */
.hero{background:radial-gradient(ellipse at 20% 55%,#79dfcc08,transparent 62%),linear-gradient(110deg,#202727,#1b2021 48%,#151719 86%)}
.hero:before{display:none}
@media(max-width:699px){.hero{background:linear-gradient(#171b1d,#1d2425 68%,#151719)}}

/* Soft green light: mint ambience fades into charcoal behind the approved copy. */
.hero{background:radial-gradient(ellipse at 19% 48%,#28463e 0%,#1d2d28 35%,#151719 72%)}
.hero-copy{position:relative;z-index:3}
@media(max-width:699px){.hero{background:radial-gradient(ellipse at 28% 69%,#28463e 0%,#1d2d28 30%,#151719 68%)}}

/* Product first: transparent device cutouts; responsive screens fill the space. */
.hero{background:radial-gradient(ellipse at 22% 46%,#79dfcc14,transparent 58%),#151719;max-width:1440px;margin:auto;padding:48px 28px 76px;gap:30px}
.hero-copy .intro{font-size:18px;max-width:485px}.hero h1{font-size:48px}
.scene-wrap{aspect-ratio:900/670}.scene{width:900px;height:670px}
.live-board{left:100px;top:0;width:800px;height:505px;clip-path:none;border:8px solid #252d2e;border-radius:16px;background:#f5f6f6;box-shadow:0 24px 40px #0005;overflow:hidden}
.product-bar{height:26px;background:#202829;display:flex;justify-content:space-between;align-items:center;padding:0 12px;font:10px Arial;direction:ltr;color:#bac9c5}
.live-board>img{width:100%;height:calc(100% - 26px);object-fit:cover;object-position:top;max-width:none}
.iphone{left:0;top:150px;width:230px;height:453px;filter:drop-shadow(10px 18px 16px #0009)}
.device-frame{position:absolute;inset:0;width:100%;height:100%;max-width:none;z-index:4;pointer-events:none}
.iphone .screen{left:19.45px;top:19.45px;width:300px;height:650px;zoom:.637;border-radius:45px}
.scene .legend{left:10px;right:10px;bottom:0;font-size:18px;gap:8px}
@media(min-width:1080px){.hero{grid-template-columns:minmax(0,4.6fr) minmax(0,7.4fr);min-height:680px}.scene-wrap{aspect-ratio:900/670}}
@media(max-width:699px){
 .hero{padding:28px 20px 48px;gap:0}.hero h1{font-size:34px}.hero-copy .intro{font-size:17px;line-height:1.8}
 .scene-wrap{aspect-ratio:auto;height:650px;margin-top:30px}
 .scene{width:100%;height:650px;position:relative;zoom:1!important}
 .live-board{left:auto;right:0;top:0;width:100%;height:325px;border-width:5px;border-radius:12px}
 .live-board>img{position:relative;width:570px;height:auto;max-width:none;float:right;object-fit:unset;top:-100px;right:-65px}
 .iphone{left:0;top:218px;width:195px;height:384.5px}
 .iphone .screen{left:16.49px;top:16.49px;zoom:.54;height:650px}
 .iphone .message{font-size:14px}.iphone .conversation{justify-content:flex-end;gap:8px}
 .scene .legend{font-size:13px;right:0;left:0;bottom:0;gap:8px}
}
@media(min-width:700px) and (max-width:1079px){.scene-wrap{max-width:850px;margin-inline:auto}}

.product-bar{position:relative;z-index:2}

/* Original gray/charcoal rhythm and distinct actor colors. */
:root{--blue:#2f7fe0;--blue-deep:#1f62b8}.sys i{background:var(--blue)}.joni i{background:var(--brand)}
.how{background:#f3f4f5;color:#151719}.how .section-heading .eyebrow{color:#2f7a6c}
.step{background:#e9edef;border-color:#1517190d}.actor{color:#5f676e}.step>p:last-child{color:#5f676e}
.rail{background:#15171920}.node{background:#f3f4f5;color:#5f676e;box-shadow:0 0 0 1px #15171930}
.live-board{z-index:1;left:85px;top:0;width:815px;height:546.5px;border:0;border-radius:0;background:none;box-shadow:none;overflow:visible}
.board-display{position:absolute;left:10.46%;top:11.70%;width:79.08%;height:76.60%;overflow:hidden;background:#f3f4f5;border-radius:4px}
.board-image{display:block;width:100%;height:100%;object-fit:cover;object-position:top;max-width:none;transition:opacity .6s ease,filter .6s ease}
.live-board>img.mac-frame{position:absolute;inset:0;left:0;top:0;right:auto;float:none;object-fit:fill;width:100%;height:100%;max-width:none;z-index:4;pointer-events:none}
.board-loading{display:none;position:absolute;inset:0;padding:11% 7%;background:#f3f4f5;opacity:1;transition:opacity .5s ease}
.board-display.is-loading .board-loading{display:block}.board-display.is-loading .board-image{opacity:0;filter:blur(3px)}
.loading-row{width:50%;height:18%;border-radius:10px;margin:0 0 7% auto;background:#dfe7e9}
.loading-cards{display:flex;gap:5%;height:60%}.loading-cards i{flex:1;background:linear-gradient(100deg,#e1e7e9 20%,#f6f8f9 45%,#e1e7e9 70%);background-size:220% 100%;border-radius:10px;animation:board-shimmer 1.7s linear infinite}
@keyframes board-shimmer{to{background-position:-220% 0}}
.board-display.is-ready .board-image{animation:board-reveal .65s ease both}
@keyframes board-reveal{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.iphone{top:145px}.scene .legend{bottom:0}.scene{height:660px}.scene-wrap{aspect-ratio:900/660}
@media(max-width:699px){
 .site-header{padding:12px 20px}.site-header img{width:112px}
 .hero{display:grid;grid-template-areas:'title' 'screens' 'action' 'copy';grid-template-columns:1fr;padding:20px 16px 30px;gap:14px}
 .hero-copy{display:contents}.hero h1{grid-area:title;font-size:29px;line-height:1.22;letter-spacing:-.6px;margin:0}
 .hero .scene-wrap{grid-area:screens;width:100%;margin:0;height:338px;aspect-ratio:auto}
 .hero .cta{grid-area:action;width:100%;min-height:49px;margin:0;font-size:15px}
 .hero .intro{grid-area:copy;margin:0;font-size:14.5px;line-height:1.65;max-width:none;color:#bec7cb}
 .scene{width:100%;height:338px}
 .live-board{left:0;right:auto;top:0;width:100%;height:auto;aspect-ratio:3824/2564;border:0;border-radius:0;background:none}
 .board-image{position:relative;width:560px;height:auto;float:right;top:-120px;right:-60px;max-width:none;object-fit:unset}
 .iphone{top:60px;left:0;width:137px;height:270px}
 .iphone .screen{left:11.6px;top:11.6px;width:300px;height:650px;zoom:.3794;border-radius:45px}
 .iphone .message{font-size:15px}.iphone .conversation{gap:8px}
 .scene .legend{bottom:0;right:0;left:147px;gap:6px;font-size:11.5px;line-height:1.5}
 .legend .who{display:block}.legend .who i{display:inline-block;width:6px;height:6px;margin-left:4px}
 .why{padding:0 20px 38px}.why .section-inner{padding-top:28px}.why h2{font-size:27px}.why .lead{font-size:15px;line-height:1.75;margin-top:12px}
 .how{padding:38px 20px 42px}.section-heading h2{font-size:29px}.journey{margin-top:22px;gap:18px}
 .start{padding:38px 20px}.signup-panel{padding:25px 18px}.start h2{font-size:27px}.start .eyebrow{font-size:15px}
}
@media(max-width:360px){.hero h1{font-size:26px}.hero .scene-wrap,.scene{height:320px}.iphone{width:128px;height:252px}.iphone .screen{zoom:.355;left:10.8px;top:10.8px}.scene .legend{left:135px;font-size:10.5px}}
@media(prefers-reduced-motion:reduce){.board-image,.board-loading{transition:none}.loading-cards i,.board-display.is-ready .board-image{animation:none}}

.board-mobile-cards{display:none}
@media(max-width:699px){.board-display>.board-image{display:none}.board-mobile-cards{display:flex;width:100%;height:100%;gap:4px;padding:5px;background:#edf0f1}.board-mobile-cards img{width:calc(50% - 2px);height:100%;min-width:0;object-fit:contain}.board-loading{z-index:2}.is-ready .board-mobile-cards{animation:board-reveal .65s ease both}}


/* Product first: visual journey, then progressive disclosure. */
.how{padding-top:60px;border:0}.how .section-heading{max-width:760px}.how .path{margin-top:30px}.step{background:#fff;border:1px solid #dfe4e6;box-shadow:0 8px 30px #14242705;border-radius:22px}.step .tile{background-color:#edf0f1}.step .actor{margin-top:20px}.step h3{font-size:21px}.step>p:last-child{font-size:15px;line-height:1.75}.path .node{box-shadow:0 0 0 6px #f3f4f5}.value-story{background:#e9edef;color:#151719;padding:72px 28px 80px;border-top:1px solid #dce2e4}.value-layout{display:grid;grid-template-columns:.9fr 1.1fr;gap:76px;align-items:start}.value-intro .eyebrow{color:#347767;font-size:15px}.value-intro h2{font-size:clamp(28px,3.1vw,42px);line-height:1.35;letter-spacing:-.7px;margin:12px 0 18px}.value-intro>p:last-of-type{font-size:17px;line-height:1.85;color:#56616a;max-width:410px}.value-signature{display:flex;flex-wrap:wrap;gap:12px 20px;margin-top:28px;font-size:13px;color:#43505a}.value-signature .who{display:flex;align-items:center;gap:7px}.value-signature i{width:7px;height:7px;border-radius:50%;display:inline-block}.value-signature .sys i{background:#2f7fe0}.value-signature .joni i{background:#79dfcc;box-shadow:0 0 0 3px #79dfcc25}.value-questions details{border-bottom:1px solid #ccd5d9}.value-questions details:first-child{border-top:1px solid #ccd5d9}.value-questions summary{list-style:none;display:grid;grid-template-columns:28px 1fr 24px;align-items:center;gap:12px;padding:23px 0;cursor:pointer;font-size:19px;font-weight:500;line-height:1.45}.value-questions summary::-webkit-details-marker{display:none}.question-number{font-size:12px;letter-spacing:1px;color:#587c91;font-variant-numeric:tabular-nums}.question-toggle{width:24px;height:24px;border:1px solid #bdc9ce;border-radius:50%;position:relative}.question-toggle:before,.question-toggle:after{content:'';position:absolute;left:7px;top:10px;width:8px;height:1px;background:#34434a}.question-toggle:after{transform:rotate(90deg);transition:transform .2s}.value-questions details[open] .question-toggle{background:#163c34;border-color:#163c34}.value-questions details[open] .question-toggle:before,.value-questions details[open] .question-toggle:after{background:#a2f0dc}.value-questions details[open] .question-toggle:after{transform:rotate(0)}.value-questions summary:focus-visible{outline:2px solid #2f7fe0;outline-offset:5px;border-radius:4px}.answer{padding:0 40px 24px 12px}.answer p{font-size:16px;line-height:1.85;color:#52616b;margin:0}.answer-tag{display:block;margin-top:16px;font-size:12px;font-weight:500;color:#276957}.value-questions details[open] summary{padding-bottom:14px}
@media(max-width:1079px){.value-layout{gap:36px;grid-template-columns:1fr 1.2fr}}
@media(max-width:699px){.how{padding-top:34px}.how .section-heading h2{font-size:28px}.step{padding:12px 12px 20px}.step .tile{height:300px}.step h3{font-size:21px}.step>p:last-child{font-size:15px}.value-story{padding:36px 20px 42px}.value-layout{grid-template-columns:1fr;gap:28px}.value-intro h2{font-size:28px;margin:8px 0 12px}.value-intro>p:last-of-type{font-size:15px;line-height:1.75}.value-signature{margin-top:18px;font-size:12px}.value-questions summary{font-size:17px;gap:8px;grid-template-columns:23px 1fr 24px;padding:20px 0}.answer{padding:0 31px 22px 0}.answer p{font-size:15px}.answer-tag{font-size:11px}}

.learning-demo{position:relative}.learning-demo>img{transition:opacity .4s}.learning-overlay{position:absolute;inset:auto 10px 12px;padding:14px;background:#fffffff5;border:1px solid #d8e5e3;border-radius:12px;box-shadow:0 8px 24px #142b2420;text-align:right}.demo-caption{display:block;color:#66747b;font-size:10px;margin-bottom:10px}.learning-feedback,.learning-result{display:flex;flex-direction:column;gap:8px}.feedback-choice{background:#dcf7ee;padding:9px;border-radius:9px;color:#17483d;font-size:13px}.feedback-reply{font-size:13px;color:#34474d;line-height:1.6}.learning-label{color:#267463;font-size:12px;font-weight:600}.learning-result strong{font-size:15px;line-height:1.5;color:#233638}.learning-result>span:last-child{font-size:11px;color:#536a71}.learning-demo[data-phase="feedback"] .learning-result,.learning-demo[data-phase="result"] .learning-feedback{display:none}.learning-demo[data-phase="feedback"]>img{opacity:.35}.learning-demo[data-phase="result"] .learning-overlay{border-color:#69bfad}.learning-replay{display:block;margin:10px 0 -8px;padding:4px 0;font:inherit;font-size:12px;color:#356f64;background:none;border:0;cursor:pointer}.learning-replay:focus-visible{outline:2px solid #2f7fe0;outline-offset:3px}@media(prefers-reduced-motion:reduce){.learning-demo>img{transition:none}}

/* Distinguish WhatsApp conversations from the cool-gray product board. */
.step .tile.chat-tile{background-color:#efe5d7;background-size:96px 96px;padding:65px 14px 22px;justify-content:center;border:1px solid #ded6ca}.tile-chat-header{position:absolute;inset:0 0 auto;height:51px;background:#fafbf9;border-bottom:1px solid #d9ded8;display:flex;align-items:center;gap:8px;padding:8px 12px;color:#172d26}.tile-chat-header img{width:30px;height:30px;border-radius:50%;background:#d9f4e9;object-fit:contain}.tile-chat-header span{flex:1}.tile-chat-header b{display:block;font-size:13px;line-height:1.3}.tile-chat-header small{display:block;font-size:9px;color:#667781}.tile-chat-header svg{width:17px;height:17px;color:#008069}.step .chat-tile .outgoing{background:#d9fdd3}.step .chat-tile .incoming{background:#fff}.step .chat-tile .message{flex-shrink:0;box-shadow:0 1px 1px #0b141a26}.chat-tile blockquote{background:#f0f5ee;border-right-color:#008069}.iphone .status,.iphone .chat-header,.iphone .composer,.iphone .home-bar{flex-shrink:0}.iphone .conversation{min-height:0;overflow-y:auto;overflow-x:hidden;justify-content:flex-start;scrollbar-width:none;overscroll-behavior:contain}.iphone .conversation::-webkit-scrollbar{display:none}.iphone .conversation:before{content:'';flex:1 0 0}.iphone .conversation>.message,.iphone .conversation>.today,.iphone .conversation>.typing-bubble{flex-shrink:0}.live-chat .message.entering{animation:chat-enter .25s ease both}.board-display.is-ready .board-image,.is-ready .board-mobile-cards{animation:none}
@media(max-width:699px){.hero .scene-wrap,.hero .scene{height:max(338px,calc((100vw - 32px)*.6705 + 85px))}.step .tile.chat-tile{padding-top:65px;padding-bottom:18px}.step .chat-tile .message{font-size:14px;line-height:1.5}}
@media(max-width:360px){.hero .scene-wrap,.hero .scene{height:320px}.step .chat-tile .message{font-size:13px}}

.step .tile.chat-tile{height:auto;min-height:330px}.live-chat .message.entering{animation:none}@media(max-width:699px){.step .tile.chat-tile{min-height:300px}}

.site-header{justify-content:space-between}.language-nav{display:flex;align-items:center;gap:14px;font:500 12px Arial,sans-serif;direction:ltr}.language-nav a{color:#bbc9c6;text-decoration:none;padding:7px 10px;border:1px solid #ffffff25;border-radius:7px}.language-nav a:hover{color:#79dfcc;border-color:#79dfcc}.language-nav [aria-current]{color:#79dfcc}@media(max-width:699px){.language-nav{font-size:11px;gap:9px}.language-nav a{padding:6px 8px}}

/* The physical screen clips its content independently of device scaling. */
.iphone{--phone-scale:.637}.phone-viewport{position:absolute;left:8.45%;right:8.45%;top:4.29%;bottom:4.29%;overflow:hidden;border-radius:15% / 7%;background:#f7f8f7;isolation:isolate}.iphone .phone-viewport .screen{left:0;top:0;right:auto;bottom:auto;zoom:1!important;width:300px;height:650px;transform:scale(var(--phone-scale));transform-origin:top left;border-radius:0;overflow:hidden}.device-frame{pointer-events:none}
@media(max-width:699px){.iphone{--phone-scale:.3794}}
@media(max-width:360px){.iphone{--phone-scale:.355}}

/* A short product tour between the hero and the detailed journey. */
.watch-link{display:flex;align-items:center;justify-content:center;gap:9px;width:fit-content;margin:18px auto 0;color:#c7ddd7;font-size:15px;text-decoration:none}.watch-link span{color:#79dfcc;font-size:12px}.watch-link:hover{color:#79dfcc}
.video-story{background:#eef2f1;color:#151719;padding:64px 28px 48px;scroll-margin-top:24px}.video-inner{max-width:960px;margin:0 auto}.video-heading{text-align:center;margin-bottom:28px}.video-heading .eyebrow{color:#357868;font-size:13px;letter-spacing:.2px;margin:0 0 12px}.video-heading h2{font-size:clamp(28px,3.5vw,42px);line-height:1.2;letter-spacing:-.8px;margin:0 0 14px}.video-duration{color:#61736d;font-size:13px}.video-player{position:relative;aspect-ratio:16/9;overflow:hidden;border-radius:20px;background:#172822;box-shadow:0 18px 50px #1a38261a;border:1px solid #c9d9d2}.video-poster{position:absolute;inset:0;width:100%;height:100%;padding:0;border:0;background:#172822;cursor:pointer;color:#12392d;font:inherit}.video-poster>img{display:block;width:100%;height:100%;object-fit:cover}.video-poster:after{content:'';position:absolute;inset:0;background:linear-gradient(transparent 45%,#071c16b3)}.video-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:1;width:76px;height:76px;border-radius:50%;display:grid;place-items:center;background:#79dfcc;box-shadow:0 0 0 10px #79dfcc22,0 8px 24px #0003;transition:box-shadow .2s}.video-play svg{width:34px;height:34px;margin-left:4px}.video-poster:hover .video-play{box-shadow:0 0 0 15px #79dfcc33,0 8px 24px #0003}.video-poster:focus-visible{outline:4px solid #2f7fe0;outline-offset:-4px}.video-poster-label{position:absolute;z-index:1;bottom:24px;left:28px;right:28px;display:flex;justify-content:space-between;color:white;font-size:17px;font-weight:600}.video-player iframe{position:absolute;inset:0;width:100%;height:100%;border:0}.video-footer{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:24px}.video-start{display:inline-flex;gap:24px;align-items:center;background:#173e33;color:#fff;border-radius:10px;padding:14px 22px;font-size:15px;font-weight:600;text-decoration:none}.video-start:hover{background:#245d4d}.video-external{color:#526b61;font-size:13px;text-decoration:underline;text-underline-offset:4px}
@media(max-width:699px){.hero:has(.watch-link){grid-template-areas:'title' 'screens' 'action' 'watch' 'copy'}.hero .watch-link{grid-area:watch;margin:0 auto;font-size:13px;padding:3px 0 7px}.video-story{padding:34px 16px 30px}.video-heading{margin-bottom:21px}.video-heading h2{font-size:29px}.video-heading .eyebrow{font-size:12px}.video-duration{font-size:12px}.video-player{border-radius:12px}.video-play{width:54px;height:54px;box-shadow:0 0 0 7px #79dfcc22}.video-play svg{width:27px;height:27px}.video-poster-label{bottom:14px;right:16px;left:16px;font-size:12px}.video-footer{flex-direction:column;margin-top:20px;gap:16px}.video-start{width:100%;justify-content:center;font-size:14px;padding:14px 16px}}
@media(prefers-reduced-motion:reduce){.video-play{transition:none}}

/* Product-led detail: agent portrait for contact, type and fine rules for links. */
.video-start{gap:12px;box-shadow:inset 0 1px 0 #ffffff12;transition:background-color .2s,box-shadow .2s}.video-start img{width:26px;height:26px;object-fit:contain;flex:none}.video-start:hover{box-shadow:inset 0 0 0 1px #79dfcc80}.watch-link,.video-external,.learning-replay{position:relative;text-decoration:none;padding-bottom:5px;width:fit-content}.watch-link:after,.video-external:after,.learning-replay:after{content:'';position:absolute;bottom:0;inset-inline-end:0;width:100%;height:1px;background:currentColor;opacity:.3;transform:scaleX(.35);transform-origin:right;transition:transform .22s,opacity .22s}.watch-link:hover:after,.video-external:hover:after,.learning-replay:hover:after{transform:scaleX(1);opacity:.8}.video-start:focus-visible,.watch-link:focus-visible,.video-external:focus-visible,.learning-replay:focus-visible{outline:2px solid #2f7fe0;outline-offset:5px}.video-play{box-shadow:0 4px 20px #0003}.video-poster:hover .video-play{box-shadow:0 5px 24px #0005}.video-poster-label{font-weight:500;letter-spacing:.1px}.question-toggle{border:0;border-radius:0}.value-questions details[open] .question-toggle{background:transparent}.value-questions details[open] .question-toggle:before,.value-questions details[open] .question-toggle:after{background:#276957}
@media(prefers-reduced-motion:reduce){.video-start,.watch-link:after,.video-external:after,.learning-replay:after{transition:none}}