/* WAM Agentics — shared stylesheet (homepage, About, 404, thanks) */
html{-webkit-text-size-adjust:100%}
body{margin:0;background:#f4f3f0;color:#141414;font-family:"DM Sans",system-ui,sans-serif;overflow-x:clip;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
*{box-sizing:border-box}
a{color:#141414;text-decoration:none}
a:hover{color:#C9A84C}
h1,h2,h3{color:#0d1628}
#doc h1,#doc h2,#doc h3,#podcast-sample h2,#testimonial h2{color:inherit}
summary{list-style:none;cursor:pointer}
summary::-webkit-details-marker{display:none}
details[open] span[data-chev]{transform:rotate(90deg)}
::selection{background:#C9A84C;color:#0d1628}
input:focus-visible,textarea:focus-visible,a:focus-visible,summary:focus-visible{outline:2px solid #C9A84C;outline-offset:2px}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}
/* activity probe: view timelines are only trusted once one has reported a real time */
#vtProbe{position:absolute;left:0;width:1px;opacity:0;pointer-events:none;view-timeline-name:--vtprobe;view-timeline-axis:block}
#vtProbeKid{width:1px;height:1px;animation:vtProbeK linear both;animation-timeline:--vtprobe;animation-range:cover 0% cover 100%}
@keyframes vtProbeK{0%{opacity:0}100%{opacity:.01}}
/* one scene: the laptop pins, zooms into the right column, then its single document scrolls while annotations pass on the left */
#scene{position:relative;timeline-scope:--zoomtl,--anns}
#zoomTrack{position:absolute;top:0;left:0;width:1px;height:200vh;pointer-events:none;view-timeline-name:--zoomtl;view-timeline-axis:block}
#stageWrap{position:sticky;top:0;height:100vh;z-index:2;pointer-events:none;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:24px;padding-top:0}
#scene{margin-top:-6vh}
#zoomFrame{pointer-events:auto;width:44vw;transform-origin:50% 50%;will-change:transform}
#zoomScreen{aspect-ratio:3/2}
#doc{position:relative;font-size:clamp(8px,.74vw,12px);will-change:transform;font-family:"DM Sans",system-ui,sans-serif}
#briefAnns{position:relative;z-index:1;view-timeline-name:--anns;view-timeline-axis:block;width:42vw;padding:0 clamp(24px,3vw,56px) 0 max(24px,calc((100vw - 1360px) / 2))}
#briefAnns > div{min-height:30vh;display:flex;flex-direction:column;justify-content:center;padding:12px 0}
#briefAnns > div:nth-of-type(1),#briefAnns > div:last-of-type{min-height:55vh}
#briefAnns[data-paired="1"] > div{display:none}
#briefAnns[data-paired="1"] > div:nth-of-type(1){display:block}
html[data-live="1"] #doc [data-part]{opacity:.42}
@keyframes zFrame{0%{transform:translate(0px,0px) scale(1)}100%{transform:translate(var(--zx,0px),var(--zy,0px)) scale(var(--zs,1.4))}}
@keyframes zBezel{0%{opacity:1}60%,100%{opacity:0}}
@keyframes zScreen{0%{border-radius:8px}60%,100%{border-radius:0px}}
@keyframes annIn{0%{opacity:0;transform:translateY(14px)}100%{opacity:1;transform:translateY(0px)}}
@supports (animation-timeline: view()){
#zoomFrame,#zoomBezel,#zoomBase,#zoomScreen{animation-timeline:--zoomtl;animation-range:contain 0% contain 100%;animation-fill-mode:both;animation-timing-function:linear}
#zoomFrame{animation-name:zFrame;animation-timing-function:cubic-bezier(.45,0,.2,1)}
#zoomBezel,#zoomBase{animation-name:zBezel}
#zoomScreen{animation-name:zScreen}
#briefAnns{animation:annIn linear both;animation-timeline:--zoomtl;animation-range:contain 72% contain 100%}
}
/* static: no live scroll timelines, or a narrow screen — everything reads in natural flow */
html[data-static="1"] #scene{display:flex;flex-direction:column}
html[data-static="1"] #zoomTrack{display:none}
html[data-static="1"] #stageWrap{position:static;height:auto;padding:0 24px clamp(36px,5vw,64px);pointer-events:auto;z-index:auto}
html[data-static="1"] #zoomFrame,html[data-static="1"] #zoomBezel,html[data-static="1"] #zoomBase,html[data-static="1"] #zoomScreen,html[data-static="1"] #briefAnns,html[data-static="1"] #doc,html[data-static="1"] #doc [data-part]{animation:none !important;transform:none !important;opacity:1 !important}
html[data-static="1"] #zoomFrame{width:min(940px,100%)}
html[data-static="1"] #zoomScreen{aspect-ratio:auto;border-radius:8px !important}
html[data-static="1"] #doc{font-size:15px}
html[data-static="1"] #doc [data-part]{border-left-color:transparent !important;background-color:transparent !important}
html[data-static="1"] #briefAnns{order:-1;width:100%;max-width:1240px;margin:0 auto;padding:0 24px clamp(28px,4vw,48px)}
html[data-static="1"] #briefAnns > div{min-height:0;display:none;padding:0}
html[data-static="1"] #briefAnns > div:nth-of-type(1){display:block}
#loadOverlay{position:fixed;inset:0;z-index:9999;background:#f4f3f0;pointer-events:none;animation:ovOut 200ms ease 600ms both}
#loadLine{position:absolute;top:50%;left:0;width:100%;height:1px;background:#C9A84C;transform:scaleX(0);transform-origin:0 50%;animation:lineDraw 500ms ease-in-out both}
@keyframes lineDraw{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes ovOut{from{opacity:1}to{opacity:0}}
html[data-skiploader="1"] #loadOverlay{display:none}
#navMenu{display:none}
/* below 900 the artifact is a plain card: no pin, no zoom, no bezel */
@media (max-width:900px){
#zoomTrack{display:none}
#stageWrap{position:static !important;height:auto !important;pointer-events:auto !important;z-index:auto !important;padding:0 16px !important}
#scene{margin-top:0 !important;display:flex;flex-direction:column}
#zoomFrame,#zoomBezel,#zoomBase,#zoomScreen,#briefAnns,#doc,#doc [data-part]{animation:none !important;transform:none !important;opacity:1 !important}
#zoomBezel,#zoomBase{display:none !important}
#zoomFrame{width:100% !important}
#zoomScreen{aspect-ratio:auto !important;border-radius:8px !important}
#doc [data-part]{border-left-color:transparent !important;background-color:transparent !important}
#briefAnns{width:100% !important;max-width:none !important;padding:0 16px clamp(24px,5vw,40px) !important}
#briefAnns > div{min-height:0 !important;padding:0 !important}
}
@media (max-width:768px){
#navBar{padding:0 16px;height:56px}
#navLinks{display:none !important}
#navBar{gap:10px !important}
#navCta{margin-left:auto;padding:10px 12px !important;font-size:10px !important;letter-spacing:.1em !important}
#navBurger{display:flex !important}
#navMenu[data-open="1"]{display:flex !important}
#pageWrap > section:not(#scene),#pageWrap > footer{padding-left:16px !important;padding-right:16px !important}
.page-home #top{padding-top:22px !important}
#heroEyebrow{font-size:10px !important;letter-spacing:.16em !important;margin-bottom:20px !important}
#heroEyebrow span{white-space:normal !important;line-height:1.8;padding:5px 9px !important}
#heroH1{font-size:clamp(24px,7.4vw,34px) !important}
#heroCtas{flex-direction:column !important;gap:12px !important;margin-top:26px !important}
#heroCtas a{width:100%;justify-content:center;padding:18px 16px !important}
#probSolSec{padding:32px 16px 0 !important}
#probSol{grid-template-columns:1fr !important;gap:24px !important}
#probSol > div{padding:26px 20px !important}
#probSol [data-ps-body]{font-size:17px !important}
#doc{font-size:13px !important}
#docHero{padding:1.6em 1.2em 2em !important}
#mktTiles{grid-template-columns:1fr 1fr !important}
#bookTiles{grid-template-columns:1fr 1fr !important}
#fedStrip{flex-direction:column;gap:.55em !important;align-items:flex-start;padding:1em 1.4em !important}
#briefSections{padding:1.6em 1.2em 2.2em !important}
#podcast-sample{padding:64px 16px !important}
#playBtn{width:64px !important;height:64px !important;font-size:20px !important}
#testimonial{padding:56px 16px !important}
#why{padding:56px 16px 44px !important}
#whyGrid{grid-template-columns:1fr !important;row-gap:16px !important}
#whyGrid > div{padding:32px 0 24px !important}
#audience,#onboarding{padding:0 16px 56px !important}
.page-home #pricing{padding:56px 16px !important}
#request{padding:0 16px 56px !important}
#bookGrid{grid-template-columns:1fr !important}
#bookWidget .calendly-inline-widget{height:650px !important}
[data-body]{font-size:16px !important}
footer nav a{min-height:44px !important;display:inline-flex !important;align-items:center !important}
}
@media (max-width:400px){
#doc{font-size:12px !important}
}
@media (max-width:768px){
#briefSections [data-brief-body]{font-size:16px !important;line-height:1.6 !important;padding-left:0 !important}
}

/* ---------- About ---------- */
#founders [data-photo]{width:240px;height:240px}
#founders img{object-position:50% 22%}
/* his source frames the subject much smaller: zoom inside the clipping tile so both heads read at one scale */
#founders img[alt="Santi Miguel"]{object-position:50% 30%;transform:scale(1.62);transform-origin:50% 51%;filter:brightness(.94) saturate(1.16) sepia(.06)}
html[data-reveal-ready="1"] [data-rise]{opacity:0;transform:translateY(14px);transition:opacity 400ms ease-out,transform 400ms ease-out}
html[data-reveal-ready="1"] [data-rise][data-in="1"]{opacity:1;transform:translateY(0)}
@media (prefers-reduced-motion: reduce){html[data-reveal-ready="1"] [data-rise]{opacity:1;transform:none;transition:none}}
[data-rail]{display:grid;grid-template-columns:180px minmax(0,640px);gap:64px;max-width:1000px;margin:0 auto}
[data-rail] > [data-eyebrow]{padding-top:10px}
@media (max-width:768px){
#about-top{padding:56px 16px !important}
#about-top h1{font-size:clamp(28px,8.4vw,40px) !important}
#founders{padding:48px 16px !important}
#founderGrid{grid-template-columns:1fr !important;gap:48px !important}
#founders h2{font-size:28px !important}
section[data-rise]{padding-left:16px !important;padding-right:16px !important;padding-top:52px !important;padding-bottom:52px !important}
section[data-rise] h2{font-size:clamp(26px,7.4vw,34px) !important}
section[data-rise] h3{font-size:23px !important}
.page-about footer,.page-sub footer{padding:44px 16px 28px !important}
#founders [data-photo]{width:180px;height:180px}
}
@media (max-width:900px){
[data-rail]{grid-template-columns:1fr;gap:26px;max-width:680px}
[data-rail] > [data-eyebrow]{padding-top:0}
}

/* ---------- hover states (inline styles need !important to lose) ---------- */
[data-hv="h1"]:hover{background:rgba(13,22,40,.06) !important}
[data-hv="h2"]:hover{background:#d4b856 !important;border-color:#1a2847 !important;box-shadow:0 4px 12px rgba(0,0,0,.12) !important}
[data-hv="h3"]:hover{background:#d4b856 !important}
[data-hv="h4"]:hover{background:#fff6e6 !important}
[data-hv="h5"]:hover{background:#d4b856 !important;transform:scale(1.04) !important}
[data-hv="h6"]:hover{border-bottom-color:#C9A84C !important;color:#8a6f22 !important}





/* ---------- Pocket Pulse page ---------- */
/* pp:start */
/* phone version of the home zoom: same scene, a 9:19.5 frame, SMS first */
#pageWrap[data-page="pp"] #zoomFrame{width:min(20vw,calc((100vh - 170px) * 9 / 19.5))}
#pageWrap[data-page="pp"] #zoomScreen{aspect-ratio:9/19.5;border-radius:34px}
html:not([data-static="1"]) #pageWrap[data-page="pp"] #zoomScreen{container-type:size}
#pageWrap[data-page="pp"] #doc{font-size:4.1cqw}
html:not([data-static="1"]) #pageWrap[data-page="pp"] #doc [data-part="0"]{min-height:100cqh}
#pageWrap[data-page="pp"] #zoomBase{display:none !important}
@keyframes ppScreen{0%{border-radius:34px}60%,100%{border-radius:18px}}
@keyframes ppTap{0%{opacity:0;transform:scale(.3)}30%{opacity:1;transform:scale(.85)}55%{opacity:.9;transform:scale(.7)}100%{opacity:0;transform:scale(1.9)}}
@keyframes ppLink{0%,30%{background-color:transparent}45%,70%{background-color:rgba(201,168,76,.28)}100%{background-color:transparent}}
#ppTapDot{position:absolute;left:50%;top:50%;width:2.6em;height:2.6em;margin:-1.3em 0 0 -1.3em;border-radius:50%;background:rgba(201,168,76,.5);opacity:0;pointer-events:none}
@supports (animation-timeline: view()){
#pageWrap[data-page="pp"] #zoomScreen{animation-name:ppScreen}
#ppTapDot{animation:ppTap linear both;animation-timeline:--zoomtl;animation-range:contain 34% contain 62%}
#ppSmsLink{animation:ppLink linear both;animation-timeline:--zoomtl;animation-range:contain 34% contain 70%}
}
html[data-static="1"] #ppTapDot{display:none}
html[data-static="1"] #pageWrap[data-page="pp"] #zoomFrame{width:min(420px,100%)}
html[data-static="1"] #pageWrap[data-page="pp"] #zoomScreen{aspect-ratio:auto;border-radius:28px !important}
html[data-static="1"] #pageWrap[data-page="pp"] #doc{font-size:15px}
@media (max-width:900px){
#pageWrap[data-page="pp"] #zoomFrame{width:min(520px,100%) !important}
#pageWrap[data-page="pp"] #zoomScreen{aspect-ratio:auto !important;container-type:normal !important;border-radius:22px !important}
#pageWrap[data-page="pp"] #doc{font-size:14px !important}
#pageWrap[data-page="pp"] #doc [data-part="0"]{min-height:0 !important}
}
#ppSignupCard[data-sent="1"] form{display:none}
#ppSignupCard[data-sent="0"] #ppSuccess{display:none}
#ppSignupCard input[type="text"],#ppSignupCard input[type="email"],#ppSignupCard input[type="tel"],#ppSignupCard textarea{width:100%;min-height:48px;font-family:"DM Sans",system-ui,sans-serif;font-size:16px;color:#141414;background:#fff;border:1px solid rgba(20,20,20,.18);border-radius:8px;padding:12px 14px;transition:border-color 160ms ease}
#ppSignupCard input[type="text"]:hover,#ppSignupCard input[type="email"]:hover,#ppSignupCard input[type="tel"]:hover,#ppSignupCard textarea:hover{border-color:rgba(13,22,40,.45)}
#ppSignupCard textarea{resize:vertical;min-height:96px;line-height:1.5}
#ppSignupCard label[data-plan]{display:flex;align-items:center;gap:12px;min-height:52px;padding:12px 16px;border:1px solid rgba(20,20,20,.18);border-radius:8px;cursor:pointer;transition:border-color 160ms ease,background 160ms ease}
#ppSignupCard label[data-plan]:hover{border-color:#C9A84C}
#ppSignupCard label[data-plan]:has(input:checked){border-color:#C9A84C;background:rgba(201,168,76,.08)}
#ppSignupCard input[type="checkbox"]{accent-color:#C9A84C;width:20px;height:20px;margin:2px 0 0;flex:0 0 auto}
#ppSignupCard input[type="radio"]{accent-color:#C9A84C;width:18px;height:18px;margin:0}
#ppFaq details[open] summary span[data-chev]{transform:rotate(90deg)}
@media (max-width:900px){
#ppSignupGrid{grid-template-columns:1fr !important}
#ppSameCards{grid-template-columns:1fr !important}
}
@media (max-width:768px){
#ppHero{padding:22px 16px 0 !important}
#ppNote,#ppWhy,#ppSame,#ppSteps,#ppPricing,#ppSignup,#ppFaq{padding-left:16px !important;padding-right:16px !important}
#ppWhy,#ppPricing{padding-top:56px !important;padding-bottom:56px !important}
#ppSteps,#ppSignup,#ppFaq{padding-bottom:56px !important}
#ppSame{padding-top:56px !important;padding-bottom:40px !important}
#ppWhyGrid{grid-template-columns:1fr !important;row-gap:16px !important}
#ppWhyGrid > div{padding:32px 0 24px !important}
#ppGetGrid{grid-template-columns:1fr 1fr !important;gap:12px !important}
#ppGetGrid > div{padding:18px 14px !important}
#ppGetGrid h3{font-size:16px !important;line-height:1.3 !important}
#ppGetGrid p{font-size:14px !important;line-height:1.55 !important}
#ppSameCards > div{padding:26px 20px 14px !important}
#ppTableWrap th,#ppTableWrap td{padding:12px 10px !important;font-size:14px !important}
#ppTableWrap thead th{font-size:11px !important;letter-spacing:.1em !important}
#ppSignupCard{padding:26px 20px !important}
}
/* pp:end */


/* forms:start */
[data-sent="1"] > form{display:none}
[data-sent="0"] > [data-success]{display:none}
#smsCard input[type="text"],#smsCard input[type="email"],#smsCard input[type="tel"]{width:100%;min-height:48px;font-family:"DM Sans",system-ui,sans-serif;font-size:16px;color:#141414;background:#fff;border:1px solid rgba(20,20,20,.18);border-radius:8px;padding:12px 14px;transition:border-color 160ms ease}
#smsCard input[type="text"]:hover,#smsCard input[type="email"]:hover,#smsCard input[type="tel"]:hover{border-color:rgba(13,22,40,.45)}
#smsCard input[type="checkbox"]{accent-color:#C9A84C;width:20px;height:20px;margin:2px 0 0;flex:0 0 auto}
@media (max-width:768px){#smsCard{padding:26px 20px !important}}
/* forms:end */