/* Adaa — site styles.
   Sections 1-3 mirror what the Claude Design runtime injected around the page;
   section 4 is the design's own stylesheet. Most styling is inline in index.html. */

/* 1. Print baseline */
@media print {
  @page { margin: 0.5cm; }
  figure, table { break-inside: avoid; }
  #dc-root, #dc-root > .sc-host { height: auto; }
  *, *::before, *::after {
    print-color-adjust: exact; -webkit-print-color-adjust: exact;
    backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
    animation-delay: -99s !important; animation-duration: .001s !important;
    animation-iteration-count: 1 !important; animation-fill-mode: both !important;
    animation-play-state: running !important; transition-duration: 0s !important;
  }
}

/* 2. Full-page host */
html,body{height:100%;margin:0}#dc-root,#dc-root>.sc-host{height:100%}

/* 3. Hover styles (from the design's style-hover attributes) */
.scp0:hover{background:#1A52D4 !important;color:#FFFFFF !important}
.scp1:hover{border-color:#4D7EFF !important;background:rgba(77,126,255,0.12) !important;color:#FFFFFF !important}
.scp2:hover{color:#1A52D4 !important;gap:16px !important}
.scp3:hover{color:#4D7EFF !important}
.scp4:hover{color:#4D7EFF !important;border-color:#4D7EFF !important}
.scp5:hover{color:#FFFFFF !important}

/* 4. Page styles */
*{box-sizing:border-box}
/* the plain arrow over text (no I-beam); only fields you type into keep the text cursor, links and buttons keep the hand */
html{cursor:default}
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]):not([type=submit]):not([type=button]):not([type=reset]),textarea,[contenteditable="true"]{cursor:text}
html{scroll-behavior:smooth;scroll-padding-top:96px}
html,body{overflow-x:clip}
body{margin:0;background:#00192D;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:#043BC1;text-decoration:none}
a:hover{color:#1A52D4}
:focus-visible{outline:2px solid #4D7EFF;outline-offset:2px}
::selection{background:#4D7EFF;color:#FFFFFF}
@keyframes cellDrop{from{opacity:0;transform:translateY(-12px)}to{opacity:1;transform:none}}
@keyframes cellSweep{from{opacity:0;transform:translateX(-12px)}to{opacity:1;transform:none}}
@keyframes t75{from{opacity:0}to{opacity:.75}}
@keyframes t45{from{opacity:0}to{opacity:.45}}
@keyframes t20{from{opacity:0}to{opacity:.2}}
@keyframes wordIn{from{opacity:0;transform:translateX(-30px)}to{opacity:1;transform:none}}
@keyframes fieldPulse{0%,100%{opacity:.05}50%{opacity:.38}}
@keyframes fieldIn{from{opacity:0;transform:translateY(-8px)}to{transform:none}}
@keyframes feedRun{0%,100%{opacity:.06}10%{opacity:.9}26%{opacity:.06}}
@keyframes cellPop{0%,100%{transform:none}50%{transform:scale(1.6)}}
@keyframes sigRun{0%,100%{opacity:var(--b,.3)}7%{opacity:1}32%{opacity:var(--b,.3)}}
@keyframes sigFill{0%{transform:scaleY(0);opacity:.3}18%{transform:none;opacity:1}72%{transform:none;opacity:1}90%,100%{transform:scaleY(0);opacity:.3}}
@keyframes sigFlicker{0%,100%{opacity:var(--b,.3)}50%{opacity:1}}
@keyframes boil{0%,100%{opacity:1}50%{opacity:0}}
@keyframes ticker{from{transform:none}to{transform:translateX(-50%)}}
@keyframes beat75{0%,100%{opacity:.75}10%{opacity:.08}40%{opacity:.75}}
@keyframes beat45{0%,100%{opacity:.45}10%{opacity:.06}40%{opacity:.45}}
@keyframes beat20{0%,100%{opacity:.2}10%{opacity:.04}40%{opacity:.2}}
@keyframes glowIn{from{opacity:0;transform:scale(.92)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion: reduce){[data-build]{animation:none!important}[data-ticker] > div{animation:none!important}[data-beat]{animation:none!important}}
[data-ticker]:hover > div{animation-play-state:paused}
@media (max-width:880px){[data-svc]{grid-column:1/-1!important}[data-cols]{grid-template-columns:1fr!important}}
@media (max-width:760px){[data-navlinks]{display:none!important}}
@media (max-width:880px){[data-cursor]{display:none!important}}
/* small screens: the scroll progress rail stays, slimmer and inside the 28px side gutter, and lets taps through */
@media (max-width:880px){[data-rail]{right:8px!important;gap:3px!important;pointer-events:none}[data-rail] i{width:8px!important;height:8px!important}}

/* 5. Ad-Man (the service game) */
[data-entry]{display:flex;flex-direction:column;gap:16px}
[data-entry][hidden]{display:none}
[data-game-reveal] [data-entry] h3{font-size:clamp(26px,3.2vw,42px)!important;max-width:18ch}
[data-game-reveal] [data-entry] h3 ~ p{font-size:17.5px!important}
[data-game-callout]{position:absolute;display:flex;align-items:flex-start;gap:9px;max-width:26%;padding:7px 10px;border:1px solid;background:rgba(0,25,45,0.92);font-family:'Courier New',monospace;font-size:12.5px;line-height:1.35;letter-spacing:0.02em;color:#FFFFFF;transform:translateY(-50%)}
[data-game-callout] i{display:block;width:10px;height:10px;margin-top:3px;flex:none}
[data-game-callout][data-side="left"]{flex-direction:row-reverse;text-align:right}
[data-game-legend-list] li{display:flex;align-items:flex-start;gap:10px;font-family:'Courier New',monospace;font-size:12.5px;line-height:1.4;letter-spacing:0.02em;color:#FFFFFF}
[data-game-legend-list] i{display:block;width:10px;height:10px;margin-top:4px;flex:none}
[data-game-flash]{text-shadow:0 2px 28px rgba(0,25,45,0.95),0 0 3px rgba(0,25,45,1)}
@keyframes unlockFlash{0%{opacity:0;transform:scale(.8)}16%{opacity:1;transform:none}72%{opacity:1;transform:none}100%{opacity:0;transform:scale(1.03) translateY(-8px)}}
@keyframes readyIn{0%{opacity:0;transform:scale(.8)}18%{opacity:.95;transform:none}78%{opacity:.95;transform:none}100%{opacity:0;transform:scale(1.06)}}
[data-game-dir]:active{background:#043BC1!important}
[data-game-canvas]:focus-visible{outline:2px solid #4D7EFF}
@media (hover:none) and (pointer:coarse),(max-width:640px){[data-game-dpad]{display:grid!important}}
/* phones: hint, then the arrows centred, then sound / share centred below them */
@media (max-width:640px){[data-game-controls]{justify-content:center!important;column-gap:18px!important}[data-game-meta]{display:contents!important}[data-game-hint]{flex:1 1 100%;order:0}[data-game-dpad]{flex:1 1 100%;justify-content:center;order:1}[data-game-meta] > button{order:2}}
@media (prefers-reduced-motion:reduce){[data-game-flash]{animation:none!important}}

/* 6. Service cards */
[data-svc]::before{content:'';position:absolute;left:-1px;right:-1px;top:-1px;height:3px;background:var(--svc,#4D7EFF);transform:scaleX(0);transform-origin:left;transition:transform 480ms cubic-bezier(.2,.7,.2,1)}
[data-svc]:hover::before{transform:scaleX(1)}
[data-svc]:hover{box-shadow:0 24px 48px -30px rgba(0,25,45,0.45)}
[data-svc]:hover [data-svc-problem]{color:var(--svc-ink,#043BC1)!important}
[data-diagram] g{transition:fill 320ms ease}
[data-svc]:hover [data-diagram] g[fill="#043BC1"]{fill:var(--svc-ink,#043BC1)}
[data-svc]:hover [data-diagram] g[fill="#4D7EFF"]{fill:var(--svc,#4D7EFF)}
[data-svc] a[href="#play"]:focus-visible{outline:2px solid var(--svc-ink,#4D7EFF);outline-offset:4px}
@keyframes spotPulse{0%,100%{transform:translateY(-50%) scale(1)}50%{transform:translateY(-50%) scale(1.08)}}
@keyframes spotNudge{0%,100%{transform:none}50%{transform:translateX(8px)}}
[data-game-callout][data-spot]{animation:spotPulse 640ms ease-in-out 4;background:rgba(77,126,255,0.22)}
[data-game-legend-list] li[data-spot]{animation:spotNudge 640ms ease-in-out 4;color:#4D7EFF}
@media (prefers-reduced-motion:reduce){[data-svc]::before,[data-game-callout][data-spot],[data-game-legend-list] li[data-spot]{animation:none!important;transition:none!important}}

/* 7. Contact form */
[data-contact] ::placeholder{color:rgba(255,255,255,0.35)}
[data-contact] input:focus,[data-contact] textarea:focus{outline:none;border-color:#4D7EFF!important;background:rgba(77,126,255,0.08)!important;box-shadow:0 0 0 3px rgba(77,126,255,0.22)}
[data-contact][data-tried] input:invalid,[data-contact][data-tried] textarea:invalid{border-color:#FF6B5B!important}
[data-contact-dd-trigger]:hover{border-color:rgba(255,255,255,0.45)!important}
[data-contact-dd-trigger]:focus-visible{outline:none;border-color:#4D7EFF!important;box-shadow:0 0 0 3px rgba(77,126,255,0.22)}
[data-contact-dropdown][data-open] [data-contact-dd-trigger]{border-color:#4D7EFF!important}
[data-contact-dropdown][data-open] [data-contact-dd-arrow]{transform:translateY(2px) rotate(-135deg)!important}
[data-contact-option]:hover{background:rgba(255,255,255,0.05);color:#FFFFFF!important}
[data-contact-option]:has(:checked){color:#FFFFFF!important}
[data-contact-option]:has(:checked) [data-contact-box]{background:var(--svc)}
[data-contact-option]:has(:focus-visible){outline:2px solid #4D7EFF;outline-offset:-2px;color:#FFFFFF!important}
[data-contact][data-sent] > :not([data-contact-status]){display:none!important}
[data-contact-status][data-kind="ok"]{border-color:#4D7EFF!important;color:#FFFFFF!important}
[data-contact-status][data-kind="error"]{border-color:#FF6B5B!important}
[data-contact-status] a{color:#4D7EFF;border-bottom:1px solid rgba(77,126,255,0.5)}
[data-contact-send]:disabled{opacity:.6;cursor:progress}
@media (max-width:640px){[data-contact]{grid-template-columns:1fr!important}[data-contact] > *{grid-column:1/-1!important}}
/* iOS Safari zooms into a field set under 16px when it takes focus (the inline 15px); !important beats the inline style */
@media (max-width:760px),(hover:none) and (pointer:coarse){[data-contact] input,[data-contact] textarea{font-size:16px!important}}
/* touch: every service row is at least a 44px target */
@media (hover:none) and (pointer:coarse){[data-contact-option]{min-height:44px}}
/* small phones: 'conversation' at the inline 32px floor is wider than the column (it pushed the form under the scroll rail) */
@media (max-width:374px){#contact h2{font-size:30px!important}}
@media (max-width:359px){#contact h2{font-size:26px!important}}
/* long service tags shorten with an ellipsis instead of widening the form past the screen */
[data-contact],[data-contact] > *{min-width:0}

/* 8. Landing intro */
html[data-intro-skip] [data-intro]{display:none}
html[data-intro-run] [data-build]{animation-play-state:paused!important}
[data-intro]{animation:introAuto 1ms linear 4200ms forwards}
@keyframes introAuto{to{visibility:hidden;pointer-events:none}}
@keyframes introRun{from{left:-48px}to{left:calc(100% - 48px)}}
@keyframes introEat{to{transform:scale(0);opacity:0}}
@keyframes introF0{0%,24.99%{opacity:1}25%,100%{opacity:0}}
@keyframes introF1{0%,24.99%{opacity:0}25%,49.99%{opacity:1}50%,74.99%{opacity:0}75%,100%{opacity:1}}
@keyframes introF2{0%,49.99%{opacity:0}50%,74.99%{opacity:1}75%,100%{opacity:0}}
[data-intro][data-intro-out]{transform:translateY(-100%);transition:transform 640ms cubic-bezier(.7,0,.2,1)}
@media (prefers-reduced-motion:reduce){[data-intro] *{animation:none!important}[data-intro-frame="1"],[data-intro-frame="2"]{display:none}[data-intro-aman]{left:calc(50% - 24px)!important}[data-intro-orb]{display:none}[data-intro][data-intro-out]{transform:none;opacity:0;transition:opacity 220ms ease}}

/* 9. Hero: the logo and the copy set as one lockup, lit from behind. The glow is anchored to the text column, the logo
   keeps the brand lockup of the header and footer logos, drawn 1:1 (the field's own 10px cells on its 14px rows; the
   viewBox cropped to the mark; scaled down on phones), and site.js thins the field out behind the words. */
[data-hero-glow]{--gx:calc(max(28px, 50% - 562px) + min(34vw, 500px));--gy:calc(50% - 72px);transform-origin:var(--gx) var(--gy);background:
  radial-gradient(min(62vw, 880px) min(38vh, 320px) at var(--gx) var(--gy), rgba(4,59,193,0.92) 0%, rgba(4,59,193,0.74) 20%, rgba(4,59,193,0.46) 42%, rgba(4,59,193,0.2) 64%, rgba(4,59,193,0.06) 84%, rgba(4,59,193,0) 100%),
  radial-gradient(52% 64% at 100% 0%, rgba(4,59,193,0.3) 0%, rgba(4,59,193,0.1) 45%, rgba(4,59,193,0) 80%)}
/* short windows: the padding gives way first, so the stack and the ticker still share one screen */
[data-hero-content]{padding:clamp(96px, 15.5vh, 140px) 28px clamp(84px, calc(34vh - 120px), 160px)}
[data-hero-lockup]{margin:0 0 42px;line-height:0}
[data-hero-logo]{display:block;width:264px;max-width:100%;height:auto;overflow:visible}
[data-hero-eyebrow]{margin:0 0 18px;font-size:11px;line-height:14px;font-weight:700;text-transform:uppercase;letter-spacing:.14em;color:#A9C1FF}
[data-hero-title]{margin:0;max-width:16.5em;font-family:Syne,sans-serif;font-weight:700;font-size:clamp(34px, calc(1.9vw + 28px), 56px);line-height:1.04;letter-spacing:-0.02em;color:#FFFFFF;text-wrap:balance}
/* the clause after the subject takes its own line in a blue-tinted ink */
[data-hero-soft]{display:block;color:#AFC5FF}
[data-hero-lede]{margin:24px 0 0;max-width:36em;font-size:17px;line-height:1.65;color:#BCC8E2;text-wrap:wrap}
[data-hero-cta]{display:flex;flex-wrap:wrap;gap:14px;margin:38px 0 0}
/* both buttons carry a 1px border (transparent on the solid one), so they match in size in a row or stacked */
[data-hero-cta] > a{font-size:14px;font-weight:600;padding:16px 28px;border:1px solid transparent}
[data-hero-cta] > a.scp1{border-color:rgba(169,188,230,0.45)}
/* short laptop windows (a 15.6in FHD screen at 150% is about 1280x577): the clamp floors give way too, so the ticker stays on screen */
@media (min-width:641px) and (max-height:600px){[data-hero-content]{padding-top:84px;padding-bottom:76px}[data-hero-lockup]{margin-bottom:32px}}
/* phones: the light sits behind the stack, the lockup steps down, and the two buttons share one row */
@media (max-width:640px){
  [data-hero-glow]{--gx:46%;--gy:44%;background:
    radial-gradient(92vw min(44vh, 380px) at var(--gx) var(--gy), rgba(4,59,193,0.9) 0%, rgba(4,59,193,0.7) 20%, rgba(4,59,193,0.42) 42%, rgba(4,59,193,0.18) 64%, rgba(4,59,193,0.05) 84%, rgba(4,59,193,0) 100%),
    radial-gradient(80% 50% at 100% 0%, rgba(4,59,193,0.26) 0%, rgba(4,59,193,0) 80%)}
  [data-hero-content]{padding:clamp(92px, 13vh, 112px) 28px clamp(76px, 12vh, 128px)}
  [data-hero-lockup]{margin-bottom:34px}
  [data-hero-logo]{width:240px}
  [data-hero-eyebrow]{margin-bottom:14px}
  [data-hero-lede]{margin-top:20px;font-size:16px;line-height:1.6}
  [data-hero-cta]{flex-wrap:nowrap;gap:10px;margin-top:30px}
  [data-hero-cta] > a{flex:1 1 auto;text-align:center;white-space:nowrap;padding:15px 8px;font-size:13.5px}
}
/* short phones (an iPhone SE in Safari is about 375x548): tighter gaps keep the buttons on the first screen */
@media (max-width:640px) and (max-height:600px){[data-hero-lockup]{margin-bottom:22px}[data-hero-eyebrow]{margin-bottom:10px}[data-hero-lede]{margin-top:16px}[data-hero-cta]{margin-top:22px}}
/* small phones: the buttons size to their labels and share the spare width, so both labels keep one line */
@media (max-width:389px){[data-hero-cta]{gap:8px}[data-hero-cta] > a{padding:15px 4px;font-size:13px}}
/* the narrowest phones stack the two buttons; at 320px a slightly smaller headline keeps to four lines */
@media (max-width:369px){[data-hero-cta]{flex-direction:column}[data-hero-cta] > a{padding:15px 16px}}
@media (max-width:359px){[data-hero-title]{font-size:30px}}