.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
body:has(.reference-scene){margin:0;background:#e8efdf;color:white}body:has(.reference-scene)>header{display:none}body:has(.reference-scene) main.wrap{width:100%;max-width:none;min-height:0}.reference-scene{position:relative;width:100%;aspect-ratio:2048/1143;isolation:isolate;overflow:hidden;font-family:Arial,sans-serif;container-type:inline-size}.reference-art{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;z-index:-1;pointer-events:none}.reference-brand{position:absolute;right:13.5%;top:2%;width:10%;height:6.6%;border-radius:10px}.reference-nav{position:absolute;left:14.55%;top:3.7%;font:400 1.48cqw/1.3 Arial,sans-serif;text-decoration:none;color:#fffdf4;text-shadow:0 1px 2px #617c7c55}.reference-tagline{position:absolute;left:27%;top:49%;width:46%;margin:0;text-align:center;font:400 1.76cqw/1.4 Arial,sans-serif;color:#fffef6;white-space:nowrap;text-shadow:0 2px 3px #30536b70}.reference-form{position:absolute;left:25.35%;top:57.85%;width:49.3%;height:9.5%;margin:0}.reference-form input{position:absolute;right:11%;top:9%;width:69%;height:82%;border:0;border-radius:0;background:transparent;color:#fffef7;font:400 1.75cqw/1.4 Arial,sans-serif;text-align:right;padding:0 1%;outline:none;min-width:0;text-shadow:0 1px 3px #5c7f8a33}.reference-form input::placeholder{color:#fffdf4;opacity:.92}.reference-form input:focus-visible{outline:1px solid #fffce5;outline-offset:0;border-radius:9px}.reference-form button{position:absolute;left:1.7%;top:12%;width:17%;height:72%;border:0;border-radius:999px;background:transparent;color:white;font:700 1.76cqw/1 Arial,sans-serif;padding:0;text-shadow:0 1px 3px #14527366}.reference-form button:disabled{cursor:not-allowed}#answer-status{position:absolute;top:68.4%;left:25%;width:50%;margin:0;text-align:center;font:400 .67cqw/1.5 Arial,sans-serif;color:#fffef7;text-shadow:0 1px 4px #284e66,0 0 8px #284e66}
body:has(.reference-scene) footer{margin:0;padding:16px 0;background:#e8efdf;color:#3d574b;border:0}body:has(.reference-scene) footer .wrap{display:flex;align-items:center;justify-content:space-between;gap:15px;width:90%}body:has(.reference-scene) footer b{font-size:13px;font-weight:400}body:has(.reference-scene) footer p{display:none}body:has(.reference-scene) footer a{color:#3d574b;font-size:12px}.skip:focus{z-index:10;color:#183d49;background:white}
@media(max-width:700px){.reference-scene{min-height:0}#answer-status{font-size:1.1cqw}body:has(.reference-scene) footer{padding:12px 0}body:has(.reference-scene) footer b,body:has(.reference-scene) footer a{font-size:11px}}

/* Keep the complete scene inside the viewport without adding page height. */
html:has(.reference-scene),body:has(.reference-scene){height:100%;min-height:0;overflow:hidden}
body:has(.reference-scene){background:#99cce4}
body:has(.reference-scene) main.wrap{height:100dvh;min-height:0;overflow:hidden}
.reference-scene{width:100%;height:100dvh;aspect-ratio:auto;overflow:hidden;background:#afd8ed}
.reference-scene:before{content:'';position:absolute;inset:-30px;z-index:-2;background:url('/assets/cloud-design-motto.png') center/cover no-repeat;filter:blur(25px);opacity:.8}
.reference-layout{position:absolute;width:min(100vw,calc(100dvh * 2048 / 1143));aspect-ratio:2048/1143;left:50%;top:50%;transform:translate(-50%,-50%);container-type:inline-size}
.reference-art{mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent)}
.reference-tagline{left:33.9%;top:49.9%;width:32.2%;font-size:1.232cqw}
.reference-form{left:32.745%;top:56.095%;width:34.51%;height:6.65%}
.reference-form input{font-size:1.225cqw}
.reference-form button{font-size:1.232cqw}
#answer-status{top:63.48%;font-size:max(9px,.55cqw)}
body:has(.reference-scene) footer{position:fixed;bottom:0;left:0;right:0;z-index:3;height:30px;padding:3px 0;background:#ebf6fc88;backdrop-filter:blur(8px);color:#35566a}
body:has(.reference-scene) footer .wrap{height:100%}
body:has(.reference-scene) footer a,body:has(.reference-scene) footer b{font-size:11px;color:#35566a}
@media(max-width:700px){.reference-layout{width:190vw;max-width:none;top:48%}.reference-nav{left:27%;font-size:2.1cqw}.reference-tagline{font-size:1.7cqw;white-space:normal;line-height:1.3;left:32%;width:36%;top:49%}.reference-form input{font-size:1.8cqw}.reference-form button{font-size:1.8cqw}#answer-status{font-size:1.25cqw}}

/* Match the two-line gold heading and lowered question field. */
.reference-tagline{top:58.5%}
.reference-form{top:65.5%}
#answer-status{top:73%}
@media(max-width:700px){.reference-tagline{top:58.5%}}

/* Deep blue headline lettering, twice the previous type size. */
.reference-tagline{left:20%;width:60%;top:58.5%;font-family:Arial,"Segoe UI",sans-serif;font-size:calc(1.232cqw * 1.35 * 2);font-weight:900;line-height:1.1;white-space:nowrap;text-shadow:none;color:#07358f}
.cosmic-tagline{display:inline-block;color:#07358f;text-shadow:0 1px 0 #79a6dd,0 2px 0 #042466,0 3px 2px #082b6660}
.heading-lightning{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:2}
.lightning-bolt{fill:none;stroke-linecap:round;stroke-linejoin:round;opacity:0;animation:diagonal-lightning 3.5s linear infinite}
.lightning-right{animation-delay:.3s}
.bolt-halo{stroke:#65dfff;stroke-width:15;filter:url(#bolt-glow)}
.bolt-core{stroke:#edfcff;stroke-width:4}
.bolt-branch{stroke:#c4f5ff;stroke-width:1.8}
@keyframes diagonal-lightning{0%,12%{opacity:0;clip-path:inset(0 0 100% 0)}13%{opacity:.8;clip-path:inset(0 0 90% 0)}21%{opacity:.9;clip-path:inset(0 0 0 0)}30%{opacity:0;clip-path:inset(0 0 0 0)}100%{opacity:0;clip-path:inset(0 0 0 0)}}
@media(max-width:700px){.reference-tagline{left:25%;width:50%;font-size:calc(1.7cqw * 1.35 * 2);white-space:normal;line-height:1.05}}
@media(prefers-reduced-motion:reduce){.lightning-bolt{animation:none;opacity:0}}

/* The lettering asset uses the main title itself as its shape reference. */
.reference-tagline{left:35.985%;width:28.03%;top:58.3%;line-height:0}
.tagline-desktop{display:block;width:100%;height:auto;overflow:hidden}
.tagline-mobile{display:none;overflow:hidden}
@media(max-width:700px){.reference-tagline{left:30.65%;width:38.7%;top:58.3%;display:block}.tagline-desktop{display:block}.tagline-mobile{display:none}}

/* A soft moving spotlight illuminates only the blue lettering, independently of lightning. */
.type-spotlight{animation:blue-type-spotlight 9s ease-in-out infinite alternate}
@keyframes blue-type-spotlight{from{transform:translateX(100px)}to{transform:translateX(2084px)}}
@media(prefers-reduced-motion:reduce){.type-spotlight{animation:none;transform:translateX(1092px)}}

/* Warm dark-gold question text and matching answer button. */
.reference-form input{color:#80500c;font-weight:700;text-shadow:0 1px 0 #fff5d880}
.reference-form input::placeholder{color:#80500c;opacity:1}
.reference-form button{color:#704109;background:linear-gradient(180deg,#fff0bc 0%,#e6bc64 48%,#c8943d 100%);border:1px solid #e6bf6c;box-shadow:inset 0 1px 1px #fff8df,0 1px 3px #55402060;text-shadow:0 1px 0 #fff0bb}

.mobile-emblem{display:none}

/* The phone layout flows vertically; desktop keeps the original scene. */
@media(max-width:700px){
  html:has(.reference-scene){height:auto;min-height:100%;overflow-x:clip;overflow-y:auto}
  body:has(.reference-scene){display:flex;flex-direction:column;height:auto;min-height:100svh;overflow-x:clip;overflow-y:visible;background:#76c4ee url('/assets/cloud-design-motto.png') left center/auto max(1200px,140svh) no-repeat;color:#103e6b}
  body:has(.reference-scene) main.wrap{display:flex;align-items:center;flex:1;width:100%;height:auto;min-height:0;overflow:visible;padding:0}
  body:has(.reference-scene) .reference-scene{width:100%;height:auto;min-height:0;aspect-ratio:auto;background:transparent;overflow:visible}
  body:has(.reference-scene) .reference-scene:before{display:none}
  .reference-scene .reference-layout{position:relative;display:flex;flex-direction:column;align-items:center;gap:clamp(16px,2.7svh,26px);width:100%;max-width:600px;height:auto;aspect-ratio:auto;left:auto;top:auto;transform:none;margin:0 auto;padding:clamp(18px,3.5svh,34px) 20px 24px;container-type:normal;text-align:center}
  .reference-layout .hero-artwork{display:contents}
  .reference-layout .reference-art,.reference-layout .heading-lightning{display:none}
  .reference-layout .mobile-emblem{display:block;flex:none;width:clamp(76px,23vw,100px);height:clamp(76px,23vw,100px);overflow:hidden;border-radius:50%;box-shadow:0 0 28px #83eaff77}
  .reference-layout #hero-title{position:static!important;width:auto;height:auto;padding:0;margin:0;overflow:visible;clip:auto;clip-path:none;white-space:normal;border:0;font:900 clamp(44px,14vw,72px)/1.14 Arial,sans-serif;letter-spacing:-1.3px;color:#ffe6a6;text-shadow:0 1px 0 #fffbed,0 2px 0 #cf983c,0 3px 0 #a16a1e,0 5px 7px #184d78b3}
  .reference-layout #hero-title span{display:block}
  .reference-layout #hero-title span+span{font-size:.81em;margin-top:8px;letter-spacing:-.5px}
  .reference-layout .reference-tagline{position:static;width:100%;max-width:480px;margin:0;font:800 clamp(25px,6.8vw,36px)/1.3 Arial,sans-serif;color:#073b79;white-space:normal;text-shadow:0 1px 0 #e5f7ff88;text-wrap:balance}
  .reference-layout .reference-tagline>span{position:static!important;display:block;width:auto;height:auto;padding:0;margin:0;overflow:visible;clip:auto;clip-path:none;white-space:normal}
  .reference-layout .reference-tagline svg{display:none}
  .reference-layout .reference-form{position:static;display:flex;flex-direction:column;align-items:center;gap:16px;width:100%;height:auto;margin:0}
  .reference-layout .reference-form input{position:static;display:block;right:auto;top:auto;width:100%;height:64px;min-height:64px;padding:13px 16px;border:2px solid #b8ecff;border-radius:18px;background:linear-gradient(135deg,#f5fcfff5,#e7f6ffe6);color:#604008;font:700 18px/1.5 Arial,sans-serif;text-align:center;text-shadow:none;box-shadow:inset 0 1px 7px #a7ddef66,0 4px 18px #075a8c33}
  .reference-layout .reference-form input::placeholder{color:#715017;opacity:1}
  .reference-layout .reference-form button{position:static;display:block;left:auto;top:auto;width:100%;max-width:300px;height:58px;min-height:58px;padding:12px 24px;border:1px solid #b78228;border-radius:18px;background:linear-gradient(180deg,#fff2c7,#ecc671 50%,#d8a44b);color:#68400c;font:800 25px/1.25 Arial,sans-serif;text-shadow:0 1px 0 #fff5d5;box-shadow:inset 0 1px 1px #fffbe9,0 5px 13px #77541d33;cursor:pointer;touch-action:manipulation}
  .reference-layout #answer-status{position:static;left:auto!important;top:auto;width:100%;max-width:none!important;margin:0;color:#163f60!important;font:500 14px/1.65 Arial,sans-serif!important;text-shadow:none;text-align:center}
  .reference-layout .reopen-chat{min-height:44px;margin:10px auto 0;padding:8px 20px;font-size:16px}
  body:has(.reference-scene) footer{position:static;flex:none;width:100%;height:auto;min-height:54px;padding:6px 16px max(6px,env(safe-area-inset-bottom));margin:0;background:#eaf7ffb8;border-top:1px solid #e7c78077}
  body:has(.reference-scene) footer .wrap{width:100%;height:auto;min-height:40px;justify-content:center;gap:12px;flex-wrap:wrap}
  body:has(.reference-scene) footer b{font-size:13px}
  body:has(.reference-scene) footer a{display:inline-flex;align-items:center;min-height:40px;font-size:13px}
  body:has(.reference-scene) footer .row{gap:18px}
  .chat-backdrop{top:var(--chat-top,0px);bottom:auto;height:var(--chat-height,100dvh);padding:max(6px,env(safe-area-inset-top)) max(6px,env(safe-area-inset-right)) max(6px,env(safe-area-inset-bottom)) max(6px,env(safe-area-inset-left))}
  .chat-backdrop .chat-panel{width:100%;height:100%;max-height:100%;border-radius:16px}
  .chat-header h2{font-size:22px;line-height:1.25}.chat-header p{font-size:14px;line-height:1.45}
  .chat-messages{min-height:60px}.chat-composer{flex-shrink:0}
  .chat-composer textarea{font-size:16px;min-height:58px}.chat-composer button{min-height:44px}
  .lawyer-referral a{min-height:40px;line-height:1.5;padding:8px 0}
  .info-page{width:100%!important;margin:0 auto!important;padding:24px 18px!important;overflow-wrap:anywhere}
  .info-page h1{font-size:36px}
}
@media(max-width:360px){
  .reference-scene .reference-layout{padding-right:14px;padding-left:14px;gap:16px}
  .reference-layout .reference-form input{font-size:16px;padding-right:10px;padding-left:10px}
  .chat-header h2{font-size:20px}.chat-header{gap:6px;padding:12px!important}
}
@media(max-width:700px) and (max-height:500px){
  .reference-layout .mobile-emblem{width:64px;height:64px}
  .reference-scene .reference-layout{padding-top:16px;gap:14px}
  .chat-header p,.chat-composer>p{display:none}
  .chat-header{padding:8px 12px!important}.chat-composer{padding:8px 12px}
}