/* The live Claude reference: warm white, dark ink, flat rounded surfaces. Shared across the eight pages. Film and product remain the focal points. */ :root{--paper:#FAF9F5;--surface:#FFFFFF;--cream:#F3F2EC;--ink:#191918;--muted:#62615B;--line:#E5E3DA;--card:#F5F4EE;--radius:18px;--radius-large:24px;--max:1240px} body{background:var(--paper)}.site-header{background:rgba(250,249,245,.97);border-bottom:1px solid var(--line)}.header-inner{height:96px}.brand{font-family:var(--serif);font-size:31px;font-weight:500;letter-spacing:-.03em;gap:13px;line-height:1}.brand img{width:48px;height:48px}.brand span{white-space:nowrap}.desktop-nav{font-size:14px;gap:32px}.button{background:var(--ink);border-color:var(--ink);color:#fff;border-radius:9px;min-height:48px;font-size:14px}.button:hover{background:#353531;border-color:#353531;transform:translateY(-1px)}.button.secondary{background:transparent;border-color:#D8D6CC;color:var(--ink)}.button.secondary:hover{background:#F0EFE9;border-color:#B6B4A9}.button.small{font-size:13px}.menu-panel{border-radius:var(--radius);box-shadow:0 12px 25px rgba(28,27,18,.04)}.eyebrow{letter-spacing:.08em;color:var(--muted);font-size:11px}.eyebrow:before{background:var(--olive)}.subcopy{color:var(--muted)}.section{padding-block:94px}h2{font-size:clamp(41px,4.4vw,61px);line-height:1.04}.page-hero h1{font-size:clamp(53px,6.2vw,82px)} .launch-hero{padding:68px 0 56px;text-align:left}.launch-grid{display:grid;grid-template-columns:1fr 1.07fr;align-items:center;gap:66px}.launch-copy .eyebrow{justify-content:flex-start;margin-bottom:25px}.launch-copy h1{font-size:clamp(54px,5.8vw,79px);letter-spacing:-.035em;line-height:1.01;margin:0}.launch-copy h1 span{display:block;white-space:nowrap}.launch-copy .subcopy{font-size:17px;line-height:1.7;max-width:440px;margin:27px 0 0}.launch-copy .actions{justify-content:flex-start;gap:12px;margin-top:29px}.launch-copy .hero-note{margin-top:20px;font-size:11px;color:var(--muted)}.launch-media.hero-preview{margin-top:0;align-self:center;min-width:0}.intro-line{padding-block:29px;gap:38px;font-size:12px;border-top:1px solid var(--line)}.intro-line span{gap:9px}.intro-line .icon{width:16px;height:16px}.workspace-tour{background:#F3F2EC}.assistant-story .split{gap:65px}.assistant-symbol{display:grid;place-items:center;width:130px;height:130px;margin:auto;background:var(--paper);border:1px solid var(--line);border-radius:28px}.assistant-symbol img{width:90px;height:90px;object-fit:contain}.assistant-preview{min-height:310px;grid-template-columns:.7fr 1.3fr;gap:25px}.assistant-bubble{border-radius:14px;font-size:13px}.assistant-bubble.request{background:#F3F2EC}.assistant-status{font-size:11px}.assistant-story .quiet-list{max-width:420px}.assistant-story h2{font-size:59px} .feature-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:25px}.feature-card{padding:0;border:1px solid var(--line);border-radius:var(--radius);background:var(--card);overflow:hidden;min-height:330px;display:flex;flex-direction:column;transition:transform 650ms var(--ease),border-color 450ms}.feature-card:first-child{grid-column:span 2}.feature-card .card-top{padding:17px 26px;margin:0;border-bottom:1px solid var(--line)}.feature-card .card-top>.icon{width:17px;height:17px;color:var(--ink)}.feature-card .card-index{font:11px var(--sans);color:var(--muted)}.feature-card h3{font-family:var(--serif);font-size:35px;line-height:1.06;padding:28px 26px 0;margin-bottom:16px;letter-spacing:-.025em}.feature-card:first-child h3{font-size:43px;max-width:480px}.feature-card p{font-size:14px;line-height:1.7;padding:0 26px;max-width:510px}.feature-card .text-link{margin:27px 26px 26px;align-self:flex-start;padding-top:0;margin-top:auto;padding-bottom:3px;font-size:12px}.feature-card p+.text-link{padding-top:24px}.feature-card:hover{border-color:#C9C7BB;transform:translateY(-3px)}.directory-item{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:27px;display:flex;flex-direction:column;align-items:flex-start}.directory-item h3{font-family:var(--serif);font-size:28px;line-height:1.1}.directory-item p{font-size:14px}.directory-item .text-link{margin-top:22px}.feature-directory{gap:22px}.detail-blocks>article{border:1px solid var(--line);border-radius:var(--radius);padding:26px;background:var(--surface)}.detail-blocks{gap:22px}.detail-blocks h3{font-family:var(--serif);font-size:27px}.detail-blocks p{font-size:14px}.note-card{border-radius:var(--radius);background:var(--surface)}.note-card p{font-size:12px;line-height:1.75}.demo-frame{border-radius:var(--radius-large);border-color:var(--line);box-shadow:none}.demo-bar{background:var(--surface)}.demo-sidebar{background:#F7F6F1}.demo-sidebar .side-item:first-of-type{background:#ECEEE4}.demo-body{background:var(--surface)}.demo-tabs{background:#F1F0E9;border-radius:10px}.demo-tabs button{border-radius:7px}.prompt{border-radius:12px;background:#F8F7F2}.draft{border-radius:12px}.kanban-column{background:#F6F5EF;border-radius:12px}.deal{border-radius:10px}.candidate-card{border-radius:var(--radius);background:var(--surface)}.contact-form{border-radius:var(--radius-large)}.form-field input,.form-field select,.form-field textarea{border-radius:9px}.related-links>a{border-radius:var(--radius);background:var(--card);box-shadow:none;padding:28px}.related-links h3{font-family:var(--serif);font-size:28px}.related-links p{font-size:13px}.usecase-row{border:1px solid var(--line);border-radius:var(--radius);background:var(--card);padding:34px;margin-top:22px}.soft-section{background:#F3F2EC}.steps .step{padding:25px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius)}.step h3{font-size:19px}.step>span{font-size:29px;margin-bottom:20px}.steps{gap:24px}.closing{border-top:0;background:#F3F2EC}.closing h2 em{font-style:normal;color:var(--ink)}.footer{background:var(--paper)}.footer-brand p{font-size:13px;max-width:320px}.footer-main{gap:65px}.footer-links a{font-size:13px;line-height:1.9} @media(max-width:1150px){.launch-grid{gap:35px;grid-template-columns:1fr 1fr}.launch-copy h1{font-size:64px}.launch-copy .actions{flex-direction:column;align-items:flex-start}.feature-card:first-child h3{font-size:39px}.feature-card h3{font-size:32px}} @media(max-width:900px){.launch-grid{grid-template-columns:1fr;gap:38px}.launch-hero{padding-top:44px}.launch-copy{max-width:650px}.launch-copy h1{font-size:76px}.launch-copy .actions{flex-direction:row}.launch-copy .subcopy{max-width:560px}.launch-media{width:100%}.feature-grid{grid-template-columns:1fr 1fr}.feature-card:first-child{grid-column:span 2}.feature-card{min-height:315px}.feature-card:last-child{grid-column:span 2}.header-inner{height:88px}.brand{font-size:29px}.brand img{width:44px;height:44px}.desktop-nav{gap:23px}.section{padding-block:76px}.assistant-story h2{font-size:51px}.assistant-story .split{gap:38px}} @media(max-width:760px){.header-inner{height:80px}.mobile-menu nav{top:80px}.brand{font-size:28px;gap:10px}.brand img{width:42px;height:42px}.launch-copy h1{font-size:68px}.feature-card h3{font-size:32px}.assistant-preview{grid-template-columns:.7fr 1.3fr}.assistant-symbol{width:105px;height:105px;border-radius:22px}.assistant-symbol img{width:74px;height:74px}.usecase-row{padding:28px}.intro-line{gap:17px 25px}.intro-line span:nth-child(3){display:flex}.intro-line{font-size:11px}.section-head h2{max-width:630px}.contact-person h3{font-size:30px}.demo-frame{border-radius:18px}.feature-card .text-link{margin-bottom:25px}.detail-blocks>article{padding:24px}} @media(max-width:480px){.wrap{width:calc(100% - 36px)}.brand{font-size:26px;letter-spacing:-.03em}.brand img{width:40px;height:40px}.launch-hero{padding-top:37px;padding-bottom:34px}.launch-copy h1{font-size:clamp(47px,13.6vw,62px);line-height:1.04}.launch-copy h1 span{white-space:normal}.launch-copy .eyebrow{font-size:10px;letter-spacing:.045em;line-height:1.5;margin-bottom:19px}.launch-copy .subcopy{font-size:15px;margin-top:22px;line-height:1.7}.launch-copy .actions{gap:10px;margin-top:24px}.launch-copy .button{padding:12px 15px;font-size:12px}.launch-copy .hero-note{font-size:11px;max-width:290px;line-height:1.65}.launch-grid{gap:30px}.intro-line{justify-content:flex-start;gap:17px 22px;padding-block:25px}.intro-line span{flex:1 0 42%;font-size:11px}.section{padding-block:60px}.section-head h2{font-size:42px;line-height:1.06}.feature-grid{grid-template-columns:1fr;gap:18px}.feature-card:first-child,.feature-card:last-child{grid-column:auto}.feature-card{min-height:300px}.feature-card .card-top{padding:15px 24px}.feature-card h3,.feature-card:first-child h3{font-size:35px;padding:24px 24px 0}.feature-card p{padding:0 24px;font-size:14px}.feature-card .text-link{margin-inline:24px}.feature-directory{gap:18px}.directory-item{padding:25px}.directory-item h3{font-size:29px}.assistant-story h2{font-size:44px}.assistant-preview{grid-template-columns:1fr;gap:25px;padding:26px 18px}.assistant-bubble{font-size:12px}.usecase-row{padding:26px}.related-links>a{padding:25px}.related-links h3{font-size:29px}.steps .step{padding:22px}.footer-main{gap:30px}.footer .brand{font-size:28px}.footer .brand img{width:44px;height:44px}.footer-brand p{font-size:13px}.closing h2{font-size:43px}} @media(prefers-reduced-motion:reduce){.feature-card{transition:none}.launch-copy,.launch-media{animation:none}}.card-category{display:flex;align-items:center;gap:8px;font-size:11px;color:var(--muted)}.card-category .icon{width:15px;height:15px;color:var(--ink)} @media(max-width:480px){} /* Same pairing and palette as Settings → Flow green in the app. */ @font-face{font-family:Figtree;src:url('assets/fonts/figtree-latin-variable.woff2') format('woff2');font-weight:400 600;font-display:swap} :root{--sans:'Figtree',system-ui,sans-serif;--serif:'EB Garamond',Georgia,serif;--olive:#034F46;--deep:#023D36;--app-shell:#034F46;--app-sheet:#FFFFEB;--app-ink:#1C211D} main{overflow-x:clip} .brand img{object-fit:contain;aspect-ratio:1;flex-shrink:0}.brand{font-weight:400}.button{background:var(--olive);border-color:var(--olive);border-radius:12px}.button:hover{background:var(--deep);border-color:var(--deep)}.button:active{transform:scale(.98)} .launch-grid{grid-template-columns:.9fr 1.1fr;gap:54px}.launch-copy h1{font-size:clamp(52px,5.25vw,73px)}.launch-hero{padding-block:85px 76px} #launch-film,.feature-film video{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:contain;border-radius:20px;border:0;box-shadow:none} .launch-media{background:none;border:0;padding:0;box-shadow:none}.film-caption{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:12px;font-size:12px;color:var(--muted)}.film-actions{display:flex;gap:12px;flex-wrap:wrap}.film-actions button{background:none;border:0;color:var(--olive);padding:8px 2px;min-height:36px;font-size:12px}.film-actions button:hover{text-decoration:underline;text-underline-offset:4px}.film-status,.film-error-link{font-size:12px;line-height:1.6;margin-top:10px}.film-error-link{text-decoration:underline} .demo-frame{background:var(--app-shell);color:var(--app-ink);border-color:#DCDDCB}.demo-bar{background:var(--app-shell);color:#FFFFEB;border-color:rgba(255,255,235,.17)}.demo-bar .sample-label{color:#FFFFEB}.demo-sidebar{background:var(--app-shell);color:#FFFFEB;border:0}.demo-sidebar .side-item{color:#FFFFEB}.demo-sidebar .workspace-label,.demo-sidebar .side-bottom{color:#D4E4D8}.demo-sidebar .side-item:first-of-type{background:rgba(255,255,235,.1)}.demo-body,.assistant-preview{background:var(--app-sheet);color:var(--app-ink)}.demo-body{border-top-left-radius:18px}.demo-heading h3,.demo-heading p{color:var(--app-ink)}.prompt,.demo-tabs{background:#F2F2DF}.initial{background:#E8ECD9;color:var(--olive)}.demo-tabs button[aria-selected=true]{background:#FFFFF5}.draft,.kanban-column,.note-card{background:#FFFFF5} .footer-links a{transition:color 250ms}.footer-links:has(a:hover) a:not(:hover),.footer-links:has(a:focus-visible) a:not(:focus-visible){color:#706D63}.footer-links a:hover,.footer-links a:focus-visible{color:var(--olive)} .motion-ready .reveal{--reveal-x:-24px;opacity:0;transform:translate3d(var(--reveal-x),18px,0);filter:blur(3px);transition:opacity 950ms var(--ease),transform 1050ms cubic-bezier(.16,1,.3,1),filter 800ms ease-out;transition-delay:var(--reveal-delay,0ms)}.motion-ready .reveal.from-right{--reveal-x:24px}.motion-ready .reveal.visible,.motion-ready .reveal:focus-within{opacity:1;transform:none;filter:none}.feature-card{transition:opacity 950ms var(--ease),transform 1050ms cubic-bezier(.16,1,.3,1),filter 800ms ease-out,border-color 250ms}.motion-ready .feature-card.visible:hover{transform:translateY(-3px)} .feature-hover{position:fixed;z-index:80;left:0;top:0;width:min(340px,calc(100vw - 32px));pointer-events:none;opacity:0;visibility:hidden;transform:translate3d(var(--preview-x,0px),var(--preview-y,0px),0);transition:opacity 300ms ease,visibility 300ms}.feature-hover.active{opacity:1;visibility:visible}.feature-hover video{display:block;width:100%;aspect-ratio:16/9;border-radius:14px;object-fit:contain;background:var(--app-sheet)}.feature-hover p{font-size:12px;color:var(--ink);margin:8px 0 0;background:var(--paper);padding:7px 11px;border-radius:8px}.feature-hover video{scale:.96;transition:scale 550ms cubic-bezier(.22,1.2,.36,1)}.feature-hover.active video{scale:1} @media(max-width:900px){.launch-grid{grid-template-columns:1fr;gap:38px}.launch-copy h1{font-size:76px}.launch-hero{padding-top:44px}.launch-media{max-width:760px}} @media(max-width:480px){.launch-copy h1{font-size:clamp(47px,13.6vw,62px)}.launch-hero{padding-block:37px 34px}.film-caption{align-items:flex-start;flex-wrap:wrap;font-size:11px}#launch-film,.feature-film video{border-radius:16px}.film-actions button{min-height:44px}.feature-hover{display:none}} @media(prefers-reduced-motion:reduce){.motion-ready .reveal{opacity:1;transform:none;filter:none;transition:none}.feature-hover{display:none}.feature-card,.feature-hover video{transition:none}.feature-card:hover{transform:none}} /* Scalable HTML previews: app text stays readable instead of shrinking with a film. */ .experience-card{display:block;min-height:0}.experience-card>summary{display:flex;flex-direction:column;list-style:none;cursor:pointer;min-height:310px}.experience-card>summary::-webkit-details-marker{display:none}.experience-card .card-title{font-family:var(--serif);font-size:35px;line-height:1.08;letter-spacing:-.025em;padding:27px 26px 0}.experience-card:first-child .card-title{font-size:43px}.experience-card .card-description{font-size:14px;line-height:1.7;color:var(--muted);padding:17px 26px 0;max-width:600px}.experience-card .card-open{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:auto;padding:25px 26px;color:var(--olive);font-size:13px}.card-open .icon{transition:rotate 300ms ease}.experience-card[open] .card-open .icon{rotate:180deg}.experience-card[open]{grid-column:1/-1}.experience-card[open]>summary{min-height:0}.experience-card[open] .card-description{max-width:740px}.experience-card .card-top{display:flex;justify-content:space-between;align-items:center}.experience-card:has(summary:focus-visible){outline:2px solid var(--olive);outline-offset:5px}.experience-card>summary:focus-visible{outline:none}.experience-card .feature-content{display:grid;grid-template-columns:.7fr 1.3fr;gap:36px;overflow:hidden;border-top:1px solid var(--line)}.feature-instructions{padding:34px 0 34px 30px}.experience-card .feature-instructions h3{padding:0;margin:15px 0;font-size:34px}.experience-card .feature-instructions p{padding:0;font-size:14px;line-height:1.8;margin:14px 0}.experience-card .feature-instructions .text-link{margin:12px 0}.experience-card .feature-instructions .setup-note{font-size:12px}.experience-shell{margin:30px 30px 30px 0;min-width:0;border-radius:18px;overflow:hidden;background:var(--app-shell);border:1px solid #DCDDCB}.experience-rail{display:flex;align-items:center;gap:10px;color:#FFFFEB;padding:17px 20px;font-size:12px}.experience-rail>.icon{width:16px;height:16px}.experience-rail>span:last-child{margin-left:auto;font-family:var(--serif);font-size:18px}.experience-workspace{background:var(--app-sheet);border-top-left-radius:17px;padding:26px;min-width:0;color:var(--app-ink)}.experience-workspace h4{font-family:var(--sans);font-size:22px;font-weight:500;margin:0 0 20px}.experience-card .experience-workspace p{padding:0;font-size:13px;line-height:1.65;margin:14px 0}.experience-card .experience-workspace .button{font-size:12px;padding:11px 16px;min-height:44px}.experience-card .experience-workspace .actions{justify-content:flex-start;flex-wrap:wrap;margin:20px 0}.experience-form fieldset{border:0;padding:0;margin:0;min-width:0}.experience-fields{display:grid;grid-template-columns:1fr 1fr;gap:17px;margin-bottom:20px}.experience-fields label{display:flex;flex-direction:column;gap:8px;min-width:0;font-size:12px}.experience-fields label:has(textarea){grid-column:1/-1}.experience-workspace input,.experience-workspace select,.experience-workspace textarea{font:inherit;font-size:14px;color:var(--app-ink);width:100%;min-width:0;border:1px solid #D9DECF;background:#FFFFF8;border-radius:10px;padding:11px 12px;line-height:1.4;min-height:44px}.experience-workspace textarea{resize:vertical;white-space:pre-wrap}.experience-records{display:grid;gap:9px;max-height:430px;overflow:auto;overscroll-behavior:contain}.experience-record{background:#FFFFF8;border:1px solid #D9DECF;border-radius:10px}.experience-record>summary{display:grid;gap:5px;list-style:none;font-size:12px;padding:15px;cursor:pointer}.experience-record>summary b{font-size:14px;font-weight:500}.experience-record>summary span:last-child{color:var(--olive)}.experience-record>div{padding:0 15px 10px;border-top:1px solid #D9DECF}.experience-response{white-space:pre-wrap;overflow-wrap:anywhere;font:14px/1.8 var(--sans);margin:18px 0 0;background:#FFFFF8;border:1px solid #D9DECF;border-radius:12px;padding:18px}.editable-draft{display:grid;gap:10px;font-size:12px;margin-top:20px}.demo-request{background:#FFFFF8;padding:16px;border-radius:12px;line-height:1.6;font-size:14px;margin-bottom:20px}.demo-request small{font-size:12px;color:var(--muted)}.experience-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:22px}.experience-metrics>div{background:#FFFFF8;border:1px solid #D9DECF;padding:16px;border-radius:12px;display:grid;gap:6px}.experience-metrics b{font:32px var(--serif)}.experience-metrics span{font-size:11px}.experience-filter{display:grid;gap:8px;font-size:12px;margin-bottom:17px}.experience-directory .experience-card:first-child{grid-column:auto}.experience-directory .card-title,.experience-directory .experience-card:first-child .card-title{font-size:31px}.experience-directory .experience-card[open]{grid-column:1/-1}.experience-card[open]:hover,.motion-ready .experience-card[open].visible:hover{transform:none}.experience-workspace .draft{padding:18px}.experience-workspace .kanban{gap:9px}.experience-workspace .kanban-column{padding:10px}.experience-workspace .kanban h4{font-size:13px}.experience-workspace .deal h5{font-size:14px}.experience-workspace .text-link{margin:0}.film-dialog{width:min(1440px,94vw);max-width:94vw;max-height:94vh;border:1px solid var(--line);border-radius:22px;padding:22px;background:var(--paper);color:var(--ink);overflow:auto}.film-dialog::backdrop{background:rgba(25,25,24,.65)}.film-dialog [data-film-close]{display:block;margin:0 0 16px auto}.film-dialog #launch-film{max-height:74vh;object-fit:contain;width:100%;background:transparent}.film-dialog p{font-size:12px;margin:12px 0 0;color:var(--muted)}#launch-film{cursor:pointer}#launch-film:focus-visible{outline:2px solid var(--olive);outline-offset:5px}.film-dialog:not([open]){display:none} @media(max-width:1000px){.experience-card .feature-content{grid-template-columns:1fr;gap:0}.feature-instructions{padding:26px 26px 0}.experience-shell{margin:20px 26px 26px}.experience-fields{gap:14px}} @media(max-width:600px){.experience-fields{grid-template-columns:1fr}.experience-workspace{padding:20px 16px}.experience-shell{margin:20px 16px 16px}.feature-instructions{padding:23px 23px 0}.experience-card .card-title,.experience-card:first-child .card-title{font-size:34px;padding:24px 24px 0}.experience-card .card-description{padding:15px 24px 0}.experience-card .experience-workspace .kanban{grid-template-columns:1fr}.experience-metrics{gap:7px}.experience-metrics>div{padding:11px}.experience-rail{padding:15px;font-size:11px}.experience-rail>span:last-child{font-size:16px}.film-dialog{padding:12px;border-radius:16px}.film-dialog #launch-film{border-radius:12px}.film-actions{gap:16px}} @media(prefers-reduced-motion:reduce){.card-open .icon{transition:none}} .experience-card .feature-content{align-items:start}.experience-card .feature-instructions,.experience-card .experience-shell{align-self:start} /* Keep browser focus/autoscroll immediate so a moving viewport cannot misdirect a click. */ html{scroll-behavior:auto}.experience-card{scroll-margin-top:120px}.experience-workspace input,.experience-workspace button{scroll-margin-block:120px} /* Beige app theme — exact colours from the Rudra24 AI app (Manual + Product insights). Page is a lighter step of the app beige (#FFFFEB → #FFFFF3); app previews keep #FFFFEB. Forest #034F46. */ :root{--paper:#FFFFF3;--surface:#FFFFFA;--card:#FBFBEA;--cream:#F7F7E4;--sage:#E8ECD9;--ink:#1C211D;--muted:#5C6157;--line:#ECEBD8;--olive:#034F46;--deep:#023D36;--video-shadow:0 1px 3px rgba(28,33,29,.05),0 14px 36px -14px rgba(28,33,29,.16),0 32px 70px -40px rgba(28,33,29,.14)} body{background:var(--paper);color:var(--ink);text-rendering:optimizeLegibility;font-kerning:normal} ::selection{background:#D9E3CF} .workspace-tour,.soft-section,.closing,.assistant-bubble.request{background:var(--cream)} .footer{background:var(--paper);border-top:1px solid var(--line)} .button.secondary{background:var(--surface);border-color:#DCDBC4;color:var(--ink)} .button.secondary:hover{background:#F2F2DF;border-color:#C7C6AC} .button:not(.secondary):hover{box-shadow:0 10px 22px -12px rgba(3,79,70,.55)} .feature-card,.directory-item,.usecase-row,.related-links>a{background:var(--card)} .feature-card:hover,.experience-card:hover{border-color:#D3D2B8} .detail-blocks>article,.note-card,.steps .step,.candidate-card,.contact-form,.menu-panel,.mobile-menu nav{background:var(--surface)} .footer-links:has(a:hover) a:not(:hover),.footer-links:has(a:focus-visible) a:not(:focus-visible){color:#8A8C7E} .feature-hover p{background:var(--surface);border:1px solid var(--line)} .film-dialog{background:var(--paper)} .film-dialog::backdrop{background:rgba(28,33,29,.55);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)} /* Very light, soft edge shadow on every film/clip so its cream edges separate from the beige page. */ #launch-film,.feature-film video,[data-film-slot] video{box-shadow:var(--video-shadow);border:0} .feature-hover video{box-shadow:0 2px 6px rgba(28,33,29,.06),0 24px 54px -20px rgba(28,33,29,.3)} .film-dialog #launch-film{box-shadow:none} /* ───────────── Motion system: spring curves (pre-sampled spring physics) ───────────── soft = stiffness 100, damping 20 (critically damped, no overshoot) → reveals, header snappy = stiffness 400, damping 28 (≈4.6% overshoot) → buttons, nav pill */ :root{--spring-soft:cubic-bezier(.22,1,.36,1);--spring-snappy:cubic-bezier(.34,1.4,.64,1)} @supports (transition-timing-function:linear(0,1)){ :root{--spring-soft:linear(0,.142 10%,.38 20%,.594 30%,.74 40%,.841 50%,.908 60%,.96 75%,1); --spring-snappy:linear(0,.098 6.25%,.306 12.5%,.531 18.75%,.726 25%,.871 31.25%,.965 37.5%,1.019 43.75%,1.042 50%,1.046 56.25%,1.04 62.5%,1.02 75%,1.005 87.5%,1)}} /* Lenis (weighted smooth scroll) base rules */ html.lenis,html.lenis body{height:auto} .lenis:not(.lenis-autoToggle).lenis-stopped{overflow:clip} .lenis.lenis-smooth iframe{pointer-events:none} textarea,.experience-records,.mobile-menu nav{overscroll-behavior:contain} section[id]{scroll-margin-top:80px} /* ───────────── Compact header: 64px, frosted beige, hides going down ───────────── */ .site-header{background:rgba(255,255,243,.94);border-bottom:1px solid transparent;transition:translate 560ms var(--spring-soft),border-color 300ms ease,box-shadow 400ms ease,background-color 300ms ease} @supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.site-header{background:rgba(255,255,243,.74);-webkit-backdrop-filter:saturate(160%) blur(16px);backdrop-filter:saturate(160%) blur(16px)}} .scrolled .site-header{border-color:var(--line);box-shadow:0 10px 30px -22px rgba(28,33,29,.35)} .header-hidden .site-header{translate:0 -100%;box-shadow:none} .header-inner{height:64px} .brand{gap:11px;font-size:25px;letter-spacing:-.02em;font-weight:500;color:var(--ink);transform-origin:left center;transition:scale 500ms var(--spring-soft)} .brand img{width:36px;height:36px;filter:drop-shadow(0 2px 3px rgba(28,33,29,.16));transition:rotate 520ms var(--spring-snappy),scale 520ms var(--spring-snappy)} .site-header .brand:hover img{rotate:-8deg;scale:1.07} .desktop-nav{position:relative;gap:2px;font-size:14px;font-weight:500;isolation:isolate} .desktop-nav>a:not(.button),.product-menu summary{position:relative;padding:8px 14px;border-radius:999px;color:rgba(28,33,29,.82);transition:color 250ms ease} .desktop-nav>a:not(.button):hover,.product-menu summary:hover,.desktop-nav [aria-current=page]{color:var(--ink)} .product-menu summary .chevron{transition:rotate 400ms var(--spring-snappy)} .product-menu[open] summary .chevron{rotate:180deg} .nav-pill{position:absolute;z-index:-1;left:0;top:50%;height:36px;width:var(--w,0px);translate:var(--x,0px) -50%;border-radius:999px;background:rgba(3,79,70,.07);opacity:0;pointer-events:none;transition:translate 480ms var(--spring-snappy),width 480ms var(--spring-snappy),opacity 250ms ease} .nav-pill.on{opacity:1} .site-header .button{margin-left:14px;min-height:40px;padding:0 18px;border-radius:999px;font-size:14px;gap:10px} .button{translate:var(--mx,0px) var(--my,0px);transition:background-color 400ms var(--ease),border-color 400ms var(--ease),transform 500ms var(--spring-snappy),translate 520ms var(--spring-snappy),box-shadow 500ms var(--ease)} .button .icon{transition:translate 420ms var(--spring-snappy)} .button:hover .icon{translate:3px 0} .button:active{transform:scale(.97);transition-duration:120ms} .launch-hero{padding-block:52px 72px} @media(max-width:900px){.launch-hero{padding-top:36px}} @media(max-width:760px){.header-inner{height:58px}.mobile-menu nav{top:58px}.brand{font-size:23px}.brand img{width:32px;height:32px}} @media(max-width:480px){.brand{font-size:22px}.brand img{width:30px;height:30px}.launch-hero{padding-top:28px}} /* ───────────── Scroll reveals: slide into frame from the side they sit on ───────────── */ .reveal[data-side=left]{--dx:calc(-1 * var(--travel,96px));--dy:0px} .reveal[data-side=right]{--dx:var(--travel,96px);--dy:0px} .reveal[data-side=center]{--dx:0px;--dy:64px} /* Scroll-linked (Chrome, Edge, Safari 26+): position follows the (weighted) scroll, finishes before mid-screen. */ @media(prefers-reduced-motion:no-preference){ .scroll-reveal .reveal{animation:reveal-move both var(--spring-soft),reveal-fade both linear;animation-timeline:view(),view();animation-range:entry 0% cover 40%,entry 0% cover 26%} .scroll-reveal .reveal.reveal-tall{animation-range:entry 0% entry 55%,entry 0% entry 30%} .scroll-reveal .reveal:focus-within,.scroll-reveal .experience-card[open]{animation:none}} @keyframes reveal-move{from{translate:var(--dx) var(--dy)}to{translate:0 0}} @keyframes reveal-fade{from{opacity:0}to{opacity:1}} /* Fallback (Firefox): one smooth spring glide when the block first appears. */ .motion-ready .reveal{filter:none;transform:none;opacity:0;translate:clamp(-140px,var(--dx,0px),140px) var(--dy,40px);transition:opacity 900ms ease-out,translate 1300ms var(--spring-soft),transform 650ms var(--ease),border-color 400ms ease} .motion-ready .reveal.visible,.motion-ready .reveal:focus-within{opacity:1;translate:0 0;filter:none} .motion-ready .feature-card.visible:hover{transform:translateY(-3px)} /* ───────────── Hover preview: drawn 1:1 from a 960×540 file, no scaling on the video ───────────── */ .feature-hover{width:480px;max-width:calc(100vw - 32px)} .feature-hover video{scale:none;translate:0 10px;transition:translate 600ms var(--spring-soft)} .feature-hover.active video{scale:none;translate:0 0} @media(prefers-reduced-motion:reduce){ .site-header,.brand,.brand img,.nav-pill,.button,.button .icon{transition:none} .header-hidden .site-header{translate:none} .button{translate:none} .motion-ready .reveal{opacity:1;translate:none;transition:none}} /* ═════════════ Oct 2026 refinement pass: crisp text, app-like controls, green chrome ═════════════ */ :root{--forest:#034F46;--forest-deep:#023D36;--on-forest:#FFFFEB; --shadow-card:0 1px 2px rgba(28,33,29,.04),0 10px 28px -16px rgba(28,33,29,.16); --shadow-card-hover:0 2px 4px rgba(28,33,29,.05),0 18px 40px -18px rgba(28,33,29,.24); --shadow-window:0 2px 6px rgba(2,61,54,.06),0 24px 60px -28px rgba(2,61,54,.34); --shadow-pop:0 2px 6px rgba(28,33,29,.06),0 20px 44px -18px rgba(28,33,29,.3)} body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale} /* Entrance animations must not leave text on a separate layer once finished (that softens text on Windows). */ .hero-title,.hero-copy,.hero-preview{animation-fill-mode:backwards} /* ── Top bar: deep forest green like the app shell, cream text ── */ .site-header{background:rgba(3,79,70,.98);-webkit-backdrop-filter:none;backdrop-filter:none;color:var(--on-forest);border-bottom:1px solid rgba(255,255,235,.08)} .scrolled .site-header{border-color:rgba(255,255,235,.08);box-shadow:0 10px 28px -16px rgba(2,40,35,.55)} .site-header .brand{color:var(--on-forest)} .site-header .brand img{filter:drop-shadow(0 2px 4px rgba(0,0,0,.28))} .desktop-nav>a:not(.button),.product-menu summary{color:rgba(255,255,235,.78)} .desktop-nav>a:not(.button):hover,.product-menu summary:hover,.desktop-nav [aria-current=page],.product-menu[open] summary{color:var(--on-forest)} .nav-pill{background:rgba(255,255,235,.12)} .site-header .button{background:var(--on-forest);border-color:var(--on-forest);color:var(--forest);font-weight:500} .site-header .button:hover{background:#FFFFFF;border-color:#FFFFFF;box-shadow:0 8px 20px -10px rgba(0,0,0,.4)} .site-header :focus-visible{outline:2px solid var(--on-forest);outline-offset:3px} .menu-panel,.mobile-menu nav{color:var(--ink)} .menu-panel{border-radius:16px;box-shadow:var(--shadow-pop)} .mobile-menu>summary{color:var(--on-forest)} .mobile-menu nav>a.button{color:var(--on-forest)} /* ── Footer: deep olive-green, cream type, companies + head office ── */ .footer{background:var(--forest-deep);color:var(--on-forest);border-top:0} .footer .brand{color:var(--on-forest)} .footer-brand p,.footer-bottom{color:rgba(255,255,235,.68)} .footer-links h3,.footer-companies h3{color:rgba(255,255,235,.55);font:500 11px var(--sans);letter-spacing:.08em;text-transform:uppercase;margin:0 0 18px} .footer-links a{color:rgba(255,255,235,.86)} .footer-links a:hover,.footer-links a:focus-visible{color:#FFFFFF} .footer-links:has(a:hover) a:not(:hover),.footer-links:has(a:focus-visible) a:not(:focus-visible){color:rgba(255,255,235,.45)} .footer-bottom{border-color:rgba(255,255,235,.14)} .footer :focus-visible{outline:2px solid var(--on-forest);outline-offset:3px} .footer-companies{display:grid;grid-template-columns:1.5fr 1fr;gap:56px;padding:46px 0 50px;margin-top:52px;border-top:1px solid rgba(255,255,235,.14)} .company-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px} .company-list li{display:flex;flex-direction:column;align-items:flex-start;gap:7px;min-width:0} .company-list b{font:400 21px/1.2 var(--serif);letter-spacing:-.01em} .company-list a{font-size:13px;overflow-wrap:anywhere;display:inline-flex;align-items:center;gap:6px;transition:color 250ms ease,opacity 250ms ease} .company-list a .icon{width:13px;height:13px;transition:translate 400ms var(--spring-snappy)} .company-list a:hover .icon{translate:2px -2px} .footer .company-list a{color:rgba(255,255,235,.86)} .footer .company-list a+a{color:rgba(255,255,235,.6)} .footer .company-list a:hover{color:#FFFFFF} .office{font-style:normal;display:flex;flex-direction:column;align-items:flex-start;gap:12px} .office-label{font:500 11px var(--sans);letter-spacing:.08em;text-transform:uppercase;opacity:.6} .office p{font:400 26px/1.32 var(--serif);letter-spacing:-.01em;margin:0} .office a{display:inline-flex;align-items:center;gap:7px;font-size:13px;border-bottom:1px solid currentColor;padding-bottom:2px;opacity:.8;transition:opacity 250ms} .office a:hover{opacity:1} .office a .icon{width:13px;height:13px} /* Contact page (on beige) */ .contact-person .company-list{grid-template-columns:1fr;gap:18px;margin-top:18px} .contact-person .company-list b{font-size:20px;color:var(--ink)} .contact-person .company-list a{color:var(--olive);font-size:14px} .contact-person .company-list a+a{color:var(--muted);font-size:13px} .contact-person .office{margin-top:4px} .contact-person .office p{color:var(--ink);font-size:24px} .contact-person .office a{color:var(--olive)} .contact-info .button{font-size:14px;min-height:46px} @media(max-width:900px){.footer-companies{grid-template-columns:1fr;gap:40px}} @media(max-width:600px){.company-list{grid-template-columns:1fr;gap:22px}.office p{font-size:23px}} /* ── Soft card edges; hover deepens the shadow instead of moving text (keeps type crisp) ── */ .feature-card,.directory-item,.usecase-row,.related-links>a,.detail-blocks>article,.steps .step,.contact-form,.candidate-card{box-shadow:var(--shadow-card);transition:box-shadow 450ms var(--ease),border-color 300ms ease} .feature-card:hover,.directory-item:hover,.usecase-row:hover,.related-links>a:hover,.steps .step:hover{box-shadow:var(--shadow-card-hover);transform:none} .motion-ready .feature-card.visible:hover,.related-links>a:hover{transform:none} .experience-card[open]{box-shadow:var(--shadow-card-hover)} .demo-frame{box-shadow:var(--shadow-window)} /* ── Test window: app-like title bar + sheet ── */ .experience-shell{border-radius:20px;border:1px solid rgba(3,79,70,.35);box-shadow:var(--shadow-window)} .experience-rail{gap:14px;padding:12px 18px;font-size:12px} .experience-rail>span:last-child{font:inherit} .window-dots{display:flex;gap:6px} .window-dots i{width:10px;height:10px;border-radius:50%;background:rgba(255,255,235,.26)} .rail-brand{display:inline-flex;align-items:center;gap:8px;font:400 17px var(--serif);letter-spacing:-.01em} .rail-brand img{width:20px;height:20px;object-fit:contain} .rail-tab{display:inline-flex;align-items:center;gap:7px;padding:6px 12px;border-radius:999px;background:rgba(255,255,235,.12)} .rail-tab .icon{width:14px;height:14px} .rail-status{margin-left:auto;color:rgba(255,255,235,.62);font-size:11px} .experience-workspace{padding:30px 30px 28px} .experience-card .experience-workspace .workspace-kicker{font:500 11px var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:0 0 6px} .experience-workspace h4{font:400 32px/1.1 var(--serif);letter-spacing:-.02em;margin:0 0 26px} .experience-fields{gap:18px 16px} .experience-fields label{font-size:12px;font-weight:500;color:var(--muted);gap:8px} @media(max-width:600px){.window-dots,.rail-status{display:none}.experience-workspace h4{font-size:27px}} /* ── Fields: filled like the app's search box; calm focus ring ── */ .experience-workspace :is(input,select,textarea),.form-field :is(input,select,textarea){background:#F4F4E2;border:1px solid transparent;border-radius:12px;min-height:46px;padding:11px 14px;font:inherit;font-size:14px;color:var(--app-ink,#1C211D);box-shadow:none;transition:background-color 200ms ease,border-color 200ms ease,box-shadow 300ms ease} .experience-workspace :is(input,select,textarea):hover,.form-field :is(input,select,textarea):hover{border-color:#DCDBC4} .experience-workspace :is(input,select,textarea):focus,.form-field :is(input,select,textarea):focus{outline:none;background:#FFFFFA;border-color:var(--olive);box-shadow:0 0 0 4px rgba(3,79,70,.12)} .experience-workspace :is(input,select,textarea):disabled{opacity:.6} /* ── Dropdowns: real