:root{ color-scheme: dark; --bg: #090a12; --bg-2: #0e101b; --surface: #131522; --surface-2: #191b2a; --surface-3: #202236; --text: #f7f7fb; --text-2: #c7cad9; --muted: #9297ad; --line: rgba(255,255,255,.09); --line-strong: rgba(255,255,255,.17); --purple: #8b5cf6; --purple-2: #b75ed7; --pink: #ec5a91; --green: #58d39b; --amber: #f1bd62; --danger: #ff7281; --brand-gradient: linear-gradient(120deg,#7c5cf3 0%,#a45bd9 58%,#de659e 100%); --button-gradient: linear-gradient(180deg,#9a73f6 0%,#8657ed 100%); --button-gradient-hover: linear-gradient(180deg,#a47df8 0%,#8f62f0 100%); --soft-gradient: linear-gradient(145deg,rgba(139,92,246,.15),rgba(236,90,145,.06) 48%,transparent 75%); --shadow-sm: 0 16px 40px rgba(0,0,0,.24); --shadow-lg: 0 42px 120px rgba(0,0,0,.46); --radius-sm: 10px; --radius-md: 16px; --radius-lg: 24px; --radius-xl: 34px; --container: 1200px; --font: Arial, Helvetica, sans-serif; --ease: cubic-bezier(.2,.75,.2,1); } html[data-theme="light"]{ color-scheme: light; --bg: #f7f6fb; --bg-2: #f0eef7; --surface: #ffffff; --surface-2: #f7f5fc; --surface-3: #eeeaf8; --text: #171824; --text-2: #373a4b; --muted: #686d82; --line: rgba(20,22,35,.10); --line-strong: rgba(20,22,35,.18); --shadow-sm: 0 16px 40px rgba(65,46,107,.11); --shadow-lg: 0 42px 110px rgba(65,46,107,.16); } *{ box-sizing: border-box; } html{ scroll-behavior: smooth; background: var(--bg); } body{ margin: 0; min-width: 320px; min-height: 100vh; overflow-x:clip; background: var(--bg); color: var(--text); font-family: var(--font); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } body::selection{ background: var(--purple); color: white; } a{ color: inherit; text-decoration: none; } button, input, select, textarea{ font: inherit; } button, a, input, select, textarea{ -webkit-tap-highlight-color: transparent; } img, svg{ display:block; max-width:100%; } h1, h2, h3, p, ul, ol, dl{ margin-top:0; } h1, h2, h3{ text-wrap:balance; } p, li, summary, dd, dt, label{ overflow-wrap:break-word; } p, li{ text-wrap:pretty; } button{ color: inherit; } [hidden]{ display:none !important; } .skip-link{ position:fixed; left:16px; top:-70px; z-index:1000; padding:12px 16px; border-radius:10px; background:var(--text); color:var(--bg); } .skip-link:focus{ top:16px; } .container{ width:min(var(--container),calc(100% - 48px)); margin-inline:auto; } .narrow{ width:min(760px,calc(100% - 48px)); margin-inline:auto; } .eyebrow{ display:inline-flex; align-items:center; gap:10px; color:#c7b8ff; font-size:.75rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; } .eyebrow::before{ content:""; width:28px; height:1px; background:currentColor; } html[data-theme="light"] .eyebrow{ color:#6744d5; } .muted{ color:var(--muted); } .kicker{ color:var(--text-2); font-weight:700; } .sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; } .site-header{ position:fixed; inset:0 0 auto; z-index:100; border-bottom:1px solid transparent; transition:background .25s ease,border-color .25s ease; } .site-header.scrolled{ background:rgba(9,10,18,.82); border-color:var(--line); backdrop-filter:blur(18px) saturate(125%); } html[data-theme="light"] .site-header.scrolled{ background:rgba(247,246,251,.88); } .header-inner{ width:min(1380px,calc(100% - 40px)); height:78px; margin:auto; display:flex; align-items:center; justify-content:space-between; gap:24px; } .brand{ display:inline-flex; align-items:center; gap:11px; min-width:max-content; font-weight:800; letter-spacing:-.035em; } .brand img{ width:44px; height:34px; object-fit:contain; } .brand span{ font-size:1.02rem; } .nav{ display:flex; align-items:center; gap:27px; color:var(--muted); font-size:.88rem; font-weight:700; } .nav a{ position:relative; transition:color .2s ease; } .nav a::after{ content:""; position:absolute; left:0; right:100%; bottom:-8px; height:1px; background:var(--purple); transition:right .24s ease; } .nav a[aria-current="page"]{ color:var(--text); }@media (hover: hover) and (pointer: fine){html:not(.suppress-hover) .nav a:hover{ color:var(--text); }} .nav a[aria-current="page"]::after{ right:0; }@media (hover: hover) and (pointer: fine){html:not(.suppress-hover) .nav a:hover::after{ right:0; }} .header-actions{ display:flex; align-items:center; gap:10px; } .mobile-menu-button{ display:none; width:44px; height:44px; border:1px solid var(--line); border-radius:12px; background:var(--surface); cursor:pointer; } .menu-icon{ width:18px; height:13px; display:grid; align-content:space-between; } .menu-icon i{ display:block; width:100%; height:2px; border-radius:999px; background:currentColor; transition:transform .2s var(--ease); } .mobile-menu-button[aria-expanded="true"] .menu-icon i:first-child{ transform:translateY(5.5px) rotate(45deg); } .mobile-menu-button[aria-expanded="true"] .menu-icon i:last-child{ transform:translateY(-5.5px) rotate(-45deg); } .mobile-nav{ display:none; } .button{ min-height:46px; padding:0 19px; border:1px solid transparent; border-radius:999px; display:inline-flex; align-items:center; justify-content:center; gap:9px; font-weight:800; font-size:.9rem; line-height:1.1; white-space:nowrap; flex-shrink:0; cursor:pointer; position:relative; overflow:hidden; background-clip:padding-box; transition:transform .2s var(--ease),background .2s ease,border-color .2s ease,box-shadow .2s ease,color .2s ease; } @media (hover: hover) and (pointer: fine){html:not(.suppress-hover) .button:hover{ }} .button:active{ transform:translateY(0); } .button:focus-visible, .icon-button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible{ outline:3px solid rgba(139,92,246,.45); outline-offset:3px; } .button-primary{ color:white; background:var(--button-gradient); border-color:rgba(255,255,255,.10); box-shadow:0 12px 30px rgba(116,76,221,.30),inset 0 1px 0 rgba(255,255,255,.22); } @media (hover: hover) and (pointer: fine){html:not(.suppress-hover) .button-primary:hover{ background:var(--button-gradient-hover); box-shadow:0 16px 38px rgba(116,76,221,.36),inset 0 1px 0 rgba(255,255,255,.25); }} .button-secondary{ color:var(--text); background:var(--surface); border-color:var(--line-strong); } @media (hover: hover) and (pointer: fine){html:not(.suppress-hover) .button-secondary:hover{ background:var(--surface-2); border-color:rgba(139,92,246,.35); }} .button-quiet{ color:var(--text-2); background:transparent; border-color:var(--line); } .button-danger{ color:#ffd9de; background:rgba(255,114,129,.10); border-color:rgba(255,114,129,.25); } .button-large{ min-height:54px; padding-inline:25px; } .button-full{ width:100%; } .button[disabled]{ opacity:.55; cursor:not-allowed; transform:none; } .icon-button{ width:42px; height:42px; display:grid; place-items:center; border:1px solid var(--line); border-radius:12px; background:var(--surface); cursor:pointer; } .hero{ min-height:100svh; padding:145px 0 98px; display:grid; align-items:center; position:relative; overflow-x:clip; overflow-y:visible; border-bottom:1px solid var(--line); } .hero::before{ content:""; position:absolute; width:620px; height:620px; right:-210px; top:-250px; border-radius:50%; border:1px solid rgba(139,92,246,.2); box-shadow:0 0 0 110px rgba(139,92,246,.025),0 0 0 220px rgba(236,90,145,.015); animation:orbit 30s linear infinite; } .hero::after{ content:""; position:absolute; inset:0; pointer-events:none; background:radial-gradient(circle at 72% 34%,rgba(139,92,246,.14),transparent 25%),radial-gradient(circle at 88% 72%,rgba(236,90,145,.08),transparent 24%); } .hero-grid{ position:relative; z-index:1; display:grid; grid-template-columns:minmax(0,.88fr) minmax(430px,1.12fr); gap:clamp(54px,8vw,115px); align-items:center; } .hero-grid > *, .section-heading > *, .split > *, .process-grid > *, .form-shell > *, .pricing-grid > *, .content-grid > *, .settings-grid > *, .dashboard-grid > *{ min-width:0; } .hero-copy{ padding-block:10px; } .hero-copy h1{ margin:22px 0 27px; max-width:760px; padding:.07em 0 .12em; overflow:visible; font-size:clamp(3.8rem,6.7vw,6.65rem); line-height:1; letter-spacing:-.058em; font-weight:760; text-wrap:balance; } .hero-copy h1 span{ display:block; padding-block:.025em; overflow:visible; } .hero-copy h1 .gradient-text{ padding-bottom:.12em; margin-bottom:-.12em; color:transparent; background:var(--brand-gradient); background-clip:text; -webkit-background-clip:text; } .hero-copy p{ max-width:620px; color:var(--muted); font-size:clamp(1.03rem,1.35vw,1.22rem); line-height:1.68; } .hero-actions{ display:flex; flex-wrap:wrap; gap:12px; margin-top:32px; } .hero-proof{ display:flex; flex-wrap:wrap; gap:20px; margin-top:24px; color:var(--muted); font-size:.82rem; } .hero-proof span{ display:inline-flex; align-items:center; gap:8px; } .hero-proof i{ width:7px; height:7px; border-radius:50%; background:var(--green); box-shadow:0 0 0 5px rgba(88,211,155,.1); } .daily-visual{ position:relative; padding:25px; border:1px solid var(--line-strong); border-radius:28px; background:linear-gradient(160deg,rgba(255,255,255,.035),rgba(255,255,255,.012)); box-shadow:var(--shadow-lg); transform:rotateY(-3deg) rotateX(1deg); transition:transform .35s var(--ease); } @media (hover: hover) and (pointer: fine){html:not(.suppress-hover) .daily-visual:hover{ }} .visual-top{ display:flex; align-items:center; justify-content:space-between; gap:20px; padding-bottom:20px; border-bottom:1px solid var(--line); } .visual-top strong, .visual-top small{ display:block; } .visual-top small{ margin-top:4px; color:var(--muted); } .live-pill{ display:inline-flex; align-items:center; gap:8px; padding:8px 11px; border:1px solid var(--line); border-radius:999px; color:var(--text-2); font-size:.72rem; font-weight:800; } .live-pill::before{ content:""; width:7px; height:7px; border-radius:50%; background:var(--green); animation:pulse 2s ease-in-out infinite; } .day-list{ display:grid; gap:8px; margin-top:22px; } .day-row{ min-height:58px; padding:0 16px; display:grid; grid-template-columns:40px 1fr auto; align-items:center; gap:12px; border:1px solid var(--line); border-radius:14px; background:rgba(255,255,255,.018); transition:transform .24s var(--ease),border-color .24s ease,background .24s ease; } @media (hover: hover) and (pointer: fine){html:not(.suppress-hover) .day-row:hover{ border-color:rgba(139,92,246,.38); background:rgba(139,92,246,.06); }} .day-row strong{ font-size:.82rem; } .day-row span{ color:var(--text-2); font-size:.86rem; } .day-row b{ width:10px; height:10px; border-radius:50%; background:var(--brand-gradient); box-shadow:0 0 0 6px rgba(139,92,246,.08); animation:dayGlow 5.6s ease-in-out infinite; } .day-row:nth-child(2) b{animation-delay:-.8s}.day-row:nth-child(3) b{animation-delay:-1.6s}.day-row:nth-child(4) b{animation-delay:-2.4s}.day-row:nth-child(5) b{animation-delay:-3.2s}.day-row:nth-child(6) b{animation-delay:-4s}.day-row:nth-child(7) b{animation-delay:-4.8s} .visual-foot{ display:flex; justify-content:space-between; gap:20px; margin-top:20px; padding:15px 16px; border-radius:14px; background:var(--soft-gradient); } .visual-foot strong{ font-size:1.05rem; } .visual-foot span{ color:var(--muted); font-size:.78rem; } .section{ padding:clamp(90px,10vw,150px) 0; position:relative; } .section + .section{ border-top:1px solid var(--line); } .section-soft{ background:var(--bg-2); } .section-heading{ display:grid; grid-template-columns:minmax(0,1fr) minmax(260px,.55fr); align-items:end; gap:55px; margin-bottom:58px; } .section-heading h2{ margin:15px 0 0; max-width:790px; font-size:clamp(2.7rem,5vw,5.2rem); line-height:.96; letter-spacing:-.058em; } .section-heading p{ color:var(--muted); line-height:1.72; } .split{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(40px,8vw,100px); align-items:center; } .rule-list{ margin:0; padding:0; list-style:none; border-top:1px solid var(--line); } .rule-list li{ padding:27px 0; display:grid; grid-template-columns:55px 1fr; gap:20px; border-bottom:1px solid var(--line); } .rule-list span{ color:#c7b8ff; font-weight:800; } .rule-list h3{ margin-bottom:8px; font-size:1.4rem; letter-spacing:-.035em; } .rule-list p{ margin:0; color:var(--muted); line-height:1.65; } .benefit-lines{ display:grid; gap:0; border-top:1px solid var(--line); } .benefit-line{ padding:30px 0; display:grid; grid-template-columns:180px 1fr auto; gap:25px; align-items:center; border-bottom:1px solid var(--line); transition:background-color var(--interaction-duration,220ms) var(--interaction-ease,cubic-bezier(.22,1,.36,1)),background var(--interaction-duration,220ms) var(--interaction-ease,cubic-bezier(.22,1,.36,1)); } @media (hover: hover) and (pointer: fine){html:not(.suppress-hover) .benefit-line:hover{ background:linear-gradient(90deg,rgba(139,92,246,.06),transparent); }} .benefit-line small{ color:#c7b8ff; text-transform:uppercase; letter-spacing:.09em; font-weight:800; } .benefit-line h3{ margin:0; font-size:clamp(1.45rem,2.2vw,2.2rem); letter-spacing:-.045em; } .benefit-line p{ margin:0; color:var(--muted); line-height:1.6; } .benefit-line i{ color:var(--muted); font-style:normal; } .process-grid{ display:grid; grid-template-columns:.75fr 1.25fr; gap:clamp(55px,9vw,125px); } .process-sticky{ position:sticky; top:125px; align-self:start; } .process-sticky h2{ margin:18px 0 20px; font-size:clamp(2.6rem,4.5vw,4.7rem); line-height:.98; letter-spacing:-.055em; } .process-sticky p{ color:var(--muted); line-height:1.72; } .steps{ margin:0; padding:0; list-style:none; } .step{ min-height:190px; padding:34px 0; display:grid; grid-template-columns:56px 1fr; gap:22px; border-top:1px solid var(--line); } .step:last-child{ border-bottom:1px solid var(--line); } .step > span{ color:#c7b8ff; font-weight:800; } .step h3{ margin-bottom:10px; font-size:clamp(1.6rem,2.4vw,2.4rem); letter-spacing:-.045em; } .step p{ margin:0; color:var(--muted); line-height:1.68; } .sample-panel{ min-height:520px; padding:38px; border:1px solid var(--line-strong); border-radius:var(--radius-lg); background:var(--soft-gradient),var(--surface); box-shadow:var(--shadow-sm); position:relative; overflow:hidden; } .sample-panel::after{ content:""; position:absolute; width:380px; height:380px; right:-170px; bottom:-210px; border-radius:50%; border:1px solid rgba(139,92,246,.23); box-shadow:0 0 0 70px rgba(139,92,246,.03),0 0 0 140px rgba(236,90,145,.02); } .sample-frame{ width:min(320px,75%); aspect-ratio:9/16; margin:auto; padding:26px; display:flex; flex-direction:column; justify-content:flex-end; border:1px solid var(--line-strong); border-radius:26px; background:radial-gradient(circle at 65% 20%,rgba(236,90,145,.30),transparent 22%),radial-gradient(circle at 22% 76%,rgba(139,92,246,.26),transparent 28%),linear-gradient(155deg,#32284f,#171a2b 52%,#0a0b12); transform:rotate(3deg); transition:transform .35s var(--ease); position:relative; z-index:1; } @media (hover: hover) and (pointer: fine){html:not(.suppress-hover) .sample-panel:hover .sample-frame{ }} .sample-frame small{ color:rgba(255,255,255,.58); font-size:.65rem; letter-spacing:.1em; } .sample-frame strong{ margin-top:12px; color:white; font-size:2.1rem; line-height:.98; letter-spacing:-.055em; } .sample-frame span{ margin-top:13px; color:rgba(255,255,255,.68); font-size:.78rem; } .pricing-grid{ display:grid; grid-template-columns:.8fr 1.2fr; gap:18px; } .pricing-grid.three{ grid-template-columns:repeat(3,minmax(0,1fr)); } .price-card{ min-height:560px; padding:36px; display:flex; flex-direction:column; position:relative; overflow:hidden; border:1px solid var(--line); border-radius:var(--radius-lg); background:var(--surface); } .price-card.primary{ background:var(--soft-gradient),var(--surface); border-color:rgba(139,92,246,.32); } .price-top{ display:flex; justify-content:space-between; gap:20px; color:var(--muted); font-size:.72rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; } .price-value{ margin:65px 0 22px; display:flex; align-items:flex-end; gap:13px; } .price-value strong{ font-size:clamp(3.6rem,6vw,6rem); line-height:.82; letter-spacing:-.07em; } .price-value span{ padding-bottom:5px; color:var(--muted); font-size:.78rem; } .price-card > p{ color:var(--muted); line-height:1.68; } .check-list{ margin:28px 0 36px; padding:0; list-style:none; display:grid; gap:13px; } .check-list li{ display:flex; align-items:flex-start; gap:11px; color:var(--text-2); font-size:.9rem; } .check-list li::before{ content:""; width:17px; height:17px; flex:0 0 17px; margin-top:1px; border:1px solid rgba(139,92,246,.45); border-radius:50%; background:radial-gradient(circle,var(--purple) 0 2px,transparent 3px); } .price-card .button{ margin-top:auto; } .faq-list{ border-top:1px solid var(--line); } .faq-item{ border-bottom:1px solid var(--line); } .faq-item summary{ min-height:86px; display:flex; align-items:center; justify-content:space-between; gap:25px; cursor:pointer; font-weight:800; font-size:1.1rem; list-style:none; } .faq-item summary::-webkit-details-marker{ display:none; } .faq-item summary::after{ content:"+"; color:#c7b8ff; font-size:1.5rem; font-weight:500; transition:transform .2s ease; } .faq-item[open] summary::after{ transform:rotate(45deg); } .faq-item p{ max-width:780px; padding:0 0 28px; margin:0; color:var(--muted); line-height:1.7; } .page-main{ padding-top:78px; } .page-hero{ padding:95px 0 75px; border-bottom:1px solid var(--line); background:radial-gradient(circle at 80% 20%,rgba(139,92,246,.11),transparent 28%); } .page-hero h1{ margin:18px 0 20px; max-width:850px; font-size:clamp(3rem,6vw,6rem); line-height:.94; letter-spacing:-.065em; } .page-hero p{ max-width:700px; color:var(--muted); font-size:1.08rem; line-height:1.72; } .page-actions{ display:flex; flex-wrap:wrap; gap:12px; margin-top:28px; } .content-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; } .info-card{ min-height:250px; padding:27px; border:1px solid var(--line); border-radius:var(--radius-md); background:var(--surface); } .info-card h3{ margin:18px 0 11px; font-size:1.35rem; letter-spacing:-.035em; } .info-card p{ color:var(--muted); line-height:1.65; } .info-index{ color:#c7b8ff; font-size:.75rem; font-weight:800; letter-spacing:.1em; } .empty-state{ padding:55px; text-align:center; border:1px dashed var(--line-strong); border-radius:var(--radius-lg); background:var(--surface); } .empty-state h2{ font-size:2rem; letter-spacing:-.04em; } .empty-state p{ max-width:620px; margin:0 auto 25px; color:var(--muted); line-height:1.7; } .form-shell{ display:grid; grid-template-columns:.65fr 1.35fr; gap:55px; align-items:start; } .form-copy{ position:sticky; top:120px; } .form-copy h2{ margin:16px 0 18px; font-size:clamp(2.4rem,4vw,4rem); line-height:1; letter-spacing:-.055em; } .form-copy p{ color:var(--muted); line-height:1.72; } .form-card{ padding:32px; border:1px solid var(--line); border-radius:var(--radius-lg); background:var(--surface); box-shadow:var(--shadow-sm); } .form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:18px; } .field{ display:grid; gap:8px; } .field.full{ grid-column:1/-1; } .field label{ font-size:.84rem; font-weight:800; } .field small{ color:var(--muted); line-height:1.45; } input, select, textarea{ width:100%; border:1px solid var(--line-strong); border-radius:12px; background:var(--bg-2); color:var(--text); transition:border-color .2s ease,box-shadow .2s ease; } input, select{ min-height:50px; padding:0 14px; } textarea{ min-height:145px; padding:14px; resize:vertical; } input::placeholder, textarea::placeholder{ color:var(--muted); } input:focus, select:focus, textarea:focus{ border-color:rgba(139,92,246,.65); box-shadow:0 0 0 4px rgba(139,92,246,.09); } .form-actions{ margin-top:22px; display:flex; flex-wrap:wrap; align-items:center; gap:14px; } .form-status{ min-height:24px; color:var(--muted); font-size:.86rem; } .form-status.success{ color:var(--green); } .form-status.error{ color:var(--danger); } .choice-grid{ display:grid; grid-template-columns:1fr 1fr; gap:13px; } .choice{ min-height:130px; padding:20px; position:relative; border:1px solid var(--line); border-radius:14px; background:var(--surface-2); cursor:pointer; transition:transform .2s var(--ease),border-color .2s ease,background .2s ease; } @media (hover: hover) and (pointer: fine){html:not(.suppress-hover) .choice:hover{ border-color:rgba(139,92,246,.35); }} .choice input{ position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:pointer; } .choice strong, .choice small{ display:block; } .choice small{ margin-top:8px; color:var(--muted); line-height:1.5; } .choice:has(input:checked){ border-color:var(--purple); background:rgba(139,92,246,.08); box-shadow:0 14px 35px rgba(139,92,246,.10); } .choice:has(input:checked)::after{ content:""; position:absolute; right:15px; top:15px; width:23px; height:23px; display:grid; place-items:center; border-radius:50%; color:white; background:var(--brand-gradient); font-size:.75rem; } .auth-page{ min-height:100vh; display:grid; grid-template-columns:360px 1fr; background:var(--bg); } .auth-side{ min-height:100vh; padding:35px; display:flex; flex-direction:column; border-right:1px solid var(--line); background:var(--soft-gradient),var(--surface); } .auth-side h1{ margin:65px 0 16px; font-size:2.5rem; line-height:1.02; letter-spacing:-.055em; } .auth-side p{ color:var(--muted); line-height:1.65; } .auth-progress{ margin-top:38px; display:grid; gap:14px; } .auth-progress div{ display:flex; align-items:center; gap:12px; color:var(--muted); font-size:.86rem; font-weight:800; } .auth-progress span{ width:28px; height:28px; display:grid; place-items:center; border:1px solid var(--line-strong); border-radius:50%; } .auth-progress .active, .auth-progress .complete{ color:var(--text); } .auth-progress .active span, .auth-progress .complete span{ color:white; border-color:transparent; background:var(--brand-gradient); } .auth-back-home{ margin-top:auto; color:var(--muted); font-size:.85rem; font-weight:700; } .auth-main{ min-height:100vh; padding:60px clamp(28px,7vw,100px); display:grid; align-items:center; } .auth-card{ width:min(760px,100%); margin:auto; } .auth-step h2{ margin-bottom:10px; font-size:clamp(2.4rem,4.5vw,4.8rem); line-height:.96; letter-spacing:-.06em; } .auth-step > p{ margin-bottom:30px; color:var(--muted); line-height:1.65; } .auth-controls{ margin-top:34px; display:flex; align-items:center; justify-content:space-between; gap:14px; } .auth-error{ flex:1; color:var(--danger); font-size:.86rem; } .fixed-plan{ padding:28px; border:1px solid rgba(139,92,246,.55); border-radius:16px; background:var(--soft-gradient),var(--surface); } .fixed-plan strong{ display:block; font-size:1.35rem; } .fixed-plan span{ display:block; margin-top:8px; color:var(--text-2); } .app-page{ background:var(--bg-2); } .app-layout{ min-height:100vh; display:grid; grid-template-columns:240px 1fr; } .sidebar{ position:sticky; top:0; height:100vh; padding:22px 16px; display:flex; flex-direction:column; border-right:1px solid var(--line); background:var(--surface); } .sidebar .brand{ padding-inline:7px; } .sidebar-nav{ margin-top:38px; display:grid; gap:6px; } .sidebar-label{ padding:16px 11px 7px; color:var(--muted); font-size:.68rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; } .sidebar-nav a{ min-height:43px; padding:0 12px; display:flex; align-items:center; border-radius:10px; color:var(--muted); font-size:.86rem; font-weight:750; } .sidebar-nav a.active{ color:var(--text); background:var(--surface-2); }@media (hover: hover) and (pointer: fine){html:not(.suppress-hover) .sidebar-nav a:hover{ color:var(--text); background:var(--surface-2); }} .sidebar-bottom{ margin-top:auto; display:grid; gap:8px; } .app-main{ min-width:0; } .app-header{ height:72px; padding:0 28px; position:sticky; top:0; z-index:50; display:flex; align-items:center; justify-content:space-between; gap:20px; border-bottom:1px solid var(--line); background:rgba(14,16,27,.88); backdrop-filter:blur(16px); } html[data-theme="light"] .app-header{ background:rgba(247,246,251,.9); } .account-trigger{ padding:6px 8px; display:flex; align-items:center; gap:10px; border:1px solid transparent; border-radius:12px; background:transparent; cursor:pointer; text-align:left; } .account-trigger[aria-expanded="true"]{ border-color:var(--line); background:var(--surface); }@media (hover: hover) and (pointer: fine){html:not(.suppress-hover) .account-trigger:hover{ border-color:var(--line); background:var(--surface); }} .avatar{ width:36px; height:36px; display:grid; place-items:center; border-radius:11px; color:white; background:var(--brand-gradient); font-weight:800; } .account-trigger small{ display:block; color:var(--muted); font-size:.72rem; } .account-menu-wrap{ position:relative; } .account-menu{ width:230px; padding:8px; position:absolute; right:0; top:52px; z-index:100; border:1px solid var(--line-strong); border-radius:14px; background:var(--surface); box-shadow:var(--shadow-lg); } .account-menu a, .account-menu button{ width:100%; min-height:42px; padding:0 12px; display:flex; align-items:center; border:0; border-radius:9px; color:var(--text-2); background:transparent; cursor:pointer; font-weight:700; } @media (hover: hover) and (pointer: fine){html:not(.suppress-hover) .account-menu a:hover, html:not(.suppress-hover) .account-menu button:hover{ color:var(--text); background:var(--surface-2); }} .account-menu hr{ border:0; border-top:1px solid var(--line); } .dashboard{ padding:32px; } .dashboard-hero{ display:flex; align-items:flex-end; justify-content:space-between; gap:30px; margin-bottom:28px; } .dashboard-hero h1{ margin:10px 0 8px; font-size:clamp(2.2rem,4vw,4rem); letter-spacing:-.055em; } .dashboard-hero p{ margin:0; color:var(--muted); } .dashboard-grid{ display:grid; grid-template-columns:1.25fr .75fr; gap:18px; } .app-card{ padding:24px; border:1px solid var(--line); border-radius:18px; background:var(--surface); } .card-head{ display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:20px; } .card-head h2{ margin:0; font-size:1.25rem; } .card-head p{ margin:5px 0 0; color:var(--muted); font-size:.85rem; } .request-list{ display:grid; gap:10px; } .request-item{ padding:16px; display:grid; grid-template-columns:1fr auto; gap:15px; border:1px solid var(--line); border-radius:12px; background:var(--surface-2); } .request-item h3{ margin-bottom:6px; font-size:1rem; } .request-item p{ margin:0; color:var(--muted); font-size:.82rem; } .status-pill{ align-self:start; padding:7px 9px; border-radius:999px; color:#c7b8ff; background:rgba(139,92,246,.10); border:1px solid rgba(139,92,246,.26); font-size:.68rem; font-weight:800; text-transform:uppercase; } .mini-empty{ padding:34px 18px; text-align:center; border:1px dashed var(--line-strong); border-radius:12px; } .mini-empty p{ color:var(--muted); line-height:1.55; } .activity-list{ display:grid; gap:0; } .activity-row{ padding:15px 0; border-bottom:1px solid var(--line); } .activity-row:last-child{ border-bottom:0; } .activity-row strong{ display:block; font-size:.88rem; } .activity-row small{ color:var(--muted); } .modal-backdrop{ position:fixed; inset:0; z-index:200; padding:20px; display:grid; place-items:center; background:rgba(0,0,0,.65); backdrop-filter:blur(8px); } .modal{ width:min(620px,100%); max-height:calc(100vh - 40px); overflow:auto; padding:28px; border:1px solid var(--line-strong); border-radius:20px; background:var(--surface); box-shadow:var(--shadow-lg); } .modal-head{ display:flex; justify-content:space-between; gap:20px; margin-bottom:22px; } .modal-head h2{ margin:0; } .settings-grid{ display:grid; grid-template-columns:1fr 1fr; gap:18px; } .settings-card{ padding:26px; border:1px solid var(--line); border-radius:18px; background:var(--surface); } .settings-card.full{ grid-column:1/-1; } .theme-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:11px; } .theme-choice{ min-height:105px; padding:13px; position:relative; display:grid; place-items:center; border:1px solid var(--line); border-radius:12px; background:var(--surface-2); cursor:pointer; } .theme-choice input{ position:absolute; opacity:0; } .theme-choice:has(input:checked){ border-color:var(--purple); box-shadow:0 0 0 3px rgba(139,92,246,.1); } .toggle-row{ min-height:64px; display:flex; align-items:center; justify-content:space-between; gap:20px; border-bottom:1px solid var(--line); } .toggle-row:last-child{ border-bottom:0; } .toggle{ position:relative; width:48px; height:27px; } .toggle input{ position:absolute; opacity:0; } .toggle span{ position:absolute; inset:0; border:1px solid var(--line-strong); border-radius:999px; background:var(--surface-3); cursor:pointer; transition:background .2s ease; } .toggle span::after{ content:""; position:absolute; width:19px; height:19px; left:3px; top:3px; border-radius:50%; background:white; transition:transform .2s ease; } .toggle input:checked + span{ background:var(--purple); } .toggle input:checked + span::after{ transform:translateX(21px); } .admin-banner{ margin-bottom:18px; padding:14px 16px; border:1px solid rgba(241,189,98,.28); border-radius:12px; color:#ffe4aa; background:rgba(241,189,98,.08); font-size:.84rem; line-height:1.55; } .admin-toolbar{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:18px; } .admin-toolbar input, .admin-toolbar select{ width:auto; min-width:190px; } .data-table{ width:100%; border-collapse:collapse; } .data-table th, .data-table td{ padding:13px 12px; text-align:left; border-bottom:1px solid var(--line); font-size:.84rem; } .data-table th{ color:var(--muted); font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; } .table-wrap{ overflow:auto; } .site-footer{ padding:55px 0 28px; border-top:1px solid var(--line); background:var(--bg-2); } .footer-grid{ display:grid; grid-template-columns:1.2fr .8fr .8fr; gap:40px; } .footer-brand p{ max-width:420px; margin-top:18px; color:var(--muted); line-height:1.65; } .footer-links{ display:grid; gap:10px; align-content:start; } .footer-links strong{ margin-bottom:5px; font-size:.78rem; text-transform:uppercase; letter-spacing:.1em; color:var(--muted); } .footer-links a{ color:var(--text-2); font-size:.88rem; } @media (hover: hover) and (pointer: fine){html:not(.suppress-hover) .footer-links a:hover{ color:var(--text); }} .footer-bottom{ margin-top:45px; padding-top:20px; display:flex; justify-content:space-between; gap:20px; border-top:1px solid var(--line); color:var(--muted); font-size:.78rem; } .reveal-enabled .reveal{ opacity:0; transform:translateY(44px); transition:opacity .75s var(--ease),transform .75s var(--ease); } .reveal-enabled .reveal[data-delay="1"]{transition-delay:.08s}.reveal-enabled .reveal[data-delay="2"]{transition-delay:.16s}.reveal-enabled .reveal[data-delay="3"]{transition-delay:.24s}.reveal-enabled .reveal[data-delay="4"]{transition-delay:.32s} .reveal-enabled .reveal.visible{ opacity:1; transform:none; } @keyframes orbit { to { transform:rotate(360deg); } } @keyframes pulse { 0%,100%{opacity:1;transform:scale(1)}50%{opacity:.45;transform:scale(.75)} } @keyframes dayGlow { 0%,100%{transform:scale(.82);opacity:.55}14%{transform:scale(1.05);opacity:1}28%{transform:scale(.82);opacity:.55} } @media (max-width: 1020px) { .nav{ display:none; } .mobile-menu-button{ display:grid; place-items:center; } .mobile-nav{ position:fixed; inset:78px 16px auto; z-index:99; padding:14px; display:grid; gap:4px; border:1px solid var(--line-strong); border-radius:16px; background:var(--surface); box-shadow:var(--shadow-lg); } .mobile-nav a{ min-height:45px; padding:0 12px; display:flex; align-items:center; border-radius:10px; color:var(--text-2); font-weight:750; } @media (hover: hover) and (pointer: fine){html:not(.suppress-hover) .mobile-nav a:hover{ background:var(--surface-2); color:var(--text); }} .hero-grid, .section-heading, .split, .process-grid, .form-shell{ grid-template-columns:1fr; } .hero{ min-height:auto; } .hero-grid{ gap:65px; } .daily-visual{ max-width:720px; } .section-heading{ gap:20px; } .section-heading p{ max-width:620px; } .process-sticky, .form-copy{ position:static; } .content-grid{ grid-template-columns:1fr 1fr; } .auth-page{ grid-template-columns:290px 1fr; } .app-layout{ grid-template-columns:78px 1fr; } .sidebar .brand span, .sidebar-nav a, .sidebar-label, .sidebar-bottom .button{ font-size:0; } .sidebar .brand{ justify-content:center; } .sidebar-nav a::before{ content:"•"; font-size:1.2rem; } .dashboard-grid{ grid-template-columns:1fr; } } @media (max-width: 720px) { .container, .narrow{ width:min(100% - 28px,var(--container)); } .header-inner{ width:calc(100% - 24px); } .header-actions .button-secondary{ display:none; } .header-actions{ gap:7px; } .header-actions .button-primary{ min-height:42px; padding-inline:15px; font-size:.82rem; } .brand img{ width:40px; height:31px; } .hero{ padding:126px 0 78px; } .hero::before{ display:none; } .hero-copy h1{ font-size:clamp(3.2rem,15.5vw,4.9rem); line-height:1.02; letter-spacing:-.052em; } .daily-visual{ padding:16px; border-radius:20px; transform:none; } .day-row{ grid-template-columns:34px 1fr auto; padding:0 12px; } .section{ padding:80px 0; } .benefit-line{ grid-template-columns:1fr; gap:8px; } .benefit-line i{ display:none; } .pricing-grid, .pricing-grid.three, .content-grid, .settings-grid, .footer-grid{ grid-template-columns:1fr; } .price-card{ min-height:auto; } .price-card .button{ margin-top:20px; } .form-grid, .choice-grid, .theme-grid{ grid-template-columns:1fr; } .auth-page{ display:block; } .auth-side{ min-height:auto; padding:22px; border-right:0; border-bottom:1px solid var(--line); } .auth-side h1, .auth-side > p, .auth-progress{ display:none; } .auth-back-home{ margin-top:0; } .auth-main{ min-height:auto; padding:45px 20px; } .auth-step h2{ font-size:2.7rem; } .app-layout{ display:block; } .sidebar{ position:static; width:100%; height:auto; padding:14px; flex-direction:row; align-items:center; justify-content:space-between; border-right:0; border-bottom:1px solid var(--line); } .sidebar-nav, .sidebar-bottom{ display:none; } .sidebar .brand span{ font-size:1rem; } .app-header{ top:0; padding:0 16px; } .app-header > strong{ font-size:.82rem; } .account-trigger div{ display:none; } .dashboard{ padding:22px 14px; } .dashboard-hero{ align-items:flex-start; flex-direction:column; } .request-item{ grid-template-columns:1fr; } .form-card, .sample-panel, .price-card{ padding:24px; } .footer-bottom{ flex-direction:column; } .page-hero{ padding:75px 0 60px; } .page-hero h1{ font-size:clamp(3rem,14vw,4.6rem); } } @media (max-width: 430px) { .header-inner{ gap:10px; } .brand{ gap:8px; } .brand img{ width:36px; height:28px; } .brand span{ font-size:.93rem; } .header-actions .button-primary{ padding-inline:12px; } .hero-copy h1{ font-size:clamp(2.85rem,14vw,4.05rem); line-height:1.03; letter-spacing:-.047em; } .page-hero h1{ font-size:clamp(2.75rem,13vw,4rem); line-height:1; letter-spacing:-.05em; } .auth-step h2{ font-size:clamp(2.2rem,11vw,2.8rem); line-height:1.02; letter-spacing:-.045em; } .button-large{ min-height:50px; padding-inline:18px; } .hero-actions .button{ width:100%; } .visual-top, .visual-foot{ align-items:flex-start; flex-direction:column; } .card-head{ align-items:flex-start; flex-direction:column; gap:12px; } } .hero .hero-copy.visible{ animation: heroRise .9s cubic-bezier(.2,.75,.2,1) both; } .hero .daily-visual.visible{ animation: heroRise .95s .14s cubic-bezier(.2,.75,.2,1) both; } .page-hero .reveal.visible{ animation: heroRise .8s cubic-bezier(.2,.75,.2,1) both; } @keyframes heroRise { from { opacity:0; transform:translateY(34px); } to { opacity:1; transform:translateY(0); } } :is(h1, h2){ overflow: visible !important; clip-path: none !important; contain: none !important; text-box-trim: none; } .hero-copy h1, .page-hero h1, .section-heading h2, .process-sticky h2, .form-copy h2, .auth-step h2, .dashboard-hero h1, .content-page h1, .settings-card h2{ line-height: 1.1 !important; padding-top: 0.06em !important; padding-bottom: 0.18em !important; overflow: visible !important; } .hero-copy{ overflow: visible !important; padding-block: 18px 24px; } .hero-copy h1{ margin-bottom: 20px; } .hero-copy h1 > span{ display: block; line-height: 1.1; padding-top: 0.03em; padding-bottom: 0.16em; overflow: visible !important; } .hero-copy h1 .gradient-text{ display: block; margin: 0; padding: 0.03em 0.04em 0.22em; color: transparent; -webkit-text-fill-color: transparent; background: var(--brand-gradient); background-clip: text; -webkit-background-clip: text; box-decoration-break: clone; -webkit-box-decoration-break: clone; overflow: visible !important; } .section h2[style], .page-main h1[style]{ line-height: 1.1 !important; padding-bottom: 0.16em !important; overflow: visible !important; } @media (max-width: 720px) { .hero-copy h1, .page-hero h1, .section-heading h2, .process-sticky h2, .form-copy h2, .auth-step h2{ line-height: 1.12 !important; padding-bottom: 0.2em !important; } .hero-copy h1 > span{ line-height: 1.12; padding-bottom: 0.18em; } .hero-copy h1 .gradient-text{ padding-bottom: 0.25em; } } .auth-side h1, .sample-frame strong, .price-value strong{ display: block; line-height: 1.12 !important; padding-top: 0.04em; padding-bottom: 0.16em; overflow: visible !important; } .price-value{ overflow: visible; align-items: flex-end; } .page-hero, .section-heading, .process-sticky, .form-copy, .auth-step, .dashboard-hero, .hero-grid, .hero-copy{ overflow: visible !important; } html{ scroll-padding-top: 78px; } .home-page main > section{ scroll-margin-top: 78px; } .home-page .hero{ min-height: 100svh; padding: 104px 0 34px; } .home-page .hero-grid{ grid-template-columns: minmax(0, .94fr) minmax(430px, 1.06fr); gap: clamp(44px, 5vw, 76px); } .home-page .hero-copy{ padding-block: 0 !important; } .home-page .hero-copy h1{ max-width: 650px; margin: 14px 0 17px; padding: .03em 0 .10em !important; font-size: clamp(3.5rem, 5vw, 5.25rem); line-height: 1.04 !important; letter-spacing: -.052em; } .home-page .hero-copy h1 > span{ line-height: 1.04 !important; padding: .015em 0 .09em !important; } .home-page .hero-copy h1 .gradient-text{ margin: 0; padding: .015em .02em .12em !important; } .home-page .hero-copy p{ max-width: 570px; font-size: clamp(1rem, 1.12vw, 1.1rem); line-height: 1.58; } .home-page .hero-actions{ margin-top: 22px; } .home-page .hero-proof{ margin-top: 16px; gap: 12px; } .home-page .daily-visual{ max-width: 590px; justify-self: end; padding: 18px; border-radius: 23px; } .home-page .visual-top{ padding-bottom: 13px; } .home-page .visual-top small{ margin-top: 2px; font-size: .76rem; } .home-page .live-pill{ padding: 6px 9px; font-size: .66rem; } .home-page .day-list{ gap: 6px; margin-top: 13px; } .home-page .day-row{ min-height: 43px; padding: 0 13px; grid-template-columns: 38px 1fr auto; border-radius: 11px; } .home-page .day-row strong{ font-size: .74rem; } .home-page .day-row span{ font-size: .79rem; } .home-page .day-row b{ width: 8px; height: 8px; box-shadow: 0 0 0 4px rgba(139,92,246,.08); } .home-page .visual-foot{ margin-top: 12px; padding: 11px 13px; border-radius: 11px; } .home-page .visual-foot strong{ font-size: .91rem; } .home-page .visual-foot span{ font-size: .72rem; } .home-page .section{ padding: clamp(68px, 8vh, 96px) 0; } .home-page .section-heading{ gap: 42px; margin-bottom: 36px; } .home-page .section-heading h2{ max-width: 720px; font-size: clamp(2.45rem, 4vw, 4.25rem); line-height: 1.04 !important; padding-bottom: .10em !important; } .home-page .section-heading p{ line-height: 1.62; } .home-page .benefit-line{ padding: 20px 0; grid-template-columns: 150px 1fr auto; } .home-page .benefit-line h3{ font-size: clamp(1.35rem, 1.75vw, 1.85rem); } .home-page .benefit-line p{ line-height: 1.5; } .home-page .process-grid{ gap: clamp(45px, 7vw, 90px); } .home-page .process-sticky h2{ font-size: clamp(2.35rem, 3.7vw, 3.8rem); line-height: 1.05 !important; } .home-page .step{ min-height: 142px; padding: 24px 0; } .home-page .step h3{ font-size: clamp(1.45rem, 1.9vw, 1.95rem); } .home-page .step p{ line-height: 1.55; } .home-page .sample-panel{ min-height: 430px; padding: 28px; } .home-page .sample-frame{ width: min(235px, 70%); padding: 21px; border-radius: 22px; } .home-page .sample-frame strong{ font-size: 1.65rem; } .home-page .pricing-grid{ gap: 16px; } .home-page .price-card{ min-height: 455px; padding: 29px; } .home-page .price-value{ margin: 37px 0 18px; } .home-page .price-value strong{ font-size: clamp(3.25rem, 4.5vw, 4.8rem); } .home-page .check-list{ margin: 22px 0 28px; gap: 10px; } .home-page .faq-item summary{ min-height: 72px; } @media (min-width: 1021px) and (min-height: 680px) { .home-page .section{ min-height: calc(100svh - 78px); display: grid; align-items: center; } } @media (min-width: 1021px) and (max-height: 820px) { .home-page .hero{ padding-top: 94px; padding-bottom: 26px; } .home-page .hero-copy h1{ font-size: clamp(3.35rem, 4.65vw, 4.85rem); } .home-page .hero-copy p{ font-size: 1rem; line-height: 1.5; } .home-page .button-large{ min-height: 49px; padding-inline: 21px; } .home-page .daily-visual{ max-width: 560px; padding: 16px; } .home-page .day-row{ min-height: 40px; } .home-page .day-list{ gap: 5px; margin-top: 11px; } .home-page .visual-foot{ margin-top: 10px; padding-block: 9px; } .home-page .section{ padding-top: 58px; padding-bottom: 58px; } .home-page .section-heading{ margin-bottom: 28px; } .home-page .price-card{ min-height: 430px; } } @media (max-width: 1020px) { .home-page .hero{ padding: 126px 0 76px; } .home-page .daily-visual{ justify-self: stretch; max-width: 720px; } .home-page .section{ min-height: 0; } } @media (max-width: 720px) { .home-page .hero-copy h1{ font-size: clamp(3rem, 14vw, 4.4rem); line-height: 1.06 !important; } .home-page .hero-copy h1 > span{ line-height: 1.06 !important; } .home-page .daily-visual{ padding: 15px; } .home-page .day-row{ min-height: 42px; } .home-page .section{ padding: 72px 0; } } .home-page .hero::before{ width: 520px; height: 520px; right: -190px; top: -225px; border-color: rgba(139,92,246,.14); box-shadow: 0 0 0 90px rgba(139,92,246,.018), 0 0 0 180px rgba(236,90,145,.010); } .home-page .hero::after{ background: radial-gradient(circle at 72% 34%,rgba(139,92,246,.10),transparent 24%),radial-gradient(circle at 88% 72%,rgba(236,90,145,.045),transparent 22%); } @media (min-width: 1021px) and (max-height: 820px) { .home-page .section{ padding-top: 44px; padding-bottom: 44px; } .home-page .section-heading h2{ font-size: clamp(2.35rem, 3.55vw, 3.65rem); } .home-page .price-card{ min-height: 414px; padding: 26px; } .home-page .price-value{ margin-top: 29px; } .home-page .check-list{ margin-top: 18px; margin-bottom: 22px; } } @media (max-width: 1020px) { .home-page .hero{ min-height: auto; } .home-page .hero-grid{ grid-template-columns: 1fr; gap: 58px; } .home-page .hero-copy{ width: 100%; } .home-page .daily-visual{ width: 100%; max-width: 720px; justify-self: start; } } @media (max-width: 720px) { .container, .narrow{ width: min(var(--container), calc(100% - 28px)); } .home-page .hero-grid{ gap: 46px; } } @media (min-width: 1021px) { .home-page .daily-visual{ width: 100%; } } @media (max-width: 360px) { .header-actions .button-primary{ display: none; } } @media (min-width: 1021px) and (max-height: 820px) { .home-page .section{ padding-top: 34px; padding-bottom: 34px; } .home-page .section-heading{ margin-bottom: 22px; } .home-page .section-heading h2{ font-size: clamp(2.3rem, 3.25vw, 3.35rem); } .home-page .price-card{ min-height: 0; padding: 22px; } .home-page .price-value{ margin: 20px 0 14px; } .home-page .price-value strong{ font-size: clamp(3.1rem, 4vw, 4rem); } .home-page .price-card > p{ font-size: .9rem; line-height: 1.5; } .home-page .check-list{ margin: 14px 0 18px; gap: 8px; } .home-page .check-list li{ font-size: .84rem; line-height: 1.35; } .home-page .price-card .button{ min-height: 44px; } } @media (max-width: 720px) { .home-page .benefit-line{ grid-template-columns: 1fr; gap: 8px; } .home-page .benefit-line i{ display: none; } } .auth-form-card{ padding: clamp(24px, 4vw, 42px); border: 1px solid var(--line); border-radius: 22px; background: var(--surface); box-shadow: var(--shadow-lg); } .auth-form-card h2{ margin: 14px 0 10px; font-size: clamp(2.35rem, 5vw, 4.6rem); line-height: 1.02; letter-spacing: -.055em; } .auth-switch{ margin-top: 34px; } .auth-switch em{ font-style: italic; } .auth-switch a{ color: var(--text); text-decoration: underline; text-underline-offset: 4px; } .flash{ margin: 18px 0; padding: 14px 16px; border: 1px solid var(--line-strong); border-radius: 12px; line-height: 1.55; } .flash ul{ margin: 0; padding-left: 20px; } .flash-success{ color: #b7f4cf; border-color: rgba(85,212,147,.32); background: rgba(85,212,147,.09); } .flash-error{ color: #ffd1d6; border-color: rgba(255,107,124,.34); background: rgba(255,107,124,.09); } .flash-info{ color: var(--text-2); background: var(--surface-2); } .form-help{ margin-top: 12px; color: var(--muted); font-size: .82rem; line-height: 1.5; } .onboarding-grid{ display: grid; grid-template-columns: 1.15fr .85fr .85fr; gap: 18px; align-items: stretch; } .onboarding-grid .price-card{ min-height: 500px; } .status-badge{ display: inline-flex; align-items: center; min-height: 30px; padding: 0 10px; border: 1px solid var(--line-strong); border-radius: 999px; font-size: .72rem; font-weight: 800; white-space: nowrap; } .status-success{ color: #b7f4cf; border-color: rgba(85,212,147,.32); background: rgba(85,212,147,.09); } .status-warning{ color: #ffe1a8; border-color: rgba(255,190,92,.32); background: rgba(255,190,92,.09); } .status-danger{ color: #ffd1d6; border-color: rgba(255,107,124,.32); background: rgba(255,107,124,.09); } .status-neutral{ color: var(--text-2); background: var(--surface-2); } .dashboard-grid-wide{ grid-template-columns: 1fr 1fr; } .dashboard-section{ margin-top: 18px; } .empty-inline{ padding: 18px 0; } .empty-inline p{ color: var(--muted); } .request-item strong, .request-item small{ display: block; } .request-item small{ margin-top: 5px; color: var(--muted); } .menu-form{ margin: 0; } .button-small{ min-height: 36px; padding-inline: 12px; font-size: .76rem; } .metric-grid{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; } .metric-card{ min-height: 126px; padding: 20px; display: flex; flex-direction: column; justify-content: space-between; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); } .metric-card span{ color: var(--muted); font-size: .78rem; font-weight: 750; } .metric-card strong{ font-size: 2.2rem; letter-spacing: -.04em; } .admin-metrics{ margin-bottom: 18px; } .admin-detail-grid{ display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; } .inline-form{ display: flex; align-items: center; gap: 8px; } .inline-form select{ min-width: 130px; } .danger-zone{ margin-top: 18px; border-color: rgba(255,107,124,.24); } code{ padding: 2px 6px; border: 1px solid var(--line); border-radius: 6px; color: var(--text-2); background: var(--surface-2); font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: .9em; } button[disabled], .button[aria-disabled="true"]{ opacity: .5; cursor: not-allowed; transform: none !important; } @media (max-width: 1120px) { .onboarding-grid{ grid-template-columns: 1fr 1fr; } .onboarding-grid article:last-child{ grid-column: 1 / -1; min-height: auto; } .metric-grid{ grid-template-columns: repeat(2, 1fr); } } @media (max-width: 760px) { .onboarding-grid, .admin-detail-grid, .dashboard-grid-wide, .metric-grid{ grid-template-columns: 1fr; } .onboarding-grid article:last-child{ grid-column: auto; } .onboarding-grid .price-card{ min-height: auto; } .auth-form-card{ padding: 22px; border-radius: 17px; } .auth-form-card h2{ font-size: clamp(2.15rem, 11vw, 3.2rem); } .admin-toolbar input, .admin-toolbar select{ width: 100%; min-width: 0; } .inline-form{ align-items: stretch; flex-direction: column; } .app-header .brand span{ display: none; } } .field-label-row{ display:flex; align-items:center; justify-content:space-between; gap:16px; } .field-label-row a{ color:var(--text-2); font-size:.82rem; font-weight:750; text-decoration:underline; text-underline-offset:4px; } @media (hover: hover) and (pointer: fine){html:not(.suppress-hover) .field-label-row a:hover{ color:var(--text); }} .session-note{ margin:16px 0 0; color:var(--muted); font-size:.82rem; line-height:1.55; } .verification-wait{ margin:20px 0 4px; padding:14px 16px; display:flex; align-items:center; gap:12px; border:1px solid var(--line-strong); border-radius:12px; color:var(--text-2); background:var(--surface-2); line-height:1.5; } .verification-spinner{ width:18px; height:18px; flex:0 0 18px; border:2px solid rgba(255,255,255,.18); border-top-color:var(--accent); border-radius:50%; animation:verification-spin .8s linear infinite; } @keyframes verification-spin { to { transform:rotate(360deg); } } html.reduce-motion .verification-spinner{ animation:none; border-top-color:rgba(255,255,255,.55); } .sidebar-role{margin:18px 8px 0}.role-badge{display:inline-flex;align-items:center;min-height:28px;padding:0 10px;border:1px solid var(--line-strong);border-radius:999px;font-size:.69rem;font-weight:850;letter-spacing:.04em}.role-owner{color:#ffe6a4;background:rgba(255,190,92,.09);border-color:rgba(255,190,92,.28)}.role-admin{color:#d8ccff;background:rgba(139,92,246,.1);border-color:rgba(139,92,246,.28)}.role-editor{color:#bfe9ff;background:rgba(75,178,255,.09);border-color:rgba(75,178,255,.25)}.role-client{color:#b7f4cf;background:rgba(85,212,147,.08);border-color:rgba(85,212,147,.25)} .sidebar-footer{margin-top:auto;padding:12px 8px 2px;display:grid;gap:4px;border-top:1px solid var(--line)}.sidebar-footer a{min-height:38px;padding:0 8px;display:flex;align-items:center;border-radius:9px;color:var(--muted);font-size:.78rem;font-weight:700}@media (hover: hover) and (pointer: fine){html:not(.suppress-hover) .sidebar-footer a:hover{color:var(--text);background:var(--surface-2);}} .app-header>strong{font-size:.94rem}.app-header-actions{margin-left:auto;display:flex;align-items:center;gap:10px}.notification-button{width:42px;height:42px;position:relative;display:grid;place-items:center;border:1px solid var(--line);border-radius:12px;background:var(--surface);font-size:1.3rem}@media (hover: hover) and (pointer: fine){html:not(.suppress-hover) .notification-button:hover{border-color:var(--line-strong);}}.notification-button b{min-width:18px;height:18px;padding:0 4px;position:absolute;right:-5px;top:-5px;display:grid;place-items:center;border:2px solid var(--bg-2);border-radius:99px;color:white;background:var(--danger);font-size:.61rem}.sidebar-toggle{display:none;width:40px;height:40px;border:1px solid var(--line);border-radius:10px;color:var(--text);background:var(--surface);cursor:pointer} .workspace-head{margin-bottom:22px;display:flex;align-items:flex-end;justify-content:space-between;gap:26px}.workspace-head h1{margin:8px 0 8px;font-size:clamp(2rem,4vw,3.8rem);line-height:1;letter-spacing:-.055em}.workspace-head p{max-width:760px;margin:0;color:var(--muted);line-height:1.6}.workspace-title-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.hero-actions, .toolbar-actions, .table-actions{display:flex;align-items:center;gap:9px;flex-wrap:wrap}.table-actions form{margin:0} .metric-alert{border-color:rgba(255,107,124,.35);background:linear-gradient(145deg,rgba(255,107,124,.07),var(--surface))}.text-danger{color:var(--danger)!important}.alert-card{border-color:rgba(255,107,124,.3);background:linear-gradient(145deg,rgba(255,107,124,.05),var(--surface))} .quick-action-grid{margin-bottom:18px;display:grid;grid-template-columns:repeat(6,1fr);gap:12px}.quick-action-grid a{min-height:112px;padding:17px;display:flex;flex-direction:column;justify-content:flex-end;border:1px solid var(--line);border-radius:15px;background:var(--surface);transition:transform .18s ease,border-color .18s ease,background .18s ease}@media (hover: hover) and (pointer: fine){html:not(.suppress-hover) .quick-action-grid a:hover{border-color:rgba(139,92,246,.35);background:var(--surface-2);}}.quick-action-grid a>span{margin-bottom:auto;font-size:1.35rem}.quick-action-grid strong{font-size:.86rem}.quick-action-grid small{margin-top:4px;color:var(--muted);font-size:.7rem} .task-list{display:grid}.task-row{min-height:66px;padding:12px 0;display:flex;align-items:center;justify-content:space-between;gap:16px;border-bottom:1px solid var(--line)}.task-row:last-child{border-bottom:0}.task-row>div{min-width:0}.task-row strong, .task-row small{display:block}.task-row strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.88rem}.task-row small{margin-top:5px;color:var(--muted);font-size:.73rem}@media (hover: hover) and (pointer: fine){html:not(.suppress-hover) .task-row:hover strong{color:#cfc4ff;}}.task-main{display:flex!important;align-items:center;gap:10px}.priority-dot{width:8px;height:8px;flex:0 0 8px;border-radius:50%;background:var(--muted)}.priority-high{background:#f1bd62}.priority-urgent{background:var(--danger)}.priority-low{background:#55d493} .workload-list, .ticket-list{display:grid}.workload-row{padding:13px 0;display:grid;grid-template-columns:minmax(130px,.7fr) 1fr auto;align-items:center;gap:15px;border-bottom:1px solid var(--line)}.workload-row:last-child{border-bottom:0}.workload-row strong, .workload-row small{display:block}.workload-row small{color:var(--muted)}.workload-meter{height:7px;overflow:hidden;border-radius:99px;background:var(--surface-3)}.workload-meter i{height:100%;display:block;border-radius:inherit;background:var(--brand-gradient)}.revenue-card{margin-bottom:8px;padding:25px;border:1px solid var(--line);border-radius:15px;background:var(--soft-gradient),var(--surface-2)}.revenue-card strong, .revenue-card span{display:block}.revenue-card strong{font-size:2.2rem;letter-spacing:-.04em}.revenue-card span{margin-top:5px;color:var(--muted);font-size:.76rem} .view-toolbar{margin-bottom:18px;padding:12px;display:flex;align-items:center;gap:12px;border:1px solid var(--line);border-radius:15px;background:var(--surface)}.simple-toolbar{justify-content:space-between}.workspace-filters{flex:1;display:flex;align-items:center;gap:9px}.workspace-filters input{min-width:200px}.workspace-filters select{max-width:210px}.workspace-filters input, .workspace-filters select, .workspace-filters .button{min-height:42px}.view-switch{padding:4px;display:flex;align-items:center;border:1px solid var(--line);border-radius:11px;background:var(--bg-2)}.view-switch a{min-height:34px;padding:0 11px;display:flex;align-items:center;border-radius:8px;color:var(--muted);font-size:.73rem;font-weight:800}.view-switch a.active{color:var(--text);background:var(--surface);box-shadow:0 2px 8px rgba(0,0,0,.12)}.standalone-switch{width:max-content;margin-bottom:16px} .assignment-strip{display:flex;align-items:center;gap:12px}.assignment-strip>div, .assignment-summary>div{min-width:150px;padding:13px 15px;border:1px solid var(--line);border-radius:12px;background:var(--surface)}.assignment-strip small, .assignment-strip strong, .assignment-summary small, .assignment-summary strong{display:block}.assignment-strip small, .assignment-summary small{color:var(--muted);font-size:.68rem}.assignment-strip strong, .assignment-summary strong{margin-top:4px;font-size:.83rem}.assignment-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.assignment-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.assignment-card{scroll-margin-top:90px}.highlight-card{border-color:rgba(139,92,246,.55);box-shadow:0 0 0 3px rgba(139,92,246,.08)}.assignment-forms{margin-top:18px;display:grid;gap:12px}.assignment-forms form{padding-top:12px;display:flex;align-items:flex-end;gap:9px;border-top:1px solid var(--line)}.assignment-forms label{flex:1;color:var(--text-2);font-size:.76rem;font-weight:750}.assignment-forms select{margin-top:7px;min-height:42px} .workspace-layout{display:grid;grid-template-columns:250px minmax(0,1fr);gap:18px}.project-rail{padding:12px;border:1px solid var(--line);border-radius:16px;background:var(--surface)}.rail-head{padding:7px 8px 13px;display:flex;justify-content:space-between;color:var(--muted);font-size:.74rem}.project-rail>a{padding:12px 10px;display:flex;align-items:center;justify-content:space-between;gap:10px;border-radius:10px}@media (hover: hover) and (pointer: fine){html:not(.suppress-hover) .project-rail>a:hover{background:var(--surface-2);}}.project-rail strong, .project-rail small{display:block}.project-rail strong{font-size:.81rem}.project-rail small{margin-top:4px;color:var(--muted);font-size:.68rem}.workspace-task-card{min-width:0}.task-table td>a strong, .task-table td>a small, .data-table td strong, .data-table td small{display:block}.data-table td small{margin-top:4px;color:var(--muted)} .kanban-board{padding-bottom:10px;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(270px,310px);gap:13px;overflow:auto;scroll-snap-type:x proximity}.kanban-column{min-height:480px;padding:12px;border:1px solid var(--line);border-radius:16px;background:var(--surface)}.kanban-column>header{padding:4px 4px 13px;display:flex;justify-content:space-between;color:var(--text-2);font-size:.8rem}.kanban-column>header span{color:var(--muted)}.kanban-items{display:grid;gap:9px}.kanban-card{padding:14px;border:1px solid var(--line);border-radius:12px;background:var(--surface-2);scroll-snap-align:start}@media (hover: hover) and (pointer: fine){html:not(.suppress-hover) .kanban-card:hover{border-color:rgba(139,92,246,.35);}}.kanban-card small, .kanban-card time{color:var(--muted);font-size:.68rem}.kanban-card h3{margin:6px 0 13px;font-size:.88rem}.kanban-card>div{display:flex;align-items:center;justify-content:space-between;gap:7px;margin-bottom:10px}.kanban-empty{padding:18px;color:var(--muted);text-align:center;font-size:.76rem}.calendar-list{display:grid}.calendar-row{min-height:70px;padding:12px 0;display:grid;grid-template-columns:110px 1fr auto;align-items:center;gap:16px;border-bottom:1px solid var(--line)}.calendar-row:last-child{border-bottom:0}.calendar-row time{color:var(--text-2);font-size:.78rem;font-weight:800}.calendar-row strong, .calendar-row small{display:block}.calendar-row small{margin-top:4px;color:var(--muted)} .app-dialog{width:min(680px,calc(100% - 28px));max-height:calc(100vh - 28px);padding:0;border:1px solid var(--line-strong);border-radius:20px;color:var(--text);background:var(--surface);box-shadow:var(--shadow-lg)}.app-dialog::backdrop{background:rgba(0,0,0,.72);backdrop-filter:blur(8px)}.app-dialog form{padding:25px}.dialog-head{margin-bottom:20px;display:flex;justify-content:space-between;gap:20px}.dialog-head h2{margin:7px 0 0}.dialog-head button{width:36px;height:36px;border:1px solid var(--line);border-radius:10px;color:var(--text);background:var(--surface-2);cursor:pointer}.compact-card{padding:18px}.inline-create{display:flex;align-items:center;gap:10px}.inline-create input, .inline-create select{min-height:42px}.inline-create .button{flex:0 0 auto}.full{width:100%}.form-grid .full{grid-column:1/-1} .project-card-grid, .client-card-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.project-summary-card, .client-summary-card{display:block;transition:transform .18s ease,border-color .18s ease}@media (hover: hover) and (pointer: fine){html:not(.suppress-hover) .project-summary-card:hover, html:not(.suppress-hover) .client-summary-card:hover{border-color:rgba(139,92,246,.35);}}.project-summary-card>p{min-height:48px;color:var(--muted);font-size:.78rem;line-height:1.55}.progress-line{height:8px;margin:20px 0 13px;overflow:hidden;border-radius:99px;background:var(--surface-3)}.progress-line i{height:100%;display:block;border-radius:inherit;background:var(--brand-gradient)}.project-summary-meta{display:flex;flex-wrap:wrap;gap:11px;color:var(--muted);font-size:.69rem}.project-summary-meta strong{color:var(--text-2)}.client-summary-card .assignment-summary{margin:22px 0}.card-link{display:block;color:#cfc4ff;font-size:.78rem;font-weight:750}.client-chip-list{display:flex;flex-wrap:wrap;gap:10px}.client-chip-list a{min-width:170px;padding:13px;border:1px solid var(--line);border-radius:12px;background:var(--surface-2)}.client-chip-list strong, .client-chip-list small{display:block}.client-chip-list small{margin-top:4px;color:var(--muted)} .breadcrumbs{margin-bottom:18px;display:flex;align-items:center;gap:8px;color:var(--muted);font-size:.76rem}@media (hover: hover) and (pointer: fine){html:not(.suppress-hover) .breadcrumbs a:hover{color:var(--text);}}.project-hero, .task-hero{margin-bottom:18px;padding:26px;display:flex;align-items:flex-start;justify-content:space-between;gap:25px;border:1px solid var(--line);border-radius:19px;background:var(--soft-gradient),var(--surface)}.project-hero h1, .task-hero h1{margin:9px 0 10px;font-size:clamp(2rem,4vw,3.5rem);letter-spacing:-.05em}.project-hero p, .task-hero p{max-width:850px;color:var(--text-2);line-height:1.65}.project-summary{display:flex;align-items:center;gap:18px}.project-summary>div:last-child{display:grid;gap:4px}.project-summary small{color:var(--muted);font-size:.68rem}.progress-ring{width:102px;height:102px;display:grid;place-items:center;align-content:center;border-radius:50%;background:radial-gradient(closest-side,var(--surface) 72%,transparent 73% 99%),conic-gradient(var(--purple) calc(var(--progress)*1%),var(--surface-3) 0)}.progress-ring strong, .progress-ring small{display:block;text-align:center}.progress-ring strong{font-size:1.2rem}.task-meta{display:flex;flex-wrap:wrap;gap:10px}.task-meta span{padding:7px 10px;border:1px solid var(--line);border-radius:999px;color:var(--muted);font-size:.71rem;background:var(--surface)}.client-action-banner{margin-bottom:18px;padding:20px 22px;display:flex;align-items:center;justify-content:space-between;gap:20px;border:1px solid rgba(241,189,98,.32);border-radius:16px;background:rgba(241,189,98,.07)}.client-action-banner p{margin:4px 0 0;color:var(--muted);font-size:.8rem}.task-layout{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:18px}.task-content{min-width:0}.task-side{display:grid;align-content:start;gap:18px}.file-list{display:grid;margin-bottom:18px}.file-row{padding:14px 0;display:flex;align-items:center;justify-content:space-between;gap:16px;border-bottom:1px solid var(--line)}.file-row strong, .file-row small{display:block}.file-row small{margin-top:5px;color:var(--muted);font-size:.72rem}.file-row>span{color:#cfc4ff;font-size:.76rem}.inline-stack{margin-top:18px;padding-top:18px;border-top:1px solid var(--line)}.upload-details{margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}.upload-details summary{cursor:pointer;color:var(--text-2);font-size:.8rem;font-weight:750}.comment-list{display:grid;gap:11px}.comment{padding:16px;border:1px solid var(--line);border-radius:13px;background:var(--surface-2)}.comment-internal{border-color:rgba(241,189,98,.24);background:rgba(241,189,98,.05)}.comment-head{display:flex;align-items:center;justify-content:space-between;gap:12px}.comment-head>div{display:flex;align-items:center;gap:10px}.avatar.small{width:30px;height:30px;border-radius:9px;font-size:.75rem}.comment-head strong, .comment-head small{display:block}.comment-head small{color:var(--muted);font-size:.67rem}.comment p{margin:12px 0 0;color:var(--text-2);line-height:1.65}.internal-badge{padding:5px 8px;border-radius:99px;color:#ffe1a8;background:rgba(241,189,98,.09);font-size:.62rem;font-weight:800}.comment-form{margin-top:18px;padding-top:18px;border-top:1px solid var(--line)}.checklist{display:grid}.checklist-item{min-height:39px;display:flex;align-items:center;gap:9px;border-bottom:1px solid var(--line)}.checklist-item button{width:28px;height:28px;border:0;color:#cfc4ff;background:transparent;cursor:pointer}.checklist-item.done span{text-decoration:line-through;color:var(--muted)}.time-total strong, .time-total small{display:block}.time-total strong{font-size:1.7rem}.time-total small{color:var(--muted)}.mini-activity{margin-top:15px;display:grid}.mini-activity>div{padding:10px 0;border-bottom:1px solid var(--line)}.mini-activity strong, .mini-activity small{display:block}.mini-activity small{color:var(--muted);font-size:.7rem} .configuration-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}.configuration-grid>div{padding:13px;border:1px solid var(--line);border-radius:12px;background:var(--surface-2)}.configuration-grid small, .configuration-grid strong{display:block}.configuration-grid small{margin-bottom:7px;color:var(--muted)}.billing-plan-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:18px}.billing-plan-card h2{margin:9px 0}.price-line{margin:20px 0;display:flex;align-items:flex-end;gap:8px}.price-line strong{font-size:3.2rem;line-height:.85;letter-spacing:-.06em}.price-line span{color:var(--muted)}.billing-status-line{margin:16px 0}.credit-display{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:18px 0}.credit-display>div{padding:18px;border:1px solid var(--line);border-radius:13px;background:var(--surface-2)}.credit-display strong, .credit-display span{display:block}.credit-display strong{font-size:2rem}.credit-display span{color:var(--muted);font-size:.72rem}.purchase-card{text-align:center}.purchase-price{padding:24px;border:1px solid var(--line);border-radius:16px;background:var(--soft-gradient),var(--surface-2)}.purchase-price span, .purchase-price strong, .purchase-price small{display:block}.purchase-price strong{font-size:4rem;letter-spacing:-.07em}.purchase-price span, .purchase-price small{color:var(--muted)}.success-panel{max-width:760px;margin:8vh auto;padding:44px;text-align:center}.success-panel h1{margin:12px 0;font-size:clamp(2.2rem,5vw,4.5rem);letter-spacing:-.055em}.success-panel>p{color:var(--muted);line-height:1.65}.success-icon{width:58px;height:58px;margin:0 auto 20px;display:grid;place-items:center;border-radius:50%;color:#0e1b15;background:#76e8a4;font-size:1.6rem;font-weight:900}.payment-confirmation{margin:25px auto;max-width:450px;padding:18px;display:grid;grid-template-columns:1fr auto;align-items:center;gap:10px;border:1px solid var(--line);border-radius:14px;text-align:left}.payment-confirmation span{color:var(--text-2)} .notification-list{padding:8px}.notification-row{border-bottom:1px solid var(--line)}.notification-row:last-child{border-bottom:0}.notification-row button{width:100%;padding:16px 13px;display:grid;grid-template-columns:10px 1fr auto;align-items:start;gap:13px;border:0;border-radius:12px;color:var(--text);background:transparent;text-align:left;cursor:pointer}@media (hover: hover) and (pointer: fine){html:not(.suppress-hover) .notification-row button:hover{background:var(--surface-2);}}.notification-row p{margin:5px 0;color:var(--text-2);line-height:1.5}.notification-row small{color:var(--muted)}.notification-dot{width:8px;height:8px;margin-top:7px;border-radius:50%;background:transparent}.notification-row.unread .notification-dot{background:var(--purple);box-shadow:0 0 0 4px rgba(139,92,246,.09)}.notification-row.unread strong{color:#d8ceff}.ticket-row{padding:18px 0;display:grid;grid-template-columns:1fr auto;gap:20px;border-bottom:1px solid var(--line)}.ticket-row:last-child{border-bottom:0}.ticket-title{display:flex;align-items:center;flex-wrap:wrap;gap:8px}.ticket-row p{max-width:850px;color:var(--text-2);line-height:1.6}.ticket-row small{color:var(--muted)}.ticket-row form{display:flex;align-items:center;gap:8px}.ticket-row select{min-width:155px;min-height:40px}.check{display:flex!important;align-items:flex-start;gap:9px;color:var(--text-2);font-size:.8rem;line-height:1.5}.check input{width:17px!important;min-height:17px!important;margin-top:2px;flex:0 0 17px}.form-error{color:var(--danger)}.empty-state{padding:42px;text-align:center}.empty-state h2, .empty-state h3{margin:0 0 8px}.empty-state p{color:var(--muted)} @media(max-width:1280px){.quick-action-grid{grid-template-columns:repeat(3,1fr)}.project-card-grid, .client-card-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.configuration-grid{grid-template-columns:repeat(3,1fr)}.task-layout{grid-template-columns:minmax(0,1fr) 300px}} @media(max-width:1020px){.app-layout{display:block}.sidebar{width:260px;height:100dvh;position:fixed;left:0;top:0;z-index:120;transform:translateX(-102%);transition:transform .24s var(--ease);box-shadow:var(--shadow-lg)}.app-layout.sidebar-open .sidebar{transform:none}.sidebar .brand span, .sidebar-nav a, .sidebar-footer a{font-size:initial}.sidebar-nav a::before{content:none}.sidebar-toggle{display:grid;place-items:center}.app-header{padding:0 18px}.dashboard{padding:22px}.workspace-head, .dashboard-hero{align-items:flex-start;flex-direction:column}.task-layout, .workspace-layout, .billing-plan-grid{grid-template-columns:1fr}.project-rail{display:flex;overflow:auto}.project-rail>a{min-width:190px}.assignment-cards{grid-template-columns:1fr}.assignment-strip{width:100%;flex-wrap:wrap}.kanban-board{margin-inline:-22px;padding-inline:22px}.account-trigger>div{display:none}} @media(max-width:760px){.dashboard{padding:16px}.app-header{height:64px}.app-header>strong{display:none}.quick-action-grid, .project-card-grid, .client-card-grid, .configuration-grid, .assignment-summary, .credit-display{grid-template-columns:1fr}.quick-action-grid{grid-template-columns:1fr 1fr}.quick-action-grid a{min-height:98px}.view-toolbar, .workspace-filters{align-items:stretch;flex-direction:column}.workspace-filters input, .workspace-filters select{width:100%;max-width:none}.view-switch{width:100%;overflow:auto}.view-switch a{flex:1;justify-content:center}.toolbar-actions{width:100%}.toolbar-actions .button{flex:1}.project-hero, .task-hero, .client-action-banner{padding:20px;align-items:flex-start;flex-direction:column}.project-summary{width:100%;justify-content:space-between}.calendar-row{grid-template-columns:1fr}.calendar-row .status-badge{justify-self:start}.assignment-forms form, .inline-create, .ticket-row, .ticket-row form{align-items:stretch;flex-direction:column}.ticket-row{display:flex}.data-table th, .data-table td{padding:11px 9px}.success-panel{padding:28px 20px}.onboarding-grid{grid-template-columns:1fr}.onboarding-grid article:last-child{grid-column:auto}.form-actions .button, .form-actions form{width:100%}.form-actions form .button{width:100%}.app-dialog form{padding:19px}.metric-card{min-height:105px}.account-menu{right:-4px}} @media(max-width:440px){.quick-action-grid{grid-template-columns:1fr}.notification-button{display:none}.role-badge{font-size:.62rem}.app-header-actions{gap:4px}.project-summary{align-items:flex-start;flex-direction:column}.payment-confirmation{grid-template-columns:1fr}} .timeline-view{display:grid}.timeline-item{min-height:76px;padding:12px 0;display:grid;grid-template-columns:minmax(170px,.8fr) minmax(150px,1.3fr) 145px auto;align-items:center;gap:14px;border-bottom:1px solid var(--line)}.timeline-item:last-child{border-bottom:0}.timeline-item strong, .timeline-item small{display:block}.timeline-item small{margin-top:4px;color:var(--muted)}.timeline-item time{color:var(--text-2);font-size:.72rem}.timeline-track{height:8px;position:relative;border-radius:99px;background:linear-gradient(90deg,var(--surface-3),rgba(139,92,246,.17))}.timeline-track i{width:13px;height:13px;position:absolute;top:50%;transform:translate(-50%,-50%);border:3px solid var(--surface);border-radius:50%;background:var(--purple);box-shadow:0 0 0 2px rgba(139,92,246,.25)}.saved-view-links{margin:10px 0 16px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}.saved-view-links:empty{display:none}.saved-view-links>span{color:var(--muted);font-size:.7rem}.saved-view-links a{padding:7px 10px;border:1px solid var(--line);border-radius:9px;color:var(--text-2);font-size:.7rem;font-weight:750;background:var(--surface)}.saved-view-links button{width:25px;height:25px;border:0;color:var(--muted);background:transparent;cursor:pointer}@media(max-width:760px){.timeline-item{grid-template-columns:1fr}.timeline-track{display:none}} .reply-context{display:block;margin:8px 0 0 44px;color:var(--muted);font-size:.78rem}.comment-internal .reply-context{color:rgba(255,255,255,.58)} .status-manager{display:grid;gap:12px;margin-bottom:18px}.status-dropdown{border:1px solid var(--line);border-radius:16px;background:rgba(255,255,255,.025);overflow:hidden}.status-dropdown summary{padding:16px 18px;display:flex;align-items:center;justify-content:space-between;gap:16px;cursor:pointer;list-style:none}.status-dropdown summary::-webkit-details-marker{display:none}.status-dropdown summary::after{content:"+";display:grid;place-items:center;width:28px;height:28px;border:1px solid var(--line);border-radius:999px;color:var(--muted);font-size:1rem;flex:0 0 28px}.status-dropdown[open] summary::after{content:"−"}.status-dropdown-main{display:grid;gap:4px}.status-dropdown-main strong{font-size:1rem}.status-dropdown-main small{color:var(--muted)}.status-dropdown-trigger{padding:7px 12px;border:1px solid var(--line);border-radius:999px;color:var(--text-soft);font-size:.82rem;white-space:nowrap}.status-dropdown-form{padding:0 18px 18px;border-top:1px solid var(--line-soft)}.status-form-grid{display:grid;grid-template-columns:1.4fr .8fr;gap:12px;padding-top:16px}.status-form-grid .field{margin:0}.status-form-grid .field span{display:block;margin-bottom:7px;color:var(--muted);font-size:.88rem}.status-form-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding-top:14px}.status-add-dropdown{margin-top:2px}@media(max-width:760px){.status-dropdown summary{padding:14px}.status-form-grid{grid-template-columns:1fr}.status-form-actions{flex-direction:column;align-items:stretch}.status-form-actions .button{width:100%}.status-dropdown-trigger{display:none}} .metric-grid.metric-grid-five{grid-template-columns:repeat(5,1fr)} .metric-card[href]{color:inherit;text-decoration:none;transition:transform .18s ease,border-color .18s ease,background .18s ease} @media (hover: hover) and (pointer: fine){html:not(.suppress-hover) .metric-card[href]:hover{border-color:rgba(139,92,246,.35);background:var(--surface-2);}} .data-table details{margin-top:8px;max-width:420px} .data-table details summary{cursor:pointer;color:var(--link);font-size:.75rem;font-weight:750} .data-table details p{margin:9px 0 0;color:var(--muted);white-space:normal;line-height:1.55} .pagination{display:flex;align-items:center;justify-content:center;gap:14px;padding:18px 0 2px;color:var(--muted);font-size:.78rem} @media(max-width:1180px){.metric-grid.metric-grid-five{grid-template-columns:repeat(3,1fr)}} @media(max-width:900px){.metric-grid.metric-grid-five{grid-template-columns:repeat(2,1fr)}} @media(max-width:560px){.metric-grid.metric-grid-five{grid-template-columns:1fr}} .dashboard{display:flex;flex-direction:column;gap:28px;padding:36px} .dashboard>.flash{margin:0} .dashboard-hero, .workspace-head, .dashboard-section, .danger-zone, .admin-metrics, .quick-action-grid, .view-toolbar{margin:0} .dashboard-grid, .dashboard-grid-wide, .metric-grid, .admin-detail-grid, .settings-grid, .billing-plan-grid{gap:24px} .app-card, .settings-card{padding:28px;border-radius:20px} .metric-grid{gap:20px} .metric-card{min-height:138px;padding:24px;border-radius:18px} .quick-action-grid{gap:16px} .quick-action-grid a{min-height:122px;padding:20px;border-radius:17px} .data-table th, .data-table td{padding:17px 14px} .table-actions{gap:10px} .table-actions form{display:inline-flex} .button-danger{background:rgba(255,92,111,.13);border-color:rgba(255,92,111,.42);color:#ffe0e4} @media (hover: hover) and (pointer: fine){html:not(.suppress-hover) .button-danger:hover{background:rgba(255,92,111,.2);border-color:rgba(255,92,111,.66);}} .client-summary-grid{grid-template-columns:repeat(3,minmax(0,1fr))} .metric-soft{background:linear-gradient(145deg,rgba(255,255,255,.025),var(--surface))} .client-focus-card{padding:30px} .client-focus-alert{border-color:rgba(241,189,98,.28);background:linear-gradient(145deg,rgba(241,189,98,.045),var(--surface))} .client-focus-card .card-head{margin-bottom:18px} .client-clear-state{min-height:108px;display:flex;align-items:center;gap:18px} .clear-state-icon{width:48px;height:48px;flex:0 0 48px;display:grid;place-items:center;border:1px solid rgba(85,212,147,.34);border-radius:15px;color:#b7f4cf;background:rgba(85,212,147,.09);font-size:1.2rem;font-weight:900} .client-clear-state h2{margin:0 0 6px;font-size:1.35rem} .client-clear-state p{margin:0;color:var(--muted)} .client-bottom-grid{align-items:stretch} .team-card{display:flex;flex-direction:column} .team-list{display:grid;gap:12px;margin-bottom:24px} .team-list>div{padding:17px;border:1px solid var(--line);border-radius:14px;background:var(--surface-2)} .team-list span, .team-list strong, .team-list small{display:block} .team-list span{margin-bottom:7px;color:var(--muted);font-size:.72rem;font-weight:750} .team-list strong{font-size:1rem} .team-list small{margin-top:5px;color:var(--muted)} .team-card>.button{margin-top:auto;align-self:flex-start} .edit-display{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:20px 0} .edit-display>div{padding:20px;border:1px solid var(--line);border-radius:14px;background:var(--surface-2)} .edit-display strong, .edit-display span{display:block} .edit-display strong{font-size:2rem} .edit-display span{margin-top:4px;color:var(--muted);font-size:.75rem} .access-banner{padding:20px 22px;display:flex;align-items:center;justify-content:space-between;gap:20px;border:1px solid var(--line);border-radius:17px;background:var(--surface)} .access-banner strong{display:block;font-size:1rem} .access-banner p{margin:6px 0 0;color:var(--muted)} .access-ready{border-color:rgba(85,212,147,.27);background:linear-gradient(145deg,rgba(85,212,147,.055),var(--surface))} .access-waiting{border-color:rgba(241,189,98,.24)} .request-layout{gap:28px} .request-guide{gap:20px} .metric-card .metric-status{font-size:clamp(1.35rem,2vw,2rem);line-height:1.1} @media(max-width:1020px){.dashboard{padding:24px;gap:22px}.dashboard-grid, .dashboard-grid-wide, .metric-grid, .admin-detail-grid, .settings-grid, .billing-plan-grid{gap:18px}.app-card, .settings-card{padding:23px}} @media(max-width:760px){.dashboard{padding:16px;gap:18px}.client-summary-grid, .edit-display{grid-template-columns:1fr}.app-card, .settings-card{padding:20px;border-radius:17px}.metric-card{min-height:112px;padding:20px}.access-banner{align-items:flex-start;flex-direction:column}.access-banner .button{width:100%}.client-clear-state{align-items:flex-start}.team-card>.button{width:100%}} html[data-theme="light"]{ --bg: #eeedf5; --bg-2: #e8e7f0; --surface: #fcfcfe; --surface-2: #f3f2f8; --surface-3: #e9e7f2; --text: #131521; --text-2: #303446; --muted: #5c6276; --line: rgba(26,28,43,.13); --line-strong: rgba(26,28,43,.23); --shadow-sm: 0 8px 24px rgba(50,38,84,.10), 0 2px 7px rgba(31,27,48,.05); --shadow-lg: 0 28px 80px rgba(50,38,84,.16), 0 8px 24px rgba(31,27,48,.07); } html[data-theme="light"] body{ background: linear-gradient(145deg,#f0eff7 0%,#e9e8f1 100%); } html[data-theme="light"] .sidebar{ background: rgba(252,252,254,.97); box-shadow: 8px 0 28px rgba(42,34,68,.055); } html[data-theme="light"] .app-header{ background: rgba(249,249,252,.94); box-shadow: 0 5px 22px rgba(42,34,68,.055); } html[data-theme="light"] .app-card, html[data-theme="light"] .settings-card, html[data-theme="light"] .metric-card, html[data-theme="light"] .quick-action-grid > a, html[data-theme="light"] .assignment-strip > div, html[data-theme="light"] .assignment-summary > div, html[data-theme="light"] .status-dropdown, html[data-theme="light"] .notification-button, html[data-theme="light"] .account-trigger{ border-color: rgba(27,29,44,.13); box-shadow: var(--shadow-sm); } @media (hover: hover) and (pointer: fine){html[data-theme="light"]:not(.suppress-hover) .app-card:hover, html[data-theme="light"]:not(.suppress-hover) .quick-action-grid > a:hover, html[data-theme="light"]:not(.suppress-hover) .metric-card:hover{ border-color: rgba(104,72,198,.22); box-shadow: 0 12px 30px rgba(50,38,84,.13), 0 3px 9px rgba(31,27,48,.06); }} html[data-theme="light"] h1, html[data-theme="light"] h2, html[data-theme="light"] h3, html[data-theme="light"] .brand, html[data-theme="light"] .metric-card strong, html[data-theme="light"] .revenue-card strong{ text-shadow: 0 1px 0 rgba(255,255,255,.9), 0 2px 10px rgba(30,25,48,.055); } html[data-theme="light"] .eyebrow{ color: #5736bd; text-shadow: 0 1px 0 rgba(255,255,255,.8); } html[data-theme="light"] .sidebar-nav a, html[data-theme="light"] .sidebar-footer a{ color: #555b70; } html[data-theme="light"] .sidebar-nav a.active{ color: #171926; background: #eeebf8; box-shadow: inset 0 0 0 1px rgba(102,73,188,.08), 0 3px 10px rgba(50,38,84,.045); }@media (hover: hover) and (pointer: fine){html[data-theme="light"]:not(.suppress-hover) .sidebar-nav a:hover, html[data-theme="light"]:not(.suppress-hover) .sidebar-footer a:hover{ color: #171926; background: #eeebf8; box-shadow: inset 0 0 0 1px rgba(102,73,188,.08), 0 3px 10px rgba(50,38,84,.045); }} html[data-theme="light"] .role-badge{ text-shadow: none; box-shadow: 0 3px 10px rgba(42,34,68,.08); } html[data-theme="light"] .role-owner{ color: #744700; background: #fff0c7; border-color: #d69a24; } html[data-theme="light"] .role-admin{ color: #5331ad; background: #eee7ff; border-color: #9a78e6; } html[data-theme="light"] .role-editor{ color: #16587a; background: #e4f4fc; border-color: #72b8d7; } html[data-theme="light"] .role-client{ color: #1d6945; background: #e4f7ed; border-color: #72c69d; } html[data-theme="light"] .status-badge{ box-shadow: 0 2px 8px rgba(42,34,68,.06); } html[data-theme="light"] .button-secondary, html[data-theme="light"] .button-ghost{ background: rgba(255,255,255,.78); border-color: rgba(28,30,45,.18); box-shadow: 0 4px 12px rgba(42,34,68,.07); } html[data-theme="light"] input, html[data-theme="light"] select, html[data-theme="light"] textarea{ background: #ffffff; border-color: rgba(28,30,45,.19); box-shadow: inset 0 1px 2px rgba(30,25,48,.035), 0 2px 7px rgba(42,34,68,.035); } html[data-theme="light"] input:focus, html[data-theme="light"] select:focus, html[data-theme="light"] textarea:focus{ border-color: rgba(104,72,198,.55); box-shadow: 0 0 0 4px rgba(104,72,198,.11), 0 4px 12px rgba(42,34,68,.055); } .app-header-leading{min-width:0;display:flex;align-items:center;gap:12px}.app-header-leading>strong{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.page-back-button, .floating-page-back{display:grid;place-items:center;width:38px;height:38px;border:1px solid var(--line);border-radius:12px;color:var(--text);background:var(--surface-2);box-shadow:var(--shadow-sm);cursor:pointer;transition:transform .18s var(--ease),border-color .18s var(--ease),background .18s var(--ease),box-shadow .18s var(--ease)}.page-back-button span, .floating-page-back span{font-size:1.2rem;line-height:1}@media (hover: hover) and (pointer: fine){html:not(.suppress-hover) .page-back-button:hover, html:not(.suppress-hover) .floating-page-back:hover{border-color:var(--line-strong);background:var(--surface-3);box-shadow:var(--shadow-md);}}.page-back-button:focus-visible, .floating-page-back:focus-visible{outline:3px solid color-mix(in srgb,var(--accent) 28%,transparent);outline-offset:2px}.floating-page-back{position:fixed;left:20px;top:20px;z-index:150}.auth-page .floating-page-back{left:auto;right:20px}.sidebar-toggle+.page-back-button{margin-left:0}html[data-theme="light"] .page-back-button, html[data-theme="light"] .floating-page-back{background:#fff;border-color:rgba(40,38,64,.16);box-shadow:0 5px 16px rgba(36,32,70,.1)}@media (hover: hover) and (pointer: fine){html[data-theme="light"]:not(.suppress-hover) .page-back-button:hover, html[data-theme="light"]:not(.suppress-hover) .floating-page-back:hover{background:#f7f5ff;border-color:rgba(105,70,210,.28);box-shadow:0 8px 22px rgba(49,40,93,.14);}}@media(max-width:760px){.app-header-leading{gap:8px}.page-back-button{width:36px;height:36px}.floating-page-back{left:12px;top:12px}.auth-page .floating-page-back{right:12px}} :root{ --coral: #e75a4f; --brand-gradient: linear-gradient(120deg,#e75a4f 0%,#b4578e 45%,#7657e8 100%); --soft-gradient: linear-gradient(145deg,rgba(231,90,79,.10),rgba(118,87,232,.10) 55%,transparent 82%); } .v4-hero{ min-height: 88svh; padding-top: 132px; padding-bottom: 86px; } .v4-hero::before{ width: 520px; height: 520px; right: -180px; top: -220px; box-shadow: 0 0 0 100px rgba(118,87,232,.025),0 0 0 200px rgba(231,90,79,.018); } .v4-hero-grid{ grid-template-columns: minmax(0,.96fr) minmax(420px,1.04fr); gap: clamp(48px,7vw,96px); } .v4-hero .hero-copy h1{ max-width: 720px; font-size: clamp(4.1rem,7vw,7rem); line-height: .92; } .v4-hero .hero-copy p{ max-width: 560px; font-size: clamp(1.06rem,1.35vw,1.2rem); } .proof-chips{ display:flex; flex-wrap:wrap; gap:9px; margin-top:25px; } .proof-chips span{ padding:9px 12px; border:1px solid var(--line); border-radius:999px; color:var(--text-2); background:rgba(255,255,255,.02); font-size:.76rem; font-weight:700; } .workflow-preview{ padding:24px; border:1px solid var(--line-strong); border-radius:28px; background:linear-gradient(160deg,rgba(255,255,255,.045),rgba(255,255,255,.012)); box-shadow:var(--shadow-lg); } .workflow-preview-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:18px; padding-bottom:22px; border-bottom:1px solid var(--line); } .workflow-preview-head small, .workflow-preview-head strong{ display:block; } .workflow-preview-head small{ margin-bottom:7px; color:var(--muted); font-size:.72rem; } .workflow-preview-head strong{ font-size:1.15rem; } .workflow-preview-main{ padding:28px 0; } .preview-label{ display:block; margin-bottom:10px; color:var(--muted); font-size:.72rem; font-weight:700; } .preview-progress{ height:9px; overflow:hidden; border-radius:999px; background:var(--surface-3); } .preview-progress i{ display:block; width:58%; height:100%; border-radius:inherit; background:var(--brand-gradient); box-shadow:0 0 24px rgba(118,87,232,.32); } .preview-steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-top:24px; } .preview-steps div{ min-width:0; padding:13px 10px; border:1px solid var(--line); border-radius:13px; background:rgba(255,255,255,.018); } .preview-steps b{ width:24px; height:24px; display:grid; place-items:center; margin-bottom:10px; border:1px solid var(--line); border-radius:50%; color:var(--muted); font-size:.68rem; } .preview-steps span{ display:block; color:var(--muted); font-size:.7rem; line-height:1.35; } .preview-steps .done, .preview-steps .active{ border-color:rgba(118,87,232,.30); background:rgba(118,87,232,.065); } .preview-steps .done b{ color:white; border-color:transparent; background:#5fba8e; } .preview-steps .active b{ color:white; border-color:transparent; background:var(--purple); } .preview-steps .done span, .preview-steps .active span{ color:var(--text-2); } .workflow-preview-foot{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; padding-top:20px; border-top:1px solid var(--line); } .workflow-preview-foot div{ padding:12px; border-radius:12px; background:var(--surface-2); } .workflow-preview-foot small, .workflow-preview-foot strong{ display:block; } .workflow-preview-foot small{ margin-bottom:5px; color:var(--muted); font-size:.65rem; } .workflow-preview-foot strong{ font-size:.82rem; } .proof-band{ border-bottom:1px solid var(--line); background:var(--bg-2); } .proof-band-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; } .proof-band-grid > div{ padding:30px 32px; border-left:1px solid var(--line); } .proof-band-grid > div:last-child{ border-right:1px solid var(--line); } .proof-band-grid strong, .proof-band-grid span{ display:block; } .proof-band-grid strong{ margin-bottom:7px; font-size:1rem; } .proof-band-grid span{ color:var(--muted); font-size:.78rem; line-height:1.55; } .v4-proof-cards{ gap:18px; } .v4-proof-cards > div{ min-height:170px; padding:26px; border:1px solid var(--line); border-radius:18px; background:var(--surface); } .v4-section{ padding:clamp(78px,9vw,126px) 0; } .v4-heading{ grid-template-columns:minmax(0,1fr) minmax(240px,.42fr); margin-bottom:42px; } .v4-heading h2{ font-size:clamp(2.7rem,4.8vw,4.8rem); } .v4-step-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; } .v4-step-card{ min-height:260px; padding:28px; display:flex; flex-direction:column; border:1px solid var(--line); border-radius:20px; background:var(--surface); transition:transform .22s var(--ease),border-color .22s ease,box-shadow .22s ease; } @media (hover: hover) and (pointer: fine){html:not(.suppress-hover) .v4-step-card:hover{ border-color:rgba(118,87,232,.35); box-shadow:var(--shadow-sm); }} .v4-step-card > span{ color:#b8a8ff; font-size:.76rem; font-weight:800; letter-spacing:.1em; } .v4-step-card h3{ margin:auto 0 10px; font-size:2rem; letter-spacing:-.045em; } .v4-step-card p{ margin:0; color:var(--muted); line-height:1.62; } .v4-section-title{ margin:16px 0 20px; font-size:clamp(2.7rem,4.7vw,4.8rem); line-height:.96; letter-spacing:-.058em; } .v4-value-split{ align-items:start; } .v4-value-list{ display:grid; gap:12px; } .v4-value-list > div{ padding:20px 22px; border:1px solid var(--line); border-radius:16px; background:var(--surface); } .v4-value-list strong, .v4-value-list span{ display:block; } .v4-value-list strong{ margin-bottom:7px; font-size:1rem; } .v4-value-list span{ color:var(--muted); line-height:1.55; } .v4-sample-split{ align-items:center; } .v4-sample-panel{ min-height:480px; } .v4-pricing-grid .price-card{ min-height:500px; } .v4-pricing-grid .price-value{ margin:48px 0 20px; } .v4-final-cta{ padding:58px; text-align:center; border:1px solid var(--line); border-radius:28px; background:var(--soft-gradient),var(--surface); box-shadow:var(--shadow-sm); } .v4-final-cta h2{ margin:15px 0 10px; font-size:clamp(3rem,6vw,5.7rem); letter-spacing:-.065em; } .v4-final-cta p{ margin-bottom:26px; color:var(--muted); } .v4-page-hero{ padding:86px 0 66px; } .v4-page-hero h1{ max-width:980px; font-size:clamp(3.4rem,6vw,6rem); } .v4-page-hero p{ max-width:660px; } .v4-content-grid .info-card{ min-height:230px; } .v4-dashboard-hero{ min-height:58px; align-items:center; margin-bottom:0; } .v4-dashboard-hero h1{ margin:0; font-size:clamp(2rem,3vw,2.8rem); line-height:1; letter-spacing:-.05em; } .dashboard{ gap:24px; padding:32px; } .metric-card{ min-height:116px; padding:22px; } .metric-card > span{ font-size:.73rem; } .metric-card > strong{ margin-top:18px; } .quick-action-grid{ gap:14px; } .quick-action-grid a{ min-height:96px; padding:17px; justify-content:space-between; } .quick-action-grid a > span{ margin:0; color:var(--muted); font-size:1.15rem; } .quick-action-grid strong{ font-size:.9rem; } .app-card, .settings-card{ border-radius:18px; } .app-card{ transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease; } .card-head{ margin-bottom:20px; } .card-head h2{ font-size:1.18rem; } .card-head p{ margin-top:5px; font-size:.78rem; } .client-focus-card{ padding:24px; } .client-focus-card .card-head{ margin-bottom:14px; } .data-table th{ color:var(--muted); font-size:.69rem; letter-spacing:.045em; text-transform:uppercase; } .sidebar-nav a{ min-height:40px; } .app-header{ backdrop-filter:blur(16px) saturate(125%); } html[data-theme="light"] .workflow-preview, html[data-theme="light"] .v4-step-card, html[data-theme="light"] .v4-value-list > div, html[data-theme="light"] .v4-proof-cards > div, html[data-theme="light"] .v4-final-cta{ box-shadow:var(--shadow-sm); } html[data-theme="light"] .proof-chips span{ background:rgba(255,255,255,.65); } html[data-theme="light"] .preview-steps div{ background:#f7f6fb; } html[data-theme="light"] .preview-steps .done, html[data-theme="light"] .preview-steps .active{ background:#eeeafd; } @media(max-width:1020px){ .v4-hero{ min-height:auto; } .v4-hero-grid{ grid-template-columns:1fr; } .workflow-preview{ max-width:720px; width:100%; } .proof-band-grid{ grid-template-columns:1fr; } .proof-band-grid > div{ border-right:1px solid var(--line); border-bottom:1px solid var(--line); } .proof-band-grid > div:last-child{ border-bottom:0; } .dashboard{ padding:24px; } } @media(max-width:760px){ .v4-hero{ padding-top:112px; padding-bottom:70px; } .v4-hero .hero-copy h1{ font-size:clamp(3.45rem,16vw,5rem); } .preview-steps{ grid-template-columns:1fr 1fr; } .workflow-preview-foot{ grid-template-columns:1fr; } .v4-step-grid{ grid-template-columns:1fr; } .v4-step-card{ min-height:210px; } .v4-heading{ grid-template-columns:1fr; } .v4-final-cta{ padding:36px 22px; } .dashboard{ padding:16px; gap:18px; } .v4-dashboard-hero{ align-items:flex-start; } .v4-dashboard-hero .hero-actions{ width:100%; } .v4-dashboard-hero .hero-actions .button{ flex:1; } } :root{ --studio-ink: #08090d; --studio-ink-2: #0d0f15; --studio-panel: #12141b; --studio-panel-2: #171a22; --studio-paper: #f1ede5; --studio-paper-2: #e7e0d5; --studio-coral: #f06d62; --studio-violet: #8d63ff; --studio-lilac: #c6b5ff; --studio-display: Arial, Helvetica, sans-serif; } html.studio-loading{ overflow: hidden; } .studio-site{ background: var(--studio-ink); } .studio-site .container{ width: min(1280px, calc(100% - 56px)); } .studio-site .eyebrow{ color: var(--studio-lilac); } .studio-site .eyebrow::before{ width: 34px; } .studio-site h1, .studio-site h2, .studio-site h3{ text-wrap: balance; } .studio-site em{ font-family: var(--studio-display); font-weight: 400; } .studio-site .site-header{ z-index: 220; } .studio-site .site-header.scrolled, .studio-header.scrolled{ background: rgba(8,9,13,.82); border-color: rgba(255,255,255,.09); backdrop-filter: blur(22px) saturate(135%); } .studio-header .header-inner{ width: min(1440px, calc(100% - 42px)); } .studio-header .nav{ gap: 30px; } .studio-header .nav a{ color: rgba(241,242,248,.66); font-weight: 650; } .studio-header .nav a[aria-current="page"]{ color: white; }@media (hover: hover) and (pointer: fine){html:not(.suppress-hover) .studio-header .nav a:hover{ color: white; }} .studio-header .nav a::after{ background: linear-gradient(90deg,var(--studio-violet),var(--studio-coral)); } .studio-header .brand img{ filter: drop-shadow(0 6px 14px rgba(240,109,98,.16)); } .studio-header .button-quiet{ border-color: transparent; } .studio-scroll-progress{ position: fixed; inset: 0 0 auto; z-index: 300; height: 2px; pointer-events: none; } .studio-scroll-progress i{ display: block; width: 100%; height: 100%; transform: scaleX(0); transform-origin: left; background: linear-gradient(90deg,var(--studio-coral),var(--studio-violet)); box-shadow: 0 0 18px rgba(141,99,255,.55); } .studio-loader{ position: fixed; inset: 0; z-index: 1000; display: grid; place-content: center; gap: 24px; background: #07080b; color: white; transition: opacity .55s var(--ease), visibility .55s var(--ease); } .studio-loader::before{ content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 30% 40%,rgba(240,109,98,.12),transparent 26%),radial-gradient(circle at 72% 58%,rgba(141,99,255,.14),transparent 28%); } .studio-loader-mark{ position: relative; display: flex; align-items: center; justify-content: center; gap: 14px; font-weight: 800; letter-spacing: -.04em; font-size: 1.35rem; } .studio-loader-mark img{ width: 55px; height: 42px; object-fit: contain; transform: translateY(8px) scale(.88); opacity: 0; transition: transform .55s var(--ease), opacity .4s ease; } .studio-loader-mark span{ transform: translateY(8px); opacity: 0; transition: transform .55s .08s var(--ease), opacity .4s .08s ease; } .studio-loader-line{ position: relative; width: min(320px,62vw); height: 1px; overflow: hidden; background: rgba(255,255,255,.13); } .studio-loader-line i{ display: block; width: 100%; height: 100%; transform: scaleX(0); transform-origin: left; background: linear-gradient(90deg,var(--studio-coral),var(--studio-violet)); transition: transform 1.05s .12s var(--ease); } .studio-loader small{ position: relative; text-align: center; color: rgba(255,255,255,.44); text-transform: uppercase; letter-spacing: .18em; font-size: .62rem; opacity: 0; transition: opacity .4s .2s ease; } .studio-loader.running .studio-loader-mark img, .studio-loader.running .studio-loader-mark span{ opacity: 1; transform: none; } .studio-loader.running .studio-loader-line i{ transform: scaleX(1); } .studio-loader.running small{ opacity: 1; } .studio-loader.leaving{ opacity: 0; visibility: hidden; } .studio-hero{ min-height: 100svh; padding: 142px 0 0; position: relative; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; border-bottom: 1px solid rgba(255,255,255,.08); background: radial-gradient(circle at 72% 36%,rgba(141,99,255,.16),transparent 23%),radial-gradient(circle at 16% 74%,rgba(240,109,98,.10),transparent 29%),linear-gradient(180deg,#08090d,#0b0c11); } .studio-hero::before{ content: ""; position: absolute; inset: 0; opacity: .32; pointer-events: none; background-image: linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px); background-size: 72px 72px; mask-image: linear-gradient(to bottom,black 0%,transparent 90%); } .studio-hero-noise{ position: absolute; inset: 0; pointer-events: none; opacity: .065; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.86' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.6'/%3E%3C/svg%3E"); } .studio-hero-grid{ position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0,1.05fr) minmax(440px,.95fr); gap: clamp(50px,8vw,125px); align-items: center; padding-bottom: 92px; } .studio-hero-copy h1{ margin: 24px 0 28px; max-width: 860px; padding: .07em .1em .13em 0; overflow: visible; font-size: clamp(4.1rem,7.3vw,8rem); line-height: 1; letter-spacing: -.064em; font-weight: 790; text-wrap: initial; } .studio-hero-copy h1 > span, .studio-hero-copy h1 > em{ display: block; max-width: 100%; overflow: visible; text-wrap: balance; } .studio-hero-copy h1 > span{ line-height: .92; } .studio-hero-copy h1 em{ margin-top: .09em; padding: .02em .1em .1em 0; color: transparent; background: linear-gradient(105deg,#f28a70 0%,#d872a5 46%,#9c78ff 100%); background-clip: text; -webkit-background-clip: text; line-height: .98; letter-spacing: -.05em; } .studio-hero-copy > p{ max-width: 650px; color: #aaadba; font-size: clamp(1.08rem,1.35vw,1.25rem); line-height: 1.65; } .studio-proof-line{ margin-top: 34px; display: flex; align-items: center; flex-wrap: wrap; gap: 12px; color: rgba(255,255,255,.48); font-size: .72rem; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; } .studio-proof-line i{ width: 4px; height: 4px; border-radius: 50%; background: var(--studio-coral); } .creative-orbit{ --shine-x:50%; --shine-y:50%; min-height: 600px; position: relative; isolation: isolate; } .creative-orbit::before{ content: ""; position: absolute; inset: 8%; border-radius: 50%; background: radial-gradient(circle at var(--shine-x) var(--shine-y),rgba(255,255,255,.09),transparent 24%),radial-gradient(circle,rgba(141,99,255,.12),transparent 62%); filter: blur(2px); } .orbit-ring{ position: absolute; inset: 14%; border: 1px solid rgba(255,255,255,.12); border-radius: 50%; animation: studioSpin 28s linear infinite; } .orbit-ring::before, .orbit-ring::after{ content: ""; position: absolute; width: 9px; height: 9px; border-radius: 50%; background: var(--studio-coral); box-shadow: 0 0 24px rgba(240,109,98,.8); } .orbit-ring::before{ left: 10%; top: 18%; }.orbit-ring::after{ right: 8%; bottom: 22%; background: var(--studio-violet); box-shadow: 0 0 24px rgba(141,99,255,.8); } .orbit-ring-two{ inset: 27%; animation-direction: reverse; animation-duration: 19s; opacity: .7; } .orbit-core{ position: absolute; inset: 37% 28%; min-height: 155px; padding: 24px; display: grid; place-content: center; text-align: center; border: 1px solid rgba(255,255,255,.17); border-radius: 30px; background: linear-gradient(155deg,rgba(255,255,255,.10),rgba(255,255,255,.025)); box-shadow: 0 35px 90px rgba(0,0,0,.42),inset 0 1px rgba(255,255,255,.15); backdrop-filter: blur(18px); } .orbit-core small{ color: var(--studio-lilac); text-transform: uppercase; letter-spacing: .18em; font-size: .58rem; } .orbit-core strong{ margin: 8px 0 5px; font-family: var(--studio-display); font-size: clamp(1.8rem,2.5vw,2.7rem); font-weight: 400; } .orbit-core span{ color: rgba(255,255,255,.48); font-size: .72rem; } .orbit-card{ position: absolute; width: 155px; min-height: 180px; padding: 18px; display: flex; flex-direction: column; justify-content: flex-end; border: 1px solid rgba(255,255,255,.13); border-radius: 20px; background: linear-gradient(160deg,rgba(255,255,255,.085),rgba(255,255,255,.025)); box-shadow: 0 25px 65px rgba(0,0,0,.38); backdrop-filter: blur(18px); animation: orbitFloat 6s ease-in-out infinite; } .orbit-card::before{ content: ""; position: absolute; inset: 12px; border-radius: 13px; background: linear-gradient(145deg,rgba(240,109,98,.24),rgba(141,99,255,.12) 55%,transparent); opacity: .65; } .orbit-card span, .orbit-card strong, .orbit-card small{ position: relative; } .orbit-card span{ margin-bottom: auto; color: rgba(255,255,255,.45); font-size: .65rem; } .orbit-card strong{ font-size: 1.2rem; } .orbit-card small{ margin-top: 4px; color: rgba(255,255,255,.46); } .orbit-card-one{ left: 1%; top: 15%; transform: rotate(-7deg); } .orbit-card-two{ right: 0; top: 10%; transform: rotate(6deg); animation-delay: -1.5s; } .orbit-card-three{ left: 5%; bottom: 6%; transform: rotate(5deg); animation-delay: -3s; } .orbit-card-four{ right: 2%; bottom: 4%; transform: rotate(-6deg); animation-delay: -4.5s; } .studio-marquee{ position: relative; z-index: 3; width: 100%; overflow: hidden; border-top: 1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.025); } .studio-marquee > div{ width: max-content; min-width: 200%; height: 58px; display: flex; align-items: center; justify-content: space-around; gap: 28px; color: rgba(255,255,255,.55); font-size: .72rem; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; animation: studioMarquee 28s linear infinite; } .studio-marquee b{ color: var(--studio-coral); font-size: .8rem; } .studio-paper-section{ background: var(--studio-paper); color: #121318; } .studio-paper-section .eyebrow{ color: #6947d3; } .studio-paper-section .muted{ color: #5e5d64; } .editorial-statement{ padding: clamp(105px,12vw,180px) 0; } .statement-grid{ display: grid; grid-template-columns: 150px minmax(0,1.15fr) minmax(260px,.55fr); gap: clamp(35px,6vw,90px); align-items: end; } .statement-index{ align-self: start; padding-top: 11px; color: #6f6c72; font-size: .7rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; } .statement-grid h2{ margin: 0; max-width: 790px; font-size: clamp(3.3rem,6.2vw,7rem); line-height: .9; letter-spacing: -.07em; } .statement-grid h2 em{ color: #e15e57; } .statement-grid p{ margin: 0; color: #55545a; font-size: 1.02rem; line-height: 1.75; } .studio-services-section{ background: var(--studio-ink); } .studio-section-head{ display: flex; align-items: end; justify-content: space-between; gap: 40px; margin-bottom: 55px; } .studio-section-head h2{ margin: 16px 0 0; max-width: 830px; font-size: clamp(3rem,5.4vw,6rem); line-height: .92; letter-spacing: -.065em; } .studio-section-head > p{ max-width: 430px; margin: 0; color: var(--muted); line-height: 1.7; } .text-link{ display: inline-flex; align-items: center; gap: 9px; color: var(--text-2); font-weight: 750; } .text-link span{ transition: transform .2s var(--ease); }@media (hover: hover) and (pointer: fine){html:not(.suppress-hover) .text-link:hover span{ }} .studio-service-grid{ display: grid; grid-template-columns: repeat(4,1fr); gap: 14px; } .studio-service-card{ --shine-x:50%; --shine-y:50%; min-height: 430px; padding: 25px; display: flex; flex-direction: column; position: relative; overflow: hidden; border: 1px solid rgba(255,255,255,.10); border-radius: 22px; background: radial-gradient(circle at var(--shine-x) var(--shine-y),rgba(255,255,255,.08),transparent 30%),linear-gradient(160deg,#151720,#0d0f14); transition: border-color .22s cubic-bezier(.22,1,.36,1),box-shadow .22s cubic-bezier(.22,1,.36,1); } .studio-service-card::after{ content: ""; position: absolute; width: 220px; height: 220px; right: -100px; top: -100px; border-radius: 50%; background: radial-gradient(circle,rgba(141,99,255,.16),transparent 68%); } .studio-service-card:nth-child(2)::after, .studio-service-card:nth-child(4)::after{ background: radial-gradient(circle,rgba(240,109,98,.15),transparent 68%); } @media (hover: hover) and (pointer: fine){html:not(.suppress-hover) .studio-service-card:hover{ border-color: rgba(198,181,255,.34); }} .studio-service-card > span{ color: rgba(255,255,255,.35); font-size: .7rem; letter-spacing: .1em; } .studio-service-card h3{ margin: auto 0 14px; font-family: var(--studio-display); font-size: clamp(2.1rem,3vw,3.2rem); font-weight: 400; letter-spacing: -.045em; } .studio-service-card p{ color: #9da1b1; line-height: 1.65; } .service-tags{ display: flex; flex-wrap: wrap; gap: 7px; margin-top: 18px; } .service-tags i{ padding: 7px 10px; border: 1px solid rgba(255,255,255,.1); border-radius: 999px; color: rgba(255,255,255,.54); font-size: .65rem; font-style: normal; } .studio-process-section{ background: #0c0e13; } .studio-process-grid{ display: grid; grid-template-columns: .7fr 1.3fr; gap: clamp(60px,10vw,150px); } .studio-process-copy{ position: sticky; top: 130px; align-self: start; } .studio-process-copy h2{ margin: 18px 0 22px; font-size: clamp(3.2rem,5vw,5.8rem); line-height: .91; letter-spacing: -.065em; } .studio-process-copy h2 em{ color: var(--studio-coral); } .studio-process-copy p{ max-width: 430px; color: var(--muted); line-height: 1.7; } .studio-process-copy .button{ margin-top: 18px; } .studio-process-list{ margin: 0; padding: 0; list-style: none; border-top: 1px solid rgba(255,255,255,.10); } .studio-process-list li{ min-height: 190px; padding: 34px 0; display: grid; grid-template-columns: 62px 1fr auto; gap: 25px; align-items: center; border-bottom: 1px solid rgba(255,255,255,.10); opacity: .52; transition: opacity .22s cubic-bezier(.22,1,.36,1),background .22s cubic-bezier(.22,1,.36,1); } .studio-process-list li.is-active{ opacity: 1; background: linear-gradient(90deg,rgba(141,99,255,.08),transparent 58%); }@media (hover: hover) and (pointer: fine){html:not(.suppress-hover) .studio-process-list li:hover{ opacity: 1; background: linear-gradient(90deg,rgba(141,99,255,.08),transparent 58%); }} .studio-process-list li > span{ color: var(--studio-lilac); font-size: .72rem; font-weight: 800; } .studio-process-list h3{ margin: 0 0 8px; font-size: clamp(1.8rem,3vw,3rem); letter-spacing: -.05em; } .studio-process-list p{ margin: 0; color: var(--muted); } .studio-process-list b{ padding: 8px 11px; border: 1px solid rgba(255,255,255,.11); border-radius: 999px; color: rgba(255,255,255,.48); font-size: .62rem; text-transform: uppercase; letter-spacing: .08em; } .studio-output-section{ background: linear-gradient(180deg,#0a0b10,#10121a); } .studio-output-grid{ display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(55px,9vw,130px); align-items: center; } .studio-output-grid h2{ margin: 18px 0 22px; font-size: clamp(3.2rem,5vw,5.7rem); line-height: .93; letter-spacing: -.065em; } .studio-output-grid p{ color: var(--muted); line-height: 1.72; } .output-visual{ min-height: 580px; padding: 50px; display: grid; grid-template-columns: 1fr 90px 1fr; align-items: center; position: relative; overflow: hidden; border: 1px solid rgba(255,255,255,.11); border-radius: 30px; background: radial-gradient(circle at 40% 45%,rgba(240,109,98,.18),transparent 25%),radial-gradient(circle at 72% 65%,rgba(141,99,255,.18),transparent 27%),#0d0f15; } .source-frame{ aspect-ratio: 9/14; padding: 22px; display: flex; flex-direction: column; justify-content: flex-end; border: 1px solid rgba(255,255,255,.17); border-radius: 24px; background: linear-gradient(160deg,rgba(240,109,98,.31),rgba(141,99,255,.20) 52%,rgba(255,255,255,.03)); box-shadow: 0 30px 70px rgba(0,0,0,.45); transform: rotate(-4deg); } .source-frame small{ margin-bottom: auto; color: rgba(255,255,255,.55); }.source-frame strong{ font-family: var(--studio-display); font-size: 5rem; font-weight: 400; }.source-frame span{ color: rgba(255,255,255,.58); } .output-lines{ display: grid; gap: 38px; }.output-lines i{ height: 1px; background: linear-gradient(90deg,rgba(255,255,255,.35),rgba(255,255,255,.06)); } .output-stack{ display: grid; gap: 14px; }.output-stack article{ min-height: 105px; padding: 18px; display: flex; flex-direction: column; justify-content: flex-end; border: 1px solid rgba(255,255,255,.11); border-radius: 17px; background: rgba(255,255,255,.035); box-shadow: 0 18px 50px rgba(0,0,0,.28); }.output-stack article:nth-child(2){ transform: translateX(16px); }.output-stack b{ font-size: 1.15rem; }.output-stack span{ margin-top: 5px; color: var(--muted); font-size: .72rem; } .studio-checks{ margin: 28px 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 13px 20px; } .studio-checks li{ display: flex; gap: 10px; color: var(--text-2); font-size: .9rem; }.studio-checks li::before{ content: ""; width: 8px; height: 8px; margin-top: 6px; border-radius: 50%; background: linear-gradient(135deg,var(--studio-coral),var(--studio-violet)); box-shadow: 0 0 0 5px rgba(141,99,255,.08); } .studio-proof-section{ background: var(--studio-ink); } .experience-grid{ display: grid; grid-template-columns: 1.5fr .75fr .75fr; gap: 14px; } .experience-main, .experience-card{ min-height: 390px; padding: 30px; border: 1px solid rgba(255,255,255,.10); border-radius: 22px; background: linear-gradient(155deg,#151720,#0d0f14); } .experience-main{ display: flex; flex-direction: column; justify-content: flex-end; position: relative; overflow: hidden; } .experience-main::before{ content: ""; position: absolute; width: 420px; height: 420px; right: -160px; top: -190px; border-radius: 50%; border: 1px solid rgba(141,99,255,.20); box-shadow: 0 0 0 70px rgba(141,99,255,.035),0 0 0 140px rgba(240,109,98,.02); } .experience-main > span{ margin-bottom: auto; font-family: var(--studio-display); font-size: clamp(5rem,9vw,10rem); line-height: .8; color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,.28); } .experience-main h3{ max-width: 770px; font-size: clamp(1.6rem,2.7vw,3rem); line-height: 1.05; letter-spacing: -.045em; } .experience-main p, .experience-card p{ color: var(--muted); line-height: 1.65; } .experience-card{ display: flex; flex-direction: column; justify-content: flex-end; } .experience-card small{ margin-bottom: auto; color: var(--studio-lilac); text-transform: uppercase; letter-spacing: .12em; font-size: .62rem; } .experience-card strong{ margin-bottom: 14px; font-family: var(--studio-display); font-size: 2.5rem; font-weight: 400; line-height: 1; } .studio-offers-section{ background: #0d0f14; } .offer-grid{ display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; } .offer-card{ min-height: 380px; padding: 28px; display: flex; flex-direction: column; border: 1px solid rgba(255,255,255,.10); border-radius: 22px; background: #13151c; transition: transform .3s var(--ease),border-color .3s ease; } @media (hover: hover) and (pointer: fine){html:not(.suppress-hover) .offer-card:hover{ border-color: rgba(198,181,255,.32); }} .offer-card > span{ color: rgba(255,255,255,.35); font-size: .7rem; }.offer-card h3{ margin: auto 0 14px; font-family: var(--studio-display); font-size: clamp(2.2rem,3.2vw,3.6rem); font-weight: 400; }.offer-card p{ color: var(--muted); line-height: 1.65; }.offer-card a{ margin-top: 22px; display: flex; justify-content: space-between; border-top: 1px solid rgba(255,255,255,.10); padding-top: 18px; font-weight: 750; } .offer-card-featured{ background: linear-gradient(155deg,rgba(141,99,255,.20),rgba(240,109,98,.09) 50%,#13151c); border-color: rgba(141,99,255,.28); } .studio-final-section{ background: #08090d; } .studio-final-card{ min-height: 520px; padding: clamp(42px,7vw,95px); display: flex; flex-direction: column; justify-content: center; position: relative; overflow: hidden; border: 1px solid rgba(255,255,255,.12); border-radius: 34px; background: radial-gradient(circle at 75% 35%,rgba(141,99,255,.23),transparent 24%),radial-gradient(circle at 12% 80%,rgba(240,109,98,.15),transparent 25%),linear-gradient(145deg,#14161f,#0b0c11); } .studio-final-card::after{ content: "M"; position: absolute; right: 5%; bottom: -22%; color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,.08); font-family: var(--studio-display); font-size: clamp(18rem,35vw,35rem); line-height: 1; pointer-events: none; } .studio-final-card h2{ margin: 20px 0 0; max-width: 930px; position: relative; z-index: 1; font-size: clamp(3.4rem,6.3vw,7.2rem); line-height: .9; letter-spacing: -.07em; } .studio-final-card .hero-actions, .studio-final-card .eyebrow{ position: relative; z-index: 1; } .studio-footer{ background: #08090d; border-top: 1px solid rgba(255,255,255,.08); } .studio-footer-cta{ min-height: 240px; display: flex; align-items: center; justify-content: space-between; gap: 30px; border-bottom: 1px solid rgba(255,255,255,.10); } .studio-footer-cta h2{ margin: 13px 0 0; font-family: var(--studio-display); font-size: clamp(2.4rem,4vw,4.7rem); font-weight: 400; letter-spacing: -.05em; } .studio-footer .footer-grid{ grid-template-columns: 1.5fr repeat(3,.65fr); } .studio-page{ padding-top: 78px; } .studio-page-hero{ min-height: 610px; padding: 130px 0 90px; display: flex; align-items: flex-end; position: relative; overflow: hidden; border-bottom: 1px solid rgba(255,255,255,.09); background: radial-gradient(circle at 78% 30%,rgba(141,99,255,.15),transparent 25%),radial-gradient(circle at 15% 80%,rgba(240,109,98,.08),transparent 28%),#090a0e; } .studio-page-hero::before{ content: ""; position: absolute; inset: 0; opacity: .27; background-image: linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px); background-size: 72px 72px; mask-image: linear-gradient(to bottom,black,transparent); } .studio-page-hero .container, .studio-page-hero .narrow{ position: relative; z-index: 1; } .studio-page-hero h1{ margin: 20px 0 24px; max-width: 1040px; font-size: clamp(4rem,7.4vw,8rem); line-height: .88; letter-spacing: -.072em; } .studio-page-hero p{ max-width: 700px; color: #a6a9b7; font-size: 1.12rem; line-height: 1.7; } .service-detail-list{ border-top: 1px solid rgba(255,255,255,.10); } .service-detail{ min-height: 270px; padding: 42px 0; display: grid; grid-template-columns: 70px 1fr 1fr 1fr; gap: clamp(25px,4vw,60px); align-items: start; border-bottom: 1px solid rgba(255,255,255,.10); } .service-detail > span{ color: var(--studio-lilac); font-weight: 800; }.service-detail small{ color: var(--muted); text-transform: uppercase; letter-spacing: .1em; }.service-detail h2{ margin: 10px 0 0; font-family: var(--studio-display); font-size: clamp(2.2rem,3.5vw,4.2rem); font-weight: 400; line-height: .95; }.service-detail > p{ color: var(--muted); line-height: 1.7; }.service-detail ul{ margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; }.service-detail li{ padding-bottom: 10px; border-bottom: 1px solid rgba(255,255,255,.08); color: var(--text-2); } .dark-on-paper h2{ color: #121318; }.dark-on-paper p{ color: #5d5c63; } .horizontal-process{ margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(6,1fr); border: 1px solid rgba(17,18,22,.13); border-radius: 24px; overflow: hidden; } .horizontal-process li{ min-height: 285px; padding: 24px; display: flex; flex-direction: column; border-right: 1px solid rgba(17,18,22,.12); }.horizontal-process li:last-child{ border-right: 0; }.horizontal-process span{ color: #8a5cef; font-size: .7rem; font-weight: 800; }.horizontal-process h3{ margin: auto 0 10px; font-family: var(--studio-display); font-size: 2rem; font-weight: 400; }.horizontal-process p{ margin: 0; color: #626168; line-height: 1.55; font-size: .86rem; } .studio-two-paths{ display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(50px,8vw,110px); align-items: center; }.studio-two-paths h2{ margin: 18px 0 20px; font-size: clamp(3rem,5vw,5.7rem); line-height: .93; letter-spacing: -.065em; }.studio-two-paths > div:first-child p{ color: var(--muted); line-height: 1.7; }.path-cards{ display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }.path-cards article{ min-height: 370px; padding: 27px; display: flex; flex-direction: column; justify-content: flex-end; border: 1px solid rgba(255,255,255,.1); border-radius: 22px; background: linear-gradient(150deg,rgba(141,99,255,.13),#12141a 50%); }.path-cards article:last-child{ background: linear-gradient(150deg,rgba(240,109,98,.13),#12141a 50%); }.path-cards span{ margin-bottom: auto; color: var(--studio-lilac); text-transform: uppercase; letter-spacing: .1em; font-size: .62rem; }.path-cards h3{ font-family: var(--studio-display); font-size: 2.8rem; font-weight: 400; }.path-cards p{ color: var(--muted); line-height: 1.65; } .confidential-grid{ display: grid; grid-template-columns: 1.5fr .75fr .75fr; gap: 14px; }.confidential-main, .confidential-card{ min-height: 450px; padding: 30px; border: 1px solid rgba(255,255,255,.1); border-radius: 24px; background: #12141b; }.confidential-main{ display: flex; flex-direction: column; justify-content: flex-end; background: radial-gradient(circle at 80% 10%,rgba(141,99,255,.20),transparent 32%),#12141b; }.confidential-label{ margin-bottom: auto; display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: .68rem; text-transform: uppercase; letter-spacing: .1em; }.confidential-label span{ width: 8px; height: 8px; border-radius: 50%; background: #55d79f; }.confidential-main > strong{ font-family: var(--studio-display); font-size: clamp(6rem,10vw,11rem); font-weight: 400; line-height: .76; }.confidential-main h2{ max-width: 700px; font-size: clamp(1.6rem,2.6vw,2.8rem); line-height: 1.05; letter-spacing: -.045em; }.confidential-main p, .confidential-card p{ color: var(--muted); }.confidential-card{ display: flex; flex-direction: column; justify-content: flex-end; }.confidential-card small{ margin-bottom: auto; color: var(--studio-lilac); text-transform: uppercase; letter-spacing: .1em; }.confidential-card strong{ margin-bottom: 15px; font-family: var(--studio-display); font-size: 2.6rem; font-weight: 400; line-height: 1; } .sample-proof-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: clamp(55px,9vw,120px); align-items: center; }.sample-proof-copy h2{ margin: 18px 0 20px; font-size: clamp(3rem,5.3vw,5.8rem); line-height: .92; letter-spacing: -.065em; }.sample-proof-copy p{ color: #5c5b61; line-height: 1.7; }.button-dark{ color: white; background: #15161b; border-color: #15161b; }@media (hover: hover) and (pointer: fine){html:not(.suppress-hover) .button-dark:hover{ background: #282a31; }}.sample-proof-board{ display: grid; grid-template-columns: 1fr 1fr; gap: 10px; transform: rotate(2deg); }.sample-proof-board article{ min-height: 170px; padding: 22px; display: flex; flex-direction: column; justify-content: space-between; border: 1px solid rgba(17,18,22,.15); border-radius: 18px; background: rgba(255,255,255,.42); box-shadow: 0 18px 40px rgba(42,35,28,.08); }.sample-proof-board span{ color: #7350d8; font-size: .72rem; }.sample-proof-board strong{ font-family: var(--studio-display); font-size: 1.8rem; font-weight: 400; } .quality-grid{ display: grid; grid-template-columns: repeat(4,1fr); gap: 14px; }.quality-grid article{ min-height: 310px; padding: 25px; display: flex; flex-direction: column; justify-content: flex-end; border-top: 1px solid rgba(255,255,255,.18); }.quality-grid span{ margin-bottom: auto; color: var(--studio-lilac); font-size: .7rem; }.quality-grid h3{ font-family: var(--studio-display); font-size: 2rem; font-weight: 400; }.quality-grid p{ color: var(--muted); line-height: 1.65; } .pricing-note{ margin-bottom: 18px; padding: 15px 18px; display: flex; justify-content: space-between; gap: 20px; border: 1px solid rgba(240,109,98,.22); border-radius: 15px; background: rgba(240,109,98,.06); }.pricing-note span{ color: #ff9a8e; font-weight: 800; }.pricing-note p{ margin: 0; color: var(--muted); }.studio-pricing-grid{ display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; }.studio-price-card{ min-height: 650px; padding: 30px; display: flex; flex-direction: column; border: 1px solid rgba(255,255,255,.10); border-radius: 24px; background: #12141b; }.studio-price-card.featured{ background: radial-gradient(circle at 80% 5%,rgba(141,99,255,.22),transparent 31%),linear-gradient(155deg,#19182a,#12141b); border-color: rgba(141,99,255,.30); }.price-number{ color: rgba(255,255,255,.35); font-size: .7rem; }.studio-price-card > small{ margin-top: 45px; color: var(--studio-lilac); text-transform: uppercase; letter-spacing: .1em; }.studio-price-card h2{ margin: 12px 0 30px; font-family: var(--studio-display); font-size: clamp(2.5rem,3.5vw,4rem); font-weight: 400; }.studio-price{ display: flex; align-items: end; gap: 12px; padding-bottom: 24px; border-bottom: 1px solid rgba(255,255,255,.10); }.studio-price strong{ font-size: clamp(2.5rem,4vw,4.8rem); line-height: .9; letter-spacing: -.06em; }.studio-price span{ color: var(--muted); font-size: .72rem; }.studio-price-card > p{ color: var(--muted); line-height: 1.65; }.studio-price-card .studio-checks{ grid-template-columns: 1fr; margin-bottom: 30px; }.studio-price-card .button{ margin-top: auto; }.single-edit-strip{ margin-top: 14px; padding: 25px 28px; display: flex; align-items: center; justify-content: space-between; gap: 20px; border: 1px solid rgba(255,255,255,.1); border-radius: 20px; background: #101218; }.single-edit-strip span, .single-edit-strip strong{ display: block; }.single-edit-strip span{ color: var(--muted); font-size: .75rem; }.single-edit-strip strong{ margin-top: 6px; }.pricing-fit-grid{ display: flex; align-items: end; justify-content: space-between; gap: 50px; }.pricing-fit-grid h2{ margin: 17px 0 16px; font-size: clamp(3rem,5vw,5.7rem); line-height: .92; letter-spacing: -.065em; }.pricing-fit-grid p{ max-width: 600px; color: #5d5c62; } .about-story-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }.about-story-card{ min-height: 520px; padding: 36px; display: flex; flex-direction: column; justify-content: flex-end; border: 1px solid rgba(255,255,255,.1); border-radius: 25px; background: radial-gradient(circle at 80% 12%,rgba(141,99,255,.18),transparent 32%),#12141b; }.about-story-card:last-child{ background: radial-gradient(circle at 18% 10%,rgba(240,109,98,.14),transparent 30%),#12141b; }.about-story-card .eyebrow{ margin-bottom: auto; }.about-story-card h2{ font-family: var(--studio-display); font-size: clamp(3rem,4.7vw,5.5rem); font-weight: 400; line-height: .9; }.about-story-card p{ max-width: 560px; color: var(--muted); line-height: 1.7; }.values-layout{ display: grid; grid-template-columns: .75fr 1.25fr; gap: clamp(55px,9vw,120px); }.values-layout > div:first-child h2{ margin: 18px 0 0; font-size: clamp(3.4rem,5.3vw,6rem); line-height: .9; letter-spacing: -.065em; }.value-lines{ border-top: 1px solid rgba(17,18,22,.16); }.value-lines article{ padding: 27px 0; display: grid; grid-template-columns: 55px .75fr 1fr; gap: 25px; border-bottom: 1px solid rgba(17,18,22,.16); }.value-lines span{ color: #7350d8; font-weight: 800; }.value-lines h3{ margin: 0; font-family: var(--studio-display); font-size: 1.8rem; font-weight: 400; }.value-lines p{ margin: 0; color: #5c5b61; line-height: 1.6; }.founder-strip{ padding: 35px; display: grid; grid-template-columns: 1fr 1fr auto; align-items: center; gap: 30px; border: 1px solid rgba(255,255,255,.1); border-radius: 22px; background: #12141b; }.founder-strip small, .founder-strip strong{ display: block; }.founder-strip small{ color: var(--muted); }.founder-strip strong{ margin-top: 5px; font-family: var(--studio-display); font-size: 2.2rem; font-weight: 400; }.founder-strip p{ margin: 0; color: var(--muted); } .studio-faq .faq-item summary{ min-height: 100px; font-size: 1.15rem; }.studio-faq .faq-item p{ max-width: 760px; color: #a6a9b7; }.rules-grid{ display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; }.rule-card{ min-height: 320px; padding: 27px; display: flex; flex-direction: column; justify-content: flex-end; border: 1px solid rgba(255,255,255,.1); border-radius: 21px; background: #12141b; }.rule-card span{ margin-bottom: auto; color: var(--studio-lilac); font-size: .7rem; }.rule-card h2,.rule-card h3{ font-family: var(--studio-display); font-size: 2.1rem; font-weight: 400; line-height: 1; }.rule-card p{ color: var(--muted); line-height: 1.65; } .support-grid{ display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; }.support-card{ min-height: 390px; padding: 30px; display: flex; flex-direction: column; justify-content: flex-end; border: 1px solid rgba(255,255,255,.10); border-radius: 24px; background: #12141b; }.support-card > span{ margin-bottom: auto; color: var(--studio-lilac); text-transform: uppercase; letter-spacing: .1em; font-size: .65rem; }.support-card h2{ font-family: var(--studio-display); font-size: 2.8rem; font-weight: 400; }.support-card p{ color: var(--muted); }.support-card a{ margin-top: 20px; padding-top: 18px; display: flex; justify-content: space-between; border-top: 1px solid rgba(255,255,255,.1); font-weight: 750; } .legal-copy h2{ margin-top: 45px; font-family: var(--studio-display); font-size: 2.2rem; font-weight: 400; }.legal-copy p{ color: var(--muted); line-height: 1.8; }.legal-note{ margin-top: 45px; padding: 22px; border: 1px solid rgba(240,109,98,.23); border-radius: 16px; background: rgba(240,109,98,.06); color: #f2b0a7; line-height: 1.6; } .contact-studio-grid{ display: grid; grid-template-columns: .75fr 1.25fr; gap: clamp(50px,8vw,110px); align-items: start; }.contact-studio-copy{ position: sticky; top: 130px; }.contact-steps{ margin: 28px 0 35px; padding: 0; list-style: none; border-top: 1px solid rgba(255,255,255,.1); }.contact-steps li{ padding: 22px 0; display: grid; grid-template-columns: 45px 1fr; gap: 18px; border-bottom: 1px solid rgba(255,255,255,.1); }.contact-steps span{ color: var(--studio-lilac); font-size: .7rem; }.contact-steps strong{ display: block; }.contact-steps p{ margin: 6px 0 0; color: var(--muted); }.studio-contact-form{ padding: clamp(28px,4vw,48px); background: #12141b; }.studio-contact-form textarea{ min-height: 210px; } .error-hero{ min-height: 72svh; } body.app-page{ background: radial-gradient(circle at 88% -5%,rgba(141,99,255,.08),transparent 27%),var(--bg); } body.app-page .app-card, body.app-page .metric-card{ box-shadow: 0 18px 44px rgba(0,0,0,.12); } body.app-page .app-card{ border-color: rgba(255,255,255,.105); } body.app-page .metric-card{ background: linear-gradient(145deg,rgba(255,255,255,.035),rgba(255,255,255,.015)); } body.app-page .dashboard-hero h1{ letter-spacing: -.055em; } body.app-page .sidebar-nav a.active{ box-shadow: inset 3px 0 0 var(--studio-violet); } @media (hover: hover) and (pointer: fine){html:not(.suppress-hover) body.app-page .quick-action-grid a:hover{ border-color: rgba(141,99,255,.32); box-shadow: 0 18px 45px rgba(0,0,0,.18); }} @keyframes studioSpin { to { transform: rotate(360deg); } } @keyframes orbitFloat { 0%,100% { translate: 0 0; } 50% { translate: 0 -12px; } } @keyframes studioMarquee { to { transform: translateX(-50%); } } @media (max-width: 1120px) { .studio-hero-grid{ grid-template-columns: 1fr; padding-bottom: 70px; } .studio-hero-copy{ max-width: 850px; } .creative-orbit{ width: min(680px,100%); margin-inline: auto; } .studio-service-grid{ grid-template-columns: 1fr 1fr; } .studio-process-grid, .studio-output-grid, .studio-two-paths, .contact-studio-grid{ grid-template-columns: 1fr; } .studio-process-copy, .contact-studio-copy{ position: static; } .experience-grid, .confidential-grid{ grid-template-columns: 1fr 1fr; } .experience-main, .confidential-main{ grid-column: 1/-1; } .horizontal-process{ grid-template-columns: repeat(3,1fr); } .horizontal-process li:nth-child(3){ border-right: 0; }.horizontal-process li:nth-child(-n/**/+3){ border-bottom: 1px solid rgba(17,18,22,.12); } .service-detail{ grid-template-columns: 55px 1fr 1fr; }.service-detail ul{ grid-column: 2/-1; } } @media (max-width: 820px) { .studio-site .container{ width: min(100% - 34px,1280px); } .studio-hero{ padding-top: 125px; } .studio-hero-copy h1{ max-width: 100%; padding-right: .14em; font-size: clamp(3.25rem,13.2vw,5.45rem); letter-spacing: -.058em; } .studio-hero-copy h1 > span{ line-height: .96; } .studio-hero-copy h1 em{ margin-top: .11em; padding-right: .14em; line-height: 1; letter-spacing: -.045em; } .creative-orbit{ min-height: 520px; transform: none; } .orbit-card{ width: 125px; min-height: 145px; }.orbit-core{ inset: 35% 24%; }.orbit-ring{ inset: 13%; } .statement-grid{ grid-template-columns: 1fr; }.statement-index{ padding-top: 0; }.statement-grid h2{ font-size: clamp(3.1rem,13vw,5.4rem); } .studio-section-head{ align-items: flex-start; flex-direction: column; }.studio-section-head h2{ font-size: clamp(3rem,12vw,5rem); } .studio-service-grid, .offer-grid, .studio-pricing-grid, .rules-grid, .support-grid, .quality-grid{ grid-template-columns: 1fr 1fr; } .experience-grid, .confidential-grid, .about-story-grid{ grid-template-columns: 1fr; }.experience-main, .confidential-main{ grid-column: auto; } .sample-proof-grid, .values-layout{ grid-template-columns: 1fr; } .output-visual{ min-height: 500px; padding: 30px; grid-template-columns: 1fr 50px 1fr; } .studio-page-hero{ min-height: 500px; }.studio-page-hero h1{ font-size: clamp(3.5rem,14vw,6rem); } .service-detail{ grid-template-columns: 45px 1fr; }.service-detail > p, .service-detail ul{ grid-column: 2; } .horizontal-process{ grid-template-columns: 1fr 1fr; }.horizontal-process li{ border-bottom: 1px solid rgba(17,18,22,.12); }.horizontal-process li:nth-child(odd){ border-right: 1px solid rgba(17,18,22,.12); }.horizontal-process li:nth-child(even){ border-right: 0; } .path-cards{ grid-template-columns: 1fr; } .pricing-fit-grid{ align-items: flex-start; flex-direction: column; } .founder-strip{ grid-template-columns: 1fr; } .studio-footer-cta{ align-items: flex-start; flex-direction: column; justify-content: center; }.studio-footer .footer-grid{ grid-template-columns: 1fr 1fr; } } @media (max-width: 560px) { .studio-header .header-actions > .button{ display: none; } .studio-hero-copy h1{ font-size: clamp(3rem,13vw,4.35rem); letter-spacing: -.054em; } .studio-hero-copy h1 em{ letter-spacing: -.04em; } .studio-service-grid, .offer-grid, .studio-pricing-grid, .rules-grid, .support-grid, .quality-grid{ grid-template-columns: 1fr; } .creative-orbit{ min-height: 440px; }.orbit-card{ width: 102px; min-height: 120px; padding: 12px; border-radius: 15px; }.orbit-card strong{ font-size: .95rem; }.orbit-card small{ font-size: .6rem; }.orbit-core{ inset: 36% 20%; min-height: 125px; border-radius: 22px; }.orbit-core strong{ font-size: 1.55rem; } .studio-process-list li{ grid-template-columns: 42px 1fr; min-height: 165px; }.studio-process-list li b{ display: none; } .output-visual{ min-height: 520px; grid-template-columns: 1fr; gap: 14px; }.output-lines{ display: none; }.source-frame{ width: 54%; margin-inline: auto; aspect-ratio: 9/12; }.output-stack{ grid-template-columns: repeat(3,1fr); }.output-stack article, .output-stack article:nth-child(2){ min-height: 90px; transform: none; padding: 12px; }.output-stack span{ font-size: .58rem; } .studio-checks{ grid-template-columns: 1fr; } .experience-main, .experience-card, .confidential-main, .confidential-card{ min-height: 330px; } .horizontal-process{ grid-template-columns: 1fr; }.horizontal-process li, .horizontal-process li:nth-child(odd){ min-height: 210px; border-right: 0; } .service-detail{ grid-template-columns: 1fr; }.service-detail > p, .service-detail ul{ grid-column: 1; }.service-detail > span{ margin-bottom: -10px; } .sample-proof-board{ transform: none; }.sample-proof-board article{ min-height: 140px; } .pricing-note, .single-edit-strip{ align-items: flex-start; flex-direction: column; } .value-lines article{ grid-template-columns: 35px 1fr; }.value-lines p{ grid-column: 2; } .studio-footer .footer-grid{ grid-template-columns: 1fr; } } html.reduce-motion .studio-loader, html.reduce-motion .studio-loader *, html.reduce-motion .orbit-ring, html.reduce-motion .orbit-card, html.reduce-motion .studio-marquee > div{ animation: none !important; transition-duration: .01ms !important; } html.reduce-motion .creative-orbit, html.reduce-motion .studio-service-card{ transform: none !important; } body.app-page .onboarding-grid{ grid-template-columns: repeat(2,minmax(0,1fr)); } body.app-page .onboarding-grid .price-card{ min-height: 460px; } @media (max-width:760px) { body.app-page .onboarding-grid{ grid-template-columns:1fr; } } .auth-side{ background: radial-gradient(circle at 20% 15%,rgba(240,109,98,.10),transparent 28%),radial-gradient(circle at 80% 70%,rgba(141,99,255,.13),transparent 30%),var(--surface); } .auth-side h1{ font-family: var(--studio-display); font-weight:400; } .studio-process-list li{ opacity: .78; background: transparent; } .studio-process-list li.is-active{ opacity: .78; background: transparent; } .studio-process-list li:focus-within{ opacity: 1; background: linear-gradient(90deg,rgba(141,99,255,.075),transparent 58%); }@media (hover: hover) and (pointer: fine){html:not(.suppress-hover) .studio-process-list li:hover{ opacity: 1; background: linear-gradient(90deg,rgba(141,99,255,.075),transparent 58%); }} .studio-final-card{ min-height: 470px; gap: 24px; align-items: flex-start; justify-content: center; } .studio-final-card h2{ width: min(100%, 900px); margin: 0; font-size: clamp(3.15rem,5.7vw,6.6rem); line-height: .94; overflow-wrap: normal; } .studio-final-card .hero-actions{ width: auto; margin-top: 8px; position: relative; z-index: 2; } .studio-final-card > .button{ width: auto; position: relative; z-index: 2; } .studio-final-card .studio-kicker, .studio-footer .eyebrow{ display: inline-flex; align-items: center; gap: 10px; } .studio-final-card .studio-kicker::before, .studio-footer .eyebrow::before{ content: ""; width: 34px; height: 1px; flex: 0 0 34px; background: currentColor; } .studio-final-card-compact{ min-height: 400px; } .studio-footer-compact{ padding-top: 66px; } .studio-footer-compact .footer-grid{ padding-top: 0; } .sample-quality-grid article{ border-top-color: rgba(17,18,22,.18); } .sample-quality-grid span{ color: #7350d8; } .sample-quality-grid h3{ color: #17181d; } .sample-quality-grid p{ color: #5c5b61; } .service-detail{ align-items: start; } .service-detail > div, .service-detail > p, .service-detail > ul{ min-width: 0; } .service-detail h2{ overflow-wrap: normal; } .page-back-button, .floating-page-back{ padding: 0; line-height: 0; transform: none !important; } .page-back-button svg, .floating-page-back svg{ width: 20px; height: 20px; display: block; flex: 0 0 20px; pointer-events: none; } @media (hover: hover) and (pointer: fine){html:not(.suppress-hover) .page-back-button:hover, html:not(.suppress-hover) .floating-page-back:hover{ border-color: rgba(141,99,255,.38); background: var(--surface-3); box-shadow: 0 12px 30px rgba(0,0,0,.22),0 0 0 1px rgba(141,99,255,.06); }} .notification-button{ line-height: 0; transition: border-color .18s ease,background .18s ease,box-shadow .18s ease; } .notification-button svg{ width: 20px; height: 20px; display: block; } @media (hover: hover) and (pointer: fine){html:not(.suppress-hover) .notification-button:hover{ border-color: rgba(141,99,255,.38); background: var(--surface-2); box-shadow: 0 10px 28px rgba(0,0,0,.18); }} body.app-page{ background: radial-gradient(circle at 92% -10%,rgba(141,99,255,.11),transparent 28%), radial-gradient(circle at 18% 105%,rgba(240,109,98,.055),transparent 27%), var(--bg); } body.app-page .app-layout{ grid-template-columns: 248px minmax(0,1fr); } body.app-page .sidebar{ padding: 24px 17px; border-right-color: rgba(255,255,255,.075); background: linear-gradient(180deg,rgba(19,21,34,.98),rgba(12,14,23,.98)); box-shadow: 18px 0 55px rgba(0,0,0,.11); } body.app-page .sidebar .brand{ min-height: 44px; } body.app-page .sidebar-nav{ gap: 7px; } body.app-page .sidebar-nav a{ position: relative; overflow: hidden; border: 1px solid transparent; transition: color .18s ease,background .18s ease,border-color .18s ease,transform .18s ease; } body.app-page .sidebar-nav a::after{ content: ""; position: absolute; inset: 8px auto 8px 0; width: 2px; border-radius: 99px; background: linear-gradient(var(--studio-violet),var(--studio-coral)); transform: scaleY(0); transition: transform .2s var(--ease); } @media (hover: hover) and (pointer: fine){html:not(.suppress-hover) body.app-page .sidebar-nav a:hover{ border-color: rgba(255,255,255,.055); }} body.app-page .sidebar-nav a.active{ border-color: rgba(141,99,255,.16); background: linear-gradient(90deg,rgba(141,99,255,.13),rgba(255,255,255,.025)); box-shadow: none; } body.app-page .sidebar-nav a.active::after{ transform: scaleY(1); } body.app-page .app-header{ height: 76px; border-bottom-color: rgba(255,255,255,.075); background: rgba(10,12,20,.80); backdrop-filter: blur(22px) saturate(140%); box-shadow: 0 10px 38px rgba(0,0,0,.09); } body.app-page .dashboard{ width: min(1580px,100%); margin-inline: auto; gap: 26px; padding: 34px clamp(22px,3vw,46px) 54px; } body.app-page .v4-dashboard-hero{ min-height: 70px; padding: 2px 0 6px; } body.app-page .v4-dashboard-hero h1, body.app-page .dashboard-hero h1{ font-size: clamp(2.25rem,3.3vw,3.35rem); line-height: .98; } body.app-page .app-card, body.app-page .settings-card, body.app-page .metric-card, body.app-page .quick-action-grid a{ position: relative; overflow: hidden; border-color: rgba(255,255,255,.095); background: linear-gradient(145deg,rgba(255,255,255,.045),rgba(255,255,255,.018)); box-shadow: 0 18px 46px rgba(0,0,0,.13),inset 0 1px rgba(255,255,255,.025); } body.app-page .app-card::before, body.app-page .metric-card::before, body.app-page .quick-action-grid a::before{ content: ""; position: absolute; inset: 0 0 auto; height: 1px; opacity: .7; background: linear-gradient(90deg,transparent,rgba(141,99,255,.42),rgba(240,109,98,.18),transparent); pointer-events: none; } body.app-page .app-card, body.app-page .metric-card, body.app-page .quick-action-grid a{ transition: transform .2s var(--ease),border-color .2s ease,background .2s ease,box-shadow .2s ease; } @media (hover: hover) and (pointer: fine){html:not(.suppress-hover) body.app-page .app-card:hover, html:not(.suppress-hover) body.app-page .metric-card[href]:hover, html:not(.suppress-hover) body.app-page .quick-action-grid a:hover{ border-color: rgba(141,99,255,.24); background: linear-gradient(145deg,rgba(141,99,255,.075),rgba(255,255,255,.02)); box-shadow: 0 24px 58px rgba(0,0,0,.18),0 0 0 1px rgba(141,99,255,.035); }} body.app-page .metric-card{ min-height: 124px; } body.app-page .metric-card > span{ color: #a8adc1; letter-spacing: .025em; } body.app-page .metric-card > strong{ font-size: clamp(2.15rem,3vw,3rem); } body.app-page .quick-action-grid a{ min-height: 108px; } body.app-page .quick-action-grid a > span{ width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.09); border-radius: 11px; color: #d8d0ff; background: rgba(141,99,255,.08); font-size: 1rem; } body.app-page .card-head h2{ letter-spacing: -.025em; } body.app-page .task-row, body.app-page .file-row, body.app-page .activity-row{ border-radius: 12px; transition: background .18s ease,transform .18s ease; } @media (hover: hover) and (pointer: fine){html:not(.suppress-hover) body.app-page .task-row:hover, html:not(.suppress-hover) body.app-page .file-row:hover{ background: rgba(141,99,255,.055); }} body.app-page input, body.app-page select, body.app-page textarea{ border-color: rgba(255,255,255,.105); background: rgba(8,10,17,.62); transition: border-color .18s ease,box-shadow .18s ease,background .18s ease; } body.app-page input:focus, body.app-page select:focus, body.app-page textarea:focus{ border-color: rgba(141,99,255,.48); background: rgba(12,14,23,.88); box-shadow: 0 0 0 4px rgba(141,99,255,.09); } body.app-page .button-primary{ box-shadow: 0 14px 34px rgba(116,76,221,.28),inset 0 1px rgba(255,255,255,.22); } body.app-page .account-trigger{ border-color: rgba(255,255,255,.055); background: rgba(255,255,255,.018); } body.app-page .account-trigger[aria-expanded="true"]{ border-color: rgba(141,99,255,.24); background: rgba(141,99,255,.06); }@media (hover: hover) and (pointer: fine){html:not(.suppress-hover) body.app-page .account-trigger:hover{ border-color: rgba(141,99,255,.24); background: rgba(141,99,255,.06); }} body.app-page .notification-list{ padding: 10px; } body.app-page .notification-row button{ padding: 18px 15px; } body.app-page .notification-row.unread button{ background: linear-gradient(90deg,rgba(141,99,255,.075),transparent 78%); } html[data-theme="light"] body.app-page .sidebar{ border-right-color: rgba(29,27,49,.10); background: linear-gradient(180deg,#fbfbfe,#f2f0f8); box-shadow: 16px 0 45px rgba(51,43,86,.06); } html[data-theme="light"] body.app-page .app-header{ border-bottom-color: rgba(29,27,49,.10); background: rgba(240,239,247,.84); box-shadow: 0 10px 34px rgba(51,43,86,.06); } html[data-theme="light"] body.app-page .app-card, html[data-theme="light"] body.app-page .settings-card, html[data-theme="light"] body.app-page .metric-card, html[data-theme="light"] body.app-page .quick-action-grid a{ border-color: rgba(40,38,64,.12); background: linear-gradient(145deg,rgba(255,255,255,.98),rgba(247,245,252,.96)); box-shadow: 0 16px 40px rgba(55,45,91,.08),inset 0 1px white; } html[data-theme="light"] body.app-page input, html[data-theme="light"] body.app-page select, html[data-theme="light"] body.app-page textarea{ border-color: rgba(40,38,64,.14); background: rgba(255,255,255,.9); } @media (max-width: 820px) { .studio-final-card{ min-height: 400px; padding: 42px 28px; } .studio-final-card h2{ font-size: clamp(2.9rem,12vw,5rem); } .studio-final-card .hero-actions{ width: 100%; } .studio-final-card .hero-actions .button{ flex: 1 1 210px; } } @media (max-width: 560px) { .studio-final-card{ min-height: 380px; border-radius: 24px; } .studio-final-card h2{ font-size: clamp(2.7rem,13vw,4.2rem); } .studio-final-card .hero-actions .button{ width: 100%; flex-basis: 100%; } .studio-process-list li:focus-within{ }@media (hover: hover) and (pointer: fine){html:not(.suppress-hover) .studio-process-list li:hover{ }} body.app-page .dashboard{ padding-inline: 16px; } } html:not(.reveal-enabled) .reveal{ opacity: 1; transform: none; } .sample-proof-board-dark article{ border-color: rgba(255,255,255,.10); color: var(--text); background: linear-gradient(145deg,rgba(255,255,255,.065),rgba(141,99,255,.055)); box-shadow: 0 22px 54px rgba(0,0,0,.22); } .sample-proof-board-dark span{ color: var(--studio-lilac); } .sample-proof-board-dark strong{ color: var(--text); } @media (max-width: 560px) { .studio-page-hero{ min-height: 570px; padding-top: 150px; padding-bottom: 72px; align-items: flex-start; } .studio-page-hero h1{ font-size: clamp(3rem,13vw,4.8rem); line-height: .92; } .studio-page-hero p{ font-size: 1rem; } } html.js .studio-home .studio-hero-copy, html.js .studio-home .creative-orbit{ opacity: 0; translate: 0 28px; transition: opacity .82s var(--ease), translate .82s var(--ease); } html.js body.studio-home.studio-ready .studio-hero-copy, html.js body.studio-home.studio-ready .creative-orbit{ opacity: 1; translate: 0 0; } html.js body.studio-home.studio-ready .creative-orbit{ transition-delay: .12s; } html.reduce-motion .studio-home .studio-hero-copy, html.reduce-motion .studio-home .creative-orbit{ opacity: 1; translate: 0 0; transition: none; } @media (min-width: 1121px) { body.studio-home main > .editorial-statement, body.studio-home main > .studio-services-section, body.studio-home main > .studio-process-section, body.studio-home main > .studio-output-section, body.studio-home main > .studio-final-section{ min-height: 100svh; display: flex; align-items: center; } body.studio-home .studio-hero{ height: 100svh; min-height: 700px; padding-top: 94px; } body.studio-home .studio-hero .container{ width: min(1500px, calc(100% - 72px)); } body.studio-home .studio-hero-grid{ flex: 1; width: 100%; grid-template-columns: minmax(0,1.12fr) minmax(400px,.78fr); gap: clamp(42px,5vw,84px); padding-bottom: 30px; } body.studio-home .studio-hero-copy h1{ max-width: 900px; margin: 18px 0 20px; font-size: clamp(4rem, min(5.4vw,9.7vh), 6.65rem); line-height: .94; } body.studio-home .studio-hero-copy h1 > span{ line-height: .91; } body.studio-home .studio-hero-copy h1 em{ margin-top: .06em; line-height: .94; } body.studio-home .studio-hero-copy > p{ max-width: 610px; font-size: clamp(1rem,1.05vw,1.14rem); line-height: 1.55; } body.studio-home .hero-actions{ margin-top: 22px; } body.studio-home .studio-proof-line{ margin-top: 22px; } body.studio-home .creative-orbit{ min-height: min(56vh,550px); } body.studio-home .studio-marquee > div{ height: 50px; } body.studio-home .editorial-statement{ padding: 70px 0; } body.studio-home .studio-services-section, body.studio-home .studio-process-section, body.studio-home .studio-output-section, body.studio-home .studio-final-section{ padding-top: clamp(58px,7vh,82px); padding-bottom: clamp(58px,7vh,82px); } body.studio-home .studio-section-head{ margin-bottom: clamp(28px,4vh,42px); } body.studio-home .studio-section-head h2{ font-size: clamp(3.1rem, min(4.7vw,7.3vh),5.3rem); } body.studio-home .studio-service-card{ min-height: clamp(300px,39vh,390px); padding: clamp(22px,2vw,28px); } body.studio-home .studio-process-grid{ align-items: center; } body.studio-home .studio-process-copy{ position: static; } body.studio-home .studio-process-list li{ min-height: clamp(118px,14.5vh,148px); padding-top: 20px; padding-bottom: 20px; } body.studio-home .studio-process-list h3{ font-size: clamp(1.7rem,2.3vw,2.55rem); } body.studio-home .output-visual{ min-height: clamp(440px,55vh,540px); padding: clamp(32px,3vw,46px); } body.studio-home .studio-output-grid h2{ font-size: clamp(3rem, min(4.7vw,7.2vh),5.2rem); } body.studio-home .studio-final-card{ min-height: clamp(430px,62vh,580px); } } @media (min-width: 1121px) and (max-height: 760px) { body.studio-home .studio-hero{ min-height: 640px; padding-top: 82px; } body.studio-home .studio-hero-grid{ padding-bottom: 18px; } body.studio-home .studio-hero-copy h1{ margin-top: 12px; margin-bottom: 14px; font-size: clamp(3.6rem, min(5vw,9vh),5.35rem); } body.studio-home .studio-hero-copy > p{ font-size: .96rem; } body.studio-home .studio-proof-line{ margin-top: 15px; } body.studio-home .creative-orbit{ min-height: 430px; } body.studio-home .studio-marquee > div{ height: 44px; } } :root { --interaction-duration: 220ms; --interaction-ease: cubic-bezier(0.22, 1, 0.36, 1); } .button, .icon-button, .mobile-menu-button, .notification-button, .sidebar-toggle, .page-back-button, .floating-page-back, .account-trigger, .dialog-head button, .checklist-item button, .saved-view-links button, .view-switch a, .status-dropdown summary, .status-dropdown-trigger, .theme-choice, .choice, .nav a, .mobile-nav a, .sidebar-nav a, .sidebar-footer a, .account-menu a, .account-menu button, .footer-links a, .field-label-row a, .text-link, .project-rail > a, .client-chip-list a, .calendar-row, .breadcrumbs a, .notification-row button, .daily-visual, .day-row, .benefit-line, .sample-frame, .v4-step-card, .studio-service-card, .offer-card, .app-card, .metric-card, .quick-action-grid a, .kanban-card, .project-summary-card, .client-summary-card, .task-row, .file-row, .request-item, input, select, textarea, .toggle span, .toggle span::after, .menu-icon i, .faq-item summary::after, .status-dropdown summary::after { transition-duration: var(--interaction-duration); transition-timing-function: var(--interaction-ease); } .button, .icon-button, .mobile-menu-button, .notification-button, .sidebar-toggle, .page-back-button, .floating-page-back, .account-trigger, .dialog-head button, .checklist-item button, .saved-view-links button, .view-switch a, .status-dropdown summary, .status-dropdown-trigger, .theme-choice, .choice { transition-property: color, background-color, border-color, box-shadow, opacity, transform, filter; } .nav a, .mobile-nav a, .sidebar-nav a, .sidebar-footer a, .account-menu a, .account-menu button, .footer-links a, .field-label-row a, .text-link, .project-rail > a, .client-chip-list a, .calendar-row, .breadcrumbs a, .notification-row button { transition-property: color, background-color, border-color, box-shadow, opacity, transform; } .daily-visual, .day-row, .benefit-line, .sample-frame, .v4-step-card, .studio-service-card, .offer-card, .app-card, .metric-card, .quick-action-grid a, .kanban-card, .project-summary-card, .client-summary-card, .task-row, .file-row, .request-item, .theme-choice, .choice { transition-property: background-color, border-color, box-shadow, opacity, transform, filter; } input, select, textarea { transition-property: color, background-color, border-color, box-shadow, opacity; } .toggle span, .toggle span::after, .menu-icon i, .faq-item summary::after, .status-dropdown summary::after { transition-property: background-color, border-color, box-shadow, opacity, transform; } .button { isolation: isolate; } .button::before { content: ""; position: absolute; inset: 0; z-index: 0; border-radius: inherit; pointer-events: none; opacity: 0; background: linear-gradient(115deg,rgba(255,255,255,.14),rgba(183,94,215,.08) 48%,transparent 78%); transition: opacity var(--interaction-duration) var(--interaction-ease); } .button:disabled::before, .button[aria-disabled="true"]::before { opacity: 0; } .button, .button > *, .icon-button, .mobile-menu-button, .notification-button, .sidebar-toggle, .page-back-button, .floating-page-back, .dialog-head button, .checklist-item button { transform-origin: center; } .page-back-button, .floating-page-back, .notification-button, .icon-button, .mobile-menu-button, .sidebar-toggle, .dialog-head button, .checklist-item button { padding: 0; line-height: 0; } .page-back-button svg, .floating-page-back svg, .notification-button svg, .icon-button svg, .sidebar-toggle svg, .dialog-head button svg, .checklist-item button svg { display: block; margin: auto; flex: 0 0 auto; transform: none !important; } .page-back-button span, .floating-page-back span, .notification-button > span, .icon-button > span, .sidebar-toggle > span, .dialog-head button > span, .checklist-item button > span { display: grid; place-items: center; margin: auto; line-height: 1; transform: none !important; } .notification-button b { line-height: 1; } .mobile-nav, .account-menu { opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-8px); transform-origin: top right; transition: opacity var(--interaction-duration) var(--interaction-ease), transform var(--interaction-duration) var(--interaction-ease), visibility 0s linear var(--interaction-duration); } .mobile-nav[data-motion-state="open"], .account-menu[data-motion-state="open"] { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); transition-delay: 0s; } .mobile-nav[data-motion-state="opening"], .account-menu[data-motion-state="opening"], .mobile-nav[data-motion-state="closing"], .account-menu[data-motion-state="closing"] { display: grid; } .account-menu[data-motion-state="opening"], .account-menu[data-motion-state="closing"] { display: block; } .status-dropdown summary::after { content: "+" !important; } .status-dropdown[open] summary::after { content: "+" !important; transform: rotate(45deg); } :where(a,button,input,select,textarea,summary,[tabindex]):focus-visible { outline: 3px solid rgba(139,92,246,.48); outline-offset: 3px; } .choice:focus-within, .theme-choice:focus-within, .toggle:focus-within { outline: 3px solid rgba(139,92,246,.42); outline-offset: 3px; } :where(a,button,summary):focus:not(:focus-visible) { outline: none; } .button:active:not(:disabled):not([aria-disabled="true"]) { transform: translateY(1px); } .icon-button:active, .mobile-menu-button:active, .notification-button:active, .sidebar-toggle:active, .page-back-button:active, .floating-page-back:active, .dialog-head button:active, .checklist-item button:active { transform: none !important; } body.app-page .app-card::before, body.app-page .metric-card::before, body.app-page .quick-action-grid a::before, .studio-service-card::after { transition: opacity var(--interaction-duration) var(--interaction-ease); } @media (hover: hover) and (pointer: fine) { html:not(.suppress-hover) .button:not(:disabled):not([aria-disabled="true"]):hover { transform: translateY(-1px); } html:not(.suppress-hover) .button:not(:disabled):not([aria-disabled="true"]):hover::before { opacity: 1; } html:not(.suppress-hover) .button-primary:hover { background: var(--button-gradient); filter: brightness(1.045); box-shadow: 0 16px 38px rgba(116,76,221,.34),inset 0 1px 0 rgba(255,255,255,.24); } html:not(.suppress-hover) .button-secondary:hover { background: var(--surface-2); border-color: rgba(139,92,246,.35); } html:not(.suppress-hover) .button-danger:hover { background: rgba(255,92,111,.18); border-color: rgba(255,92,111,.58); } html:not(.suppress-hover) .button-dark:hover { background: #282a31; } html:not(.suppress-hover) .icon-button:hover, html:not(.suppress-hover) .mobile-menu-button:hover, html:not(.suppress-hover) .notification-button:hover, html:not(.suppress-hover) .sidebar-toggle:hover, html:not(.suppress-hover) .page-back-button:hover, html:not(.suppress-hover) .floating-page-back:hover, html:not(.suppress-hover) .dialog-head button:hover, html:not(.suppress-hover) .checklist-item button:hover { transform: none !important; border-color: rgba(141,99,255,.38); background-color: var(--surface-2); box-shadow: 0 10px 26px rgba(0,0,0,.16); } html:not(.suppress-hover) .daily-visual:hover { transform: rotateY(-3deg) rotateX(1deg); border-color: rgba(141,99,255,.28); } html:not(.suppress-hover) .day-row:hover, html:not(.suppress-hover) .choice:hover, html:not(.suppress-hover) .v4-step-card:hover, html:not(.suppress-hover) .offer-card:hover, html:not(.suppress-hover) .kanban-card:hover, html:not(.suppress-hover) .project-summary-card:hover, html:not(.suppress-hover) .client-summary-card:hover, html:not(.suppress-hover) body.app-page .app-card:hover, html:not(.suppress-hover) body.app-page .metric-card[href]:hover, html:not(.suppress-hover) body.app-page .quick-action-grid a:hover, html:not(.suppress-hover) body.app-page .task-row:hover, html:not(.suppress-hover) body.app-page .file-row:hover, html:not(.suppress-hover) body.app-page .sidebar-nav a:hover { transform: none; } html:not(.suppress-hover) .sample-panel:hover .sample-frame { transform: rotate(3deg); } html:not(.suppress-hover) .text-link:hover span { transform: none; } html:not(.suppress-hover) body.app-page .app-card:hover, html:not(.suppress-hover) body.app-page .metric-card[href]:hover, html:not(.suppress-hover) body.app-page .quick-action-grid a:hover { border-color: rgba(141,99,255,.24); box-shadow: 0 24px 58px rgba(0,0,0,.18),0 0 0 1px rgba(141,99,255,.035); } html:not(.suppress-hover) body.app-page .app-card:hover::before, html:not(.suppress-hover) body.app-page .metric-card[href]:hover::before, html:not(.suppress-hover) body.app-page .quick-action-grid a:hover::before, html:not(.suppress-hover) .studio-service-card:hover::after { opacity: 1; } } html.reduce-motion { scroll-behavior: auto; } html.reduce-motion *, html.reduce-motion *::before, html.reduce-motion *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; transition-delay: 0s !important; } .settings-subheading{ margin:24px 0 10px; } .motion-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); max-width:620px; } @media (max-width:560px){ .motion-grid{ grid-template-columns:1fr; } } .public-account-chip{ min-height:46px; padding:4px 10px 4px 4px; display:inline-flex; align-items:center; gap:9px; flex:0 0 auto; border:1px solid var(--line); border-radius:14px; color:var(--text); background:color-mix(in srgb,var(--surface) 88%,transparent); box-shadow:0 8px 24px rgba(0,0,0,.12); transition:color var(--interaction-duration) var(--interaction-ease),background-color var(--interaction-duration) var(--interaction-ease),border-color var(--interaction-duration) var(--interaction-ease),box-shadow var(--interaction-duration) var(--interaction-ease); } .public-account-chip .avatar{ width:36px; height:36px; flex:0 0 36px; border-radius:11px; font-size:.82rem; } .public-account-text{ min-width:0; display:grid; line-height:1.05; } .public-account-text strong{ max-width:110px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:.78rem; } .public-account-text small{ margin-top:4px; color:var(--muted); font-size:.62rem; } html[data-theme="light"] .public-account-chip{ background:rgba(255,255,255,.76); border-color:rgba(40,38,64,.14); box-shadow:0 8px 22px rgba(36,32,70,.08); } @media (hover:hover) and (pointer:fine){ html:not(.suppress-hover) .public-account-chip:hover{ border-color:rgba(141,99,255,.38); background-color:var(--surface-2); box-shadow:0 12px 30px rgba(0,0,0,.18); } html[data-theme="light"]:not(.suppress-hover) .public-account-chip:hover{ background:#f7f5ff; border-color:rgba(105,70,210,.28); box-shadow:0 12px 28px rgba(49,40,93,.12); } } .public-account-chip:focus-visible{ outline:3px solid rgba(139,92,246,.48); outline-offset:3px; } @media (max-width:720px){ .public-account-chip{ width:44px; height:44px; min-height:44px; padding:4px; justify-content:center; border-radius:12px; } .public-account-chip .avatar{ width:34px; height:34px; flex-basis:34px; } .public-account-text{display:none;} } .studio-site{ --studio-coral:#d77b72; --studio-violet:#7768ae; --studio-lilac:#b8afd2; } .studio-header .brand img{ filter:none; } .studio-scroll-progress i{ background:linear-gradient(90deg,#d77b72,#7768ae); box-shadow:none; } .studio-hero{ background: radial-gradient(circle at 72% 36%,rgba(119,104,174,.085),transparent 25%), radial-gradient(circle at 16% 74%,rgba(215,123,114,.06),transparent 30%), linear-gradient(180deg,#08090d,#0b0c11); } .studio-hero-copy h1 em{ background:linear-gradient(105deg,#df8b7d 0%,#bd8195 48%,#8a7bb6 100%); background-clip:text; -webkit-background-clip:text; } .studio-proof-line i{ background:#c77b73; } .creative-orbit::before{ background:radial-gradient(circle at var(--shine-x) var(--shine-y),rgba(255,255,255,.055),transparent 25%),radial-gradient(circle,rgba(119,104,174,.065),transparent 64%); } .orbit-ring{ border-color:rgba(255,255,255,.09); } .orbit-ring::before,.orbit-ring::after{ background:#c77b73; box-shadow:none; } .orbit-ring::after{ background:#8274b5; box-shadow:none; } .orbit-card{ background:linear-gradient(160deg,rgba(255,255,255,.065),rgba(255,255,255,.018)); box-shadow:0 22px 48px rgba(0,0,0,.30); } .orbit-card::before{ background:linear-gradient(145deg,rgba(215,123,114,.13),rgba(119,104,174,.075) 58%,transparent); opacity:.48; } .studio-service-card{ background:linear-gradient(160deg,#14161d,#0d0f14); } .studio-service-card::after{ background:radial-gradient(circle,rgba(119,104,174,.075),transparent 70%); } .studio-service-card:nth-child(2)::after, .studio-service-card:nth-child(4)::after{ background:radial-gradient(circle,rgba(215,123,114,.065),transparent 70%); } .studio-process-list li.is-active{ background:linear-gradient(90deg,rgba(119,104,174,.05),transparent 58%); } .studio-output-section{ background:linear-gradient(180deg,#0a0b10,#0d0f15); } .output-visual{ background:radial-gradient(circle at 40% 45%,rgba(215,123,114,.09),transparent 26%),radial-gradient(circle at 72% 65%,rgba(119,104,174,.085),transparent 28%),#0d0f15; } .studio-final-card{ background:radial-gradient(circle at 75% 35%,rgba(119,104,174,.10),transparent 27%),radial-gradient(circle at 12% 80%,rgba(215,123,114,.07),transparent 27%),linear-gradient(145deg,#13151d,#0b0c11); } .studio-page-hero{ background:radial-gradient(circle at 78% 30%,rgba(119,104,174,.075),transparent 27%),radial-gradient(circle at 15% 80%,rgba(215,123,114,.045),transparent 30%),#090a0e; } .studio-price-card.featured{ background:radial-gradient(circle at 80% 5%,rgba(119,104,174,.10),transparent 34%),linear-gradient(155deg,#181823,#12141b); border-color:rgba(119,104,174,.22); } .pricing-note{ border-color:rgba(215,123,114,.18); background:rgba(215,123,114,.045); } .pricing-note span{ color:#e18a80; } @media (max-width:820px){ .studio-site .container{ width:min(100% - 32px,1280px); } .studio-site .section{ padding:68px 0; } .studio-hero{ min-height:auto; padding-top:118px; } .studio-hero-grid{ gap:34px; padding-bottom:42px; } .studio-hero-copy h1{ margin:18px 0 20px; font-size:clamp(3.2rem,12vw,5rem); line-height:.95; } .studio-hero-copy > p{ max-width:620px; margin-bottom:0; font-size:1rem; line-height:1.58; } .studio-proof-line{ margin-top:22px; gap:9px; } .creative-orbit{ min-height:390px; } .studio-marquee > div{ height:48px; } .editorial-statement{ padding:68px 0; } .statement-grid{ gap:20px; } .statement-grid h2{ font-size:clamp(2.7rem,10.5vw,4.4rem); line-height:.94; } .statement-grid p{ line-height:1.6; } .studio-section-head{ gap:20px; margin-bottom:30px; } .studio-section-head h2{ font-size:clamp(2.75rem,10vw,4.4rem); line-height:.95; } .studio-service-grid{ gap:12px; } .studio-service-card{ min-height:0; padding:24px; } .studio-service-card h3{ margin:42px 0 10px; font-size:clamp(2.1rem,7vw,2.8rem); line-height:1; } .studio-service-card p{ margin:0; line-height:1.55; } .service-tags{ margin-top:16px; } .studio-process-grid{ gap:38px; } .studio-process-copy h2{ font-size:clamp(2.8rem,10vw,4.5rem); line-height:.94; } .studio-process-list li{ min-height:0; padding:24px 0; } .studio-output-grid{ gap:38px; } .output-visual{ min-height:430px; padding:28px; } .studio-output-grid h2{ font-size:clamp(2.75rem,10vw,4.4rem); line-height:.95; } .studio-final-card{ min-height:0; padding:58px 30px; border-radius:26px; } .studio-final-card h2{ font-size:clamp(2.85rem,10vw,4.5rem); line-height:.94; } .studio-page{ padding-top:72px; } .studio-page-hero{ min-height:auto; padding:96px 0 58px; align-items:flex-start; } .studio-page-hero h1{ margin:16px 0 18px; font-size:clamp(3rem,11.5vw,5rem); line-height:.94; } .studio-page-hero p{ margin-bottom:0; font-size:1rem; line-height:1.58; } .studio-price-card, .offer-card, .path-cards article, .rule-card, .support-card, .about-story-card, .confidential-main, .confidential-card, .experience-main, .experience-card{ min-height:0; } .studio-price-card{ padding:25px; } .studio-price-card > small{ margin-top:30px; } .studio-price-card h2{ margin:10px 0 22px; } .studio-price-card .studio-checks{ margin-bottom:24px; } .pricing-note{ margin-bottom:14px; } .single-edit-strip{ padding:22px; } .horizontal-process li{ min-height:190px; } .service-detail{ min-height:0; padding:32px 0; } } @media (max-width:560px){ .studio-site .container{ width:calc(100% - 32px); } .studio-site .section{ padding:54px 0; } .studio-header .header-inner{ width:calc(100% - 28px); } .studio-hero{ padding-top:108px; } .studio-hero-grid{ gap:28px; padding-bottom:34px; } .studio-hero-copy h1{ font-size:clamp(3rem,12.4vw,4rem); letter-spacing:-.052em; } .studio-hero-copy h1 em{ margin-top:.08em; } .studio-hero-copy > p{ font-size:.98rem; } .hero-actions{ display:grid; grid-template-columns:1fr; gap:10px; } .hero-actions .button{ width:100%; } .studio-proof-line{ justify-content:flex-start; font-size:.66rem; letter-spacing:.065em; } .creative-orbit{ width:100%; min-height:0; margin:0; display:grid; grid-template-columns:1fr 1fr; gap:10px; } .creative-orbit::before, .orbit-ring{ display:none; } .orbit-core, .orbit-card{ position:relative; inset:auto; width:auto; transform:none !important; animation:none; backdrop-filter:blur(12px); } .orbit-core{ grid-column:1/-1; min-height:146px; padding:22px; border-radius:22px; } .orbit-core strong{ font-size:2rem; line-height:1; } .orbit-card{ min-height:124px; padding:15px; border-radius:17px; } .orbit-card::before{ opacity:.28; } .orbit-card strong{ font-size:1rem; } .orbit-card small{ font-size:.64rem; } .studio-marquee > div{ height:44px; gap:22px; font-size:.65rem; } .editorial-statement{ padding:54px 0; } .statement-index{ font-size:.64rem; } .statement-grid h2{ font-size:clamp(2.55rem,10.7vw,3.5rem); } .studio-section-head{ margin-bottom:24px; } .studio-section-head .text-link{ margin-top:2px; } .studio-service-card h3{ margin-top:32px; } .studio-process-grid{ gap:30px; } .studio-process-copy .button{ width:100%; } .studio-process-list li{ grid-template-columns:34px 1fr; gap:16px; padding:21px 0; } .studio-process-list h3{ font-size:1.65rem; } .output-visual{ min-height:0; padding:22px; grid-template-columns:1fr; gap:16px; } .source-frame{ width:48%; min-width:150px; margin-inline:auto; } .output-stack{ grid-template-columns:repeat(3,1fr); } .output-stack article, .output-stack article:nth-child(2){ min-height:78px; padding:11px; transform:none; } .studio-final-card{ padding:48px 24px; } .studio-page-hero{ min-height:0; padding:76px 0 50px; } .studio-page-hero h1{ font-size:clamp(2.9rem,12vw,4rem); } .studio-page > .section:first-of-type{ padding-top:52px; } .pricing-note{ padding:18px; gap:8px; } .studio-price-card{ padding:22px; border-radius:20px; } .studio-price-card > small{ margin-top:24px; } .studio-price-card h2{ margin-bottom:18px; } .studio-price{ padding-bottom:18px; } .studio-price-card .studio-checks{ margin-top:20px; } .single-edit-strip{ padding:20px; } .path-cards article, .offer-card, .support-card, .rule-card, .about-story-card{ padding:23px; } .path-cards h3, .offer-card h3, .support-card h2{ font-size:2.25rem; } .horizontal-process li, .horizontal-process li:nth-child(odd){ min-height:0; padding:22px; } .horizontal-process h3{ margin:34px 0 8px; } .quality-grid article{ min-height:0; padding:22px 0; } } .pricing-page-hero{padding-bottom:clamp(42px,6vw,76px)} .pricing-page-hero p{max-width:720px} .pricing-main-section{padding-top:0} .paypal-pricing-layout{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(290px,.7fr);gap:18px;align-items:stretch} .paypal-plan-card,.paypal-side-card,.paypal-payment-steps{border:1px solid rgba(255,255,255,.1);background:#11131a} .paypal-plan-card{padding:clamp(28px,4vw,48px);border-radius:26px;box-shadow:0 24px 70px rgba(0,0,0,.22)} .paypal-plan-heading{display:flex;justify-content:space-between;align-items:flex-start;gap:24px} .paypal-plan-label{display:block;color:#d98a80;font-size:.74rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase} .paypal-plan-heading h2{margin:11px 0 0;font-family:var(--studio-display);font-size:clamp(2.6rem,5vw,5rem);font-weight:400;line-height:.94;letter-spacing:-.055em} .paypal-payment-badge{flex:0 0 auto;padding:8px 11px;border:1px solid rgba(255,255,255,.12);border-radius:999px;color:var(--text-2);background:rgba(255,255,255,.035);font-size:.7rem;font-weight:750;letter-spacing:.04em} .paypal-price{display:flex;align-items:flex-end;gap:14px;margin:34px 0 22px;padding-bottom:26px;border-bottom:1px solid rgba(255,255,255,.09)} .paypal-price strong{font-size:clamp(4rem,8vw,7rem);font-weight:650;line-height:.8;letter-spacing:-.075em} .paypal-price span{padding-bottom:7px;color:var(--muted);font-size:.84rem} .paypal-plan-summary{max-width:680px;margin:0;color:var(--text-2);font-size:1.02rem;line-height:1.7} .paypal-plan-checks{grid-template-columns:repeat(2,minmax(0,1fr));margin:27px 0 31px} .paypal-plan-actions{display:flex;gap:11px;align-items:center} .paypal-plan-actions .button{min-width:0} .paypal-pay-button{background:#df7c70;box-shadow:0 13px 34px rgba(223,124,112,.16)} .paypal-payment-note{max-width:760px;margin:16px 0 0;color:var(--muted);font-size:.74rem;line-height:1.55} .paypal-pricing-side{display:grid;grid-template-rows:1fr auto;gap:18px} .paypal-side-card{padding:27px;border-radius:22px} .paypal-side-card h2{margin:14px 0 14px;font-family:var(--studio-display);font-size:clamp(2rem,3vw,3.1rem);font-weight:400;line-height:1;letter-spacing:-.045em} .paypal-side-card p{margin:0 0 24px;color:var(--muted);line-height:1.65} .paypal-sample-card{background:#171820} .paypal-sample-card .text-link{display:inline-flex;align-items:center;gap:8px;color:var(--text);font-weight:750} .paypal-payment-steps{margin-top:18px;padding:20px;border-radius:22px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px} .paypal-payment-steps>div{padding:18px;border-radius:15px;background:rgba(255,255,255,.025)} .paypal-payment-steps span{display:block;margin-bottom:24px;color:#c47970;font-size:.7rem;font-weight:850;letter-spacing:.09em} .paypal-payment-steps strong{display:block;margin-bottom:7px;font-size:1rem} .paypal-payment-steps p{margin:0;color:var(--muted);font-size:.83rem;line-height:1.55} @media (hover:hover) and (pointer:fine){ .paypal-pay-button:hover{background:#e58a7f;box-shadow:0 17px 38px rgba(223,124,112,.2)} .paypal-side-card:hover{border-color:rgba(255,255,255,.16)} } @media (max-width:980px){ .paypal-pricing-layout{grid-template-columns:1fr} .paypal-pricing-side{grid-template-columns:1fr 1fr;grid-template-rows:auto} } @media (max-width:720px){ .pricing-page-hero{padding-bottom:30px} .pricing-main-section{padding-bottom:58px} .paypal-plan-card{padding:24px 20px;border-radius:21px} .paypal-plan-heading{display:block} .paypal-payment-badge{display:inline-flex;margin-top:16px} .paypal-plan-heading h2{font-size:clamp(2.45rem,12vw,3.7rem)} .paypal-price{display:block;margin:27px 0 20px;padding-bottom:21px} .paypal-price strong{display:block;font-size:clamp(4.35rem,22vw,6.1rem)} .paypal-price span{display:block;margin-top:12px;padding:0} .paypal-plan-checks{grid-template-columns:1fr;margin:23px 0 26px} .paypal-plan-actions{align-items:stretch;flex-direction:column} .paypal-plan-actions .button{width:100%} .paypal-payment-note{font-size:.72rem} .paypal-pricing-side{grid-template-columns:1fr;gap:12px} .paypal-side-card{padding:23px 20px;border-radius:19px} .paypal-payment-steps{grid-template-columns:1fr;padding:10px;gap:7px} .paypal-payment-steps>div{display:grid;grid-template-columns:34px 1fr;column-gap:10px;padding:15px} .paypal-payment-steps span{grid-row:1 / span 2;margin:2px 0 0} .paypal-payment-steps strong,.paypal-payment-steps p{grid-column:2} } .studio-site{ --studio-coral:#cf796f; --studio-violet:#756a9f; --studio-lilac:#b7b0c7; --public-surface:#111218; --public-surface-2:#15161d; --public-line:rgba(255,255,255,.105); } .studio-site .skip-link{ top:12px; transform:translateY(-180%); opacity:0; pointer-events:none; transition:transform .18s ease,opacity .18s ease; } .studio-site .skip-link:focus, .studio-site .skip-link:focus-visible{ transform:translateY(0); opacity:1; pointer-events:auto; } .studio-site .section{padding:clamp(70px,7vw,104px) 0} .studio-site .studio-page-hero{ min-height:0; padding:clamp(122px,11vw,158px) 0 clamp(48px,5.5vw,76px); align-items:flex-start; background: radial-gradient(circle at 82% 18%,rgba(117,106,159,.065),transparent 28%), radial-gradient(circle at 12% 86%,rgba(207,121,111,.035),transparent 30%), #090a0e; } .studio-site .studio-page-hero .container{max-width:1120px} .studio-site .studio-page-hero h1{max-width:920px;margin:14px 0 16px} .studio-site .studio-page-hero p{max-width:720px;margin-bottom:0} .studio-site .page-actions{margin-top:24px} .studio-site .studio-hero{ min-height:0; padding-top:clamp(116px,10vw,144px); background: radial-gradient(circle at 74% 34%,rgba(117,106,159,.06),transparent 24%), radial-gradient(circle at 12% 76%,rgba(207,121,111,.035),transparent 28%), linear-gradient(180deg,#08090d,#0a0b10); } .studio-site .studio-hero-grid{gap:clamp(42px,6vw,88px);padding-bottom:clamp(52px,6vw,82px)} .studio-site .studio-hero-copy h1{margin:18px 0 22px} .studio-site .studio-hero-copy > p{max-width:650px} .studio-site .creative-orbit::before{background:radial-gradient(circle at var(--shine-x) var(--shine-y),rgba(255,255,255,.04),transparent 24%)} .studio-site .orbit-card{box-shadow:0 20px 45px rgba(0,0,0,.26)} .studio-site .orbit-card::before{opacity:.25} .studio-site .studio-marquee{border-color:rgba(255,255,255,.075)} .studio-site .studio-marquee b{color:#b97972;text-shadow:none} .studio-site .editorial-statement{padding:clamp(66px,7vw,98px) 0} .studio-site .statement-grid{gap:clamp(22px,4vw,56px)} .studio-site .studio-section-head{margin-bottom:clamp(28px,4vw,44px)} .studio-site .studio-section-head > div > p{max-width:640px;margin:14px 0 0;color:var(--muted);line-height:1.65} .studio-site .studio-service-grid{gap:14px} .studio-site .studio-service-card{ min-height:390px; padding:clamp(25px,3vw,36px); border-color:var(--public-line); background:linear-gradient(155deg,#13151b,#0e0f14); box-shadow:none; } .studio-site .studio-service-card::after{opacity:.45} .studio-site .studio-service-card h3{margin-top:clamp(54px,7vw,94px)} .studio-site .studio-process-grid{gap:clamp(42px,7vw,100px)} .studio-site .studio-process-list li{min-height:128px;padding:27px 0} .studio-site .studio-output-grid{gap:clamp(42px,7vw,94px)} .studio-site .output-visual{min-height:500px} .studio-site .studio-final-card{ min-height:0; padding:clamp(62px,7vw,96px) clamp(28px,6vw,86px); background: radial-gradient(circle at 75% 35%,rgba(117,106,159,.065),transparent 27%), linear-gradient(145deg,#13141a,#0b0c10); box-shadow:none; } .studio-site .studio-final-section{padding-top:clamp(58px,6vw,86px)} .studio-site .studio-footer{padding:clamp(58px,6vw,82px) 0 24px} .studio-site .footer-grid{gap:clamp(30px,5vw,70px)} .studio-site .button-primary{ background:linear-gradient(180deg,#8c6dd0,#755baa); box-shadow:0 12px 28px rgba(83,62,137,.24),inset 0 1px 0 rgba(255,255,255,.18); } @media (hover:hover) and (pointer:fine){ html:not(.suppress-hover) .studio-site .button-primary:hover{ background:linear-gradient(180deg,#9577d5,#8064b3); box-shadow:0 15px 32px rgba(83,62,137,.28),inset 0 1px 0 rgba(255,255,255,.2); } } .studio-site .eyebrow{color:#b8afd0} .studio-site .eyebrow::before{opacity:.82} .studio-site .studio-scroll-progress i{background:linear-gradient(90deg,#c77a71,#776d9e);box-shadow:none} .studio-site .service-detail{padding:clamp(32px,5vw,54px) 0} .studio-site .service-detail-list{border-top:1px solid var(--line)} .studio-site .horizontal-process{gap:12px} .studio-site .horizontal-process li{min-height:230px;padding:24px} .studio-site .sample-proof-grid, .studio-site .about-story-grid, .studio-site .support-grid, .studio-site .rules-grid{gap:14px} .studio-site .sample-proof-copy h2, .studio-site .values-layout h2{margin-bottom:18px} .studio-site .legal-copy h2{margin-top:42px} .studio-site .legal-copy h2:first-child{margin-top:0} .studio-site .pricing-page-hero{padding-bottom:clamp(38px,4vw,54px)} .studio-site .pricing-main-section{padding:0 0 clamp(60px,7vw,96px)} .studio-site .paypal-pricing-layout, .studio-site .paypal-payment-steps{max-width:1120px;margin-inline:auto} .studio-site .paypal-pricing-layout{gap:14px} .studio-site .paypal-plan-card{padding:clamp(28px,3.5vw,42px);border-radius:22px;box-shadow:none} .studio-site .paypal-plan-heading h2{font-size:clamp(2.7rem,4.5vw,4.6rem)} .studio-site .paypal-price{margin:28px 0 20px;padding-bottom:22px} .studio-site .paypal-price strong{font-size:clamp(4rem,7vw,6.4rem)} .studio-site .paypal-plan-checks{margin:24px 0 28px} .studio-site .paypal-pay-button{background:#cf796f;box-shadow:0 12px 28px rgba(149,72,66,.14)} .studio-site .paypal-pricing-side{gap:14px} .studio-site .paypal-side-card{padding:25px;border-radius:20px} .studio-site .paypal-payment-steps{margin-top:14px;padding:12px;border-radius:18px;gap:8px} .studio-site .paypal-payment-steps>div{padding:16px} .studio-site .paypal-payment-steps span{margin-bottom:17px} .onboarding-grid-official .price-card{min-height:440px} @media (max-width:1020px){ .studio-site .paypal-pricing-layout{grid-template-columns:1fr} .studio-site .paypal-pricing-side{grid-template-columns:1fr 1fr;grid-template-rows:auto} .studio-site .studio-service-card{min-height:340px} } @media (max-width:820px){ .studio-site .section{padding:56px 0} .studio-site .studio-page-hero{padding:106px 0 42px} .studio-site .studio-page-hero h1{margin:13px 0 15px} .studio-site .studio-hero{padding-top:102px} .studio-site .studio-hero-grid{gap:26px;padding-bottom:30px} .studio-site .editorial-statement{padding:54px 0} .studio-site .studio-section-head{margin-bottom:25px} .studio-site .studio-service-card{min-height:0;padding:23px} .studio-site .studio-service-card h3{margin:34px 0 11px} .studio-site .studio-process-grid{gap:30px} .studio-site .studio-process-list li{min-height:0;padding:22px 0} .studio-site .studio-output-grid{gap:32px} .studio-site .output-visual{min-height:390px} .studio-site .studio-final-section{padding-top:48px} .studio-site .studio-final-card{padding:52px 28px} .studio-site .studio-footer{padding:50px 0 22px} .studio-site .horizontal-process li{min-height:180px} .studio-site .pricing-page-hero{padding-bottom:30px} .studio-site .pricing-main-section{padding-bottom:58px} } @media (max-width:560px){ .studio-site .container{width:calc(100% - 28px)} .studio-site .section{padding:46px 0} .studio-header .header-inner{height:74px;width:calc(100% - 24px)} .studio-header .brand img{width:39px;height:31px} .studio-header .brand span{font-size:.98rem} .studio-header .mobile-menu-button{width:46px;height:46px;border-radius:13px} .studio-site .studio-page{padding-top:66px} .studio-site .studio-page-hero{padding:82px 0 34px} .studio-site .studio-page-hero h1{font-size:clamp(2.75rem,11.7vw,3.75rem);line-height:.95} .studio-site .studio-page-hero p{font-size:.97rem;line-height:1.55} .studio-site .studio-hero{padding-top:94px} .studio-site .studio-hero-grid{gap:22px;padding-bottom:26px} .studio-site .studio-hero-copy h1{font-size:clamp(2.85rem,12vw,3.85rem);margin:15px 0 17px;line-height:.94} .studio-site .studio-hero-copy > p{font-size:.96rem;line-height:1.52} .studio-site .hero-actions{margin-top:24px} .studio-site .studio-proof-line{margin-top:18px} .studio-site .creative-orbit{gap:8px} .studio-site .orbit-core{min-height:116px;padding:18px;border-radius:18px} .studio-site .orbit-core strong{font-size:1.72rem} .studio-site .orbit-card{min-height:94px;padding:13px;border-radius:15px} .studio-site .orbit-card span{font-size:.6rem} .studio-site .orbit-card strong{font-size:.96rem} .studio-site .studio-marquee > div{height:40px;gap:18px;font-size:.61rem} .studio-site .editorial-statement{padding:44px 0} .studio-site .statement-grid{gap:15px} .studio-site .statement-grid h2{font-size:clamp(2.35rem,10.4vw,3.15rem)} .studio-site .studio-section-head{gap:14px;margin-bottom:21px} .studio-site .studio-section-head h2{font-size:clamp(2.45rem,10.5vw,3.35rem)} .studio-site .studio-section-head > div > p{margin-top:10px;font-size:.94rem;line-height:1.5} .studio-site .studio-service-grid{gap:10px} .studio-site .studio-service-card{padding:20px;border-radius:18px} .studio-site .studio-service-card h3{margin:25px 0 9px;font-size:clamp(1.9rem,8.5vw,2.45rem)} .studio-site .studio-service-card p{font-size:.94rem;line-height:1.5} .studio-site .service-tags{margin-top:14px} .studio-site .studio-process-grid{gap:24px} .studio-site .studio-process-copy h2{font-size:clamp(2.45rem,10.6vw,3.35rem)} .studio-site .studio-process-list li{padding:18px 0} .studio-site .studio-process-list h3{font-size:1.5rem} .studio-site .studio-process-list p{font-size:.9rem} .studio-site .output-visual{min-height:0;padding:18px;border-radius:20px} .studio-site .studio-output-grid h2{font-size:clamp(2.4rem,10.4vw,3.2rem)} .studio-site .studio-final-card{padding:42px 20px;border-radius:20px} .studio-site .studio-final-card h2{font-size:clamp(2.45rem,10.5vw,3.25rem)} .studio-site .studio-footer{padding:42px 0 20px} .studio-site .footer-grid{gap:26px} .studio-site .service-detail{padding:28px 0} .studio-site .service-detail h2{font-size:2.25rem} .studio-site .horizontal-process{gap:8px} .studio-site .horizontal-process li, .studio-site .horizontal-process li:nth-child(odd){min-height:0;padding:19px;border-radius:16px} .studio-site .pricing-page-hero{padding-bottom:26px} .studio-site .pricing-main-section{padding-bottom:48px} .studio-site .paypal-plan-card{padding:21px 18px;border-radius:18px} .studio-site .paypal-plan-heading h2{font-size:clamp(2.35rem,11.5vw,3.35rem)} .studio-site .paypal-payment-badge{margin-top:13px} .studio-site .paypal-price{margin:23px 0 18px;padding-bottom:18px} .studio-site .paypal-price strong{font-size:clamp(4rem,21vw,5.5rem)} .studio-site .paypal-plan-summary{font-size:.95rem;line-height:1.55} .studio-site .paypal-plan-checks{margin:20px 0 23px} .studio-site .paypal-payment-note{font-size:.7rem;line-height:1.48} .studio-site .paypal-pricing-side{gap:10px} .studio-site .paypal-side-card{padding:20px 18px;border-radius:17px} .studio-site .paypal-side-card h2{font-size:2.25rem} .studio-site .paypal-payment-steps{margin-top:10px;padding:8px;gap:5px;border-radius:16px} .studio-site .paypal-payment-steps>div{padding:13px} .studio-site .paypal-payment-steps span{margin:1px 0 0} } .studio-site .studio-page{padding-top:0} @media (max-width:820px){ .studio-site .studio-page{padding-top:0} .studio-site .studio-page-hero{padding-top:104px} } @media (max-width:560px){ .studio-site .studio-page{padding-top:0} .studio-site .studio-page-hero{padding-top:100px} } body{ letter-spacing:.003em; } .brand{ letter-spacing:-.014em; } .nav a, .mobile-nav a, .button, button, .sidebar-nav a, .header-account-card, .account-trigger, .text-link, input, select, textarea{ letter-spacing:.006em; } .hero-copy h1, .page-hero h1, .section-heading h2, .process-sticky h2, .auth-side h1, .auth-step h2, .dashboard-hero h1, .workspace-head h1, .project-hero h1, .task-hero h1, .auth-form-card h2, .studio-site .statement-grid h2, .studio-site .studio-section-head h2, .studio-site .studio-process-copy h2, .studio-site .studio-output-grid h2, .studio-site .studio-two-paths h2, .studio-site .sample-proof-copy h2, .studio-site .pricing-fit-grid h2, .studio-site .values-layout > div:first-child h2, .studio-site .studio-final-card h2, .studio-site .studio-page-hero h1, .studio-site .studio-hero-copy h1{ letter-spacing:-.041em; } .studio-site .studio-hero-copy h1 em{ letter-spacing:-.026em; } .studio-site .studio-service-card h3, .studio-site .path-cards h3, .studio-site .confidential-card strong, .studio-site .offer-card h3, .studio-site .studio-price-card h2, .studio-site .about-story-card h2, .studio-site .support-card h2, .studio-site .paypal-plan-heading h2, .studio-site .paypal-side-card h2{ letter-spacing:-.018em; } .price-value strong, .price-line strong, .studio-site .studio-price strong, .studio-site .paypal-price strong{ letter-spacing:-.048em; } @media (max-width:560px){ .studio-site .studio-hero-copy h1, .studio-site .studio-page-hero h1, .studio-site .statement-grid h2, .studio-site .studio-section-head h2, .studio-site .studio-process-copy h2, .studio-site .studio-output-grid h2, .studio-site .studio-final-card h2{ letter-spacing:-.034em; } } .studio-site .pricing-page-hero .eyebrow{ display:inline-flex; align-items:center; gap:12px; } .studio-site .pricing-page-hero .eyebrow::before{ content:""; display:block; flex:0 0 34px; width:34px; height:1px; background:currentColor; opacity:.9; } .studio-site .pricing-page-hero h1{ margin-bottom:clamp(24px,2.4vw,34px); } @media (max-width:560px){ .studio-site .pricing-page-hero h1{ margin-bottom:21px; } } body.studio-home .studio-hero-copy h1 > span{ line-height: .94; } body.studio-home .studio-hero-copy h1 > em{ margin-top: .18em; line-height: .98; } body.studio-home .studio-hero-copy > p{ max-width: 690px; } @media (max-width: 760px){ body.studio-home .studio-hero-copy h1 > em{ margin-top: .15em; } } .studio-site .studio-service-card .text-link{ column-gap:10px; line-height:1.3; letter-spacing:.012em; word-spacing:.035em; text-rendering:optimizeLegibility; } .studio-site .studio-page-hero h1{ line-height:.98; padding-block:.025em .07em; overflow:visible; } .studio-site .studio-final-card h2{ line-height:1.01; padding-block:.02em .06em; overflow:visible; } .studio-site .pricing-main-section{ padding-top:clamp(22px,2vw,30px); } @media (max-width:560px){ .studio-site .studio-page-hero h1{ line-height:1; padding-bottom:.08em; } .studio-site .studio-final-card h2{ line-height:1.02; } .studio-site .pricing-main-section{ padding-top:18px; } } @media (hover:hover) and (pointer:fine){} @media (max-width:760px){} .button, .icon-button, .mobile-menu-button, .notification-button, .sidebar-toggle, .page-back-button, .floating-page-back, .account-trigger, .theme-choice, .status-dropdown summary, .status-dropdown-trigger{ box-sizing:border-box; max-width:100%; } .header-inner, .header-actions, .app-header, .app-header-leading, .app-header-actions{ min-width:0; } .header-actions, .app-header-actions{ flex:0 0 auto; } .app-header-leading{ flex:1 1 auto; overflow:hidden; } .app-header-actions{ min-width:max-content; position:relative; z-index:2; } .hero-actions, .form-actions, .toolbar-actions, .inline-actions, .dialog-actions, .single-edit-strip, .field-label-row{ column-gap:10px; row-gap:10px; } .hero-actions, .form-actions, .toolbar-actions, .inline-actions, .dialog-actions{ flex-wrap:wrap; } .hero-actions > *, .form-actions > *, .toolbar-actions > *, .inline-actions > *, .dialog-actions > *{ min-width:0; } @media (max-width:760px){ body.app-page .app-header{ padding-inline:12px; gap:10px; } body.app-page .app-header-leading{ gap:6px; } body.app-page .app-header-actions{ gap:6px; } body.app-page .page-back-button, body.app-page .sidebar-toggle{ flex:0 0 auto; } } @media (max-width:560px){ body.app-page .app-header{ padding-inline:10px; gap:8px; } body.app-page .app-header-leading, body.app-page .app-header-actions{ gap:5px; } } @media (max-width:380px){ body.app-page .app-header-leading{ gap:4px; } body.app-page .page-back-button, body.app-page .sidebar-toggle{ width:36px; height:36px; } } .chat-text-button{appearance:none;border:0;background:none;padding:0;font:inherit;cursor:pointer} .movectus-chat-launcher{position:fixed;right:max(22px,env(safe-area-inset-right));bottom:max(22px,env(safe-area-inset-bottom));z-index:170;width:54px;height:54px;border-radius:18px;border:1px solid var(--line,#2b2d36);background:rgba(18,19,27,.94);color:var(--text,#fff);display:grid;place-items:center;box-shadow:0 16px 44px rgba(0,0,0,.28);transition:background-color 220ms cubic-bezier(.22,1,.36,1),border-color 220ms cubic-bezier(.22,1,.36,1),box-shadow 220ms cubic-bezier(.22,1,.36,1),transform 220ms cubic-bezier(.22,1,.36,1)} .movectus-chat-launcher svg{width:23px;height:23px;display:block} .movectus-chat-launcher b{position:absolute;right:-4px;top:-5px;min-width:20px;height:20px;padding:0 5px;border-radius:999px;background:#df746b;color:#111;font-size:11px;line-height:20px;text-align:center;border:2px solid #0b0c11} .movectus-chat-panel{position:fixed;right:max(22px,env(safe-area-inset-right));bottom:calc(max(22px,env(safe-area-inset-bottom)) + 66px);z-index:171;width:min(390px,calc(100vw - 32px));height:min(590px,calc(100dvh - 120px));border:1px solid var(--line,#2b2d36);border-radius:24px;background:rgba(16,17,24,.98);color:var(--text,#fff);box-shadow:0 28px 80px rgba(0,0,0,.42);overflow:hidden;display:flex;flex-direction:column;transform-origin:bottom right;opacity:0;transform:translateY(8px) scale(.985);pointer-events:none;transition:opacity 220ms cubic-bezier(.22,1,.36,1),transform 220ms cubic-bezier(.22,1,.36,1)} .movectus-chat-panel.open{opacity:1;transform:none;pointer-events:auto} .chat-panel-head{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:16px 18px;border-bottom:1px solid var(--line,#2b2d36);background:rgba(255,255,255,.02)} .chat-panel-head>div{min-width:0}.chat-panel-head strong{display:block;font-size:14px}.chat-panel-head small{display:block;margin-top:2px;color:var(--muted,#a2a4b3);font-size:11px} .chat-close{width:34px;height:34px;flex:0 0 34px;border-radius:11px;border:1px solid var(--line,#2b2d36);background:transparent;color:inherit;display:grid;place-items:center;font-size:20px;line-height:1} .chat-panel-body{flex:1;min-height:0;overflow:auto;padding:16px} .chat-start-copy{margin:0 0 14px;color:var(--muted,#a2a4b3);font-size:13px;line-height:1.6} .chat-account-gate{display:grid;gap:12px;padding:16px;border:1px solid var(--line,#2b2d36);border-radius:16px;background:rgba(255,255,255,.025)} .chat-account-gate>strong{font-size:16px;line-height:1.35;letter-spacing:-.01em}.chat-account-gate>p{margin:0;color:var(--muted,#a2a4b3);font-size:13px;line-height:1.6}.chat-account-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}.chat-account-gate.compact{margin-top:12px}.contact-account-gate{align-content:start;gap:18px}.contact-account-gate h2{margin:0;font-size:clamp(28px,3vw,42px);line-height:1.02}.contact-account-gate>p{margin:0;color:var(--muted);line-height:1.7}.contact-account-actions{display:flex;flex-wrap:wrap;gap:10px}.contact-account-identity{display:grid;gap:3px;margin-bottom:22px;padding:14px 16px;border:1px solid var(--line);border-radius:14px;background:rgba(255,255,255,.025)}.contact-account-identity span{color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.1em;font-weight:700}.contact-account-identity strong{font-size:16px}.contact-account-identity small{color:var(--muted);font-size:13px;overflow-wrap:anywhere} .chat-start-form{display:grid;gap:10px}.chat-start-form input,.chat-start-form textarea,.chat-inline-composer textarea{width:100%;border:1px solid var(--line,#2b2d36);background:rgba(255,255,255,.035);color:inherit;border-radius:13px;padding:11px 12px;font:inherit;line-height:1.45;resize:none;outline:none}.chat-start-form textarea{min-height:116px}.chat-start-form input:focus-visible,.chat-start-form textarea:focus-visible,.chat-inline-composer textarea:focus-visible{border-color:#8f73d4;box-shadow:0 0 0 3px rgba(143,115,212,.16)} .chat-history{display:flex;flex-direction:column;gap:10px;min-height:100%;justify-content:flex-end}.chat-message-row{display:flex}.chat-message-row.mine{justify-content:flex-end}.chat-message{max-width:84%;border:1px solid var(--line,#2b2d36);background:rgba(255,255,255,.035);border-radius:16px 16px 16px 5px;padding:10px 12px}.chat-message-row.mine .chat-message{background:rgba(120,88,190,.18);border-color:rgba(149,116,222,.34);border-radius:16px 16px 5px 16px}.chat-message p{margin:0;white-space:pre-wrap;font-size:13px;line-height:1.55}.chat-message small{display:block;margin-top:6px;color:var(--muted,#9b9dad);font-size:10px} .chat-inline-composer{display:flex;gap:9px;padding:12px 14px;border-top:1px solid var(--line,#2b2d36)}.chat-inline-composer textarea{min-height:44px;max-height:110px;padding:10px 11px}.chat-inline-composer button{flex:0 0 auto;align-self:flex-end} .chat-error{margin:0 0 10px;padding:9px 11px;border-radius:11px;background:rgba(200,70,70,.12);border:1px solid rgba(220,95,95,.28);font-size:12px}.chat-empty{padding:30px 8px;text-align:center;color:var(--muted,#a2a4b3)} .chat-owner-list{display:grid;gap:8px}.chat-owner-thread{display:block;width:100%;text-align:left;padding:12px;border-radius:14px;border:1px solid var(--line,#2b2d36);background:rgba(255,255,255,.025);color:inherit;text-decoration:none}.chat-owner-thread span{display:flex;align-items:center;justify-content:space-between;gap:10px}.chat-owner-thread strong{font-size:13px}.chat-owner-thread b{min-width:20px;height:20px;border-radius:999px;background:#df746b;color:#111;font-size:10px;display:grid;place-items:center}.chat-owner-thread small,.chat-owner-thread p{display:block;margin:4px 0 0;color:var(--muted,#a2a4b3);font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.chat-owner-open{margin-top:12px} .message-center{display:grid;grid-template-columns:minmax(240px,320px) minmax(0,1fr);gap:18px}.message-thread-list{padding:8px;max-height:680px;overflow:auto}.message-thread-link{display:block;padding:13px;border-radius:13px;color:inherit;text-decoration:none;border:1px solid transparent}.message-thread-link.active{background:rgba(128,94,202,.12);border-color:rgba(140,106,212,.24)}.message-thread-link>span{display:flex;align-items:center;justify-content:space-between;gap:10px}.message-thread-link b{min-width:20px;height:20px;border-radius:999px;background:#df746b;color:#111;display:grid;place-items:center;font-size:10px}.message-thread-link small,.message-thread-link p{display:block;margin:4px 0 0;color:var(--muted,#9fa1b0);font-size:11px}.message-thread-link p{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.message-thread-panel{min-height:520px;display:flex;flex-direction:column}.message-thread-solo{max-width:880px}.message-thread-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding-bottom:14px;border-bottom:1px solid var(--line,#2b2d36)}.message-thread-head h2{margin:0}.message-thread-head p{margin:4px 0 0;color:var(--muted,#9fa1b0)}.message-history{flex:1;min-height:260px;max-height:500px;overflow:auto;display:flex;flex-direction:column;gap:10px;padding:18px 0}.message-bubble-row{display:flex}.message-bubble-row.mine{justify-content:flex-end}.message-bubble{max-width:min(76%,650px);padding:11px 13px;border-radius:16px 16px 16px 5px;border:1px solid var(--line,#2b2d36);background:rgba(255,255,255,.035)}.message-bubble-row.mine .message-bubble{border-radius:16px 16px 5px 16px;background:rgba(128,94,202,.13);border-color:rgba(145,110,216,.28)}.message-bubble p{margin:0;line-height:1.55}.message-bubble small{display:block;margin-top:6px;color:var(--muted,#9fa1b0)}.message-composer{display:flex;gap:10px;padding-top:14px;border-top:1px solid var(--line,#2b2d36)}.message-composer textarea{flex:1;min-height:48px;max-height:140px;resize:vertical;border:1px solid var(--line,#2b2d36);background:rgba(255,255,255,.035);color:inherit;border-radius:13px;padding:11px 12px;font:inherit}.message-close-form{margin-top:10px;text-align:right} @media (hover:hover) and (pointer:fine){.movectus-chat-launcher:hover{transform:translateY(-2px);border-color:rgba(154,123,226,.44);box-shadow:0 18px 48px rgba(0,0,0,.36)}.chat-owner-thread:hover,.message-thread-link:hover{background:rgba(255,255,255,.045)}} @media (max-width:760px){.chat-account-actions{grid-template-columns:1fr}.contact-account-actions{display:grid;grid-template-columns:1fr}.movectus-chat-launcher{right:max(14px,env(safe-area-inset-right));bottom:max(14px,env(safe-area-inset-bottom));width:50px;height:50px;border-radius:16px}.movectus-chat-panel{right:8px;left:8px;width:auto;bottom:calc(max(12px,env(safe-area-inset-bottom)) + 60px);height:min(68dvh,590px);border-radius:20px}.message-center{grid-template-columns:1fr}.message-thread-list{max-height:250px}.message-bubble{max-width:88%}.message-composer{flex-direction:column}.message-composer button{align-self:flex-end}} .support-card .chat-text-button{margin-top:20px;padding-top:18px;width:100%;display:flex;align-items:center;justify-content:space-between;border-top:1px solid rgba(255,255,255,.1);color:inherit;font-weight:750;text-align:left} html[data-theme="light"] .movectus-chat-launcher{background:rgba(255,255,255,.96);border-color:var(--line);box-shadow:0 16px 44px rgba(48,38,74,.14)} html[data-theme="light"] .movectus-chat-launcher b{border-color:#f7f6fb} html[data-theme="light"] .movectus-chat-panel{background:rgba(252,251,255,.99);box-shadow:0 28px 80px rgba(55,40,88,.18)} html[data-theme="light"] .chat-start-form input,html[data-theme="light"] .chat-start-form textarea,html[data-theme="light"] .chat-inline-composer textarea,html[data-theme="light"] .message-composer textarea{background:rgba(30,24,50,.025)} html[data-theme="light"] .chat-message,html[data-theme="light"] .message-bubble{background:rgba(30,24,50,.035)} html[data-theme="light"] .chat-message-row.mine .chat-message,html[data-theme="light"] .message-bubble-row.mine .message-bubble{background:rgba(128,94,202,.09)} html:not(.reduce-motion) .movectus-chat-panel[data-motion-state="opening"]{ animation:movectus-chat-open 300ms cubic-bezier(.22,1,.36,1) both; } html:not(.reduce-motion) .movectus-chat-panel[data-motion-state="closing"]{ pointer-events:none; animation:movectus-chat-close 190ms cubic-bezier(.4,0,.2,1) both; } html:not(.reduce-motion) .movectus-chat-panel[data-motion-state="opening"] .chat-panel-head{ animation:movectus-chat-piece-in 280ms 35ms cubic-bezier(.22,1,.36,1) both; } html:not(.reduce-motion) .movectus-chat-panel[data-motion-state="opening"] .chat-panel-body{ animation:movectus-chat-piece-in 300ms 65ms cubic-bezier(.22,1,.36,1) both; } html:not(.reduce-motion) .movectus-chat-panel[data-motion-state="opening"] .chat-inline-composer{ animation:movectus-chat-composer-in 320ms 85ms cubic-bezier(.22,1,.36,1) both; } .movectus-chat-panel, .movectus-chat-launcher, .chat-close, .chat-owner-thread, .message-thread-link, .message-bubble, .chat-message, .message-composer textarea{ will-change:transform,opacity; } .chat-close{ transition:background-color 220ms cubic-bezier(.22,1,.36,1),border-color 220ms cubic-bezier(.22,1,.36,1),transform 220ms cubic-bezier(.22,1,.36,1),box-shadow 220ms cubic-bezier(.22,1,.36,1); } .message-thread-link,.chat-owner-thread{ transition:background-color 220ms cubic-bezier(.22,1,.36,1),border-color 220ms cubic-bezier(.22,1,.36,1),box-shadow 220ms cubic-bezier(.22,1,.36,1),transform 220ms cubic-bezier(.22,1,.36,1); } .message-composer textarea,.chat-inline-composer textarea{ transition:border-color 220ms cubic-bezier(.22,1,.36,1),box-shadow 220ms cubic-bezier(.22,1,.36,1),background-color 220ms cubic-bezier(.22,1,.36,1); } .notification-button b.badge-pop,.movectus-chat-launcher b.badge-pop{ animation:movectus-badge-pop 340ms cubic-bezier(.22,1,.36,1) both; } @media (hover:hover) and (pointer:fine){ html:not(.suppress-hover) .chat-close:hover{background:rgba(255,255,255,.055);border-color:rgba(154,123,226,.38);transform:translateY(-1px);box-shadow:0 8px 20px rgba(0,0,0,.16)} html:not(.suppress-hover) .message-thread-link:hover, html:not(.suppress-hover) .chat-owner-thread:hover{transform:translateY(-1px);border-color:rgba(145,110,216,.22);box-shadow:0 10px 28px rgba(0,0,0,.10)} } @keyframes movectus-chat-open{ 0%{opacity:0;transform:translateY(18px) scale(.94)} 58%{opacity:1;transform:translateY(-2px) scale(1.006)} 100%{opacity:1;transform:translateY(0) scale(1)} } @keyframes movectus-chat-close{ from{opacity:1;transform:translateY(0) scale(1)} to{opacity:0;transform:translateY(10px) scale(.975)} } @keyframes movectus-chat-piece-in{ from{opacity:0;transform:translateY(7px)} to{opacity:1;transform:translateY(0)} } @keyframes movectus-chat-composer-in{ from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:translateY(0)} } @keyframes movectus-badge-pop{ 0%{transform:scale(.72);opacity:.55} 55%{transform:scale(1.2);opacity:1} 100%{transform:scale(1);opacity:1} } html.route-loading{overflow:hidden} .route-loader{z-index:2400;opacity:1;visibility:visible;background:#07080b} .route-loader::before{background:radial-gradient(circle at 34% 42%,rgba(222,111,99,.10),transparent 27%),radial-gradient(circle at 70% 56%,rgba(126,98,191,.11),transparent 30%)} .route-loader .studio-loader-line{width:min(280px,58vw)} .route-loader .studio-loader-line i{transition-duration:.58s} .route-loader .route-loader-label{font-size:.67rem;letter-spacing:.16em;color:rgba(255,255,255,.54)} .route-loader.running .route-loader-label{opacity:1} .chat-inline-composer textarea,.message-composer textarea,.chat-start-form textarea{transition:border-color 220ms cubic-bezier(.22,1,.36,1),box-shadow 220ms cubic-bezier(.22,1,.36,1),background-color 220ms cubic-bezier(.22,1,.36,1),opacity 180ms cubic-bezier(.22,1,.36,1)} .chat-inline-composer button:disabled,.message-composer button:disabled,.chat-start-form button:disabled{opacity:.72;cursor:wait} html:not(.reduce-motion) .route-loader.running .studio-loader-mark{animation:movectus-route-mark-in 360ms cubic-bezier(.22,1,.36,1) both} @keyframes movectus-route-mark-in{from{transform:translateY(5px);opacity:.6}to{transform:none;opacity:1}} html.reduce-motion .route-loader,html.reduce-motion .route-loader *{animation:none!important;transition:none!important} .text-link, .studio-site p a:not(.button):not(.brand), .legal-copy a, .field-label-row a, .card-head a, td a, .footer-bottom a, .auth-page p a:not(.button), .project-rail > a, .breadcrumbs a { text-decoration-line: underline; text-decoration-thickness: 1px; text-decoration-color: color-mix(in srgb, currentColor 46%, transparent); text-underline-offset: .22em; text-decoration-skip-ink: auto; transition-property: color, text-decoration-color, background-color, border-color, box-shadow, opacity, transform; transition-duration: var(--interaction-duration,220ms); transition-timing-function: var(--interaction-ease,cubic-bezier(.22,1,.36,1)); } @media (hover:hover) and (pointer:fine){ html:not(.suppress-hover) .text-link:hover, html:not(.suppress-hover) .studio-site p a:not(.button):not(.brand):hover, html:not(.suppress-hover) .legal-copy a:hover, html:not(.suppress-hover) .field-label-row a:hover, html:not(.suppress-hover) .card-head a:hover, html:not(.suppress-hover) td a:hover, html:not(.suppress-hover) .footer-bottom a:hover, html:not(.suppress-hover) .auth-page p a:not(.button):hover, html:not(.suppress-hover) .project-rail > a:hover, html:not(.suppress-hover) .breadcrumbs a:hover { text-decoration-color: currentColor; } html:not(.suppress-hover) .footer-links a:hover, html:not(.suppress-hover) .account-menu a:hover { text-decoration-line: underline; text-decoration-thickness: 1px; text-underline-offset: .22em; text-decoration-color: currentColor; } } .footer-links a:focus-visible, .account-menu a:focus-visible { text-decoration-line: underline; text-decoration-thickness: 1px; text-underline-offset: .22em; } a[href]:not(.button):not(.brand):focus-visible, .chat-text-button:focus-visible, .message-thread-link:focus-visible, .chat-owner-thread:focus-visible { outline: 2px solid color-mix(in srgb,var(--studio-lilac,#bba7ff) 78%,white 8%); outline-offset: 4px; border-radius: 5px; } a[href],button,summary,[role="button"]{ touch-action:manipulation; } button:not(:disabled),summary,[role="button"],.message-thread-link,.chat-owner-thread{ cursor:pointer; } button:disabled,[aria-disabled="true"]{ cursor:not-allowed; } :target{ scroll-margin-top:96px; } img{ height:auto; } .text-link{ text-decoration-color:color-mix(in srgb,var(--studio-lilac,#bba7ff) 58%,transparent); } .text-link span{ transform:none; } html[data-theme="light"] .text-link, html[data-theme="light"] .studio-site p a:not(.button):not(.brand), html[data-theme="light"] .legal-copy a, html[data-theme="light"] .footer-bottom a { text-decoration-color:color-mix(in srgb,currentColor 42%,transparent); } body.app-page .card-head a, body.app-page td a, body.app-page .field-label-row a, body.app-page .breadcrumbs a, body.app-page .project-rail > a { text-decoration-color:color-mix(in srgb,var(--studio-lilac,#bba7ff) 52%,transparent); } .card-head, .field-label-row, .message-thread-head, .footer-bottom { column-gap:12px; row-gap:8px; } input::placeholder,textarea::placeholder{ opacity:.78; } input:disabled,select:disabled,textarea:disabled{ opacity:.62; cursor:not-allowed; } textarea{ line-height:1.5; } .chat-inline-composer button, .message-composer button{ min-width:72px; } @media (max-width:420px){ .chat-inline-composer{ gap:8px; } .chat-inline-composer button{ min-width:68px; } } html.reduce-motion *, html.reduce-motion *::before, html.reduce-motion *::after{ scroll-behavior:auto!important; } body.owner-plan-page .dashboard{max-width:1180px} body.owner-plan-page .sidebar-nav{min-height:0;overflow-y:auto;scrollbar-width:thin} .owner-plan-hero{margin-bottom:18px} .owner-plan-kicker{display:block;margin-bottom:8px;color:var(--studio-lilac,#c6b5ff);font-size:.7rem;font-weight:850;letter-spacing:.12em;text-transform:uppercase} .owner-plan-hero p{max-width:620px;margin:8px 0 0;color:var(--muted);font-size:.93rem;line-height:1.65} .owner-plan-setup{margin-bottom:16px;display:flex;align-items:center;justify-content:space-between;gap:18px} .owner-plan-setup>div{display:flex;align-items:center;gap:13px} .owner-plan-setup h2{margin:0 0 4px;font-size:.98rem} .owner-plan-setup p{margin:0;color:var(--muted);font-size:.82rem} .owner-plan-setup-icon{width:34px;height:34px;display:grid;place-items:center;flex:0 0 auto;border:1px solid rgba(240,109,98,.28);border-radius:50%;color:#ffd9d5;background:rgba(240,109,98,.09);font-size:.8rem;font-weight:900} .owner-plan-summary{margin-bottom:16px;padding:18px 20px;border:1px solid var(--line);border-radius:18px;background:linear-gradient(135deg,rgba(141,99,255,.08),rgba(240,109,98,.045) 58%,rgba(255,255,255,.018));box-shadow:0 16px 45px rgba(0,0,0,.12)} .owner-plan-progress-copy{display:flex;align-items:end;justify-content:space-between;gap:20px} .owner-plan-progress-copy>div{display:grid;gap:3px}.owner-plan-progress-copy span{color:var(--muted);font-size:.74rem;font-weight:750}.owner-plan-progress-copy strong{font-size:1rem;font-weight:820}.owner-plan-progress-copy>b{font-size:1.55rem;letter-spacing:-.05em} .owner-plan-progress-track{height:7px;margin-top:14px;overflow:hidden;border-radius:99px;background:rgba(255,255,255,.055)} .owner-plan-progress-track i,.owner-plan-mini-progress i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--studio-coral,#f06d62),var(--studio-violet,#8d63ff));box-shadow:0 0 18px rgba(141,99,255,.24);transition:width .45s var(--ease)} .owner-plan-board{overflow:hidden;border:1px solid var(--line);border-radius:22px;background:linear-gradient(180deg,rgba(255,255,255,.025),rgba(255,255,255,.012));box-shadow:0 24px 70px rgba(0,0,0,.16)} .owner-plan-tabs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;padding:7px;border-bottom:1px solid var(--line);background:rgba(255,255,255,.018)} .owner-plan-tab{height:48px;padding:0 15px;display:flex;align-items:center;justify-content:space-between;gap:10px;border:1px solid transparent;border-radius:14px;color:var(--muted);background:transparent;cursor:pointer;font-weight:800;transition:background .2s var(--ease),border-color .2s var(--ease),color .2s var(--ease),box-shadow .2s var(--ease)} .owner-plan-tab small{min-width:48px;padding:4px 8px;border-radius:999px;color:var(--muted);background:rgba(255,255,255,.045);font-size:.68rem;text-align:center;transition:inherit} .owner-plan-tab.active{border-color:rgba(141,99,255,.19);color:var(--text);background:linear-gradient(135deg,rgba(141,99,255,.11),rgba(240,109,98,.055));box-shadow:inset 0 1px 0 rgba(255,255,255,.025)} .owner-plan-tab.active small{color:var(--text-2);background:rgba(255,255,255,.07)} @media (hover:hover) and (pointer:fine){html:not(.suppress-hover) .owner-plan-tab:hover{color:var(--text);background:rgba(255,255,255,.035)}} .owner-plan-tab:focus-visible{outline:3px solid rgba(141,99,255,.22);outline-offset:2px} .owner-plan-panel{padding:22px} .owner-plan-panel-head{margin-bottom:17px;display:flex;align-items:end;justify-content:space-between;gap:22px} .owner-plan-panel-head h2{margin:0 0 4px;font-size:1.15rem;letter-spacing:-.02em}.owner-plan-panel-head p{margin:0;color:var(--muted);font-size:.8rem} .owner-plan-mini-progress{width:min(260px,40%);display:grid;gap:7px}.owner-plan-mini-progress>span{color:var(--muted);font-size:.7rem;font-weight:750;text-align:right}.owner-plan-mini-progress>div{height:5px;overflow:hidden;border-radius:999px;background:rgba(255,255,255,.055)} .owner-plan-list{display:grid;gap:8px} .owner-plan-item{position:relative;width:100%;min-height:67px;padding:12px 15px;display:grid;grid-template-columns:34px 30px minmax(0,1fr);align-items:center;gap:10px;border:1px solid var(--line);border-radius:15px;color:var(--text);background:rgba(255,255,255,.018);text-align:left;cursor:pointer;overflow:hidden;isolation:isolate;transition:transform .18s var(--ease),border-color .22s var(--ease),background .22s var(--ease),box-shadow .22s var(--ease),opacity .2s var(--ease)} .owner-plan-item::before{content:"";position:absolute;inset:0;z-index:-1;opacity:0;background:linear-gradient(90deg,rgba(240,109,98,.055),rgba(141,99,255,.075));transition:opacity .22s var(--ease)} .owner-plan-item-number{color:var(--muted);font-size:.67rem;font-weight:850;letter-spacing:.08em;font-variant-numeric:tabular-nums;transition:color .22s var(--ease)} .owner-plan-item-copy{min-width:0;display:grid;gap:4px}.owner-plan-item-copy strong{font-size:.84rem;line-height:1.42;font-weight:720}.owner-plan-item-copy small{color:var(--muted);font-size:.68rem;font-weight:650;transition:color .22s var(--ease)} .owner-plan-check{position:relative;width:30px;height:30px;display:grid;place-items:center;border:1px solid var(--line-strong);border-radius:50%;color:transparent;background:rgba(255,255,255,.025);box-shadow:inset 0 0 0 4px transparent;transition:transform .28s cubic-bezier(.2,1.2,.3,1),color .2s var(--ease),border-color .2s var(--ease),background .2s var(--ease),box-shadow .25s var(--ease)} .owner-plan-check svg{width:17px;height:17px}.owner-plan-check path{stroke-dasharray:24;stroke-dashoffset:24;transition:stroke-dashoffset .3s .06s var(--ease)} .owner-plan-item.completed{border-color:rgba(141,99,255,.18);background:rgba(141,99,255,.032)} .owner-plan-item.completed::before{opacity:1}.owner-plan-item.completed .owner-plan-check{color:white;border-color:rgba(141,99,255,.55);background:linear-gradient(135deg,var(--studio-coral,#f06d62),var(--studio-violet,#8d63ff));box-shadow:0 0 0 5px rgba(141,99,255,.07),0 8px 24px rgba(80,51,150,.22)} .owner-plan-item.completed .owner-plan-check path{stroke-dashoffset:0}.owner-plan-item.completed .owner-plan-item-number{color:var(--text-2)}.owner-plan-item.completed [data-plan-status]{color:var(--studio-lilac,#c6b5ff)} .owner-plan-item.just-completed{animation:ownerPlanItemPop .58s var(--ease)} .owner-plan-item.just-completed .owner-plan-check{animation:ownerPlanCheckPop .55s cubic-bezier(.2,1.45,.3,1)} .owner-plan-item.just-completed .owner-plan-check::after{content:"";position:absolute;inset:-14px;border-radius:50%;background:radial-gradient(circle at 50% 0,rgba(240,109,98,.9) 0 2px,transparent 2.5px),radial-gradient(circle at 100% 50%,rgba(141,99,255,.9) 0 2px,transparent 2.5px),radial-gradient(circle at 50% 100%,rgba(198,181,255,.85) 0 2px,transparent 2.5px),radial-gradient(circle at 0 50%,rgba(240,109,98,.8) 0 2px,transparent 2.5px);animation:ownerPlanBurst .62s var(--ease) both;pointer-events:none} .owner-plan-item.save-error{animation:ownerPlanError .36s ease} .owner-plan-item:disabled{cursor:not-allowed;opacity:.58} @media (hover:hover) and (pointer:fine){html:not(.suppress-hover) .owner-plan-item:not(:disabled):hover{transform:translateY(-1px);border-color:var(--line-strong);background:rgba(255,255,255,.03);box-shadow:0 10px 28px rgba(0,0,0,.12)}html:not(.suppress-hover) .owner-plan-item.completed:hover{border-color:rgba(141,99,255,.28)}} .owner-plan-item:focus-visible{outline:3px solid rgba(141,99,255,.2);outline-offset:2px} .owner-plan-complete-state{max-height:0;margin-top:0;padding:0 14px;display:flex;align-items:center;gap:11px;overflow:hidden;border:1px solid transparent;border-radius:14px;opacity:0;transform:translateY(6px);transition:max-height .35s var(--ease),margin .35s var(--ease),padding .35s var(--ease),opacity .25s var(--ease),transform .35s var(--ease),border-color .25s var(--ease),background .25s var(--ease)} .owner-plan-complete-state.visible{max-height:90px;margin-top:14px;padding:12px 14px;border-color:rgba(88,211,155,.18);opacity:1;transform:none;background:rgba(88,211,155,.045)} .owner-plan-complete-state>span{width:30px;height:30px;display:grid;place-items:center;flex:0 0 auto;border-radius:50%;color:#d9ffec;background:rgba(88,211,155,.13)}.owner-plan-complete-state svg{width:16px;height:16px}.owner-plan-complete-state div{display:grid;gap:2px}.owner-plan-complete-state strong{font-size:.8rem}.owner-plan-complete-state small{color:var(--muted);font-size:.68rem} .owner-plan-upgrade-card{max-width:720px} @keyframes ownerPlanItemPop{0%{transform:scale(1)}45%{transform:scale(1.008)}100%{transform:scale(1)}} @keyframes ownerPlanCheckPop{0%{transform:scale(.82)}55%{transform:scale(1.16)}100%{transform:scale(1)}} @keyframes ownerPlanBurst{0%{opacity:0;transform:scale(.45) rotate(-12deg)}35%{opacity:1}100%{opacity:0;transform:scale(1.35) rotate(10deg)}} @keyframes ownerPlanError{0%,100%{transform:translateX(0)}30%{transform:translateX(-4px)}65%{transform:translateX(4px)}} html.reduce-motion .owner-plan-progress-track i,html.reduce-motion .owner-plan-mini-progress i,html.reduce-motion .owner-plan-item,html.reduce-motion .owner-plan-check,html.reduce-motion .owner-plan-check path,html.reduce-motion .owner-plan-complete-state{transition:none!important;animation:none!important} html.reduce-motion .owner-plan-item.just-completed,html.reduce-motion .owner-plan-item.just-completed .owner-plan-check,html.reduce-motion .owner-plan-item.just-completed .owner-plan-check::after{animation:none!important} html[data-theme="light"] .owner-plan-summary{background:linear-gradient(135deg,rgba(141,99,255,.07),rgba(240,109,98,.035) 58%,rgba(255,255,255,.7))} html[data-theme="light"] .owner-plan-board{background:#fff;box-shadow:0 22px 60px rgba(49,40,93,.08)} html[data-theme="light"] .owner-plan-tabs{background:#faf9fd} html[data-theme="light"] .owner-plan-tab small{background:rgba(40,38,64,.055)} html[data-theme="light"] .owner-plan-item{background:#fcfbfe} html[data-theme="light"] .owner-plan-item.completed{background:linear-gradient(90deg,rgba(240,109,98,.035),rgba(141,99,255,.05))} html[data-theme="light"] .owner-plan-progress-track,html[data-theme="light"] .owner-plan-mini-progress>div{background:rgba(40,38,64,.07)} @media(max-width:720px){.owner-plan-setup{align-items:stretch;flex-direction:column}.owner-plan-setup .button{width:100%}.owner-plan-summary{padding:16px}.owner-plan-panel{padding:16px}.owner-plan-panel-head{align-items:stretch;flex-direction:column}.owner-plan-mini-progress{width:100%}.owner-plan-mini-progress>span{text-align:left}.owner-plan-item{min-height:66px;padding:11px 12px;grid-template-columns:32px minmax(0,1fr);gap:10px}.owner-plan-item-number{display:none}.owner-plan-item-copy strong{font-size:.8rem}.owner-plan-tabs{gap:4px;padding:5px}.owner-plan-tab{height:45px;padding:0 11px}.owner-plan-progress-copy>b{font-size:1.35rem}} .owner-plan-item[data-plan-section="goals"].just-completed::after{content:"";position:absolute;z-index:2;top:-40%;bottom:-40%;left:-34%;width:24%;pointer-events:none;background:linear-gradient(90deg,transparent,rgba(255,255,255,.18),transparent);transform:skewX(-18deg);animation:ownerPlanGoalShine .7s var(--ease) both} @keyframes ownerPlanGoalShine{0%{left:-34%;opacity:0}22%{opacity:1}100%{left:118%;opacity:0}} html.reduce-motion .owner-plan-item[data-plan-section="goals"].just-completed::after{animation:none!important;display:none} .sidebar-mobile-top, .sidebar-backdrop{ display:none; } .sidebar-close{ width:38px; height:38px; display:grid; place-items:center; padding:0; border:1px solid var(--line); border-radius:12px; color:var(--text); background:var(--surface-2); cursor:pointer; transition:border-color .22s var(--ease),background-color .22s var(--ease),box-shadow .22s var(--ease); } .sidebar-close svg{width:18px;height:18px;display:block} .sidebar-toggle>span{width:18px;height:14px;display:flex;flex-direction:column;align-items:stretch;justify-content:space-between} .sidebar-toggle>span>i{display:block;width:100%;height:1.7px;border-radius:999px;background:currentColor;transform:none!important;transition:opacity .18s var(--ease),transform .22s var(--ease)} .push-settings-card{position:relative;overflow:hidden} .push-settings-card::after{content:"";position:absolute;right:-90px;top:-120px;width:260px;height:260px;border-radius:50%;pointer-events:none;background:radial-gradient(circle,rgba(141,99,255,.11),transparent 68%)} .push-settings-head{position:relative;z-index:1;display:flex;align-items:flex-start;justify-content:space-between;gap:20px} .push-settings-head h3{margin:0 0 6px;font-size:1.05rem} .push-settings-head p{max-width:620px;margin:0;color:var(--muted);font-size:.84rem;line-height:1.55} .push-status{min-width:72px;padding:7px 10px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--line);border-radius:999px;color:var(--muted);background:var(--surface-2);font-size:.69rem;font-weight:820;white-space:nowrap} .push-status[data-mode="on"]{border-color:rgba(88,211,155,.3);color:#caffdf;background:rgba(88,211,155,.09);box-shadow:0 0 0 4px rgba(88,211,155,.035)} .push-device-actions{position:relative;z-index:1;margin-top:20px;display:flex;align-items:center;gap:10px;flex-wrap:wrap} .push-help{position:relative;z-index:1;margin:15px 0 0;color:var(--muted);font-size:.78rem;line-height:1.55} @media (hover:hover) and (pointer:fine){ html:not(.suppress-hover) .sidebar-close:hover{border-color:rgba(141,99,255,.38);background:var(--surface-3);box-shadow:0 10px 26px rgba(0,0,0,.14)} } .sidebar-close:focus-visible{outline:3px solid rgba(141,99,255,.24);outline-offset:2px} @media(max-width:1020px){ html.sidebar-drawer-open, html.sidebar-drawer-open body{overflow:hidden} body.app-page .app-layout{display:block} body.app-page .sidebar{ width:min(86vw,320px); max-width:320px; height:100dvh; position:fixed; inset:0 auto 0 0; z-index:221; padding:calc(14px + env(safe-area-inset-top)) 14px calc(14px + env(safe-area-inset-bottom)); overflow-y:auto; overscroll-behavior:contain; border-right:1px solid color-mix(in srgb,var(--line-strong) 80%,transparent); background:color-mix(in srgb,var(--surface) 96%,transparent); box-shadow:28px 0 72px rgba(0,0,0,.38); backdrop-filter:blur(22px) saturate(125%); -webkit-backdrop-filter:blur(22px) saturate(125%); transform:translate3d(-106%,0,0); transition:transform .34s cubic-bezier(.22,1,.36,1),box-shadow .34s cubic-bezier(.22,1,.36,1); will-change:transform; } body.app-page .app-layout.sidebar-open .sidebar{transform:translate3d(0,0,0)} body.app-page .sidebar-mobile-top{ min-height:44px; margin:0 0 12px; padding:0 2px 10px; display:flex; align-items:center; justify-content:space-between; gap:12px; border-bottom:1px solid var(--line); } body.app-page .sidebar-mobile-top>span{color:var(--muted);font-size:.69rem;font-weight:850;letter-spacing:.11em;text-transform:uppercase} body.app-page .sidebar .brand{padding-inline:8px} body.app-page .sidebar-nav{margin-top:26px;gap:5px} body.app-page .sidebar-nav a{min-height:44px;padding-inline:12px;border:1px solid transparent} body.app-page .sidebar-nav a.active{border-color:rgba(141,99,255,.16);background:linear-gradient(90deg,rgba(141,99,255,.10),rgba(255,255,255,.025))} body.app-page .sidebar-footer{padding-bottom:2px} body.app-page .sidebar-backdrop{ display:block; position:fixed; inset:0; z-index:220; padding:0; border:0; opacity:0; visibility:hidden; pointer-events:none; background:rgba(3,4,10,.54); backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px); transition:opacity .28s cubic-bezier(.22,1,.36,1),visibility 0s linear .28s; } body.app-page .app-layout.sidebar-open .sidebar-backdrop{ opacity:1; visibility:visible; pointer-events:auto; transition:opacity .28s cubic-bezier(.22,1,.36,1),visibility 0s; } body.app-page .sidebar-toggle{display:grid;place-items:center} body.app-page .app-header{ padding-left:max(14px,env(safe-area-inset-left)); padding-right:max(14px,env(safe-area-inset-right)); } } @media(max-width:600px){ .push-settings-head{flex-direction:column;align-items:flex-start;gap:12px} .push-device-actions{align-items:stretch;flex-direction:column} .push-device-actions .button{width:100%} body.app-page .sidebar{width:min(88vw,304px)} } html.reduce-motion .sidebar, html.reduce-motion .sidebar-backdrop, html.reduce-motion .sidebar-close, html.reduce-motion .sidebar-toggle>span>i{ transition:none!important; } @media (max-width:1020px){ body.app-page .app-layout{display:block!important} body.app-page .sidebar{ display:flex!important; flex-direction:column!important; align-items:stretch!important; justify-content:flex-start!important; width:min(82vw,300px)!important; max-width:300px!important; height:100dvh!important; min-height:100dvh!important; position:fixed!important; inset:0 auto 0 0!important; padding:calc(12px + env(safe-area-inset-top)) 13px calc(12px + env(safe-area-inset-bottom))!important; border-right:1px solid color-mix(in srgb,var(--line-strong) 82%,transparent)!important; border-bottom:0!important; overflow:hidden!important; transform:translate3d(-104%,0,0)!important; } body.app-page .app-layout.sidebar-open .sidebar{transform:translate3d(0,0,0)!important} body.app-page .sidebar-mobile-top{ display:flex!important; flex:0 0 auto!important; min-height:42px!important; margin:0 0 12px!important; padding:0 2px 10px!important; } body.app-page .sidebar .brand{ display:flex!important; justify-content:flex-start!important; align-items:center!important; flex:0 0 auto!important; min-height:46px!important; padding:0 8px!important; } body.app-page .sidebar .brand span{font-size:.98rem!important} body.app-page .sidebar-role{display:block!important;flex:0 0 auto!important;margin:10px 8px 0!important} body.app-page .sidebar-nav{ display:grid!important; flex:1 1 auto!important; min-height:0!important; margin-top:18px!important; padding:0 2px 14px!important; gap:4px!important; overflow-y:auto!important; overscroll-behavior:contain!important; } body.app-page .sidebar-nav a{ display:flex!important; min-height:42px!important; padding:0 11px!important; font-size:.82rem!important; } body.app-page .sidebar-nav a::before{content:none!important} body.app-page .sidebar-footer{ display:grid!important; flex:0 0 auto!important; margin-top:0!important; padding:10px 6px 0!important; } } @media (max-width:420px){ body.app-page .sidebar{width:min(80vw,292px)!important;max-width:292px!important} } .message-inbox-empty{min-height:360px;display:grid;place-content:center;text-align:center} .message-inbox-empty .message-empty-check{width:44px;height:44px;margin:0 auto 14px;display:grid;place-items:center;border:1px solid rgba(113,222,163,.28);border-radius:14px;color:#c9f6dc;background:rgba(88,211,155,.08);font-weight:900} body.workspace-page .dashboard{ width:min(100%,1420px); margin-inline:auto; padding-top:26px; } body.workspace-page .button{ justify-content:center; text-align:center; } .workspace-v73-hero{ display:flex; align-items:flex-end; justify-content:space-between; gap:24px; padding:4px 2px 20px; } .workspace-v73-identity{min-width:0} .workspace-v73-kicker{ display:flex; align-items:center; gap:9px; min-height:24px; margin-bottom:9px; color:var(--muted); font-size:.72rem; font-weight:800; letter-spacing:.055em; text-transform:uppercase; } .workspace-v73-identity h1{ margin:0; max-width:820px; font-size:clamp(1.55rem,3vw,2.45rem); line-height:1.08; letter-spacing:-.035em; } .workspace-v73-identity p{ margin:8px 0 0; color:var(--muted); font-size:.82rem; line-height:1.5; overflow-wrap:anywhere; } .workspace-v73-team{ display:flex; align-items:center; gap:8px; flex:0 0 auto; } .workspace-v73-team>div{ min-width:132px; padding:10px 12px; border:1px solid var(--line); border-radius:13px; background:color-mix(in srgb,var(--surface) 91%,transparent); } .workspace-v73-team small, .workspace-v73-team strong{display:block} .workspace-v73-team small{ margin-bottom:3px; color:var(--muted); font-size:.64rem; font-weight:750; } .workspace-v73-team strong{ max-width:160px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:.78rem; } .workspace-v73-summary{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin-bottom:12px; } .workspace-v73-summary>div{ min-height:72px; padding:13px 16px; display:flex; align-items:center; justify-content:space-between; gap:14px; border:1px solid var(--line); border-radius:15px; background:linear-gradient(180deg,rgba(255,255,255,.024),rgba(255,255,255,.012)); } .workspace-v73-summary small{ color:var(--muted); font-size:.72rem; font-weight:760; } .workspace-v73-summary strong{ font-size:1.16rem; letter-spacing:-.03em; } .workspace-v73-commandbar{ position:relative; z-index:8; display:grid; grid-template-columns:minmax(250px,1fr) auto auto; align-items:center; gap:10px; margin-bottom:10px; padding:9px; border:1px solid var(--line); border-radius:17px; background:color-mix(in srgb,var(--surface) 94%,transparent); box-shadow:0 10px 34px rgba(0,0,0,.08); } .workspace-v73-search{ min-width:0; display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:8px; } .workspace-v73-search input{ width:100%; min-width:0; min-height:40px; } .workspace-v73-views{ display:grid; grid-template-columns:repeat(4,auto); gap:3px; padding:3px; border:1px solid var(--line); border-radius:11px; background:var(--bg-2); } .workspace-v73-views a{ min-height:34px; padding:0 11px; display:flex; align-items:center; justify-content:center; border-radius:8px; color:var(--muted); font-size:.71rem; font-weight:820; text-align:center; text-decoration:none!important; transition:background-color 180ms var(--ease),color 180ms var(--ease),box-shadow 180ms var(--ease); } .workspace-v73-views a.active{ color:var(--text); background:var(--surface-2); box-shadow:0 2px 8px rgba(0,0,0,.15); } .workspace-v73-actions{ display:flex; align-items:center; justify-content:flex-end; gap:7px; } .workspace-v73-filter{position:relative} .workspace-v73-filter>summary{ list-style:none; cursor:pointer; } .workspace-v73-filter>summary::-webkit-details-marker{display:none} .workspace-v73-filter-panel{ width:310px; position:absolute; top:calc(100% + 9px); right:0; z-index:40; display:grid; gap:12px; padding:14px; border:1px solid var(--line); border-radius:15px; background:color-mix(in srgb,var(--surface) 98%,#090a10 2%); box-shadow:0 22px 60px rgba(0,0,0,.30); } .workspace-v73-filter-panel label{display:grid;gap:6px} .workspace-v73-filter-panel label>span{ color:var(--muted); font-size:.68rem; font-weight:760; } .workspace-v73-filter-panel select{width:100%} .workspace-v73-filter-actions{ display:grid; grid-template-columns:1fr 1fr; gap:8px; } .workspace-v73-filter-actions .button-quiet{grid-column:1/-1} .workspace-v73-saved{margin:0 0 12px} .workspace-v73-list-layout{ display:grid; grid-template-columns:minmax(260px,330px) minmax(0,1fr); gap:12px; align-items:start; } .workspace-v73-panel, .workspace-v73-view-shell, .workspace-v73-settings{ border:1px solid var(--line); border-radius:18px; background:linear-gradient(180deg,rgba(255,255,255,.024),rgba(255,255,255,.012)); box-shadow:0 14px 46px rgba(0,0,0,.08); } .workspace-v73-panel, .workspace-v73-view-shell{padding:14px} .workspace-v73-section-head{ min-height:52px; display:flex; align-items:center; justify-content:space-between; gap:14px; padding:1px 2px 12px; border-bottom:1px solid var(--line-soft); } .workspace-v73-section-head>div{min-width:0} .workspace-v73-section-head span, .workspace-v73-settings summary span{ display:block; margin-bottom:2px; color:var(--muted); font-size:.65rem; font-weight:760; letter-spacing:.04em; text-transform:uppercase; } .workspace-v73-section-head h2{ margin:0; font-size:.98rem; line-height:1.25; letter-spacing:-.018em; } .workspace-v73-section-head>strong{ min-width:30px; height:30px; padding:0 8px; display:grid; place-items:center; flex:0 0 auto; border:1px solid var(--line); border-radius:999px; color:var(--text-2); background:var(--surface-2); font-size:.72rem; } .workspace-v73-project-list{ display:grid; gap:4px; padding-top:8px; } .workspace-v73-project-list>a{ min-height:58px; padding:10px 11px; display:flex; align-items:center; justify-content:space-between; gap:12px; border-radius:11px; text-decoration:none!important; transition:background-color 180ms var(--ease),transform 180ms var(--ease); } .workspace-v73-project-list>a strong, .workspace-v73-project-list>a small{display:block} .workspace-v73-project-list>a strong{ font-size:.8rem; line-height:1.3; } .workspace-v73-project-list>a small{ margin-top:3px; color:var(--muted); font-size:.67rem; } .workspace-v73-project-list>a>span{ color:var(--muted); font-size:1.1rem; } @media (hover:hover) and (pointer:fine){ html:not(.suppress-hover) .workspace-v73-project-list>a:hover{ background:var(--surface-2); transform:translateX(2px); } } .workspace-v73-tasks{min-width:0} .workspace-v73-task-table-desktop{padding-top:5px} .workspace-v73-task-cards{display:none} .workspace-v73-empty{ min-height:168px; padding:28px 20px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; text-align:center; } .workspace-v73-empty strong{ font-size:.9rem; line-height:1.3; } .workspace-v73-empty p{ max-width:420px; margin:0; color:var(--muted); font-size:.76rem; line-height:1.55; } .workspace-v73-empty .button{margin-top:5px} .workspace-v73-view-shell{min-width:0;overflow:hidden} .workspace-v73-kanban{margin-top:12px} .workspace-v73-settings{ margin-top:12px; overflow:hidden; } .workspace-v73-settings>summary{ min-height:72px; padding:14px 16px; display:flex; align-items:center; justify-content:space-between; gap:16px; cursor:pointer; list-style:none; } .workspace-v73-settings>summary::-webkit-details-marker{display:none} .workspace-v73-settings summary strong, .workspace-v73-settings summary small{display:block} .workspace-v73-settings summary strong{ margin-bottom:3px; font-size:.88rem; } .workspace-v73-settings summary small{ color:var(--muted); font-size:.7rem; } .workspace-v73-settings summary b{ min-width:72px; min-height:34px; display:grid; place-items:center; flex:0 0 auto; border:1px solid var(--line); border-radius:10px; color:var(--text-2); background:var(--surface-2); font-size:.7rem; } .workspace-v73-settings-body{ padding:0 14px 14px; border-top:1px solid var(--line-soft); } .workspace-v73-settings-body .status-manager{margin:14px 0 10px} .workspace-v73-settings-body .status-add-dropdown{margin:0} @media(max-width:1120px){ .workspace-v73-commandbar{ grid-template-columns:1fr auto; } .workspace-v73-search{grid-column:1/-1} .workspace-v73-views{justify-self:start} } @media(max-width:820px){ body.workspace-page .dashboard{padding:18px 14px 34px} .workspace-v73-hero{ align-items:flex-start; flex-direction:column; gap:13px; padding-bottom:16px; } .workspace-v73-team{width:100%} .workspace-v73-team>div{min-width:0;flex:1} .workspace-v73-list-layout{grid-template-columns:1fr} .workspace-v73-projects{order:1} .workspace-v73-tasks{order:2} } @media(max-width:620px){ body.workspace-page .app-header-leading>strong{ display:block; max-width:calc(100vw - 210px); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:.88rem; } .workspace-v73-identity h1{font-size:1.45rem} .workspace-v73-summary{ grid-template-columns:repeat(3,1fr); gap:6px; } .workspace-v73-summary>div{ min-height:66px; padding:10px; align-items:center; justify-content:center; flex-direction:column; gap:3px; text-align:center; } .workspace-v73-summary small{font-size:.61rem} .workspace-v73-summary strong{font-size:1rem} .workspace-v73-commandbar{ grid-template-columns:1fr; gap:8px; padding:8px; } .workspace-v73-search{ grid-template-columns:1fr; } .workspace-v73-search .button{display:none} .workspace-v73-views{ width:100%; grid-template-columns:repeat(4,1fr); justify-self:stretch; } .workspace-v73-views a{ min-width:0; padding-inline:5px; font-size:.66rem; } .workspace-v73-actions{ width:100%; display:grid; grid-template-columns:1fr 1fr; } .workspace-v73-actions>.button, .workspace-v73-actions>details{width:100%} .workspace-v73-actions>details>summary{width:100%} .workspace-v73-filter-panel{ width:min(330px,calc(100vw - 44px)); left:0; right:auto; } .workspace-v73-panel, .workspace-v73-view-shell{padding:12px} .workspace-v73-section-head{min-height:48px} .workspace-v73-task-table-desktop{display:none} .workspace-v73-task-cards{ display:grid; gap:7px; padding-top:9px; } .workspace-v73-task-card{ display:grid; gap:9px; padding:12px; border:1px solid var(--line-soft); border-radius:12px; background:rgba(255,255,255,.014); text-decoration:none!important; } .workspace-v73-task-title strong, .workspace-v73-task-title small{display:block} .workspace-v73-task-title strong{ font-size:.82rem; line-height:1.35; } .workspace-v73-task-title small{ margin-top:3px; color:var(--muted); font-size:.66rem; } .workspace-v73-task-meta, .workspace-v73-task-foot{ display:flex; align-items:center; justify-content:space-between; gap:8px; color:var(--muted); font-size:.66rem; } .workspace-v73-task-meta>span:last-child{ max-width:46%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; text-align:right; } .workspace-v73-task-foot time{text-align:right} .workspace-v73-empty{min-height:150px;padding:24px 12px} .workspace-v73-settings>summary{padding:13px} } @media(max-width:390px){ .workspace-v73-team{display:grid;grid-template-columns:1fr 1fr} .workspace-v73-actions{grid-template-columns:1fr} .workspace-v73-summary small{font-size:.58rem} .workspace-v73-views a{font-size:.62rem} } .paypal-price-structure{display:block;margin:28px 0 20px;padding-bottom:22px} .paypal-pricing-layout>*,.paypal-plan-heading>*,.paypal-pricing-side>*{min-width:0} .paypal-price-structure>div{min-width:0} .paypal-price-kicker{display:block!important;margin:0 0 10px!important;padding:0!important;color:var(--muted);font-size:.72rem!important;font-weight:800;letter-spacing:.08em;text-transform:uppercase} .paypal-intro-price>strong{display:block;max-width:100%;font-size:clamp(4rem,7vw,6.4rem);line-height:.86;letter-spacing:-.07em} .paypal-intro-price>span:not(.paypal-price-kicker){display:block;margin-top:10px;padding:0;color:var(--muted);font-size:.78rem} .paypal-standard-price{display:block;margin-top:9px;color:var(--muted);font-size:.78rem;line-height:1.5;font-style:italic;font-weight:500;letter-spacing:0} .paypal-cancel-note{margin:-9px 0 24px;color:var(--text-2);font-size:.82rem;font-weight:750} .paypal-pricing-explainer{max-width:760px;margin:18px 0 0;padding:18px 20px;border:1px solid rgba(255,255,255,.08);border-radius:15px;background:rgba(255,255,255,.025);color:var(--text-2);line-height:1.65} .paypal-pricing-explainer strong{color:var(--text)} .paypal-service-label{margin-top:28px;color:var(--muted);font-size:.72rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase} .paypal-process-checks{margin-top:14px} .paypal-included-note{margin:-13px 0 28px;color:var(--muted);font-size:.8rem;line-height:1.6} @media (max-width:720px){ .paypal-price-structure{margin:23px 0 18px;padding-bottom:18px} .paypal-intro-price>strong{font-size:clamp(4rem,21vw,5.5rem)} .paypal-standard-price{font-size:.76rem} .paypal-cancel-note{margin:0 0 22px} .paypal-pricing-explainer{padding:16px} } .paypal-side-card, .paypal-side-card > *{ min-width:0; max-width:100%; } .paypal-side-card h2, .paypal-side-card p, .paypal-side-card .text-link{ overflow-wrap:break-word; word-break:normal; } .paypal-side-card .button-full{ white-space:normal; text-align:center; line-height:1.25; height:auto; min-height:46px; padding-top:12px; padding-bottom:12px; } .paypal-sample-card .text-link{ white-space:normal; } @media (max-width:760px){ .studio-site .paypal-pricing-side{ grid-template-columns:minmax(0,1fr); grid-template-rows:auto; } .studio-site .paypal-side-card{ width:100%; } .studio-site .paypal-side-card h2{ font-size:clamp(2.15rem,10.5vw,2.85rem); line-height:.98; } } @media (max-width:380px){ .studio-site .paypal-side-card{ padding:19px 17px; } .studio-site .paypal-side-card h2{ font-size:clamp(2rem,10.2vw,2.45rem); } } .studio-site .studio-final-card h2{ overflow-wrap:anywhere; } .public-header-leading{ min-width:0; display:flex; align-items:center; gap:10px; flex:0 0 auto; } .studio-site .public-header-leading .floating-page-back{ position:static; inset:auto; z-index:auto; flex:0 0 38px; } .studio-site .public-header-leading .brand{ min-width:0; flex:0 1 auto; } @media (max-width:560px){ .public-header-leading{gap:8px} .studio-site .public-header-leading .floating-page-back{ width:36px; height:36px; flex-basis:36px; } } @media (max-width:350px){ .public-header-leading{gap:6px} .studio-site .public-header-leading .brand span{font-size:.9rem} .studio-site .public-header-leading .brand img{width:34px;height:27px} } @media (max-width:820px){ .studio-site .values-layout{ grid-template-columns:minmax(0,1fr); } .studio-site .values-layout > *{ min-width:0; } } @media (max-width:560px){ .studio-site .value-lines article{ grid-template-columns:35px minmax(0,1fr); } .studio-site .value-lines article > *{ min-width:0; } } .potential-client-metrics{grid-template-columns:repeat(4,minmax(0,1fr))} .potential-client-toolbar{display:grid;grid-template-columns:minmax(220px,1fr) minmax(180px,.55fr) minmax(160px,.45fr) auto auto;gap:10px;align-items:center} .potential-client-toolbar input,.potential-client-toolbar select,.potential-client-status,.potential-client-dialog textarea{width:100%;min-width:0;border:1px solid var(--line-strong);border-radius:12px;background:var(--surface-2);color:var(--text);outline:none} .potential-client-toolbar input,.potential-client-toolbar select{height:44px;padding:0 13px} .potential-client-toolbar input:focus,.potential-client-toolbar select:focus,.potential-client-status:focus,.potential-client-dialog textarea:focus{border-color:rgba(154,123,226,.7);box-shadow:0 0 0 3px rgba(154,123,226,.11)} .potential-client-table{border:1px solid var(--line);border-radius:16px;overflow:hidden} .potential-client-row{display:grid;grid-template-columns:minmax(190px,1.05fr) minmax(150px,.78fr) minmax(140px,.65fr) minmax(240px,1.45fr) minmax(94px,.45fr);gap:14px;align-items:center;padding:14px 16px;border-bottom:1px solid var(--line);transition:background .2s ease,border-color .2s ease} .potential-client-row:last-child{border-bottom:0} .potential-client-main,.potential-client-notes,.potential-client-link,.potential-client-row>div{min-width:0} .potential-client-main strong{font-size:.86rem;line-height:1.35} .potential-client-category{display:inline-block;max-width:100%;color:var(--text-2);font-size:.78rem;line-height:1.4;overflow-wrap:anywhere} .potential-client-status{height:38px;padding:0 10px;font-size:.76rem;font-weight:750} .text-button{margin-top:5px;padding:0;border:0;background:none;color:var(--text);font:inherit;font-size:.72rem;font-weight:800;text-decoration:underline;text-underline-offset:3px;cursor:pointer} .potential-client-link .button{white-space:nowrap} .potential-client-row.saved{background:rgba(102,193,137,.055)} .potential-client-row.save-error{background:rgba(226,105,100,.07)} .potential-client-dialog{width:min(560px,calc(100vw - 28px));padding:0;border:1px solid var(--line-strong);border-radius:18px;background:var(--surface);color:var(--text);box-shadow:var(--shadow-lg)} .potential-client-dialog::backdrop{background:rgba(3,4,7,.72);backdrop-filter:blur(5px)} .potential-client-dialog-shell{padding:20px} .potential-client-dialog-head{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;margin-bottom:15px} .potential-client-dialog-head span,.potential-client-dialog-head strong{display:block} .potential-client-dialog-head span{color:var(--muted);font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em} .potential-client-dialog-head strong{margin-top:5px;font-size:1.05rem} .dialog-close{width:36px;height:36px;border:1px solid var(--line);border-radius:10px;background:var(--surface-2);color:var(--text);font-size:1.35rem;cursor:pointer} .potential-client-dialog textarea{display:block;resize:vertical;min-height:150px;padding:12px 13px;line-height:1.55} .potential-client-dialog-actions{display:flex;justify-content:flex-end;gap:9px;margin-top:14px} .potential-client-save-state{min-height:18px;margin:9px 0 0;color:var(--muted);font-size:.72rem} @media(max-width:1100px){.potential-client-toolbar{grid-template-columns:1fr 1fr 1fr auto}.potential-client-toolbar .button-quiet{grid-column:auto}.potential-client-row{grid-template-columns:minmax(170px,1fr) minmax(130px,.7fr) minmax(130px,.65fr) minmax(210px,1.2fr) auto}} @media(max-width:760px){ .potential-client-metrics{grid-template-columns:1fr 1fr} .potential-client-toolbar{grid-template-columns:1fr 1fr}.potential-client-search{grid-column:1/-1}.potential-client-toolbar .button{width:100%} .potential-client-table{border:0;border-radius:0;overflow:visible;display:grid;gap:12px} .potential-client-main,.potential-client-notes{grid-column:1/-1} .potential-client-link{align-self:end}.potential-client-link .button{width:100%;justify-content:center} } .studio-human-section{ border-top:1px solid rgba(255,255,255,.06); border-bottom:1px solid rgba(255,255,255,.06); background: radial-gradient(circle at 12% 16%,rgba(141,99,255,.08),transparent 28%), linear-gradient(180deg,rgba(255,255,255,.012),rgba(255,255,255,0)); } .human-principles-grid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin-top:34px; } .human-principle{ min-width:0; min-height:240px; padding:26px; display:flex; flex-direction:column; border:1px solid var(--line); border-radius:20px; background:rgba(255,255,255,.018); box-shadow:inset 0 1px 0 rgba(255,255,255,.025); } .human-principle>span{ color:#c7b8ff; font-size:.72rem; font-weight:800; letter-spacing:.12em; } .human-principle h3{ margin:52px 0 12px; font-size:clamp(1.2rem,1.65vw,1.55rem); letter-spacing:-.035em; } .human-principle p{ margin:0; color:var(--muted); line-height:1.68; } .values-intro{ max-width:520px; margin:20px 0 0; color:#5f5d65; line-height:1.72; } html[data-theme="light"] .studio-human-section{ border-color:rgba(20,22,35,.08); background: radial-gradient(circle at 12% 16%,rgba(105,68,213,.07),transparent 28%), linear-gradient(180deg,rgba(255,255,255,.5),rgba(255,255,255,0)); } html[data-theme="light"] .human-principle{ background:rgba(255,255,255,.65); } @media (hover:hover) and (pointer:fine){ html:not(.suppress-hover) .human-principle{ transition:transform .22s var(--ease),border-color .22s ease,background .22s ease; } html:not(.suppress-hover) .human-principle:hover{ transform:translateY(-3px); border-color:rgba(198,181,255,.28); background:rgba(255,255,255,.026); } } @media(max-width:1020px){ .human-principles-grid{grid-template-columns:repeat(2,minmax(0,1fr))} .human-principle{min-height:210px} } @media(max-width:560px){ .human-principles-grid{grid-template-columns:1fr;gap:10px;margin-top:24px} .human-principle{min-height:0;padding:22px} .human-principle h3{margin:28px 0 10px} } :root{ --radius-sm:8px; --radius-md:14px; --radius-lg:20px; --radius-xl:26px; } .button{border-radius:11px;box-shadow:none} .button-primary{box-shadow:0 8px 22px rgba(116,76,221,.22)} @media (hover:hover) and (pointer:fine){ html:not(.suppress-hover) .button-primary:hover{box-shadow:0 10px 26px rgba(116,76,221,.28)} } .app-card,.settings-card,.metric-card,.quick-action-grid>a{box-shadow:none} .app-card{transition:border-color .16s ease,background .16s ease} .studio-scroll-progress{display:none} .studio-site .studio-loader{display:none!important} .studio-site .creative-orbit{transform:none!important} .studio-site .studio-service-card, .studio-site .human-principle, .studio-site .offer-card, .studio-site .path-card, .studio-site .studio-price-card{box-shadow:none} @media (hover:hover) and (pointer:fine){ html:not(.suppress-hover) .studio-site [data-tilt]:hover, html:not(.suppress-hover) .studio-site .human-principle:hover, html:not(.suppress-hover) .studio-site .studio-service-card:hover{transform:none} } html[data-theme="light"]{ --bg:#f6f6f4; --bg-2:#f0f0ed; --surface:#ffffff; --surface-2:#f7f7f5; --surface-3:#ecece8; --text:#171719; --text-2:#3f4046; --muted:#6e7078; --line:rgba(23,23,25,.10); --line-strong:rgba(23,23,25,.17); --shadow-sm:0 8px 24px rgba(17,17,20,.055); --shadow-lg:0 22px 60px rgba(17,17,20,.085); } html[data-theme="light"] body{background:var(--bg);color:var(--text)} html[data-theme="light"] h1, html[data-theme="light"] h2, html[data-theme="light"] h3, html[data-theme="light"] .brand, html[data-theme="light"] .metric-card strong, html[data-theme="light"] .revenue-card strong{ text-shadow:none } html[data-theme="light"] .eyebrow{color:#694fc2;text-shadow:none} html[data-theme="light"] .button-secondary, html[data-theme="light"] .button-ghost, html[data-theme="light"] .button-quiet{background:#fff;border-color:rgba(23,23,25,.14);box-shadow:none} html[data-theme="light"] input, html[data-theme="light"] select, html[data-theme="light"] textarea{background:#fff;border-color:rgba(23,23,25,.15);box-shadow:none} html[data-theme="light"] input:focus, html[data-theme="light"] select:focus, html[data-theme="light"] textarea:focus{border-color:rgba(105,79,194,.55);box-shadow:0 0 0 3px rgba(105,79,194,.10)} html[data-theme="light"] body.app-page .sidebar{background:#fff;border-right-color:var(--line);box-shadow:none} html[data-theme="light"] body.app-page .app-header{background:rgba(246,246,244,.94);border-bottom-color:var(--line);box-shadow:none} html[data-theme="light"] body.app-page .app-card, html[data-theme="light"] body.app-page .settings-card, html[data-theme="light"] body.app-page .metric-card, html[data-theme="light"] body.app-page .quick-action-grid a{background:#fff;border-color:var(--line);box-shadow:none} html[data-theme="light"] .sidebar-nav a.active{background:#f1eff9;color:#211d31;box-shadow:none} @media (hover:hover) and (pointer:fine){ html[data-theme="light"]:not(.suppress-hover) .sidebar-nav a:hover, html[data-theme="light"]:not(.suppress-hover) .sidebar-footer a:hover{background:#f5f4f1;color:#171719;box-shadow:none} html[data-theme="light"]:not(.suppress-hover) .app-card:hover, html[data-theme="light"]:not(.suppress-hover) .quick-action-grid>a:hover, html[data-theme="light"]:not(.suppress-hover) .metric-card:hover{border-color:rgba(105,79,194,.22);box-shadow:none} } html[data-theme="light"] .account-trigger, html[data-theme="light"] .notification-button, html[data-theme="light"] .status-dropdown{background:#fff;box-shadow:none;border-color:var(--line)} html[data-theme="light"] .role-badge, html[data-theme="light"] .status-badge{box-shadow:none} html[data-theme="light"] body.studio-site{background:#f7f6f2;color:#18181a} html[data-theme="light"] .studio-site .site-header.scrolled, html[data-theme="light"] .studio-site .studio-header.scrolled{background:rgba(247,246,242,.93);border-color:rgba(24,24,26,.09);box-shadow:none} html[data-theme="light"] .studio-site .nav a{color:#64646b} html[data-theme="light"] .studio-site .nav a[aria-current="page"], html[data-theme="light"] .studio-site .nav a:hover{color:#18181a} html[data-theme="light"] .studio-site .studio-hero{background:#f7f6f2;border-bottom-color:rgba(24,24,26,.08)} html[data-theme="light"] .studio-site .studio-hero::before, html[data-theme="light"] .studio-site .studio-hero::after{opacity:.32} html[data-theme="light"] .studio-site .studio-hero-noise{opacity:.018} html[data-theme="light"] .studio-site .studio-hero-copy p, html[data-theme="light"] .studio-site .studio-process-copy p, html[data-theme="light"] .studio-site .studio-output-grid p, html[data-theme="light"] .studio-site .studio-section-head p{color:#65666d} html[data-theme="light"] .studio-site .creative-orbit{background:#fff;border-color:rgba(24,24,26,.10);box-shadow:0 18px 50px rgba(24,24,26,.07)} html[data-theme="light"] .studio-site .orbit-ring{border-color:rgba(105,79,194,.13)} html[data-theme="light"] .studio-site .orbit-core, html[data-theme="light"] .studio-site .orbit-card{background:#fff;border-color:rgba(24,24,26,.10);color:#18181a;box-shadow:0 8px 22px rgba(24,24,26,.055)} html[data-theme="light"] .studio-site .orbit-card small, html[data-theme="light"] .studio-site .orbit-core small, html[data-theme="light"] .studio-site .orbit-core span{color:#77777e} html[data-theme="light"] .studio-site .studio-paper-section{background:#efede7;color:#18181a} html[data-theme="light"] .studio-site .studio-services-section, html[data-theme="light"] .studio-site .studio-output-section, html[data-theme="light"] .studio-site .studio-human-section{background:#f7f6f2;border-color:rgba(24,24,26,.08)} html[data-theme="light"] .studio-site .studio-process-section{background:#f0eee8;color:#18181a} html[data-theme="light"] .studio-site .studio-service-card, html[data-theme="light"] .studio-site .human-principle, html[data-theme="light"] .studio-site .source-frame, html[data-theme="light"] .studio-site .output-stack article, html[data-theme="light"] .studio-site .studio-process-list li, html[data-theme="light"] .studio-site .studio-final-card, html[data-theme="light"] .studio-site .studio-price-card, html[data-theme="light"] .studio-site .offer-card, html[data-theme="light"] .studio-site .path-cards article, html[data-theme="light"] .studio-site .about-story-card, html[data-theme="light"] .studio-site .support-card, html[data-theme="light"] .studio-site .paypal-plan-card, html[data-theme="light"] .studio-site .paypal-side-card{background:#fff;border-color:rgba(24,24,26,.10);color:#18181a;box-shadow:none} html[data-theme="light"] .studio-site .service-tags i, html[data-theme="light"] .studio-site .proof-chips span{background:#f2f1ed;border-color:rgba(24,24,26,.08);color:#55565c} html[data-theme="light"] .studio-site .text-link, html[data-theme="light"] .studio-site p a:not(.button):not(.brand){color:#5e45b6} html[data-theme="light"] .studio-site .studio-final-section{background:#f7f6f2} html[data-theme="light"] .studio-site .studio-final-card{background:#eeece6} html[data-theme="light"] .studio-site .mobile-nav{background:#fff;border-color:rgba(24,24,26,.10)} html[data-theme="light"] .studio-site .mobile-menu-button{background:#fff;border-color:rgba(24,24,26,.12)} html[data-theme="light"] .studio-site .studio-footer{background:#111216;color:#f3f3f5;border-color:rgba(255,255,255,.08)} html[data-theme="light"] .studio-site .studio-footer p, html[data-theme="light"] .studio-site .studio-footer a, html[data-theme="light"] .studio-site .studio-footer .footer-bottom{color:#b9bac1} html[data-theme="light"] .studio-site .studio-footer strong, html[data-theme="light"] .studio-site .studio-footer .brand{color:#fff} .simple-human-section .human-principles-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:10px} .simple-human-section .human-principle{min-height:190px;padding:22px} .simple-human-section .human-principle h3{margin:34px 0 9px} @media(max-width:1020px){.simple-human-section .human-principles-grid{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(max-width:560px){.simple-human-section .human-principles-grid{grid-template-columns:1fr}.simple-human-section .human-principle{min-height:0}} html[data-theme="light"] .studio-site .studio-page-hero{ background:#f7f6f2; border-bottom-color:rgba(24,24,26,.09); } html[data-theme="light"] .studio-site .studio-page-hero::before{opacity:.07} html[data-theme="light"] .studio-site .studio-page-hero h1{color:#18181a} html[data-theme="light"] .studio-site .studio-page-hero p{color:#65666d} html[data-theme="light"] .studio-site .rule-card, html[data-theme="light"] .studio-site .support-card, html[data-theme="light"] .studio-site .founder-strip, html[data-theme="light"] .studio-site .path-cards article, html[data-theme="light"] .studio-site .confidential-main, html[data-theme="light"] .studio-site .confidential-card{ background:#fff; border-color:rgba(24,24,26,.10); color:#18181a; box-shadow:none; } html[data-theme="light"] .studio-site .studio-faq .faq-item{border-color:rgba(24,24,26,.12)} html[data-theme="light"] .studio-site .studio-faq .faq-item summary{color:#18181a} html[data-theme="light"] .studio-site .studio-faq .faq-item p{color:#65666d} html[data-theme="light"] .studio-site .quality-grid article{border-color:rgba(24,24,26,.14)} html[data-theme="light"] .studio-site .quality-grid h3{color:#18181a} html[data-theme="light"] .studio-site .quality-grid p{color:#65666d} html[data-theme="light"] .studio-site .sample-proof-board-dark article{ background:#fff; border-color:rgba(24,24,26,.11); box-shadow:0 10px 30px rgba(24,24,26,.055); } html[data-theme="light"] .studio-site .sample-proof-board-dark strong{color:#18181a} html[data-theme="light"] .studio-site .paypal-payment-steps{background:#fff;border-color:rgba(24,24,26,.10)} html[data-theme="light"] .studio-site .paypal-payment-steps>div{background:#f5f4f0} html[data-theme="light"] .studio-site .paypal-payment-badge{background:#f5f4f0;border-color:rgba(24,24,26,.10);color:#55565c} html[data-theme="light"] .studio-site .paypal-sample-card{background:#f2f0ea} html[data-theme="light"] .studio-site .legal-note{background:#fff7f5;color:#804a44;border-color:rgba(164,82,72,.20)} html[data-theme="light"] .studio-site .contact-steps, html[data-theme="light"] .studio-site .contact-steps li, html[data-theme="light"] .studio-site .service-detail-list, html[data-theme="light"] .studio-site .service-detail, html[data-theme="light"] .studio-site .service-detail li{border-color:rgba(24,24,26,.11)} html[data-theme="light"] .studio-site .studio-contact-form{background:#fff;border-color:rgba(24,24,26,.10)} html[data-theme="light"] body.app-page{background:#f6f6f4} html[data-theme="light"] body.app-page .dashboard-hero, html[data-theme="light"] body.app-page .workspace-head{background:transparent;box-shadow:none} body{min-width:0} html{scroll-padding-top:92px} .header-inner>*,.studio-hero-grid>*,.studio-process-grid>*,.studio-output-grid>*,.footer-grid>*,.pricing-grid>*,.form-shell>*{min-width:0} .button{max-width:100%;white-space:normal;text-align:center} .nav a,.mobile-nav a,.sidebar-nav a,.sidebar-footer a,.footer-links a{min-height:44px;display:flex;align-items:center} a:focus-visible,button:focus-visible,[role="button"]:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{outline:3px solid rgba(139,92,246,.46);outline-offset:3px} .studio-site .statement-index{letter-spacing:.06em;text-transform:none;font-size:.74rem} .studio-site .studio-service-card>span:first-child, .studio-site .value-lines article>span:first-child, .studio-site .human-principle>span:first-child{display:none} .studio-site .studio-service-card h3{margin-top:18px} .studio-site .human-principle h3{margin-top:4px} .studio-site .simple-human-section .human-principle h3{margin-top:4px} .studio-site .eyebrow{letter-spacing:.09em} .studio-site .studio-service-card,.studio-site .human-principle,.studio-site .about-story-card,.studio-site .studio-price-card{border-radius:16px} .studio-hero-copy h1 .hero-subline{display:block;color:var(--text);font-style:normal;font-weight:620;opacity:.76} .hero-workflow-card{align-self:center;width:min(100%,520px);margin-left:auto;padding:24px;border:1px solid var(--line-strong);border-radius:20px;background:rgba(255,255,255,.025);box-shadow:0 22px 60px rgba(0,0,0,.24)} .hero-workflow-head{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;padding-bottom:20px;border-bottom:1px solid var(--line)} .hero-workflow-head div{display:grid;gap:5px}.hero-workflow-head small{color:var(--muted);font-size:.74rem;font-weight:700}.hero-workflow-head strong{font-size:1.05rem}.hero-workflow-head>span{padding:7px 10px;border:1px solid var(--line);border-radius:9px;color:var(--text-2);font-size:.72rem;font-weight:800} .hero-workflow-list{list-style:none;margin:0;padding:8px 0 0;display:grid} .hero-workflow-list li{min-height:68px;display:grid;grid-template-columns:minmax(90px,.42fr) 1fr;align-items:center;gap:18px;border-bottom:1px solid var(--line)} .hero-workflow-list li:last-child{border-bottom:0}.hero-workflow-list strong{font-size:.95rem}.hero-workflow-list span{color:var(--muted);font-size:.88rem} html[data-theme="light"]{--bg:#f7f7f8;--bg-2:#f1f2f4;--surface:#fff;--surface-2:#f7f7f8;--surface-3:#eceef1;--text:#18181b;--text-2:#3f3f46;--muted:#71717a;--line:rgba(24,24,27,.10);--line-strong:rgba(24,24,27,.17);--shadow-sm:0 8px 24px rgba(24,24,27,.055);--shadow-lg:0 22px 55px rgba(24,24,27,.08)} html[data-theme="light"] body.studio-site,html[data-theme="light"] .studio-site .studio-hero,html[data-theme="light"] .studio-site .studio-services-section,html[data-theme="light"] .studio-site .studio-output-section,html[data-theme="light"] .studio-site .studio-human-section,html[data-theme="light"] .studio-site .studio-final-section,html[data-theme="light"] .studio-site .studio-page-hero{background:#f7f7f8} html[data-theme="light"] .studio-site .studio-paper-section,html[data-theme="light"] .studio-site .studio-process-section{background:#f0f1f3} html[data-theme="light"] .studio-site .hero-workflow-card{background:#fff;border-color:rgba(24,24,27,.11);box-shadow:0 18px 45px rgba(24,24,27,.07)} html[data-theme="light"] .studio-site .hero-workflow-head>span{background:#f7f7f8} html[data-theme="light"] .studio-site .studio-final-card{background:#f0f1f3} html[data-theme="light"] .studio-site .site-header.scrolled,html[data-theme="light"] .studio-site .studio-header.scrolled{background:rgba(247,247,248,.94)} html[data-theme="light"] body.app-page .app-header{background:rgba(247,247,248,.94)} @media(max-width:820px){ .hero-workflow-card{width:100%;margin:0;padding:20px} .studio-hero-copy h1{font-size:clamp(3rem,12vw,4.8rem)} } @media(max-width:560px){ .container,.narrow,.studio-site .container{width:min(100% - 28px,var(--container))} .header-inner{width:calc(100% - 28px);gap:10px} .hero-actions{display:grid;grid-template-columns:1fr;width:100%}.hero-actions .button{width:100%} .hero-workflow-card{padding:17px;border-radius:16px}.hero-workflow-list li{grid-template-columns:1fr;gap:5px;padding:15px 0;min-height:0} .studio-service-card,.human-principle,.about-story-card,.studio-price-card{border-radius:14px} } @media(max-width:360px){ .container,.narrow,.studio-site .container{width:min(100% - 20px,var(--container))} .header-inner{width:calc(100% - 20px)} .button{padding-inline:14px} } .studio-site .value-lines article{ grid-template-columns:minmax(0,.7fr) minmax(0,1fr); gap:clamp(18px,3vw,34px); } .studio-site .value-lines article>h3, .studio-site .value-lines article>p{min-width:0} @media (max-width:560px){ .studio-site .value-lines article{ grid-template-columns:minmax(0,1fr); gap:8px; padding:22px 0; } .studio-site .value-lines p{grid-column:auto} } @media (max-width:560px){ .studio-site .values-layout>div:first-child h2{ font-size:clamp(2.65rem,13vw,3.25rem); overflow-wrap:break-word; } } html:not(.reduce-motion){scroll-behavior:smooth} html.js .studio-home .hero-workflow-card{ opacity:0; transform:translateY(28px) scale(.985); transition:opacity .86s var(--ease),transform .86s var(--ease),border-color .24s ease,box-shadow .24s ease; } html.js body.studio-home.studio-ready .hero-workflow-card{ opacity:1; transform:none; transition-delay:.12s, .12s, 0s, 0s; } html.js body.studio-home:not(.studio-ready) .hero-workflow-list li{opacity:0;transform:translateX(12px)} html.js body.studio-home.studio-ready .hero-workflow-list li{animation:workflow-row-in .52s var(--ease) both} html.js body.studio-home.studio-ready .hero-workflow-list li:nth-child(1){animation-delay:.22s} html.js body.studio-home.studio-ready .hero-workflow-list li:nth-child(2){animation-delay:.29s} html.js body.studio-home.studio-ready .hero-workflow-list li:nth-child(3){animation-delay:.36s} html.js body.studio-home.studio-ready .hero-workflow-list li:nth-child(4){animation-delay:.43s} @keyframes workflow-row-in{from{opacity:0;transform:translateX(12px)}to{opacity:1;transform:none}} .studio-home .studio-hero-copy h1 .hero-subline{ opacity:1; color:transparent; background:linear-gradient(105deg,#f08a72 0%,#df6f9f 48%,#9b7cff 100%); background-clip:text; -webkit-background-clip:text; } .studio-home .studio-hero-copy>p{color:#c7c8d3;max-width:660px} .studio-home .studio-proof-line{color:#b5b7c5;letter-spacing:.07em} .studio-home .studio-proof-line span:nth-of-type(1){color:#f08a72} .studio-home .studio-proof-line span:nth-of-type(2){color:#d88ade} .studio-home .studio-proof-line span:nth-of-type(3){color:#ad9cff} .studio-home .studio-proof-line span:nth-of-type(4){color:#e777a3} .studio-home .studio-proof-line i{width:5px;height:5px;background:#8f73f5;box-shadow:0 0 0 5px rgba(143,115,245,.08);animation:proof-dot 2.4s ease-in-out infinite} .studio-home .studio-proof-line i:nth-of-type(2){animation-delay:-.8s} .studio-home .studio-proof-line i:nth-of-type(3){animation-delay:-1.6s} @keyframes proof-dot{0%,100%{opacity:.55;transform:scale(.82)}50%{opacity:1;transform:scale(1.12)}} .hero-workflow-card::before{ content:""; position:absolute; inset:-1px; border-radius:inherit; pointer-events:none; background:linear-gradient(120deg,rgba(240,138,114,.10),transparent 34%,rgba(139,92,246,.12) 72%,transparent); opacity:.45; mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); mask-composite:exclude; -webkit-mask-composite:xor; padding:1px; } .hero-workflow-card{position:relative;overflow:hidden} @media (hover:hover) and (pointer:fine){ html:not(.suppress-hover):not(.reduce-motion) .hero-workflow-card:hover{transform:translateY(-3px);border-color:rgba(139,92,246,.28);box-shadow:0 28px 70px rgba(0,0,0,.30)} html:not(.suppress-hover):not(.reduce-motion) .studio-service-card:hover, html:not(.suppress-hover):not(.reduce-motion) .human-principle:hover{transform:translateY(-3px);border-color:rgba(139,92,246,.28)} } .studio-service-card,.human-principle{transition:transform .24s var(--ease),border-color .24s ease,background .24s ease} html[data-theme="light"]{ color-scheme:light; --bg:#e9e6df; --bg-2:#e2ded6; --surface:#f2eee7; --surface-2:#ebe7df; --surface-3:#ddd8cf; --text:#19191c; --text-2:#3f3f45; --muted:#67676f; --line:rgba(25,25,28,.11); --line-strong:rgba(25,25,28,.18); --shadow-sm:0 10px 28px rgba(32,29,24,.07); --shadow-lg:0 24px 60px rgba(32,29,24,.10); } html[data-theme="light"] body{background:#e9e6df;color:#19191c} html[data-theme="light"] .studio-site .studio-hero, html[data-theme="light"] .studio-site .studio-services-section, html[data-theme="light"] .studio-site .studio-output-section, html[data-theme="light"] .studio-site .studio-final-section, html[data-theme="light"] .studio-site .studio-page-hero{ --text:#f6f6f8; --text-2:#d0d1d8; --muted:#a9abb7; --line:rgba(255,255,255,.09); --line-strong:rgba(255,255,255,.16); --surface:#15171f; --surface-2:#1a1d27; color:var(--text); background:#0d0f15; border-color:rgba(255,255,255,.08); } html[data-theme="light"] .studio-site .studio-hero::before, html[data-theme="light"] .studio-site .studio-hero::after{opacity:.72} html[data-theme="light"] .studio-site .studio-hero-copy>p{color:#c7c8d3} html[data-theme="light"] .studio-site .studio-hero-copy h1 .hero-subline{color:transparent} html[data-theme="light"] .studio-site .hero-workflow-card{background:#12141b;border-color:rgba(255,255,255,.12);box-shadow:0 24px 65px rgba(0,0,0,.30)} html[data-theme="light"] .studio-site .hero-workflow-head>span{background:#181a23;color:#d5d6de;border-color:rgba(255,255,255,.10)} html[data-theme="light"] .studio-site .hero-workflow-list span, html[data-theme="light"] .studio-site .hero-workflow-head small{color:#9fa2af} html[data-theme="light"] .studio-site .studio-services-section .studio-service-card, html[data-theme="light"] .studio-site .studio-output-section .source-frame, html[data-theme="light"] .studio-site .studio-output-section .output-stack article, html[data-theme="light"] .studio-site .studio-final-section .studio-final-card{ background:#14161e; border-color:rgba(255,255,255,.10); color:#f4f4f7; box-shadow:none; } html[data-theme="light"] .studio-site .studio-services-section p, html[data-theme="light"] .studio-site .studio-output-section p, html[data-theme="light"] .studio-site .studio-final-section p{color:#aeb0bb} html[data-theme="light"] .studio-site .studio-services-section .service-tags i{background:#1b1e28;border-color:rgba(255,255,255,.09);color:#c5c7d0} html[data-theme="light"] .studio-site .studio-services-section .text-link, html[data-theme="light"] .studio-site .studio-output-section .text-link, html[data-theme="light"] .studio-site .studio-final-section .text-link{color:#c9baff} html[data-theme="light"] .studio-site .studio-paper-section, html[data-theme="light"] .studio-site .studio-process-section, html[data-theme="light"] .studio-site .studio-human-section{background:#e7e3dc;color:#19191c;border-color:rgba(25,25,28,.10)} html[data-theme="light"] .studio-site .studio-process-section .studio-process-list li, html[data-theme="light"] .studio-site .studio-human-section .human-principle, html[data-theme="light"] .studio-site .studio-paper-section .quality-grid article, html[data-theme="light"] .studio-site .studio-paper-section .about-story-card{ background:#f1ede6; border-color:rgba(25,25,28,.11); color:#19191c; box-shadow:none; } html[data-theme="light"] .studio-site .studio-process-section p, html[data-theme="light"] .studio-site .studio-human-section p, html[data-theme="light"] .studio-site .studio-paper-section p{color:#5f6067} html[data-theme="light"] .studio-site .site-header:not(.scrolled){--text:#f6f6f8;--text-2:#d0d1d8;--muted:#b1b3bd;--line:rgba(255,255,255,.12);--surface:#15171f;color:#f6f6f8} html[data-theme="light"] .studio-site .site-header:not(.scrolled) .nav a{color:#b8bac5} html[data-theme="light"] .studio-site .site-header:not(.scrolled) .nav a:hover, html[data-theme="light"] .studio-site .site-header:not(.scrolled) .nav a[aria-current="page"]{color:#fff} html[data-theme="light"] .studio-site .site-header:not(.scrolled) .mobile-menu-button{background:#15171f;border-color:rgba(255,255,255,.12);color:#fff} html[data-theme="light"] .studio-site .site-header.scrolled{--text:#19191c;--text-2:#3f3f45;--muted:#66666e;--line:rgba(25,25,28,.11);--surface:#f2eee7;color:#19191c;background:rgba(233,230,223,.94);border-color:rgba(25,25,28,.10)} html[data-theme="light"] .studio-site .site-header.scrolled .mobile-menu-button{background:#f2eee7;border-color:rgba(25,25,28,.12);color:#19191c} html[data-theme="light"] .studio-site .site-header:not(.scrolled) .mobile-nav{background:#12141b;border-color:rgba(255,255,255,.12);color:#f6f6f8} html[data-theme="light"] .studio-site .site-header.scrolled .mobile-nav{background:#f2eee7;border-color:rgba(25,25,28,.12);color:#19191c} html[data-theme="light"] .studio-site .rule-card, html[data-theme="light"] .studio-site .support-card, html[data-theme="light"] .studio-site .founder-strip, html[data-theme="light"] .studio-site .path-cards article, html[data-theme="light"] .studio-site .confidential-main, html[data-theme="light"] .studio-site .confidential-card, html[data-theme="light"] .studio-site .studio-contact-form, html[data-theme="light"] .studio-site .paypal-plan-card, html[data-theme="light"] .studio-site .paypal-side-card, html[data-theme="light"] .studio-site .paypal-payment-steps{ background:#f1ede6; border-color:rgba(25,25,28,.11); color:#19191c; box-shadow:none; } html[data-theme="light"] .studio-site .paypal-payment-steps>div, html[data-theme="light"] .studio-site .paypal-payment-badge, html[data-theme="light"] .studio-site .paypal-sample-card{background:#e6e1d9;border-color:rgba(25,25,28,.10);color:#4f5057} html[data-theme="light"] .studio-site input, html[data-theme="light"] .studio-site select, html[data-theme="light"] .studio-site textarea{background:#f6f2eb;color:#19191c;border-color:rgba(25,25,28,.14)} html[data-theme="light"] .studio-site input::placeholder, html[data-theme="light"] .studio-site textarea::placeholder{color:#7b7b82} html[data-theme="light"] body.app-page{background:#e7e3dc;color:#19191c} html[data-theme="light"] body.app-page .sidebar{--text:#f4f4f7;--text-2:#d0d1d8;--muted:#9a9ca8;--line:rgba(255,255,255,.09);background:#111319;color:#f4f4f7;border-right-color:rgba(255,255,255,.08);box-shadow:none} html[data-theme="light"] body.app-page .sidebar .brand{color:#fff} html[data-theme="light"] body.app-page .sidebar-nav a, html[data-theme="light"] body.app-page .sidebar-footer a{color:#b7b9c4} html[data-theme="light"] body.app-page .sidebar-nav a.active{background:#1c1f29;color:#fff} @media (hover:hover) and (pointer:fine){html[data-theme="light"] body.app-page:not(.suppress-hover) .sidebar-nav a:hover,html[data-theme="light"] body.app-page:not(.suppress-hover) .sidebar-footer a:hover{background:#181b24;color:#fff}} html[data-theme="light"] body.app-page .app-header{background:rgba(231,227,220,.95);border-bottom-color:rgba(25,25,28,.10);color:#19191c;box-shadow:none} html[data-theme="light"] body.app-page .app-card, html[data-theme="light"] body.app-page .settings-card, html[data-theme="light"] body.app-page .metric-card, html[data-theme="light"] body.app-page .quick-action-grid a, html[data-theme="light"] body.app-page .account-menu, html[data-theme="light"] body.app-page .notification-popover{background:#f1ede6;border-color:rgba(25,25,28,.11);color:#19191c;box-shadow:0 18px 50px rgba(32,29,24,.10)} html[data-theme="light"] body.app-page input, html[data-theme="light"] body.app-page select, html[data-theme="light"] body.app-page textarea{background:#f7f3ec;color:#19191c;border-color:rgba(25,25,28,.14)} html[data-theme="light"] body.app-page .account-trigger, html[data-theme="light"] body.app-page .notification-button, html[data-theme="light"] body.app-page .status-dropdown{background:#f1ede6;border-color:rgba(25,25,28,.12);color:#19191c;box-shadow:none} html[data-theme="light"] body.auth-page{background:#e7e3dc;color:#19191c} html[data-theme="light"] body.auth-page .auth-card, html[data-theme="light"] body.auth-page .auth-form{background:#f1ede6;border-color:rgba(25,25,28,.11);color:#19191c} html[data-theme="light"] body.auth-page input{background:#f7f3ec;color:#19191c;border-color:rgba(25,25,28,.14)} html.reduce-motion .studio-home .hero-workflow-card, html.reduce-motion .studio-home .hero-workflow-list li, html.reduce-motion .studio-home .studio-proof-line i{opacity:1!important;transform:none!important;animation:none!important;transition:none!important} @media(max-width:560px){ .studio-home .studio-proof-line{gap:9px 10px;font-size:.69rem} .studio-home .studio-proof-line i{width:4px;height:4px;box-shadow:none} } html:not(.reduce-motion){scroll-behavior:smooth} body.studio-home .studio-hero{overflow-x:clip;overflow-y:hidden} body.studio-home .studio-hero-copy{min-width:0;padding-inline-end:clamp(4px,.8vw,12px)} body.studio-home .studio-hero-copy h1{ width:100%; max-width:900px; margin:18px 0 22px; padding:.07em .12em .18em 0; overflow:visible; line-height:1; letter-spacing:-.045em; } body.studio-home .studio-hero-copy h1>span{ display:block; max-width:100%; padding:.01em .08em .08em 0; overflow:visible; line-height:1; text-wrap:balance; } body.studio-home .studio-hero-copy h1 .hero-subline{ margin-top:.03em; padding-bottom:.13em; line-height:1.02; letter-spacing:-.035em; } html:not(.reduce-motion) .button, html:not(.reduce-motion) .text-link, html:not(.reduce-motion) .nav a, html:not(.reduce-motion) .mobile-nav a{ transition:transform .18s cubic-bezier(.22,1,.36,1),background-color .18s ease,border-color .18s ease,color .18s ease,box-shadow .18s ease,opacity .18s ease; } @media (hover:hover) and (pointer:fine){ html:not(.reduce-motion):not(.suppress-hover) .button:hover{transform:translateY(-2px)} html:not(.reduce-motion):not(.suppress-hover) .text-link:hover{transform:translateY(-1px)} html:not(.reduce-motion):not(.suppress-hover) .hero-workflow-list li:hover{background:rgba(255,255,255,.025)} } html:not(.reduce-motion) .button:active{transform:translateY(0) scale(.985)} body.studio-home .studio-proof-line{color:#c3c5d0} body.studio-home .studio-proof-line span{font-weight:760} body.studio-home .studio-proof-line span:nth-of-type(1){color:#f08a72} body.studio-home .studio-proof-line span:nth-of-type(2){color:#dc82be} body.studio-home .studio-proof-line span:nth-of-type(3){color:#b99dff} body.studio-home .studio-proof-line span:nth-of-type(4){color:#ee83aa} html[data-theme="light"]{ --bg:#e8e4dc; --bg-2:#dfdad1; --surface:#f1ede5; --surface-2:#e9e4dc; --surface-3:#d9d3c9; --text:#17181c; --text-2:#3d3e45; --muted:#63656d; } html[data-theme="light"] body{background:#e8e4dc;color:#17181c} html[data-theme="light"] .studio-site .studio-paper-section, html[data-theme="light"] .studio-site .studio-process-section, html[data-theme="light"] .studio-site .studio-human-section{background:#e4dfd6;color:#17181c} html[data-theme="light"] .studio-site .studio-paper-section p, html[data-theme="light"] .studio-site .studio-process-section p, html[data-theme="light"] .studio-site .studio-human-section p{color:#555860} html[data-theme="light"] .studio-site .studio-paper-section a, html[data-theme="light"] .studio-site .studio-process-section a, html[data-theme="light"] .studio-site .studio-human-section a{color:#5f45bd} html[data-theme="light"] .studio-site .studio-paper-section .button-secondary, html[data-theme="light"] .studio-site .studio-process-section .button-secondary, html[data-theme="light"] .studio-site .studio-human-section .button-secondary{color:#17181c;border-color:rgba(23,24,28,.16);background:#eee9e1} @media(max-width:1120px){ body.studio-home .studio-hero-copy h1{ max-width:100%; font-size:clamp(3.25rem,9vw,5.15rem); } } @media(max-width:820px){ body.studio-home .studio-hero-copy h1{ max-width:100%; font-size:clamp(3rem,11vw,4.45rem); letter-spacing:-.04em; } body.studio-home .studio-hero-copy h1 .hero-subline{letter-spacing:-.03em} } @media(max-width:560px){ body.studio-home .studio-hero-copy h1{ font-size:clamp(2.9rem,12vw,4rem); padding-right:.10em; } body.studio-home .studio-hero-copy h1>span{padding-right:.06em} body.studio-home .studio-proof-line{gap:9px 9px} } @media(max-width:390px){ body.studio-home .studio-hero-copy h1{font-size:clamp(2.72rem,11.7vw,3.15rem)} } html.reduce-motion body.studio-home .studio-hero-copy, html.reduce-motion body.studio-home .hero-workflow-card, html.reduce-motion body.studio-home .hero-workflow-list li{ opacity:1!important; transform:none!important; translate:none!important; animation:none!important; transition:none!important; } body.studio-home .studio-hero-grid{ grid-template-columns:minmax(0,1.02fr) minmax(480px,.88fr); gap:clamp(44px,6vw,92px); } body.studio-home .hero-workflow-card{ width:min(100%,570px); padding:22px; border-radius:24px; background: linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.018)), #0e1016; box-shadow:0 34px 90px rgba(0,0,0,.34); } body.studio-home .hero-workflow-card::after{ content:""; position:absolute; width:230px; height:230px; right:-120px; bottom:-140px; border-radius:50%; pointer-events:none; background:radial-gradient(circle,rgba(145,110,255,.16),transparent 68%); filter:blur(1px); } .hero-workflow-body{ display:grid; grid-template-columns:152px minmax(0,1fr); gap:22px; align-items:stretch; padding:20px 0 18px; } .hero-preview{ min-width:0; display:flex; flex-direction:column; gap:9px; } .hero-preview-stage{ aspect-ratio:9/15; position:relative; overflow:hidden; border:1px solid rgba(255,255,255,.12); border-radius:18px; background: linear-gradient(180deg,transparent 56%,rgba(3,4,8,.62)), radial-gradient(circle at 68% 28%,rgba(154,111,255,.42),transparent 24%), radial-gradient(circle at 28% 70%,rgba(238,120,113,.37),transparent 30%), linear-gradient(145deg,#171924,#0c0e14 68%); box-shadow:inset 0 1px rgba(255,255,255,.08),0 16px 35px rgba(0,0,0,.24); } .hero-preview-stage::before{ content:""; position:absolute; inset:12px; border:1px solid rgba(255,255,255,.11); border-radius:11px; opacity:.65; } .hero-preview-stage::after{ content:""; position:absolute; left:13px; right:13px; bottom:16px; height:2px; border-radius:999px; background:linear-gradient(90deg,#ef826f 0 43%,rgba(255,255,255,.18) 43% 100%); } .hero-preview-glow{ position:absolute; width:82px; height:82px; left:50%; top:42%; translate:-50% -50%; border-radius:50%; background:radial-gradient(circle,rgba(255,255,255,.15),rgba(255,255,255,.025) 48%,transparent 70%); box-shadow:0 0 0 22px rgba(255,255,255,.018),0 0 0 44px rgba(255,255,255,.012); } .hero-preview-caption{ position:absolute; left:24px; height:7px; border-radius:999px; background:rgba(255,255,255,.84); box-shadow:0 1px rgba(255,255,255,.24); } .hero-preview-caption.one{right:31px;bottom:50px} .hero-preview-caption.two{right:52px;bottom:36px;opacity:.56} .hero-preview-focus{ position:absolute; width:42px; height:42px; left:50%; top:42%; translate:-50% -50%; border:1px solid rgba(255,255,255,.34); border-radius:50%; } .hero-preview-meta{ display:flex; justify-content:space-between; gap:10px; color:#8f93a1; font-size:.66rem; font-weight:780; letter-spacing:.05em; } body.studio-home .hero-workflow-list{padding:0} body.studio-home .hero-workflow-list li{ min-height:52px; grid-template-columns:minmax(72px,.42fr) 1fr; gap:14px; padding:2px 8px; border-radius:10px; border-bottom:0; transition:background .2s ease,transform .2s var(--ease); } body.studio-home .hero-workflow-list li+li{border-top:1px solid rgba(255,255,255,.07)} body.studio-home .hero-workflow-list strong{font-size:.9rem} body.studio-home .hero-workflow-list span{font-size:.79rem} .hero-edit-timeline{ height:78px; margin-top:2px; padding:12px 12px 10px; display:grid; align-content:center; gap:8px; position:relative; overflow:hidden; border:1px solid rgba(255,255,255,.08); border-radius:14px; background:rgba(255,255,255,.018); } .hero-track{ min-width:0; height:17px; display:flex; align-items:stretch; gap:4px; } .hero-track i{ display:block; height:100%; min-width:0; border-radius:5px; border:1px solid rgba(255,255,255,.07); } .hero-track-video i:nth-child(1){flex:1.2;background:linear-gradient(90deg,rgba(239,130,111,.46),rgba(239,130,111,.18))} .hero-track-video i:nth-child(2){flex:.72;background:linear-gradient(90deg,rgba(154,111,255,.34),rgba(154,111,255,.14))} .hero-track-video i:nth-child(3){flex:1.08;background:linear-gradient(90deg,rgba(220,119,177,.34),rgba(220,119,177,.13))} .hero-track-audio{height:11px} .hero-track-audio i:nth-child(1){flex:.6;background:rgba(255,255,255,.055)} .hero-track-audio i:nth-child(2){flex:1.15;background:rgba(255,255,255,.08)} .hero-track-audio i:nth-child(3){flex:.85;background:rgba(255,255,255,.055)} .hero-track-audio i:nth-child(4){flex:.55;background:rgba(255,255,255,.08)} .hero-timeline-playhead{ position:absolute; top:8px; bottom:8px; left:18%; width:1px; background:#f6d4d0; box-shadow:0 0 13px rgba(239,130,111,.6); } .hero-timeline-playhead::before{ content:""; position:absolute; left:50%; top:0; width:7px; height:7px; translate:-50% -20%; border-radius:2px; background:#f08a72; } html:not(.reduce-motion) body.studio-home.studio-ready .hero-timeline-playhead{ animation:homeTimelinePlayhead 5.8s 1.1s cubic-bezier(.4,0,.2,1) infinite; } html:not(.reduce-motion) body.studio-home.studio-ready .hero-preview-glow{ animation:homePreviewPulse 4.4s 1s ease-in-out infinite; } html:not(.reduce-motion) body.studio-home.studio-ready .hero-preview-caption.one{ animation:homeCaptionPulse 4.4s 1.1s ease-in-out infinite; } @keyframes homeTimelinePlayhead{ 0%,8%{left:13%} 50%{left:70%} 92%,100%{left:88%} } @keyframes homePreviewPulse{ 0%,100%{transform:scale(.94);opacity:.7} 50%{transform:scale(1.06);opacity:1} } @keyframes homeCaptionPulse{ 0%,100%{opacity:.68;transform:translateY(0)} 50%{opacity:1;transform:translateY(-1px)} } body.studio-home .home-marquee{ border-top:0; border-bottom:1px solid rgba(255,255,255,.08); background:#0b0c11; } body.studio-home .home-marquee>div{ min-width:max-content; height:52px; justify-content:flex-start; padding-inline:30px; gap:22px; color:#9699a7; animation-duration:34s; } body.studio-home .home-marquee b{ color:#cf796f; opacity:.8; } body.studio-home .editorial-statement{ position:relative; overflow:hidden; background: linear-gradient(rgba(31,29,26,.025) 1px,transparent 1px), linear-gradient(90deg,rgba(31,29,26,.018) 1px,transparent 1px), var(--studio-paper); background-size:44px 44px,44px 44px,auto; } body.studio-home .editorial-statement::after{ content:""; position:absolute; width:320px; height:320px; right:-130px; top:-170px; border-radius:50%; border:1px solid rgba(66,52,45,.08); box-shadow:0 0 0 60px rgba(66,52,45,.025),0 0 0 120px rgba(66,52,45,.015); pointer-events:none; } body.studio-home .statement-grid p a{ position:relative; font-weight:780; color:#4f3e9f; } body.studio-home .statement-grid p a::after{ content:""; position:absolute; left:0; right:0; bottom:-2px; height:1px; background:currentColor; transform-origin:left; transition:transform .2s var(--ease); } @media(hover:hover) and (pointer:fine){ html:not(.suppress-hover) body.studio-home .statement-grid p a:hover::after{transform:scaleX(.6)} } body.studio-home .studio-service-card{ isolation:isolate; background: radial-gradient(circle at var(--shine-x,50%) var(--shine-y,50%),rgba(255,255,255,.07),transparent 26%), linear-gradient(155deg,#14161d,#0e0f14); } body.studio-home .studio-service-card::before{ content:""; position:absolute; left:22px; right:22px; top:0; height:1px; z-index:2; background:linear-gradient(90deg,transparent,rgba(239,130,111,.7),rgba(154,111,255,.55),transparent); opacity:.5; } body.studio-home .studio-service-card:nth-child(2)::before{background:linear-gradient(90deg,transparent,rgba(154,111,255,.7),rgba(214,122,179,.5),transparent)} body.studio-home .studio-service-card:nth-child(3)::before{background:linear-gradient(90deg,transparent,rgba(214,122,179,.65),rgba(239,130,111,.5),transparent)} body.studio-home .studio-service-card:nth-child(4)::before{background:linear-gradient(90deg,transparent,rgba(239,130,111,.6),rgba(154,111,255,.65),transparent)} @media(hover:hover) and (pointer:fine){ html:not(.reduce-motion):not(.suppress-hover) body.studio-home .studio-service-card:hover{ transform:translateY(-5px); border-color:rgba(198,181,255,.25); box-shadow:0 24px 65px rgba(0,0,0,.24); } } body.studio-home .studio-process-list{position:relative} body.studio-home .studio-process-list li{ position:relative; padding-inline:18px; border-radius:14px; } body.studio-home .studio-process-list li::before{ content:""; position:absolute; left:0; top:24px; bottom:24px; width:2px; border-radius:999px; background:linear-gradient(180deg,#e78275,#8f78d9); opacity:0; transform:scaleY(.3); transition:opacity .24s ease,transform .35s var(--ease); } body.studio-home .studio-process-list li.is-active::before{opacity:1;transform:scaleY(1)} body.studio-home .studio-process-list li.is-active b{ color:#e8e1ff; border-color:rgba(153,126,244,.30); background:rgba(126,99,211,.10); } body.studio-home .output-visual{ transition:border-color .25s ease,box-shadow .25s ease; } @media(hover:hover) and (pointer:fine){ html:not(.reduce-motion):not(.suppress-hover) body.studio-home .output-visual:hover{ border-color:rgba(198,181,255,.24); box-shadow:0 28px 80px rgba(0,0,0,.25); } } html:not(.reduce-motion) body.studio-home .output-stack article{ transition:transform .28s var(--ease),border-color .2s ease,background .2s ease; } @media(hover:hover) and (pointer:fine){ html:not(.reduce-motion):not(.suppress-hover) body.studio-home .output-stack article:hover{ transform:translateX(7px); border-color:rgba(198,181,255,.24); background:rgba(255,255,255,.055); } html:not(.reduce-motion):not(.suppress-hover) body.studio-home .output-stack article:nth-child(2):hover{transform:translateX(23px)} } body.studio-home .simple-human-section .human-principles-grid{ grid-template-columns:repeat(6,minmax(0,1fr)); gap:12px; } body.studio-home .simple-human-section .human-principle{ min-height:210px; position:relative; overflow:hidden; background: radial-gradient(circle at var(--shine-x,50%) var(--shine-y,50%),rgba(255,255,255,.055),transparent 28%), #111319; } body.studio-home .simple-human-section .human-principle:nth-child(1), body.studio-home .simple-human-section .human-principle:nth-child(4){grid-column:span 2} body.studio-home .simple-human-section .human-principle:nth-child(2), body.studio-home .simple-human-section .human-principle:nth-child(3){grid-column:span 1} body.studio-home .simple-human-section .human-principle::after{ content:""; position:absolute; width:110px; height:110px; right:-52px; top:-55px; border-radius:50%; border:1px solid rgba(255,255,255,.07); box-shadow:0 0 0 24px rgba(255,255,255,.012),0 0 0 48px rgba(255,255,255,.009); } body.studio-home .simple-human-section .human-principle:nth-child(4){ background: radial-gradient(circle at var(--shine-x,50%) var(--shine-y,50%),rgba(255,255,255,.065),transparent 28%), linear-gradient(145deg,rgba(117,91,170,.18),rgba(207,121,111,.09) 55%,#111319); } body.studio-home .studio-final-card::before{ content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(115deg,transparent 18%,rgba(255,255,255,.055) 42%,transparent 62%); translate:-55% 0; } html:not(.reduce-motion) body.studio-home .studio-final-card.visible::before{ animation:homeFinalSweep 7s 1.2s ease-in-out infinite; } @keyframes homeFinalSweep{ 0%,58%,100%{translate:-55% 0;opacity:0} 68%{opacity:1} 88%{translate:55% 0;opacity:0} } html[data-theme="light"] body.studio-home .home-marquee{background:#111319;border-color:rgba(255,255,255,.08)} html[data-theme="light"] body.studio-home .home-marquee>div{color:#a6a8b3} html[data-theme="light"] body.studio-home .hero-workflow-card{background:#101218;border-color:rgba(255,255,255,.12)} html[data-theme="light"] body.studio-home .hero-edit-timeline{background:#15171f;border-color:rgba(255,255,255,.08)} html[data-theme="light"] body.studio-home .editorial-statement{ background: linear-gradient(rgba(31,29,26,.028) 1px,transparent 1px), linear-gradient(90deg,rgba(31,29,26,.02) 1px,transparent 1px), #e7e1d7; background-size:44px 44px,44px 44px,auto; } html[data-theme="light"] body.studio-home .simple-human-section .human-principle{ color:#f5f5f7; border-color:rgba(255,255,255,.10); background: radial-gradient(circle at var(--shine-x,50%) var(--shine-y,50%),rgba(255,255,255,.055),transparent 28%), #15171e; } html[data-theme="light"] body.studio-home .simple-human-section .human-principle p{color:#aeb0bb} html[data-theme="light"] body.studio-home .simple-human-section .human-principle:nth-child(4){ background: radial-gradient(circle at var(--shine-x,50%) var(--shine-y,50%),rgba(255,255,255,.065),transparent 28%), linear-gradient(145deg,rgba(117,91,170,.22),rgba(207,121,111,.11) 58%,#15171e); } @media(max-width:1120px){ body.studio-home .studio-hero-grid{grid-template-columns:minmax(0,1fr) minmax(420px,.9fr);gap:36px} body.studio-home .hero-workflow-card{width:100%} .hero-workflow-body{grid-template-columns:132px minmax(0,1fr);gap:16px} } @media(max-width:900px){ body.studio-home .studio-hero-grid{grid-template-columns:1fr;gap:34px} body.studio-home .hero-workflow-card{max-width:680px;margin-inline:0} .hero-workflow-body{grid-template-columns:155px minmax(0,1fr);gap:22px} body.studio-home .simple-human-section .human-principles-grid{grid-template-columns:repeat(2,minmax(0,1fr))} body.studio-home .simple-human-section .human-principle:nth-child(n){grid-column:auto} } @media(max-width:620px){ body.studio-home .hero-workflow-card{padding:17px;border-radius:18px} .hero-workflow-head{padding-bottom:16px} .hero-workflow-body{grid-template-columns:112px minmax(0,1fr);gap:13px;padding:16px 0 14px} .hero-preview-stage{border-radius:14px} body.studio-home .hero-workflow-list li{grid-template-columns:1fr;gap:3px;min-height:0;padding:9px 6px} .hero-edit-timeline{height:68px;padding:10px} body.studio-home .home-marquee>div{height:48px;gap:17px;font-size:.66rem} body.studio-home .simple-human-section .human-principles-grid{grid-template-columns:1fr} body.studio-home .simple-human-section .human-principle{min-height:0;padding:24px} } @media(max-width:420px){ .hero-workflow-body{grid-template-columns:94px minmax(0,1fr);gap:11px} .hero-preview-caption{left:16px;height:5px} .hero-preview-caption.one{right:18px;bottom:42px} .hero-preview-caption.two{right:31px;bottom:31px} body.studio-home .hero-workflow-list strong{font-size:.84rem} body.studio-home .hero-workflow-list span{font-size:.73rem} } html.reduce-motion body.studio-home .hero-timeline-playhead, html.reduce-motion body.studio-home .hero-preview-glow, html.reduce-motion body.studio-home .hero-preview-caption, html.reduce-motion body.studio-home .home-marquee>div, html.reduce-motion body.studio-home .studio-final-card::before{ animation:none!important; } body.studio-home .studio-hero-copy h1{ line-height: 1.03; letter-spacing: -.055em; margin: 18px 0 24px; } body.studio-home .studio-hero-copy h1 > span{ padding-block: .02em; } body.studio-home .studio-hero-copy h1 .hero-subline{ margin-top: .12em; font-weight: 700; opacity: 1; } body.studio-home .studio-hero-copy > p{ max-width: 42rem; color: #cfd1db; } body.studio-home .studio-hero-grid{ grid-template-columns: minmax(0,1.08fr) minmax(360px,.92fr); align-items: center; gap: clamp(48px,6vw,92px); } .hero-editorial-visual{ display: grid; grid-template-columns: minmax(220px, 290px) minmax(0, 1fr); align-items: end; gap: 28px; min-width: 0; } .hero-editorial-frame{ display: grid; gap: 14px; } .hero-editorial-phone{ position: relative; width: min(100%, 260px); min-height: 470px; padding: 18px; border-radius: 32px; border: 1px solid rgba(255,255,255,.1); background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02)); box-shadow: 0 22px 55px rgba(0,0,0,.32); } .hero-editorial-phone::before{ content: ""; position: absolute; inset: 14px; border-radius: 24px; background: radial-gradient(circle at 68% 18%, rgba(156,120,255,.24), transparent 26%), radial-gradient(circle at 24% 68%, rgba(242,138,112,.16), transparent 28%), linear-gradient(180deg, #11131a 0%, #0d0f15 100%); border: 1px solid rgba(255,255,255,.06); } .hero-phone-chip{ position: relative; z-index: 1; display: inline-flex; align-items: center; padding: 8px 12px; border-radius: 999px; background: rgba(7,8,12,.62); border: 1px solid rgba(255,255,255,.1); color: #f2f3f8; font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; } .hero-phone-screen{ position: relative; z-index: 1; display: grid; align-content: end; gap: 10px; min-height: 400px; padding: 24px 4px 4px; } .hero-phone-screen small{ color: #d98cb1; font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; font-weight: 700; } .hero-phone-screen strong{ font-size: clamp(1.6rem, 2vw, 1.9rem); line-height: 1.02; letter-spacing: -.03em; } .hero-phone-screen p{ margin: 0; color: #c6c9d3; font-size: .96rem; line-height: 1.55; } .hero-phone-lines{ display: grid; gap: 8px; margin-top: 8px; } .hero-phone-lines i{ display: block; height: 9px; border-radius: 999px; background: rgba(255,255,255,.13); } .hero-phone-lines i:nth-child(1){ width: 88%; } .hero-phone-lines i:nth-child(2){ width: 72%; } .hero-phone-lines i:nth-child(3){ width: 54%; } .hero-phone-progress{ margin-top: 14px; height: 3px; border-radius: 999px; background: rgba(255,255,255,.1); overflow: hidden; } .hero-phone-progress span{ display: block; width: 42%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #f28a70, #9c78ff); } .hero-frame-caption{ margin: 0; max-width: 19rem; color: #9a9ead; font-size: .9rem; line-height: 1.55; } .hero-editorial-note{ align-self: center; max-width: 28rem; padding: 8px 0 8px 6px; } .hero-editorial-note > p{ margin: 12px 0 18px; color: #c6c9d4; font-size: 1rem; line-height: 1.65; } .hero-note-list{ list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; } .hero-note-list li{ display: grid; gap: 5px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.08); } .hero-note-list strong{ font-size: .98rem; letter-spacing: -.01em; } .hero-note-list span{ color: #a9acba; font-size: .9rem; line-height: 1.5; } html:not(.reduce-motion) body.studio-home.studio-ready .hero-editorial-frame{ animation: hero-card-in .7s var(--ease) both .12s; } html:not(.reduce-motion) body.studio-home.studio-ready .hero-editorial-note{ animation: hero-card-in .7s var(--ease) both .2s; } html:not(.reduce-motion):not(.suppress-hover) .hero-editorial-phone{ transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease; } html:not(.reduce-motion):not(.suppress-hover) .hero-editorial-phone:hover{ transform: translateY(-4px); border-color: rgba(156,120,255,.22); box-shadow: 0 30px 70px rgba(0,0,0,.38); } html:not(.reduce-motion) body.studio-home.studio-ready .hero-phone-progress span{ animation: hero-progress 4.4s ease-in-out infinite alternate; } html:not(.reduce-motion) body.studio-home.studio-ready .hero-phone-chip{ animation: soft-float 4.6s ease-in-out infinite; } @keyframes hero-progress{ from{ width: 34%; } to{ width: 62%; } } @media (max-width: 1100px){ body.studio-home .studio-hero-grid{ grid-template-columns: 1fr; } .hero-editorial-visual{ grid-template-columns: minmax(220px, 260px) minmax(0, 1fr); max-width: 760px; } } @media (max-width: 760px){ body.studio-home .studio-hero-copy h1{ line-height: 1.04; margin-bottom: 20px; } .hero-editorial-visual{ grid-template-columns: 1fr; gap: 20px; } .hero-editorial-frame{ max-width: 260px; } .hero-editorial-note{ padding-left: 0; } } @media (max-width: 560px){ .hero-editorial-phone{ min-height: 400px; border-radius: 28px; } .hero-phone-screen{ min-height: 334px; } .hero-editorial-note > p, .hero-note-list span, .hero-frame-caption{ font-size: .92rem; } } html[data-theme="light"] body.studio-home .studio-hero{ background: linear-gradient(180deg, #f5f2ee 0%, #efeae4 100%); } html[data-theme="light"] body.studio-home .studio-hero::before{ opacity: .18; } html[data-theme="light"] body.studio-home .studio-hero-copy > p, html[data-theme="light"] body.studio-home .hero-frame-caption, html[data-theme="light"] body.studio-home .hero-note-list span, html[data-theme="light"] body.studio-home .hero-editorial-note > p{ color: #5c5f6d; } html[data-theme="light"] body.studio-home .hero-editorial-phone{ background: linear-gradient(180deg, rgba(255,255,255,.66), rgba(255,255,255,.52)); border-color: rgba(24,24,27,.1); box-shadow: 0 18px 40px rgba(24,24,27,.09); } html[data-theme="light"] body.studio-home .hero-editorial-phone::before{ background: radial-gradient(circle at 68% 18%, rgba(156,120,255,.18), transparent 26%), radial-gradient(circle at 24% 68%, rgba(242,138,112,.14), transparent 28%), linear-gradient(180deg, #fff 0%, #f3efe8 100%); border-color: rgba(24,24,27,.08); } html[data-theme="light"] body.studio-home .hero-phone-chip{ background: rgba(255,255,255,.86); color: #1d1f26; border-color: rgba(24,24,27,.08); } html[data-theme="light"] body.studio-home .hero-phone-screen p{ color: #626675; } html[data-theme="light"] body.studio-home .hero-phone-lines i{ background: rgba(24,24,27,.12); } html[data-theme="light"] body.studio-home .hero-note-list li{ border-top-color: rgba(24,24,27,.08); } body.studio-home .studio-hero{ background: linear-gradient(180deg,#07080c 0%,#0b0c11 100%); border-bottom-color: rgba(255,255,255,.06); } body.studio-home .studio-hero::before{ opacity: .18; background-size: 84px 84px; } body.studio-home .studio-hero-grid{ grid-template-columns: minmax(0,1.04fr) minmax(320px,.96fr); gap: clamp(54px,7vw,104px); align-items: center; } body.studio-home .studio-hero-copy{ max-width: 44rem; } body.studio-home .studio-hero-copy h1{ margin: 18px 0 22px; font-size: clamp(3.2rem,7vw,6.6rem); line-height: .98; letter-spacing: -.06em; } body.studio-home .studio-hero-copy h1 .hero-subline{ margin-top: .14em; color: transparent; background: linear-gradient(100deg,#f1e8df 0%,#f08a72 32%,#d77eaf 66%,#ab94ff 100%); background-clip: text; -webkit-background-clip: text; } body.studio-home .studio-hero-copy > p{ max-width: 40rem; font-size: 1.04rem; line-height: 1.7; color: #c7cad5; } body.studio-home .hero-actions{gap:12px;flex-wrap:wrap} body.studio-home .studio-proof-line{ margin-top: 28px; gap: 10px 12px; font-size: .73rem; } body.studio-home .hero-editorial-visual{ display: grid; grid-template-columns: minmax(210px,270px) minmax(0,1fr); gap: 30px; align-items: end; } body.studio-home .hero-poster{margin:0;display:grid;gap:12px} body.studio-home .hero-poster-frame{ position: relative; min-height: 454px; padding: 16px; border-radius: 28px; border: 1px solid rgba(255,255,255,.1); background: linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.02)); box-shadow: 0 24px 65px rgba(0,0,0,.34); } body.studio-home .hero-poster-frame::before{ content:""; position:absolute; inset:14px; border-radius:22px; background: radial-gradient(circle at 76% 16%,rgba(171,148,255,.16),transparent 24%),radial-gradient(circle at 24% 74%,rgba(240,138,114,.12),transparent 26%),linear-gradient(180deg,#11131a 0%,#0c0e14 100%); border: 1px solid rgba(255,255,255,.06); } body.studio-home .hero-poster-label{ position: relative; z-index: 1; display:inline-flex; align-items:center; padding:8px 12px; border-radius:999px; background: rgba(11,12,16,.62); border:1px solid rgba(255,255,255,.1); color:#f5f5f8; font-size:.72rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase; } body.studio-home .hero-poster-screen{ position: relative; z-index: 1; min-height: 352px; display:flex; flex-direction:column; justify-content:flex-end; gap: 10px; padding: 16px 4px 6px; } body.studio-home .hero-poster-screen small{ color:#d98cb1; font-size:.78rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; } body.studio-home .hero-poster-screen strong{ font-size: clamp(1.7rem,2.1vw,2.1rem); line-height: 1.02; letter-spacing: -.035em; } body.studio-home .hero-poster-footer{ position: relative; z-index: 1; display:flex; justify-content:space-between; gap:12px; padding-top: 10px; color:#b9bcc8; font-size:.78rem; letter-spacing:.04em; text-transform:uppercase; } body.studio-home .hero-poster figcaption{ margin:0; color:#989cac; font-size:.92rem; line-height:1.55; } body.studio-home .hero-aside-note{ align-self:center; max-width: 24rem; padding: 8px 0; } body.studio-home .hero-aside-note > p{ margin: 12px 0 0; color:#c9ccd7; font-size:1rem; line-height:1.7; } body.studio-home .hero-note-divider{ width: 100%; height: 1px; margin: 20px 0 16px; background: rgba(255,255,255,.09); } body.studio-home .hero-note-compact{ display:grid; gap:5px; margin:0; } body.studio-home .hero-note-compact strong{ font-size:1.02rem; letter-spacing:-.02em; } body.studio-home .hero-note-compact span{ color:#acb0be; font-size:.92rem; line-height:1.5; } body.studio-home .editorial-statement, body.studio-home .studio-process-section, body.studio-home .studio-human-section{ background: #f3eee7; color: #16171d; } body.studio-home .editorial-statement{padding: 108px 0 96px} body.studio-home .statement-grid{ display:grid; grid-template-columns: minmax(0,1.1fr) minmax(280px,.9fr); gap: 34px 56px; align-items:end; } body.studio-home .statement-index, body.studio-home .editorial-statement .eyebrow{color:#8c7f74} body.studio-home .editorial-statement h2{ margin: 0; color:#14161b; font-size: clamp(2.9rem,6vw,5.35rem); line-height: .95; letter-spacing: -.05em; } body.studio-home .editorial-statement h2 em{ display:block; margin-top:.12em; color:#cf7b72; font-style:italic; font-weight:500; } body.studio-home .editorial-statement p{ margin: 0; max-width: 28rem; color:#4a4c55; font-size:1.02rem; line-height:1.72; } body.studio-home .editorial-statement a{color:#17181d;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px} body.studio-home .studio-services-section, body.studio-home .studio-output-section, body.studio-home .studio-final-section, body.studio-home .studio-footer{background:#090b10} body.studio-home .studio-services-section{padding: 104px 0} body.studio-home .studio-section-head{margin-bottom:36px} body.studio-home .studio-service-grid{ gap: 18px; } body.studio-home .studio-service-card{ padding: 28px 24px 24px; border-radius: 18px; background: linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.015)); border: 1px solid rgba(255,255,255,.07); } body.studio-home .studio-service-card p{color:#b8bcc8;line-height:1.65} body.studio-home .studio-process-section{padding: 102px 0} body.studio-home .studio-process-grid{ display:grid; grid-template-columns: minmax(0,.8fr) minmax(0,1.2fr); gap: 44px 70px; align-items:start; } body.studio-home .studio-process-copy h2, body.studio-home .studio-process-copy p, body.studio-home .studio-process-list h3, body.studio-home .studio-process-list p, body.studio-home .studio-process-list b, body.studio-home .studio-process-copy .eyebrow{ color: inherit; } body.studio-home .studio-process-copy p{color:#4b4f58;max-width:24rem;line-height:1.7} body.studio-home .studio-process-list{ display:grid; gap: 14px; margin:0; padding:0; list-style:none; } body.studio-home .studio-process-list li{ display:grid; grid-template-columns: auto minmax(0,1fr) auto; gap: 20px; align-items:start; padding: 22px 24px; border-radius: 18px; background: rgba(255,255,255,.72); border: 1px solid rgba(24,24,27,.08); box-shadow: 0 10px 28px rgba(24,24,27,.05); } body.studio-home .studio-process-list span{ font-size:.84rem; font-weight:800; color:#8b7f74; } body.studio-home .studio-process-list p{color:#5b5e68;line-height:1.6} body.studio-home .studio-process-list b{ color:#7a6d63; font-size:.75rem; letter-spacing:.06em; text-transform:uppercase; } body.studio-home .studio-output-section{padding: 108px 0} body.studio-home .studio-output-grid{gap: 46px 80px;align-items:center} body.studio-home .output-visual{ padding: 24px; border-radius: 24px; background: linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.015)); border:1px solid rgba(255,255,255,.07); } body.studio-home .studio-output-section p{color:#c1c5d0;line-height:1.7} body.studio-home .studio-human-section{padding: 104px 0} body.studio-home .human-principles-grid{gap: 16px} body.studio-home .human-principle{ padding: 24px 22px; border-radius: 18px; background: rgba(255,255,255,.76); border: 1px solid rgba(24,24,27,.08); box-shadow: 0 8px 24px rgba(24,24,27,.04); } body.studio-home .human-principle p{color:#565963;line-height:1.65} body.studio-home .studio-final-section{padding: 106px 0 118px} body.studio-home .studio-final-card{ padding: 58px clamp(26px,5vw,62px); border-radius: 28px; border:1px solid rgba(255,255,255,.08); background: linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.015)); } body.studio-home .studio-final-card h2{max-width: 13ch;line-height:.95;letter-spacing:-.05em} html:not(.reduce-motion) body.studio-home.studio-ready .hero-poster, html:not(.reduce-motion) body.studio-home.studio-ready .hero-aside-note{ animation: hero-card-in .72s var(--ease) both; } html:not(.reduce-motion) body.studio-home.studio-ready .hero-aside-note{animation-delay:.18s} html:not(.reduce-motion) body.studio-home.studio-ready .hero-poster-label{animation:soft-float 4.8s ease-in-out infinite} html:not(.reduce-motion):not(.suppress-hover) body.studio-home .hero-poster-frame, html:not(.reduce-motion):not(.suppress-hover) body.studio-home .studio-service-card, html:not(.reduce-motion):not(.suppress-hover) body.studio-home .human-principle, html:not(.reduce-motion):not(.suppress-hover) body.studio-home .studio-process-list li, html:not(.reduce-motion):not(.suppress-hover) body.studio-home .output-visual{ transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease; } html:not(.reduce-motion):not(.suppress-hover) body.studio-home .hero-poster-frame:hover, html:not(.reduce-motion):not(.suppress-hover) body.studio-home .studio-service-card:hover, html:not(.reduce-motion):not(.suppress-hover) body.studio-home .human-principle:hover, html:not(.reduce-motion):not(.suppress-hover) body.studio-home .studio-process-list li:hover, html:not(.reduce-motion):not(.suppress-hover) body.studio-home .output-visual:hover{ transform: translateY(-3px); } html[data-theme="light"] body.studio-home .studio-hero{ background: linear-gradient(180deg,#f5f1eb 0%,#ece7e0 100%); } html[data-theme="light"] body.studio-home .studio-hero-copy > p, html[data-theme="light"] body.studio-home .hero-aside-note > p, html[data-theme="light"] body.studio-home .hero-note-compact span, html[data-theme="light"] body.studio-home .hero-poster figcaption, html[data-theme="light"] body.studio-home .studio-proof-line{color:#5f636f} html[data-theme="light"] body.studio-home .hero-poster-frame{ background: linear-gradient(180deg,rgba(255,255,255,.72),rgba(255,255,255,.54)); border-color: rgba(24,24,27,.1); box-shadow: 0 18px 40px rgba(24,24,27,.08); } html[data-theme="light"] body.studio-home .hero-poster-frame::before{ background: radial-gradient(circle at 76% 16%,rgba(171,148,255,.14),transparent 24%),radial-gradient(circle at 24% 74%,rgba(240,138,114,.11),transparent 26%),linear-gradient(180deg,#fff 0%,#f4efe8 100%); border-color: rgba(24,24,27,.08); } html[data-theme="light"] body.studio-home .hero-poster-label{ background: rgba(255,255,255,.88); color:#17181d; border-color: rgba(24,24,27,.08); } html[data-theme="light"] body.studio-home .hero-poster-footer{color:#6a6f7b} html[data-theme="light"] body.studio-home .editorial-statement, html[data-theme="light"] body.studio-home .studio-process-section, html[data-theme="light"] body.studio-home .studio-human-section{background:#f7f4ef} html[data-theme="light"] body.studio-home .studio-services-section, html[data-theme="light"] body.studio-home .studio-output-section, html[data-theme="light"] body.studio-home .studio-final-section, html[data-theme="light"] body.studio-home .studio-footer{background:#111318} @media (max-width: 1100px){ body.studio-home .studio-hero-grid, body.studio-home .statement-grid, body.studio-home .studio-process-grid, body.studio-home .studio-output-grid{ grid-template-columns: 1fr; } body.studio-home .hero-editorial-visual{ max-width: 760px; } body.studio-home .editorial-statement p{max-width: 40rem} } @media (max-width: 760px){ body.studio-home .studio-hero{padding-top: 102px} body.studio-home .studio-hero-grid{gap: 34px} body.studio-home .studio-hero-copy h1{font-size: clamp(2.95rem,13vw,4.5rem)} body.studio-home .hero-editorial-visual{grid-template-columns: 1fr;gap: 22px} body.studio-home .hero-poster{max-width: 270px} body.studio-home .hero-poster-frame{min-height: 420px} body.studio-home .hero-poster-screen{min-height: 316px} body.studio-home .statement-grid{gap: 24px} body.studio-home .studio-process-list li{grid-template-columns: auto 1fr;} body.studio-home .studio-process-list b{grid-column: 2} } @media (max-width: 560px){ body.studio-home .editorial-statement, body.studio-home .studio-services-section, body.studio-home .studio-process-section, body.studio-home .studio-output-section, body.studio-home .studio-human-section, body.studio-home .studio-final-section{padding-top: 84px;padding-bottom:84px} body.studio-home .studio-hero-copy h1{font-size: clamp(2.7rem,12vw,3.35rem)} body.studio-home .hero-poster{max-width: 245px} body.studio-home .hero-poster-frame{min-height: 384px;border-radius:24px} body.studio-home .hero-poster-screen{min-height: 286px} body.studio-home .studio-service-card, body.studio-home .studio-process-list li, body.studio-home .human-principle, body.studio-home .output-visual, body.studio-home .studio-final-card{border-radius:16px} body.studio-home .studio-final-card h2{max-width: none} } body.studio-home .studio-hero{ min-height: 0; padding: clamp(132px,15vh,170px) 0 clamp(94px,12vh,132px); } body.studio-home .studio-hero-grid{ display: block; max-width: 1040px; padding-bottom: 0; text-align: center; } body.studio-home .studio-hero-copy{ max-width: 920px; margin-inline: auto; padding-inline: 0; } body.studio-home .studio-hero-copy .eyebrow{ justify-content: center; } body.studio-home .studio-hero-copy h1{ max-width: 920px; margin: 20px auto 26px; font-size: clamp(4rem,8vw,7.4rem); line-height: .98; letter-spacing: -.06em; text-align: center; } body.studio-home .studio-hero-copy h1 > span{ text-align: center; } body.studio-home .studio-hero-copy > p{ max-width: 690px; margin-inline: auto; color: #c8cbd5; font-size: clamp(1.02rem,1.25vw,1.16rem); line-height: 1.68; text-align: center; } body.studio-home .studio-hero .hero-actions{ justify-content: center; margin-top: 28px; } body.studio-home .studio-proof-line{ justify-content: center; margin-top: 32px; } body.studio-home .hero-editorial-visual, body.studio-home .hero-poster, body.studio-home .hero-aside-note{display:none!important} body.studio-home .home-marquee{ overflow:hidden; width:100%; } body.studio-home .home-marquee > div{ width:max-content; min-width:0; height:58px; display:flex; align-items:center; justify-content:flex-start; gap:0; padding:0; white-space:nowrap; } body.studio-home .home-marquee > div span{ display:inline-flex; align-items:center; padding-inline:28px; } body.studio-home .home-marquee > div b{ display:inline-flex; align-items:center; justify-content:center; width:10px; flex:0 0 10px; } body.studio-home .editorial-statement{ padding: 76px 0 82px; } body.studio-home .statement-grid{ display:grid; grid-template-columns: 1fr; gap: 18px; align-items:start; max-width: 900px; margin-inline:auto; text-align:center; } body.studio-home .statement-index{ padding:0; justify-self:center; } body.studio-home .editorial-statement h2{ max-width: 850px; margin-inline:auto; font-size: clamp(3.2rem,6.2vw,5.7rem); line-height:.96; text-align:center; } body.studio-home .editorial-statement h2 em{ display:inline; margin:0; } body.studio-home .editorial-statement p{ max-width: 650px; margin: 10px auto 0; font-size:1rem; line-height:1.7; text-align:center; } body.studio-home .editorial-statement::after{ width:220px; height:220px; right:-100px; top:-120px; } body.studio-home .studio-service-card{ display:flex; flex-direction:column; min-height: 310px; } body.studio-home .studio-service-card p{ margin-bottom: 4px; } body.studio-home .studio-service-card .service-tags{ margin-top: 22px; } body.studio-home .studio-service-card .text-link{ margin-top: 24px; padding-top: 2px; align-self:flex-start; } body.studio-home .studio-process-section .studio-process-list li{ color:#17181d; background:#fbfaf7; border-color:rgba(24,24,27,.10); } body.studio-home .studio-process-section .studio-process-list h3{ color:#17181d!important; } body.studio-home .studio-process-section .studio-process-list p{ color:#555963!important; } body.studio-home .studio-process-section .studio-process-list li > span{ color:#8b746c!important; } body.studio-home .studio-process-section .studio-process-list b, body.studio-home .studio-process-section .studio-process-list li.is-active b{ color:#473b61!important; background:#ece7f7!important; border-color:#cfc2ef!important; opacity:1; text-shadow:none; } body.studio-home .studio-human-section.simple-human-section .human-principles-grid{ grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; } body.studio-home .studio-human-section.simple-human-section .human-principle, html[data-theme="light"] body.studio-home .studio-human-section.simple-human-section .human-principle{ grid-column:auto!important; min-height: 190px; color:#18191f!important; background:#fbfaf7!important; border-color:rgba(24,24,27,.10)!important; box-shadow:0 10px 28px rgba(24,24,27,.05)!important; } body.studio-home .studio-human-section.simple-human-section .human-principle::after{ display:none; } body.studio-home .studio-human-section.simple-human-section .human-principle h3, html[data-theme="light"] body.studio-home .studio-human-section.simple-human-section .human-principle h3{ color:#18191f!important; } body.studio-home .studio-human-section.simple-human-section .human-principle p, html[data-theme="light"] body.studio-home .studio-human-section.simple-human-section .human-principle p{ color:#555963!important; } body.studio-home .studio-human-section .studio-section-head h2{ color:#18191f; } body.studio-home .studio-human-section .studio-section-head p{ color:#676a74; } body.studio-home .studio-human-section .studio-section-head .eyebrow{ color:#85759d; } body.studio-home .studio-human-section .text-link, html[data-theme="light"] body.studio-home .studio-human-section .text-link{ color:#51466e!important; text-decoration-color:#51466e!important; } body.studio-home .editorial-statement, body.studio-home .studio-process-section, body.studio-home .studio-human-section, html[data-theme="light"] body.studio-home .editorial-statement, html[data-theme="light"] body.studio-home .studio-process-section, html[data-theme="light"] body.studio-home .studio-human-section{ background:#f1ede7; color:#18191f; } body.studio-home .studio-services-section, body.studio-home .studio-output-section, body.studio-home .studio-final-section, html[data-theme="light"] body.studio-home .studio-services-section, html[data-theme="light"] body.studio-home .studio-output-section, html[data-theme="light"] body.studio-home .studio-final-section{ color:#f5f5f7; } body.studio-home .studio-services-section h2, body.studio-home .studio-services-section h3, body.studio-home .studio-output-section h2, body.studio-home .studio-final-section h2, html[data-theme="light"] body.studio-home .studio-services-section h2, html[data-theme="light"] body.studio-home .studio-services-section h3, html[data-theme="light"] body.studio-home .studio-output-section h2, html[data-theme="light"] body.studio-home .studio-final-section h2{ color:#f5f5f7!important; } html[data-theme="light"] .studio-site .studio-paper-section, html[data-theme="light"] .studio-site .studio-paper-section h1, html[data-theme="light"] .studio-site .studio-paper-section h2, html[data-theme="light"] .studio-site .studio-paper-section h3{ color:#18191f; } html[data-theme="light"] .studio-site .studio-paper-section p, html[data-theme="light"] .studio-site .studio-paper-section li{ color:#555963; } html[data-theme="light"] .studio-site .studio-paper-section .text-link{ color:#51466e; } @media(max-width:1050px){ body.studio-home .studio-human-section.simple-human-section .human-principles-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } } @media(max-width:760px){ body.studio-home .studio-hero{ padding-top:118px; padding-bottom:82px; } body.studio-home .studio-hero-copy h1{ font-size:clamp(3.1rem,13.5vw,4.9rem); } body.studio-home .home-marquee > div span{padding-inline:20px} body.studio-home .editorial-statement{padding:64px 0 68px} body.studio-home .studio-service-card{min-height:0} } @media(max-width:560px){ body.studio-home .studio-human-section.simple-human-section .human-principles-grid{grid-template-columns:1fr} body.studio-home .studio-human-section.simple-human-section .human-principle{min-height:0} body.studio-home .home-marquee > div{height:50px} body.studio-home .home-marquee > div span{padding-inline:16px} body.studio-home .studio-process-section .studio-process-list li{padding:20px} } html[data-theme="light"] body.studio-home .studio-hero, html[data-theme="light"] .studio-site .studio-page-hero{ background: radial-gradient(circle at 76% 28%,rgba(141,99,255,.11),transparent 26%),radial-gradient(circle at 17% 78%,rgba(240,109,98,.07),transparent 28%),#0b0d12!important; color:#f5f5f7!important; border-bottom-color:rgba(255,255,255,.08)!important; } html[data-theme="light"] body.studio-home .studio-hero::before, html[data-theme="light"] .studio-site .studio-page-hero::before{opacity:.22!important} html[data-theme="light"] body.studio-home .studio-hero-copy h1, html[data-theme="light"] .studio-site .studio-page-hero h1{color:#f5f5f7!important} html[data-theme="light"] body.studio-home .studio-hero-copy>p, html[data-theme="light"] .studio-site .studio-page-hero p{color:#b8bbc7!important} html[data-theme="light"] body.studio-home .studio-proof-line{color:#bfc2ce!important} html[data-theme="light"] .studio-site .site-header:not(.scrolled){ color:#f5f5f7!important; } html[data-theme="light"] .studio-site .site-header:not(.scrolled) .brand, html[data-theme="light"] .studio-site .site-header:not(.scrolled) .brand span{color:#f5f5f7!important} html[data-theme="light"] .studio-site .site-header:not(.scrolled) .nav a{color:#c4c7d1!important} html[data-theme="light"] .studio-site .site-header:not(.scrolled) .nav a:hover, html[data-theme="light"] .studio-site .site-header:not(.scrolled) .nav a[aria-current="page"]{color:#fff!important} .studio-site .studio-paper-section .eyebrow, .studio-site .studio-process-section .eyebrow, .studio-site .studio-human-section .eyebrow, body.studio-home .statement-index{ color:#66527f!important; } .studio-site .studio-paper-section .text-link, .studio-site .studio-paper-section .quality-card .text-link, .studio-site .studio-process-section .text-link, .studio-site .studio-human-section .text-link, html[data-theme="light"] .studio-site .studio-paper-section .text-link, html[data-theme="light"] .studio-site .studio-process-section .text-link, html[data-theme="light"] .studio-site .studio-human-section .text-link{ color:#493b68!important; text-decoration-color:#493b68!important; } .studio-site .studio-paper-section .quality-card>span, .studio-site .studio-paper-section .quality-card .text-link span{ color:#66527f!important; } body.studio-home .studio-process-section .studio-process-list b, body.studio-home .studio-process-section .studio-process-list li.is-active b{ color:#3f315a!important; background:#e4dcf3!important; border:1px solid #b9a8d9!important; font-weight:800!important; } body.studio-home .studio-process-section .studio-process-list li>span{ color:#6f554d!important; } body.studio-home .studio-human-section.simple-human-section .human-principle, html[data-theme="light"] body.studio-home .studio-human-section.simple-human-section .human-principle{ color:#17181d!important; background:#faf8f4!important; } body.studio-home .studio-human-section.simple-human-section .human-principle h3, html[data-theme="light"] body.studio-home .studio-human-section.simple-human-section .human-principle h3{color:#17181d!important} body.studio-home .studio-human-section.simple-human-section .human-principle p, html[data-theme="light"] body.studio-home .studio-human-section.simple-human-section .human-principle p{color:#535660!important} body.studio-home .studio-human-section .studio-section-head .text-link, html[data-theme="light"] body.studio-home .studio-human-section .studio-section-head .text-link{color:#493b68!important} body.studio-home .studio-service-card .text-link{margin-top:28px!important} body.studio-home .studio-service-card .service-tags + .text-link{padding-top:2px} body.studio-home .home-marquee>div{ animation-name:studioMarquee; animation-duration:32s; animation-timing-function:linear; animation-iteration-count:infinite; } @keyframes studioMarquee{ from{transform:translateX(0)} to{transform:translateX(-50%)} } body.studio-home .home-marquee>div{min-width:200%} body.studio-home .home-marquee>div span{min-width:max-content} body.studio-home .statement-index{font-weight:750} body.studio-home .studio-process-section .studio-process-list li>span{font-weight:850} @media(max-width:760px){ body.studio-home .studio-hero-copy h1{font-size:clamp(3rem,13.2vw,4.7rem);line-height:1} body.studio-home .studio-hero-copy>p{max-width:34rem} } .studio-site .studio-page-hero .eyebrow, body.studio-home .studio-hero .eyebrow, .studio-site .studio-final-section .eyebrow, .studio-site .studio-services-section .eyebrow, .studio-site .studio-output-section .eyebrow{ color:#b9a8ff!important; } html:not([data-theme="light"]) .studio-site .sample-proof-copy p{ color:#b8bbc6!important; } html[data-theme="light"] .studio-site .sample-proof-copy p{ color:#555963!important; } .studio-site .studio-paper-section .quality-card h3{ color:#18191f!important; } .studio-site .studio-paper-section .quality-card p{ color:#555963!important; } .studio-site .studio-paper-section .quality-card>span, .studio-site .studio-paper-section .quality-card .text-link span{ color:#5a4777!important; } html[data-theme="light"] .studio-site .rule-card>span, html[data-theme="light"] .studio-site .support-card>span{ color:#5a4777!important; } html[data-theme="light"] .studio-site .support-card a, html[data-theme="light"] .studio-site .support-card .chat-text-button{ color:#493b68!important; } .studio-site .paypal-pay-button{ color:#17181d!important; font-weight:850!important; } html[data-theme="light"] .studio-site .paypal-plan-label{ color:#8b4c45!important; } html[data-theme="light"] .studio-site .paypal-sample-card .text-link, html[data-theme="light"] .studio-site .paypal-side-card .text-link{ color:#493b68!important; } html[data-theme="light"] .studio-site .site-header:not(.scrolled) .button-quiet{ color:#e0e2e9!important; border-color:rgba(255,255,255,.16)!important; background:rgba(255,255,255,.04)!important; } body.studio-home .studio-hero{ min-height: calc(100svh - 78px); padding: clamp(118px, 13vh, 150px) 0 clamp(76px, 9vh, 104px); display: grid; align-items: center; } body.studio-home .studio-hero-grid{ display: block; width: 100%; max-width: 1240px; margin-inline: auto; padding: 0 clamp(20px, 3vw, 48px); text-align: center; } body.studio-home .studio-hero-copy{ width: 100%; max-width: 1180px; margin-inline: auto; padding: 0; text-align: center; } body.studio-home .studio-hero-copy .eyebrow{ display: inline-flex; justify-content: center; margin-inline: auto; padding: 0; color: #b7a7ff !important; letter-spacing: .105em; text-align: center; } body.studio-home .studio-hero-copy .eyebrow::before{ display: none !important; content: none !important; } body.studio-home .studio-hero-copy h1{ width: 100%; max-width: 1180px; margin: 30px auto 28px; padding: 0; font-size: clamp(4.2rem, 7.25vw, 7.6rem); line-height: .94; letter-spacing: -.062em; text-align: center; } body.studio-home .studio-hero-copy h1 > span{ display: block; width: 100%; max-width: none; padding: .025em .04em .055em; text-align: center; white-space: normal; text-wrap: balance; } body.studio-home .studio-hero-copy h1 .hero-subline{ margin-top: .14em; line-height: .98; } body.studio-home .studio-hero-copy > p{ max-width: 650px; margin: 0 auto; color: #c7cad5; font-size: clamp(1.02rem, 1.2vw, 1.17rem); line-height: 1.65; text-align: center; } body.studio-home .studio-hero .hero-actions{ justify-content: center; margin-top: 30px; } body.studio-home .studio-proof-line{ justify-content: center; margin: 32px auto 0; width: fit-content; } @media (min-width: 1050px){ body.studio-home .studio-hero-copy h1 .hero-subline{ white-space: nowrap; } } @media (max-width: 1049px){ body.studio-home .studio-hero{ min-height: auto; padding: 126px 0 92px; } body.studio-home .studio-hero-copy h1{ max-width: 850px; font-size: clamp(3.5rem, 9.5vw, 6rem); } } @media (max-width: 760px){ body.studio-home .studio-hero{ padding: 108px 0 74px; } body.studio-home .studio-hero-grid{ padding-inline: 20px; } body.studio-home .studio-hero-copy h1{ margin-top: 22px; margin-bottom: 22px; font-size: clamp(3rem, 13vw, 4.65rem); line-height: .98; } body.studio-home .studio-hero-copy h1 .hero-subline{ margin-top: .12em; } body.studio-home .studio-hero-copy > p{ max-width: 34rem; } body.studio-home .studio-proof-line{ margin-top: 26px; } } @media (max-width: 460px){ body.studio-home .studio-hero-copy h1{ font-size: clamp(2.72rem, 12.6vw, 3.35rem); letter-spacing: -.05em; } body.studio-home .studio-hero-copy .eyebrow{ font-size: .68rem; letter-spacing: .085em; } } body.studio-home .studio-hero{ min-height: calc(100svh - 72px); padding: 120px 0 88px; display: flex; align-items: center; justify-content: center; overflow-x: hidden; overflow-y: visible; } body.studio-home .studio-hero .studio-hero-grid{ display: flex !important; width: min(100% - 40px, 1080px) !important; max-width: 1080px !important; margin: 0 auto !important; padding: 0 !important; align-items: center; justify-content: center; text-align: center; } body.studio-home .studio-hero .studio-hero-copy{ display: flex; flex-direction: column; align-items: center; width: 100% !important; max-width: 980px !important; margin: 0 auto !important; padding: 0 !important; text-align: center; overflow: visible !important; } body.studio-home .studio-hero .studio-hero-copy .eyebrow{ display: inline-flex; width: auto; margin: 0 auto; padding: 0; justify-content: center; text-align: center; } body.studio-home .studio-hero .studio-hero-copy h1{ display: block; width: 100% !important; max-width: 980px !important; margin: 28px auto 26px !important; padding: 0 .04em .06em !important; overflow: visible !important; font-size: clamp(4rem, 6.4vw, 6.9rem) !important; line-height: .97 !important; letter-spacing: -.055em !important; text-align: center !important; } body.studio-home .studio-hero .studio-hero-copy h1 > span, body.studio-home .studio-hero .studio-hero-copy h1 .hero-subline{ display: block !important; width: 100% !important; max-width: 100% !important; margin-left: auto !important; margin-right: auto !important; padding: .02em .03em .07em !important; overflow: visible !important; white-space: normal !important; text-wrap: balance !important; text-align: center !important; } body.studio-home .studio-hero .studio-hero-copy h1 .hero-subline{ margin-top: .08em !important; line-height: 1 !important; } body.studio-home .studio-hero .studio-hero-copy > p{ width: min(100%, 620px); max-width: 620px !important; margin: 0 auto !important; text-align: center !important; } body.studio-home .studio-hero .hero-actions{ width: 100%; margin-top: 28px !important; justify-content: center !important; } body.studio-home .studio-hero .studio-proof-line{ width: auto !important; max-width: 100%; margin: 30px auto 0 !important; justify-content: center !important; } @media (max-width: 900px){ body.studio-home .studio-hero{ min-height: auto; padding: 118px 0 78px; } body.studio-home .studio-hero .studio-hero-grid{ width: min(100% - 32px, 760px) !important; } body.studio-home .studio-hero .studio-hero-copy h1{ max-width: 760px !important; font-size: clamp(3.2rem, 10vw, 5rem) !important; } } @media (max-width: 560px){ body.studio-home .studio-hero{ padding: 104px 0 68px; } body.studio-home .studio-hero .studio-hero-grid{ width: calc(100% - 28px) !important; } body.studio-home .studio-hero .studio-hero-copy h1{ margin: 22px auto 20px !important; font-size: clamp(2.75rem, 13vw, 3.65rem) !important; line-height: 1 !important; letter-spacing: -.045em !important; } body.studio-home .studio-hero .studio-hero-copy h1 > span, body.studio-home .studio-hero .studio-hero-copy h1 .hero-subline{ padding-inline: .02em !important; } body.studio-home .studio-hero .hero-actions{ margin-top: 24px !important; } body.studio-home .studio-hero .studio-proof-line{ margin-top: 24px !important; } } html[data-theme="light"] body.app-page, html[data-theme="light"] body.auth-page{ --text:#17181d; --text-2:#353840; --muted:#60646d; --line:rgba(25,25,28,.13); --line-strong:rgba(25,25,28,.20); } html[data-theme="light"] body.app-page .dashboard, html[data-theme="light"] body.app-page .app-main{ color:#17181d; } html[data-theme="light"] body.app-page .metric-card > span, html[data-theme="light"] body.app-page .dashboard-hero p, html[data-theme="light"] body.app-page .app-card p, html[data-theme="light"] body.app-page .settings-card p, html[data-theme="light"] body.app-page .dashboard-section p, html[data-theme="light"] body.app-page .quick-action-grid small, html[data-theme="light"] body.app-page .revenue-card small, html[data-theme="light"] body.app-page .empty-state p, html[data-theme="light"] body.app-page .client-clear-state p, html[data-theme="light"] body.app-page .account-trigger small, html[data-theme="light"] body.app-page .muted{ color:#60646d !important; } html[data-theme="light"] body.app-page .metric-card > strong, html[data-theme="light"] body.app-page .quick-action-grid strong, html[data-theme="light"] body.app-page .app-card h2, html[data-theme="light"] body.app-page .app-card h3, html[data-theme="light"] body.app-page .settings-card h2, html[data-theme="light"] body.app-page .settings-card h3, html[data-theme="light"] body.app-page .dashboard-section h2, html[data-theme="light"] body.app-page .dashboard-section h3{ color:#17181d; } html[data-theme="light"] body.app-page .quick-action-grid a > span{ color:#5f45b7; background:#e6e0f5; border-color:#cfc4ea; } html[data-theme="light"] body.app-page .sidebar-nav a, html[data-theme="light"] body.app-page .sidebar-footer a{ color:#cfd1da; } html[data-theme="light"] body.app-page .sidebar-nav a.active{ color:#fff; } html[data-theme="light"] body.app-page .sidebar .role-badge{ color:#2b2111; } html[data-theme="light"] body.app-page .data-table th{ color:#4e525b; } html[data-theme="light"] body.app-page .data-table td{ color:#23252b; } html[data-theme="light"] body.app-page input::placeholder, html[data-theme="light"] body.app-page textarea::placeholder, html[data-theme="light"] body.auth-page input::placeholder, html[data-theme="light"] body.auth-page textarea::placeholder{ color:#777b84; opacity:1; } html[data-theme="light"] body.app-page .button-secondary, html[data-theme="light"] body.app-page .button-ghost, html[data-theme="light"] body.app-page .button-quiet{ color:#202228; background:#f7f3ec; border-color:rgba(25,25,28,.16); } html[data-theme="light"] body.app-page .notification-button, html[data-theme="light"] body.app-page .account-trigger{ color:#202228; } html[data-theme="light"] body.auth-page .auth-side p, html[data-theme="light"] body.auth-page .auth-form p, html[data-theme="light"] body.auth-page .auth-card p{ color:#555961; } html[data-theme="light"] body.auth-page label, html[data-theme="light"] body.auth-page h1, html[data-theme="light"] body.auth-page h2, html[data-theme="light"] body.auth-page h3{ color:#17181d; } body.studio-home .studio-hero .studio-hero-copy .eyebrow{ color:#c7c9d2 !important; } body.studio-home .studio-hero .studio-hero-copy h1 .hero-subline{ color:#f4f4f6 !important; background:none !important; -webkit-background-clip:initial !important; background-clip:initial !important; font-weight:760 !important; } body.studio-home .studio-hero .studio-proof-line{ color:#f2f2f5 !important; } body.studio-home .studio-hero .studio-proof-line span, body.studio-home .studio-hero .studio-proof-line span:nth-of-type(1), body.studio-home .studio-hero .studio-proof-line span:nth-of-type(2), body.studio-home .studio-hero .studio-proof-line span:nth-of-type(3), body.studio-home .studio-hero .studio-proof-line span:nth-of-type(4){ color:#f2f2f5 !important; } body.studio-home .studio-hero .studio-proof-line i{ width:4px !important; height:4px !important; background:#777a86 !important; box-shadow:none !important; animation:none !important; } body.studio-home .studio-hero .studio-hero-copy > p{ color:#c7cad3 !important; } body.studio-home .studio-hero .studio-hero-copy h1{ max-width: 1180px !important; font-size: clamp(3.8rem, 5.85vw, 6.35rem) !important; } body.studio-home .studio-hero .studio-hero-copy h1 .hero-subline{ color: transparent !important; background: linear-gradient(105deg,#f28a70 0%,#d872a5 46%,#9c78ff 100%) !important; -webkit-background-clip: text !important; background-clip: text !important; font-weight: 760 !important; } body.studio-home .studio-hero .studio-proof-line, body.studio-home .studio-hero .studio-proof-line span, body.studio-home .studio-hero .studio-proof-line span:nth-of-type(1), body.studio-home .studio-hero .studio-proof-line span:nth-of-type(2), body.studio-home .studio-hero .studio-proof-line span:nth-of-type(3), body.studio-home .studio-hero .studio-proof-line span:nth-of-type(4){ color:#f3f3f5 !important; } @media (min-width: 1000px){ body.studio-home .studio-hero .studio-hero-copy{ max-width: 1180px !important; } body.studio-home .studio-hero .studio-hero-copy h1 .hero-subline{ white-space: nowrap !important; text-wrap: nowrap !important; } } @media (max-width: 999px){ body.studio-home .studio-hero .studio-hero-copy h1{ font-size: clamp(3.15rem, 9.8vw, 5rem) !important; } body.studio-home .studio-hero .studio-hero-copy h1 .hero-subline{ white-space: normal !important; text-wrap: balance !important; } } @media (max-width: 560px){ body.studio-home .studio-hero .studio-hero-copy h1{ font-size: clamp(2.7rem, 12.4vw, 3.55rem) !important; } } body.studio-home .home-marquee{ width:100%; overflow:hidden; } body.studio-home .home-marquee > .home-marquee-track{ display:flex; width:max-content; min-width:0; height:58px; gap:0; padding:0; white-space:nowrap; animation:homeMarqueeLoop 30s linear infinite; will-change:transform; } body.studio-home .home-marquee .home-marquee-group{ flex:0 0 auto; min-width:100vw; height:58px; display:flex; align-items:center; justify-content:space-evenly; gap:clamp(18px,2.2vw,42px); padding-inline:clamp(18px,2.4vw,46px); box-sizing:border-box; } body.studio-home .home-marquee .home-marquee-group span{ flex:0 0 auto; padding:0; } body.studio-home .home-marquee .home-marquee-group b{ flex:0 0 auto; width:auto; } @keyframes homeMarqueeLoop{ from{transform:translate3d(0,0,0)} to{transform:translate3d(-50%,0,0)} } html.reduce-motion body.studio-home .home-marquee > .home-marquee-track{ animation:none!important; transform:none!important; } @media(max-width:760px){ body.studio-home .home-marquee > .home-marquee-track, body.studio-home .home-marquee .home-marquee-group{height:50px} body.studio-home .home-marquee .home-marquee-group{ min-width:max(100vw,700px); gap:20px; padding-inline:20px; } } body.studio-home .home-marquee .home-marquee-group{ display:grid; grid-template-columns: minmax(0,1fr) 14px minmax(0,1fr) 14px minmax(0,1fr) 14px minmax(0,1fr) 14px minmax(0,1fr) 14px; align-items:center; gap:0; padding-inline:0; } body.studio-home .home-marquee .home-marquee-group span{ width:100%; min-width:0; text-align:center; justify-self:stretch; padding-inline:16px; box-sizing:border-box; } body.studio-home .home-marquee .home-marquee-group b{ width:14px; text-align:center; justify-self:center; } @media(max-width:760px){ body.studio-home .home-marquee .home-marquee-group{ min-width:760px; grid-template-columns: minmax(0,1fr) 12px minmax(0,1fr) 12px minmax(0,1fr) 12px minmax(0,1fr) 12px minmax(0,1fr) 12px; padding-inline:0; } body.studio-home .home-marquee .home-marquee-group span{padding-inline:12px} body.studio-home .home-marquee .home-marquee-group b{width:12px} } body.studio-home .home-marquee .home-marquee-group{ display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); align-items:center; gap:0; padding:0; position:relative; } body.studio-home .home-marquee .home-marquee-group > b{ display:none; } body.studio-home .home-marquee .home-marquee-group > span{ position:relative; display:flex; align-items:center; justify-content:center; width:100%; min-width:0; height:100%; padding:0 18px; box-sizing:border-box; text-align:center; } body.studio-home .home-marquee .home-marquee-group > span::after{ content:"•"; position:absolute; right:0; top:50%; transform:translate(50%,-50%); color:var(--studio-coral); font-size:.8rem; line-height:1; font-weight:700; } body.studio-home .home-marquee .home-marquee-group > span:first-of-type::before{ content:"•"; position:absolute; left:0; top:50%; transform:translate(-50%,-50%); color:var(--studio-coral); font-size:.8rem; line-height:1; font-weight:700; } @media(max-width:760px){ body.studio-home .home-marquee .home-marquee-group{ min-width:760px; grid-template-columns:repeat(5,minmax(0,1fr)); } body.studio-home .home-marquee .home-marquee-group > span{ padding-inline:14px; } } body.studio-home .editorial-statement h2 em, body.studio-home .studio-process-copy h2 em{ color:#b86158 !important; } .studio-site .horizontal-process span{ color:#6c43bf; } body.app-page, body.auth-page{ font-kerning: normal; text-rendering: optimizeLegibility; } body.app-page .sidebar-nav a, body.app-page .sidebar-footer a, body.app-page .app-header, body.app-page .button, body.app-page .metric-card > span, body.app-page .quick-action-grid strong, body.app-page .quick-action-grid small, body.app-page .data-table td, body.app-page .field, body.app-page .form-help, body.app-page .muted{ letter-spacing: .006em; } body.app-page .dashboard-hero h1, body.app-page .v4-dashboard-hero h1, body.app-page .workspace-head h1, body.app-page .workspace-v73-identity h1{ letter-spacing: -.03em !important; } body.app-page .app-card h2, body.app-page .app-card h3, body.app-page .settings-card h2, body.app-page .settings-card h3, body.app-page .dashboard-section h2, body.app-page .dashboard-section h3{ letter-spacing: -.015em; } html[data-theme="light"] body.app-page{ --text:#17191e; --text-2:#30343c; --muted:#4e535c; --line:rgba(25,27,32,.14); --line-strong:rgba(25,27,32,.22); } html[data-theme="light"] body.app-page .metric-card > span, html[data-theme="light"] body.app-page .dashboard-hero p, html[data-theme="light"] body.app-page .workspace-head p, html[data-theme="light"] body.app-page .app-card p, html[data-theme="light"] body.app-page .settings-card p, html[data-theme="light"] body.app-page .dashboard-section p, html[data-theme="light"] body.app-page .card-head p, html[data-theme="light"] body.app-page .request-item p, html[data-theme="light"] body.app-page .request-item small, html[data-theme="light"] body.app-page .activity-row small, html[data-theme="light"] body.app-page .quick-action-grid small, html[data-theme="light"] body.app-page .revenue-card small, html[data-theme="light"] body.app-page .revenue-card span, html[data-theme="light"] body.app-page .empty-state p, html[data-theme="light"] body.app-page .empty-inline p, html[data-theme="light"] body.app-page .mini-empty p, html[data-theme="light"] body.app-page .client-clear-state p, html[data-theme="light"] body.app-page .form-help, html[data-theme="light"] body.app-page .field small, html[data-theme="light"] body.app-page .session-note, html[data-theme="light"] body.app-page .task-row small, html[data-theme="light"] body.app-page .workload-row small, html[data-theme="light"] body.app-page .assignment-strip small, html[data-theme="light"] body.app-page .assignment-summary small, html[data-theme="light"] body.app-page .account-trigger small, html[data-theme="light"] body.app-page .muted{ color:#4e535c !important; } html[data-theme="light"] body.app-page .data-table th, html[data-theme="light"] body.app-page .sidebar-label, html[data-theme="light"] body.app-page .workspace-v73-kicker, html[data-theme="light"] body.app-page .workspace-v73-team small, html[data-theme="light"] body.app-page .workspace-v73-summary small, html[data-theme="light"] body.app-page .workspace-v73-filter-panel label > span, html[data-theme="light"] body.app-page .workspace-v73-section-head span, html[data-theme="light"] body.app-page .workspace-v73-settings summary span, html[data-theme="light"] body.app-page .workspace-v73-project-list > a small, html[data-theme="light"] body.app-page .workspace-v73-empty p, html[data-theme="light"] body.app-page .workspace-v73-settings summary small, html[data-theme="light"] body.app-page .owner-plan-hero p, html[data-theme="light"] body.app-page .owner-plan-setup p, html[data-theme="light"] body.app-page .owner-plan-progress-copy span, html[data-theme="light"] body.app-page .owner-plan-tab, html[data-theme="light"] body.app-page .owner-plan-tab small, html[data-theme="light"] body.app-page .owner-plan-panel-head p, html[data-theme="light"] body.app-page .owner-plan-mini-progress > span, html[data-theme="light"] body.app-page .owner-plan-item-number, html[data-theme="light"] body.app-page .owner-plan-item-copy small, html[data-theme="light"] body.app-page .owner-plan-complete-state small, html[data-theme="light"] body.app-page .push-settings-head p, html[data-theme="light"] body.app-page .push-status, html[data-theme="light"] body.app-page .push-help, html[data-theme="light"] body.app-page .potential-client-dialog-head span, html[data-theme="light"] body.app-page .potential-client-save-state{ color:#444952 !important; } html[data-theme="light"] body.app-page .data-table td, html[data-theme="light"] body.app-page .metric-card > strong, html[data-theme="light"] body.app-page .quick-action-grid strong, html[data-theme="light"] body.app-page .app-card h2, html[data-theme="light"] body.app-page .app-card h3, html[data-theme="light"] body.app-page .settings-card h2, html[data-theme="light"] body.app-page .settings-card h3, html[data-theme="light"] body.app-page .dashboard-section h2, html[data-theme="light"] body.app-page .dashboard-section h3, html[data-theme="light"] body.app-page label{ color:#1c1e24; } html[data-theme="light"] body.app-page input::placeholder, html[data-theme="light"] body.app-page textarea::placeholder{ color:#696e77; opacity:1; } html[data-theme="light"] body.app-page .sidebar-nav a, html[data-theme="light"] body.app-page .sidebar-footer a{ color:#d4d6de; } html[data-theme="light"] body.app-page .sidebar-nav a.active, html[data-theme="light"] body.app-page .sidebar-nav a:hover, html[data-theme="light"] body.app-page .sidebar-footer a:hover{ color:#fff; } html[data-theme="light"] body.app-page, html[data-theme="light"] body.auth-page{ --bg:#dedad3; --bg-2:#d6d1c9; --surface:#eeeae3; --surface-2:#e6e1da; --surface-3:#dcd6ce; --text:#17191e; --text-2:#30343c; --muted:#4f545d; --line:rgba(25,27,32,.14); --line-strong:rgba(25,27,32,.22); } html[data-theme="dark"] body.auth-page{ --bg:#08090d; --bg-2:#0c0e14; --surface:#11131a; --surface-2:#171922; --surface-3:#1d202a; --text:#f3f3f5; --text-2:#c9ccd4; --muted:#9a9eaa; --line:rgba(255,255,255,.09); --line-strong:rgba(255,255,255,.15); background:#08090d; } html[data-theme="dark"] body.auth-page .auth-side{ background:radial-gradient(circle at 16% 12%,rgba(240,109,98,.08),transparent 28%),radial-gradient(circle at 84% 72%,rgba(141,99,255,.10),transparent 31%),#0d0f15; } html[data-theme="dark"] body.auth-page .auth-main{ background:#08090d; } html[data-theme="dark"] body.auth-page .auth-form-card, html[data-theme="dark"] body.auth-page .auth-card{ background:#111319; border-color:rgba(255,255,255,.09); box-shadow:0 28px 80px rgba(0,0,0,.34); } html[data-theme="dark"] body.auth-page input, html[data-theme="dark"] body.auth-page select, html[data-theme="dark"] body.auth-page textarea{ background:#e7e3dc; color:#17191e; border-color:rgba(0,0,0,.18); box-shadow:none; } html[data-theme="dark"] body.auth-page input::placeholder, html[data-theme="dark"] body.auth-page textarea::placeholder{ color:#686b72; opacity:1; } html[data-theme="dark"] body.auth-page input:focus, html[data-theme="dark"] body.auth-page select:focus, html[data-theme="dark"] body.auth-page textarea:focus{ border-color:#8b5cf6; box-shadow:0 0 0 4px rgba(139,92,246,.16); } html[data-theme="dark"] body.auth-page .field label, html[data-theme="dark"] body.auth-page .check, html[data-theme="dark"] body.auth-page .check a{ color:#f0f0f3; } html[data-theme="dark"] body.auth-page .field small, html[data-theme="dark"] body.auth-page .muted, html[data-theme="dark"] body.auth-page .auth-side p, html[data-theme="dark"] body.auth-page .auth-form p, html[data-theme="dark"] body.auth-page .auth-card p{ color:#a8acb7; } html[data-theme="dark"] body.auth-page .check input{ accent-color:#8b5cf6; } body.auth-page .check > span{ min-width:0; line-height:1.55; } body.auth-page .check > span a{ text-decoration:underline; text-underline-offset:3px; } html[data-theme="light"] body.auth-page{ background:#dedad3; } html[data-theme="light"] body.auth-page .auth-side{ background:radial-gradient(circle at 18% 12%,rgba(240,109,98,.06),transparent 28%),radial-gradient(circle at 82% 72%,rgba(141,99,255,.07),transparent 30%),#e8e3dc; } html[data-theme="light"] body.auth-page .auth-main{ background:#dedad3; } html[data-theme="light"] body.auth-page .auth-form-card, html[data-theme="light"] body.auth-page .auth-card, html[data-theme="light"] body.app-page .app-card, html[data-theme="light"] body.app-page .settings-card{ background:#eeeae3; } html[data-theme="light"] body.auth-page input, html[data-theme="light"] body.auth-page select, html[data-theme="light"] body.auth-page textarea{ background:#e4dfd7; color:#17191e; border-color:rgba(25,27,32,.18); } @media(max-width:760px){ body.auth-page .auth-side{ min-height:auto !important; padding:16px 18px !important; border-right:0 !important; border-bottom:1px solid var(--line) !important; } body.auth-page .auth-side .brand{ min-height:44px; } body.auth-page .auth-side h1, body.auth-page .auth-side > p, body.auth-page .auth-progress, body.auth-page .auth-switch, body.auth-page .auth-back-home{ display:none !important; } body.auth-page .auth-main{ min-height:calc(100svh - 77px) !important; padding:24px 14px 42px !important; align-items:start !important; } body.auth-page .auth-form-card{ padding:22px 18px !important; border-radius:18px !important; } body.auth-page .auth-form-card h2, body.auth-page .auth-step h2{ font-size:clamp(2.15rem,10.5vw,3rem) !important; line-height:1 !important; letter-spacing:-.035em !important; } body.auth-page .form-grid{ gap:16px !important; } body.auth-page .field{ gap:7px; } body.auth-page input, body.auth-page select{ min-height:52px; } body.auth-page .check{ gap:11px !important; align-items:flex-start !important; } body.auth-page .check > span{ font-size:.9rem; } body.auth-page .floating-page-back{ left:auto !important; right:14px !important; top:14px !important; } } body.studio-home .home-work-showcase{position:relative;overflow:hidden;padding:96px 0 86px;background:#090b10;border-bottom:1px solid rgba(255,255,255,.07)} body.studio-home .home-work-head{display:flex;align-items:end;justify-content:space-between;gap:32px;margin-bottom:34px} body.studio-home .home-work-head h2{margin:8px 0 0;max-width:12ch;font-size:clamp(2.4rem,5vw,4.6rem);line-height:.96;letter-spacing:-.045em} body.studio-home .home-work-head>p{max-width:390px;margin:0;color:#b9bdc8;line-height:1.65} body.studio-home .work-reel{width:100%;overflow:hidden;padding:6px 0 10px} body.studio-home .work-reel-track{display:flex;width:max-content;will-change:transform;animation:work-reel-loop 64s linear infinite} body.studio-home .work-reel:hover .work-reel-track{animation-play-state:running} body.studio-home .work-reel-group{display:flex;gap:18px;padding-right:18px} body.studio-home .work-reel-card{position:relative;flex:0 0 214px;width:214px;aspect-ratio:9/16;overflow:hidden;padding:0;border:1px solid rgba(255,255,255,.09);border-radius:18px;background:#11131a;color:#fff;text-align:left;box-shadow:0 16px 40px rgba(0,0,0,.24);isolation:isolate} body.studio-home .work-reel-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.015)} body.studio-home .work-reel-shade{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(4,5,8,.04) 28%,rgba(4,5,8,.22) 56%,rgba(4,5,8,.92) 100%)} body.studio-home .work-reel-play{position:absolute;top:16px;right:16px;z-index:2;display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:rgba(9,11,16,.72);border:1px solid rgba(255,255,255,.18);backdrop-filter:blur(8px);font-size:.72rem;padding-left:2px} body.studio-home .work-reel-meta{position:absolute;left:16px;right:16px;bottom:16px;z-index:2;display:grid;gap:5px} body.studio-home .work-reel-meta b{font-size:.92rem;letter-spacing:.01em} body.studio-home .work-reel-meta small{color:#d0d3dc;font-size:.77rem;letter-spacing:.03em} body.studio-home .work-reel-foot{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-top:24px} body.studio-home .work-reel-foot p{margin:0;color:#aeb2be;line-height:1.6} body.studio-home .work-reel-foot strong{color:#f4f4f7;font-weight:760} @keyframes work-reel-loop{to{transform:translateX(-50%)}} html:not(.reduce-motion):not(.suppress-hover) body.studio-home .work-reel-card{transition:transform .26s ease,border-color .26s ease,box-shadow .26s ease} html:not(.reduce-motion):not(.suppress-hover) body.studio-home .work-reel-card:hover{transform:translateY(-5px);border-color:rgba(190,154,255,.36);box-shadow:0 24px 58px rgba(0,0,0,.34)} body.studio-home .home-proof-section{padding:108px 0;background:#090b10;border-block:1px solid rgba(255,255,255,.07)} body.studio-home .home-proof-grid{display:grid;grid-template-columns:minmax(280px,.86fr) minmax(0,1.14fr);gap:clamp(44px,7vw,96px);align-items:center} body.studio-home .home-proof-photo{margin:0;overflow:hidden;border-radius:22px;border:1px solid rgba(255,255,255,.09);background:#101218;box-shadow:0 26px 70px rgba(0,0,0,.28)} body.studio-home .home-proof-photo img{display:block;width:100%;height:auto} body.studio-home .home-proof-copy h2{margin:10px 0 20px;max-width:13ch;font-size:clamp(2.6rem,5vw,4.8rem);line-height:.96;letter-spacing:-.05em} body.studio-home .home-proof-copy>p{max-width:560px;margin:0;color:#bec2ce;font-size:1.02rem;line-height:1.7} body.studio-home .home-proof-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:30px} body.studio-home .home-proof-stats>div{padding:18px 18px 16px;border-top:1px solid rgba(255,255,255,.12)} body.studio-home .home-proof-stats strong{display:block;font-size:clamp(1.5rem,2.8vw,2.2rem);letter-spacing:-.035em} body.studio-home .home-proof-stats span{display:block;margin-top:4px;color:#9fa4b1;font-size:.78rem;text-transform:uppercase;letter-spacing:.08em} .video-lightbox[hidden]{display:none!important} .video-lightbox{position:fixed;inset:0;z-index:1200;display:grid;place-items:center;padding:24px} .video-lightbox-backdrop{position:absolute;inset:0;border:0;background:rgba(3,4,7,.86);backdrop-filter:blur(12px)} .video-lightbox-dialog{position:relative;z-index:1;width:min(410px,calc(100vw - 36px))} .video-lightbox-frame{width:100%;aspect-ratio:9/16;overflow:hidden;border-radius:20px;background:#000;border:1px solid rgba(255,255,255,.14);box-shadow:0 28px 90px rgba(0,0,0,.55)} .video-lightbox-frame iframe{display:block;width:100%;height:100%;border:0} .video-lightbox-close{position:absolute;top:-14px;right:-14px;z-index:2;width:42px;height:42px;border-radius:50%;border:1px solid rgba(255,255,255,.16);background:#15171e;color:#fff;font-size:1.5rem;line-height:1;box-shadow:0 10px 28px rgba(0,0,0,.32)} body.video-lightbox-open{overflow:hidden} @media (max-width:900px){body.studio-home .home-work-head,body.studio-home .work-reel-foot{align-items:flex-start;flex-direction:column}body.studio-home .home-work-head>p{max-width:560px}body.studio-home .home-proof-grid{grid-template-columns:1fr}body.studio-home .home-proof-photo{max-width:520px}body.studio-home .home-proof-copy h2{max-width:15ch}} @media (max-width:640px){body.studio-home .home-work-showcase{padding:76px 0 68px}body.studio-home .home-work-head{margin-bottom:26px}body.studio-home .work-reel{overflow-x:auto;scrollbar-width:none;padding-left:20px}body.studio-home .work-reel::-webkit-scrollbar{display:none}body.studio-home .work-reel-track{animation:none}body.studio-home .work-reel-group:nth-child(2){display:none}body.studio-home .work-reel-group{gap:14px;padding-right:20px}body.studio-home .work-reel-card{flex-basis:176px;width:176px;border-radius:16px}body.studio-home .work-reel-foot{margin-top:18px}body.studio-home .home-proof-section{padding:82px 0}body.studio-home .home-proof-stats{grid-template-columns:1fr;gap:0}body.studio-home .home-proof-stats>div{padding-inline:0}.video-lightbox{padding:18px}.video-lightbox-close{top:-10px;right:-8px}} html.reduce-motion body.studio-home .work-reel-track{animation:none!important} body.studio-home .studio-hero-copy h1{font-kerning:normal;text-rendering:optimizeLegibility;letter-spacing:-.04em} body.studio-home .studio-hero-copy h1 .hero-subline{letter-spacing:-.022em;line-height:1.04} body.studio-home .studio-hero-copy > p{max-width:34rem} body.studio-home .home-work-showcase{padding:110px 0 94px} body.studio-home .home-work-head{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(300px,.8fr);align-items:end;gap:34px;margin-bottom:34px} body.studio-home .home-work-copy p{max-width:37rem;margin:14px 0 0;color:#b8bcc8;line-height:1.7} body.studio-home .home-work-head h2{max-width:9ch;font-size:clamp(2.7rem,5.2vw,5rem);line-height:1.02;letter-spacing:-.038em} body.studio-home .home-work-statpack{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;width:100%} body.studio-home .home-work-statpack>div{padding:18px 18px 16px;border:1px solid rgba(255,255,255,.08);border-radius:18px;background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.02));box-shadow:0 16px 36px rgba(0,0,0,.18)} body.studio-home .home-work-statpack strong{display:block;font-size:clamp(1.7rem,3vw,2.5rem);line-height:.94;letter-spacing:-.04em} body.studio-home .home-work-statpack span{display:block;margin-top:6px;color:#aeb2be;font-size:.78rem;line-height:1.45;text-transform:uppercase;letter-spacing:.08em} body.studio-home .work-reel{padding:8px 0 12px} body.studio-home .work-reel-group{gap:16px;padding-right:16px} body.studio-home .work-reel-card{flex-basis:200px;width:200px;border-radius:20px} body.studio-home .work-reel-shade{background:linear-gradient(180deg,rgba(4,5,8,.03) 0%,rgba(4,5,8,.08) 34%,rgba(4,5,8,.46) 100%)} body.studio-home .work-reel-play{top:14px;right:14px;width:40px;height:40px;background:rgba(10,12,18,.74)} body.studio-home .work-reel-view-pill{position:absolute;left:14px;bottom:14px;z-index:2;display:inline-flex;align-items:center;min-height:30px;padding:0 11px;border-radius:999px;background:rgba(8,10,15,.78);border:1px solid rgba(255,255,255,.12);backdrop-filter:blur(10px);font-size:.74rem;font-weight:760;letter-spacing:.02em;color:#fff} body.studio-home .work-reel-results{display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) auto;align-items:stretch;gap:14px;margin-top:26px} body.studio-home .work-reel-results article{display:grid;gap:6px;padding:20px 20px 18px;border:1px solid rgba(255,255,255,.08);border-radius:18px;background:rgba(255,255,255,.025)} body.studio-home .work-reel-results article strong{font-size:clamp(2rem,3.5vw,3rem);line-height:.92;letter-spacing:-.05em;color:#fff} body.studio-home .work-reel-results article span{color:#aeb2be;font-size:.85rem;line-height:1.55} body.studio-home .work-reel-results .text-link{align-self:center;justify-self:end;padding-right:2px} body.studio-home .home-proof-copy h2{max-width:11ch;line-height:1.01;letter-spacing:-.04em} body.studio-home .home-proof-copy>p{max-width:34rem} body.studio-home .home-proof-stats{gap:14px} body.studio-home .home-proof-stats>div{padding:20px 20px 18px;border:1px solid rgba(255,255,255,.08);border-radius:18px;background:rgba(255,255,255,.02)} body.studio-home .home-proof-stats strong{font-size:clamp(1.75rem,3vw,2.5rem)} @media (max-width:980px){body.studio-home .home-work-head{grid-template-columns:1fr}body.studio-home .home-work-statpack{max-width:700px}body.studio-home .work-reel-results{grid-template-columns:repeat(2,minmax(0,1fr))}body.studio-home .work-reel-results .text-link{justify-self:start}} @media (max-width:640px){body.studio-home .home-work-showcase{padding:82px 0 74px}body.studio-home .home-work-head h2{max-width:10ch}body.studio-home .home-work-statpack{grid-template-columns:1fr;gap:10px}body.studio-home .work-reel{padding-left:20px}body.studio-home .work-reel-card{flex-basis:168px;width:168px;border-radius:18px}body.studio-home .work-reel-play{top:12px;right:12px;width:36px;height:36px}body.studio-home .work-reel-view-pill{left:12px;bottom:12px;font-size:.72rem}body.studio-home .work-reel-results{grid-template-columns:1fr;margin-top:18px}body.studio-home .work-reel-results article{padding:18px 18px 16px}body.studio-home .home-proof-stats{grid-template-columns:1fr}} body.studio-home .home-work-showcase{ padding:124px 0 112px; } body.studio-home .home-work-head{ gap:clamp(46px,7vw,104px); margin-bottom:52px; } body.studio-home .home-work-copy{ max-width:650px; } body.studio-home .home-work-head h2{ margin-top:12px; max-width:11ch; line-height:1.04; letter-spacing:-.028em; } body.studio-home .home-work-copy p{ margin-top:20px; max-width:560px; font-size:1rem; line-height:1.75; } body.studio-home .home-work-statpack{ gap:18px; align-self:end; } body.studio-home .home-work-statpack>div{ min-height:126px; padding:24px 22px 20px; display:flex; flex-direction:column; justify-content:flex-end; } body.studio-home .home-work-statpack strong{ font-size:clamp(2rem,3vw,2.8rem); line-height:1; letter-spacing:-.028em; } body.studio-home .home-work-statpack span{ margin-top:10px; line-height:1.55; } body.studio-home .work-reel{ padding:10px 0 14px; } body.studio-home .work-reel-group{ gap:20px; padding-right:20px; } body.studio-home .work-reel-track, body.studio-home .work-reel:hover .work-reel-track{ animation-play-state:running !important; } body.studio-home .work-reel-results{ gap:18px; margin-top:42px; } body.studio-home .work-reel-results article{ min-height:132px; padding:25px 24px 22px; justify-content:end; } body.studio-home .work-reel-results article strong{ font-size:clamp(2.25rem,3.6vw,3.35rem); line-height:1; letter-spacing:-.03em; } body.studio-home .work-reel-results article span{ margin-top:4px; max-width:25ch; line-height:1.6; } body.studio-home .work-reel-results .text-link{ padding:18px 0 18px 18px; } @media (max-width:980px){ body.studio-home .home-work-showcase{padding:102px 0 92px} body.studio-home .home-work-head{gap:34px;margin-bottom:42px} body.studio-home .home-work-statpack{gap:12px} body.studio-home .work-reel-results{margin-top:32px} } @media (max-width:640px){ body.studio-home .home-work-showcase{padding:82px 0 76px} body.studio-home .home-work-head{gap:28px;margin-bottom:30px} body.studio-home .home-work-copy p{margin-top:16px} body.studio-home .home-work-statpack>div{min-height:auto;padding:19px 18px 17px} body.studio-home .work-reel-group{gap:16px;padding-right:20px} body.studio-home .work-reel-results{gap:12px;margin-top:26px} body.studio-home .work-reel-results article{min-height:auto;padding:20px 18px 18px} body.studio-home .work-reel-results .text-link{padding:10px 0 0} } body.studio-home .home-work-showcase{ padding:104px 0 84px; } body.studio-home .home-work-head{ grid-template-columns:minmax(0,1.05fr) minmax(360px,.95fr); gap:clamp(52px,7vw,110px); margin-bottom:52px; } body.studio-home .home-work-copy{ max-width:38rem; } body.studio-home .home-work-head h2{ max-width:10ch; line-height:1.03; letter-spacing:-.03em; } body.studio-home .home-work-copy p{ max-width:34rem; margin-top:18px; } body.studio-home .home-work-statpack{ display:grid; grid-template-columns:minmax(0,1.2fr) minmax(150px,.8fr); grid-template-rows:repeat(2,1fr); gap:14px; align-self:end; width:100%; } body.studio-home .home-work-statpack>div{ min-height:0; padding:22px 22px 20px; border:1px solid rgba(255,255,255,.09); border-radius:20px; background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.018)); box-shadow:none; } body.studio-home .home-work-statpack .home-work-stat-main{ grid-row:1 / span 2; display:flex; flex-direction:column; justify-content:flex-end; min-height:198px; padding:26px; } body.studio-home .home-work-statpack .home-work-stat-main strong{ font-size:clamp(3.4rem,6vw,5.7rem); line-height:.84; letter-spacing:-.055em; } body.studio-home .home-work-statpack .home-work-stat-main span{ max-width:18rem; margin-top:14px; color:#c3c7d1; font-size:.86rem; line-height:1.55; letter-spacing:0; text-transform:none; } body.studio-home .home-work-statpack .home-work-stat-small{ display:flex; flex-direction:column; justify-content:center; } body.studio-home .home-work-statpack .home-work-stat-small strong{ font-size:clamp(1.85rem,3.2vw,2.75rem); line-height:.9; letter-spacing:-.04em; } body.studio-home .home-work-statpack .home-work-stat-small span{ margin-top:8px; color:#aeb3bf; font-size:.72rem; line-height:1.45; letter-spacing:.075em; text-transform:uppercase; } body.studio-home .work-reel{ margin-top:0; } body.studio-home .work-reel-footer{ display:flex; align-items:center; justify-content:space-between; gap:24px; margin-top:26px; padding-top:22px; border-top:1px solid rgba(255,255,255,.08); } body.studio-home .work-reel-footer>span{ color:#8f94a1; font-size:.8rem; letter-spacing:.02em; } @media (max-width:980px){ body.studio-home .home-work-head{ grid-template-columns:1fr; gap:34px; margin-bottom:38px; } body.studio-home .home-work-statpack{ max-width:680px; } } @media (max-width:640px){ body.studio-home .home-work-showcase{padding:78px 0 68px} body.studio-home .home-work-head{gap:28px;margin-bottom:30px} body.studio-home .home-work-statpack{ grid-template-columns:1fr 1fr; grid-template-rows:auto auto; gap:10px; } body.studio-home .home-work-statpack .home-work-stat-main{ grid-column:1 / -1; grid-row:auto; min-height:150px; padding:22px; } body.studio-home .home-work-statpack .home-work-stat-main strong{font-size:clamp(3.3rem,17vw,4.4rem)} body.studio-home .home-work-statpack .home-work-stat-small{padding:18px 16px} body.studio-home .work-reel-footer{align-items:flex-start;flex-direction:column;gap:12px;margin-top:20px;padding-top:18px} } html,body{overflow-x:hidden} body.studio-home :is(h1,h2,h3,p,a,span,strong,em,small){min-width:0} body.studio-home :is(.studio-hero-copy,.studio-section-head,.statement-grid,.studio-process-copy,.home-work-copy,.home-proof-copy,.studio-final-card,.human-principle,.studio-service-card){overflow:visible} body.studio-home :is(.studio-hero-copy h1,.statement-grid h2,.studio-section-head h2,.studio-process-copy h2,.home-work-head h2,.home-proof-copy h2,.studio-final-card h2), body.studio-home :is(.studio-service-card h3,.human-principle h3){ max-width:100%; overflow:visible; white-space:normal; word-break:normal; overflow-wrap:break-word; text-wrap:balance; hyphens:none; } body.studio-home .button{white-space:normal;text-align:center} body.studio-home .studio-hero{ padding:122px 0 86px; } body.studio-home .studio-hero-grid{ gap:clamp(42px,6vw,88px); } body.studio-home .studio-hero-copy h1{ max-width:12ch; margin:18px 0 20px; font-size:clamp(3.5rem,6vw,6.1rem); line-height:1.04 !important; letter-spacing:-.032em !important; } body.studio-home .studio-hero-copy h1 > span, body.studio-home .studio-hero-copy h1 .hero-subline{ line-height:1.04 !important; letter-spacing:inherit !important; } body.studio-home .studio-hero-copy>p{ max-width:35rem; font-size:1.02rem; line-height:1.65; } body.studio-home .home-work-showcase{padding:96px 0 82px} body.studio-home .home-work-head{gap:clamp(38px,6vw,84px);margin-bottom:40px} body.studio-home .home-work-head h2, body.studio-home .home-proof-copy h2, body.studio-home .studio-section-head h2, body.studio-home .studio-process-copy h2, body.studio-home .statement-grid h2, body.studio-home .studio-final-card h2{ line-height:1.03 !important; letter-spacing:-.032em !important; } body.studio-home .home-work-head h2{font-size:clamp(2.75rem,4.9vw,4.7rem);max-width:11ch} body.studio-home .home-work-copy p, body.studio-home .home-proof-copy>p, body.studio-home .studio-section-head>div>p, body.studio-home .studio-process-copy p, body.studio-home .statement-grid p{font-size:1rem;line-height:1.68;max-width:36rem} body.studio-home .home-work-statpack{gap:16px} body.studio-home .home-work-statpack>div{min-width:0} body.studio-home .home-work-statpack .home-work-stat-main{min-height:184px} body.studio-home .home-work-statpack .home-work-stat-main strong{font-size:clamp(3rem,5.4vw,4.9rem)} body.studio-home .home-work-statpack .home-work-stat-small strong{font-size:clamp(1.9rem,3vw,2.6rem)} body.studio-home .home-work-statpack .home-work-stat-small span{font-size:.74rem;line-height:1.45} body.studio-home .statement-grid{gap:clamp(24px,4vw,56px)} body.studio-home .statement-grid h2{font-size:clamp(2.8rem,5.2vw,4.9rem);max-width:11ch} body.studio-home .studio-section-head{gap:22px;margin-bottom:30px;align-items:flex-start} body.studio-home .studio-section-head h2{font-size:clamp(2.65rem,4.7vw,4.4rem);max-width:11ch} body.studio-home .studio-service-grid{gap:14px} body.studio-home .studio-service-card{min-height:0;padding:24px} body.studio-home .studio-service-card h3{margin:28px 0 10px;font-size:clamp(1.85rem,2.6vw,2.7rem);line-height:1.06;letter-spacing:-.028em} body.studio-home .studio-service-card p{font-size:.97rem;line-height:1.62} body.studio-home .studio-process-grid{gap:clamp(42px,7vw,90px)} body.studio-home .studio-process-copy h2{font-size:clamp(2.75rem,5vw,4.8rem);max-width:11ch} body.studio-home .studio-process-list li{min-height:170px;padding:28px 0} body.studio-home .studio-process-list h3{font-size:clamp(1.65rem,2.6vw,2.55rem);line-height:1.04;letter-spacing:-.028em} body.studio-home .studio-process-list p{font-size:.96rem;line-height:1.58} body.studio-home .home-proof-section{padding:94px 0} body.studio-home .home-proof-grid{grid-template-columns:minmax(260px,.8fr) minmax(0,1.2fr);gap:clamp(34px,6vw,74px)} body.studio-home .home-proof-photo{max-width:430px} body.studio-home .home-proof-copy h2{font-size:clamp(2.7rem,4.8vw,4.6rem);max-width:12ch} body.studio-home .home-proof-stats{gap:14px;margin-top:24px} body.studio-home .home-proof-stats>div{padding:18px 18px 16px} body.studio-home .home-proof-stats strong{font-size:clamp(1.8rem,2.8vw,2.45rem)} body.studio-home .home-proof-stats span{font-size:.76rem;line-height:1.4} body.studio-home .human-principles-grid{gap:12px} body.studio-home .human-principle{min-height:0;padding:22px} body.studio-home .human-principle h3{font-size:clamp(1.45rem,2.2vw,2rem);line-height:1.08;letter-spacing:-.024em} body.studio-home .human-principle p{font-size:.95rem;line-height:1.58} body.studio-home .studio-final-card{min-height:0;padding:56px 34px} body.studio-home .studio-final-card h2{font-size:clamp(2.8rem,5vw,4.8rem);max-width:12ch} body.studio-home .studio-final-card .hero-actions{gap:12px;flex-wrap:wrap} body.studio-home .studio-final-card .hero-actions .button{min-width:0} @media (max-width:1020px){ body.studio-home .studio-hero{padding:114px 0 74px} body.studio-home .studio-hero-copy h1{max-width:none;font-size:clamp(3rem,10.8vw,4.9rem)} body.studio-home .statement-grid, body.studio-home .studio-process-grid, body.studio-home .home-proof-grid{grid-template-columns:1fr} body.studio-home .home-proof-photo{max-width:460px} body.studio-home .studio-service-grid, body.studio-home .human-principles-grid{grid-template-columns:repeat(2,minmax(0,1fr))} } @media (max-width:720px){ body.studio-home .studio-hero-copy h1{font-size:clamp(2.9rem,12.5vw,4.3rem);line-height:1.05 !important} body.studio-home .home-work-head h2, body.studio-home .home-proof-copy h2, body.studio-home .studio-section-head h2, body.studio-home .studio-process-copy h2, body.studio-home .statement-grid h2, body.studio-home .studio-final-card h2{font-size:clamp(2.35rem,10vw,3.45rem)} body.studio-home .home-work-showcase, body.studio-home .home-proof-section, body.studio-home .section{padding-top:74px;padding-bottom:66px} body.studio-home .studio-service-grid, body.studio-home .human-principles-grid{grid-template-columns:1fr} body.studio-home .home-work-statpack{grid-template-columns:1fr 1fr} body.studio-home .home-work-statpack .home-work-stat-main{grid-column:1/-1;min-height:146px} body.studio-home .home-proof-stats{grid-template-columns:1fr} body.studio-home .studio-final-card{padding:42px 22px} body.studio-home .studio-final-card .hero-actions .button{width:100%} } body.studio-home .studio-hero-copy h1{ display:flex !important; flex-direction:column !important; align-items:center !important; justify-content:center !important; width:auto !important; max-width:none !important; margin-left:auto !important; margin-right:auto !important; overflow:visible !important; text-align:center !important; text-wrap:initial !important; } body.studio-home .studio-hero-copy h1 > span, body.studio-home .studio-hero-copy h1 .hero-subline{ display:block !important; max-width:none !important; overflow:visible !important; padding-right:.14em !important; white-space:nowrap !important; } body.studio-home .studio-hero-copy h1{ font-size:clamp(3.7rem,4.9vw,5.1rem) !important; line-height:1.03 !important; letter-spacing:-.036em !important; } body.studio-home .studio-hero-copy h1 .hero-subline{ letter-spacing:-.02em !important; line-height:1.03 !important; } body.studio-home .studio-hero-copy>p{max-width:38rem !important;} body.studio-home .home-work-head, body.studio-home .statement-grid, body.studio-home .studio-process-grid, body.studio-home .home-proof-grid{ align-items:center !important; } body.studio-home .studio-section-head h2, body.studio-home .statement-grid h2, body.studio-home .studio-process-copy h2, body.studio-home .home-proof-copy h2, body.studio-home .studio-final-card h2, body.studio-home .home-work-head h2{ max-width:12ch !important; } @media (max-width: 980px){ body.studio-home .studio-hero{ padding-top:108px !important; padding-bottom:68px !important; } body.studio-home .studio-hero-copy h1{ font-size:clamp(2.7rem,10.5vw,3.95rem) !important; line-height:1.04 !important; letter-spacing:-.03em !important; } body.studio-home .studio-hero-copy h1 > span, body.studio-home .studio-hero-copy h1 .hero-subline{ padding-right:.1em !important; } body.studio-home .studio-hero-copy>p{ max-width:30rem !important; font-size:.98rem !important; line-height:1.65 !important; } body.studio-home .home-work-head, body.studio-home .statement-grid, body.studio-home .studio-process-grid, body.studio-home .home-proof-grid{ grid-template-columns:1fr !important; gap:24px !important; } body.studio-home .studio-section-head, body.studio-home .home-work-head{ gap:18px !important; } body.studio-home .home-work-statpack{ grid-template-columns:1fr 1fr !important; gap:12px !important; } body.studio-home .home-work-statpack .home-work-stat-main{ grid-column:1 / -1 !important; min-height:138px !important; } body.studio-home .home-proof-photo{ max-width:320px !important; margin:0 auto !important; } body.studio-home .home-proof-copy, body.studio-home .studio-process-copy, body.studio-home .home-work-copy, body.studio-home .statement-grid > div{ max-width:100% !important; } body.studio-home .home-proof-stats, body.studio-home .studio-service-grid, body.studio-home .human-principles-grid{ grid-template-columns:1fr !important; gap:12px !important; } body.studio-home .studio-final-card{ padding:38px 22px !important; } body.studio-home .studio-final-card .hero-actions{ flex-direction:column !important; align-items:stretch !important; } body.studio-home .studio-final-card .hero-actions .button{ width:100% !important; } } @media (max-width: 720px){ body.studio-home .studio-hero-copy h1{ font-size:clamp(2.52rem,10.6vw,3.25rem) !important; line-height:1.05 !important; } body.studio-home .studio-hero-copy h1 > span, body.studio-home .studio-hero-copy h1 .hero-subline{ white-space:normal !important; text-wrap:balance !important; padding-right:.06em !important; } body.studio-home .home-work-showcase, body.studio-home .home-proof-section, body.studio-home .section{ padding-top:66px !important; padding-bottom:58px !important; } body.studio-home .home-work-head h2, body.studio-home .studio-section-head h2, body.studio-home .statement-grid h2, body.studio-home .studio-process-copy h2, body.studio-home .home-proof-copy h2, body.studio-home .studio-final-card h2{ font-size:clamp(2.15rem,9vw,3rem) !important; line-height:1.05 !important; max-width:none !important; } body.studio-home .home-work-copy p, body.studio-home .studio-section-head>div>p, body.studio-home .statement-grid p, body.studio-home .studio-process-copy p, body.studio-home .home-proof-copy>p, body.studio-home .human-principle p, body.studio-home .studio-service-card p{ font-size:.98rem !important; line-height:1.62 !important; } } body.studio-home .studio-hero{ overflow-x:hidden !important; } body.studio-home .studio-hero .studio-hero-grid{ width:min(calc(100% - 48px), 1320px) !important; max-width:1320px !important; } body.studio-home .studio-hero .studio-hero-copy{ width:100% !important; max-width:1320px !important; } body.studio-home .studio-hero .studio-hero-copy h1{ width:100% !important; max-width:1320px !important; font-size:clamp(3.45rem,4.45vw,4.9rem) !important; line-height:1.04 !important; letter-spacing:-.03em !important; } body.studio-home .studio-hero .studio-hero-copy h1 > span, body.studio-home .studio-hero .studio-hero-copy h1 .hero-subline{ width:auto !important; max-width:100% !important; padding-left:.08em !important; padding-right:.08em !important; overflow:visible !important; text-align:center !important; } body.studio-home .studio-hero .studio-hero-copy h1 .hero-subline{ white-space:nowrap !important; letter-spacing:-.015em !important; } @media (max-width:1100px){ body.studio-home .studio-hero .studio-hero-grid{ width:min(calc(100% - 36px), 980px) !important; } body.studio-home .studio-hero .studio-hero-copy h1{ font-size:clamp(3rem,7.2vw,4.35rem) !important; } } @media (max-width:760px){ body.studio-home .studio-hero .studio-hero-grid{ width:calc(100% - 28px) !important; } body.studio-home .studio-hero .studio-hero-copy h1{ font-size:clamp(2.6rem,10.5vw,3.35rem) !important; } body.studio-home .studio-hero .studio-hero-copy h1 .hero-subline{ white-space:normal !important; text-wrap:balance !important; } } body.studio-home .studio-process-section{ padding:92px 0 96px !important; } body.studio-home .studio-process-section .studio-process-grid{ grid-template-columns:minmax(320px,.78fr) minmax(560px,1.22fr) !important; gap:clamp(64px,7vw,104px) !important; align-items:start !important; } body.studio-home .studio-process-section .studio-process-copy{ padding-top:4px; } body.studio-home .studio-process-section .studio-process-copy .eyebrow{ display:inline-flex; align-items:center; margin-bottom:18px; } body.studio-home .studio-process-section .studio-process-copy h2{ margin:0 0 24px !important; max-width:9.5ch !important; font-size:clamp(3.35rem,4.6vw,4.7rem) !important; line-height:1.02 !important; letter-spacing:-.032em !important; } body.studio-home .studio-process-section .studio-process-copy h2 em{ display:block; margin-top:5px; line-height:1.04; } body.studio-home .studio-process-section .studio-process-copy p{ margin:0 !important; max-width:29rem !important; font-size:1rem !important; line-height:1.65 !important; } body.studio-home .studio-process-section .studio-process-copy .button{ margin-top:28px !important; } body.studio-home .studio-process-section .studio-process-list{ gap:14px !important; } body.studio-home .studio-process-section .studio-process-list li{ min-height:0 !important; padding:24px 26px !important; grid-template-columns:26px minmax(0,1fr) auto !important; column-gap:16px !important; row-gap:8px !important; align-items:start !important; border-radius:17px !important; } body.studio-home .studio-process-section .studio-process-list li::before{ top:18px !important; bottom:18px !important; } body.studio-home .studio-process-section .studio-process-list li>span{ margin-top:6px !important; font-size:.78rem !important; line-height:1 !important; letter-spacing:.01em !important; } body.studio-home .studio-process-section .studio-process-list li>div{ min-width:0; } body.studio-home .studio-process-section .studio-process-list h3{ margin:0 0 9px !important; font-size:clamp(2rem,2.25vw,2.5rem) !important; line-height:1.06 !important; letter-spacing:-.026em !important; } body.studio-home .studio-process-section .studio-process-list p{ margin:0 !important; font-size:.96rem !important; line-height:1.55 !important; } body.studio-home .studio-process-section .studio-process-list b, body.studio-home .studio-process-section .studio-process-list li.is-active b{ align-self:start !important; min-width:76px; margin-top:1px !important; padding:8px 12px !important; border-radius:999px !important; text-align:center; font-size:.68rem !important; line-height:1.1 !important; letter-spacing:.065em !important; } @media (max-width:1100px){ body.studio-home .studio-process-section .studio-process-grid{ grid-template-columns:minmax(280px,.72fr) minmax(0,1.28fr) !important; gap:48px !important; } body.studio-home .studio-process-section .studio-process-copy h2{ font-size:clamp(3rem,5vw,4rem) !important; } } @media (max-width:980px){ body.studio-home .studio-process-section{ padding:74px 0 !important; } body.studio-home .studio-process-section .studio-process-grid{ grid-template-columns:1fr !important; gap:38px !important; } body.studio-home .studio-process-section .studio-process-copy{ max-width:620px !important; padding-top:0; } body.studio-home .studio-process-section .studio-process-copy h2{ max-width:none !important; } } @media (max-width:640px){ body.studio-home .studio-process-section .studio-process-copy .eyebrow{ margin-bottom:14px; } body.studio-home .studio-process-section .studio-process-copy h2{ margin-bottom:18px !important; font-size:clamp(2.45rem,10vw,3.2rem) !important; } body.studio-home .studio-process-section .studio-process-copy .button{ width:auto !important; margin-top:22px !important; } body.studio-home .studio-process-section .studio-process-list{ gap:10px !important; } body.studio-home .studio-process-section .studio-process-list li{ padding:20px !important; grid-template-columns:22px minmax(0,1fr) !important; gap:12px !important; } body.studio-home .studio-process-section .studio-process-list b, body.studio-home .studio-process-section .studio-process-list li.is-active b{ grid-column:2 !important; justify-self:start; min-width:0; margin-top:4px !important; } body.studio-home .studio-process-section .studio-process-list h3{ font-size:1.8rem !important; } } body.studio-home .selected-work-v2{ padding:96px 0 88px !important; overflow:hidden; background:#090b10; border-block:1px solid rgba(255,255,255,.07); } body.studio-home .selected-work-v2-head{ display:grid; grid-template-columns:minmax(0,1fr) minmax(420px,.92fr); gap:clamp(48px,7vw,110px); align-items:end; margin-bottom:38px; } body.studio-home .selected-work-v2-copy h2{ margin:12px 0 0; max-width:10ch; font-size:clamp(3rem,5vw,4.9rem); line-height:1.02; letter-spacing:-.035em; } body.studio-home .selected-work-v2-copy p{ max-width:38rem; margin:18px 0 0; color:#b9bdc8; font-size:1rem; line-height:1.68; } body.studio-home .selected-work-v2-stats{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; } body.studio-home .selected-work-v2-stats>div{ min-width:0; padding:19px 18px 17px; border:1px solid rgba(255,255,255,.09); border-radius:16px; background:rgba(255,255,255,.025); } body.studio-home .selected-work-v2-stats strong{ display:block; color:#fff; font-size:clamp(1.65rem,2.4vw,2.35rem); line-height:1; letter-spacing:-.035em; } body.studio-home .selected-work-v2-stats span{ display:block; margin-top:7px; color:#9ea3af; font-size:.72rem; line-height:1.4; letter-spacing:.07em; text-transform:uppercase; } body.studio-home .selected-work-v2-gallery{ display:grid; grid-template-columns:minmax(260px,.72fr) minmax(0,1.28fr); gap:18px; align-items:stretch; } body.studio-home :is(.selected-work-feature,.selected-work-tile){ position:relative; overflow:hidden; padding:0; border:1px solid rgba(255,255,255,.10); background:#11131a; color:#fff; cursor:pointer; isolation:isolate; } body.studio-home .selected-work-feature{ min-height:500px; aspect-ratio:9/14; border-radius:22px; } body.studio-home .selected-work-supporting{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; } body.studio-home .selected-work-tile{ min-height:0; aspect-ratio:9/16; border-radius:18px; } body.studio-home :is(.selected-work-feature,.selected-work-tile) img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transform:scale(1.01); } body.studio-home .selected-work-shade{ position:absolute; inset:0; z-index:1; background:linear-gradient(180deg,rgba(5,6,9,.02) 0%,rgba(5,6,9,.08) 50%,rgba(5,6,9,.64) 100%); pointer-events:none; } body.studio-home .selected-work-play{ position:absolute; z-index:2; top:16px; right:16px; width:42px; height:42px; display:grid; place-items:center; border:1px solid rgba(255,255,255,.16); border-radius:50%; background:rgba(10,12,18,.72); backdrop-filter:blur(10px); color:#fff; font-size:.8rem; padding-left:2px; } body.studio-home .selected-work-feature-meta{ position:absolute; z-index:2; left:22px; bottom:20px; display:grid; gap:4px; text-align:left; } body.studio-home .selected-work-feature-meta strong{ font-size:clamp(1.35rem,2vw,2rem); line-height:1; letter-spacing:-.025em; } body.studio-home .selected-work-feature-meta small{ color:#c2c6cf; font-size:.78rem; letter-spacing:.06em; text-transform:uppercase; } body.studio-home .selected-work-count{ position:absolute; z-index:2; left:12px; bottom:12px; padding:7px 9px; border:1px solid rgba(255,255,255,.12); border-radius:999px; background:rgba(8,10,15,.80); backdrop-filter:blur(8px); color:#fff; font-size:.72rem; font-weight:760; line-height:1; } body.studio-home .selected-work-v2-foot{ display:flex; align-items:center; justify-content:space-between; gap:24px; margin-top:24px; padding-top:20px; border-top:1px solid rgba(255,255,255,.08); } body.studio-home .selected-work-v2-foot>span{ color:#8f94a1; font-size:.8rem; } html:not(.reduce-motion):not(.suppress-hover) body.studio-home :is(.selected-work-feature,.selected-work-tile){ transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease; } @media (hover:hover) and (pointer:fine){ html:not(.reduce-motion):not(.suppress-hover) body.studio-home :is(.selected-work-feature,.selected-work-tile):hover{ transform:translateY(-4px); border-color:rgba(190,154,255,.30); box-shadow:0 22px 50px rgba(0,0,0,.28); } } @media (max-width:1100px){ body.studio-home .selected-work-v2-head{grid-template-columns:1fr;gap:28px} body.studio-home .selected-work-v2-stats{max-width:720px} body.studio-home .selected-work-v2-gallery{grid-template-columns:minmax(230px,.8fr) minmax(0,1.2fr)} body.studio-home .selected-work-supporting{grid-template-columns:repeat(2,minmax(0,1fr))} body.studio-home .selected-work-feature{min-height:540px} } @media (max-width:720px){ body.studio-home .selected-work-v2{padding:70px 0 64px !important} body.studio-home .selected-work-v2-head{gap:22px;margin-bottom:28px} body.studio-home .selected-work-v2-copy h2{max-width:none;font-size:clamp(2.5rem,10vw,3.4rem)} body.studio-home .selected-work-v2-copy p{font-size:.96rem;line-height:1.6} body.studio-home .selected-work-v2-stats{grid-template-columns:1fr;gap:9px} body.studio-home .selected-work-v2-stats>div{padding:15px 16px} body.studio-home .selected-work-v2-stats strong{font-size:1.8rem} body.studio-home .selected-work-v2-gallery{grid-template-columns:1fr;gap:14px} body.studio-home .selected-work-feature{width:min(100%,330px);min-height:0;aspect-ratio:9/14;margin:0 auto} body.studio-home .selected-work-supporting{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px} body.studio-home .selected-work-tile{border-radius:14px} body.studio-home .selected-work-play{top:10px;right:10px;width:35px;height:35px;font-size:.68rem} body.studio-home .selected-work-feature-meta{left:16px;bottom:15px} body.studio-home .selected-work-count{left:9px;bottom:9px;padding:6px 8px;font-size:.66rem} body.studio-home .selected-work-v2-foot{align-items:flex-start;flex-direction:column;gap:10px;margin-top:18px;padding-top:16px} } body.studio-home .home-proof-section{ padding:88px 0 !important; } body.studio-home .home-proof-grid{ grid-template-columns:minmax(250px,.78fr) minmax(0,1.22fr) !important; gap:clamp(38px,6vw,76px) !important; } body.studio-home .home-proof-photo{ max-width:390px !important; } body.studio-home .home-proof-copy h2{ font-size:clamp(2.7rem,4.5vw,4.35rem) !important; max-width:12ch !important; } body.studio-home .home-proof-copy>p{ max-width:34rem !important; } body.studio-home .home-proof-stats{ margin-top:22px !important; } body.studio-home .selected-work-v2{ padding:70px 0 64px !important; } body.studio-home .selected-work-v2-head{ display:flex !important; align-items:flex-end !important; justify-content:space-between !important; gap:32px !important; margin-bottom:28px !important; } body.studio-home .selected-work-v2-copy{ max-width:560px !important; } body.studio-home .selected-work-v2-copy h2{ margin-top:10px !important; max-width:none !important; font-size:clamp(2.5rem,4vw,3.8rem) !important; line-height:1.02 !important; } body.studio-home .selected-work-v2-copy p{ margin-top:12px !important; max-width:32rem !important; font-size:.96rem !important; line-height:1.6 !important; } body.studio-home .selected-work-v2-stats{ display:none !important; } body.studio-home .selected-work-v2-gallery{ max-width:1060px !important; display:grid !important; grid-template-columns:minmax(220px,280px) minmax(0,1fr) !important; gap:16px !important; align-items:start !important; } body.studio-home .selected-work-feature{ width:100% !important; min-height:0 !important; aspect-ratio:9/14 !important; border-radius:18px !important; } body.studio-home .selected-work-supporting{ display:grid !important; grid-template-columns:repeat(4,minmax(0,1fr)) !important; gap:12px !important; align-items:start !important; } body.studio-home .selected-work-tile{ width:100% !important; aspect-ratio:9/16 !important; border-radius:16px !important; } body.studio-home .selected-work-play{ top:11px !important; right:11px !important; width:34px !important; height:34px !important; font-size:.68rem !important; } body.studio-home .selected-work-feature-meta{ left:16px !important; bottom:15px !important; } body.studio-home .selected-work-feature-meta strong{ font-size:1.35rem !important; } body.studio-home .selected-work-count{ left:9px !important; bottom:9px !important; padding:6px 8px !important; font-size:.66rem !important; } body.studio-home .selected-work-v2-foot{ max-width:1060px !important; margin-top:18px !important; padding-top:16px !important; } @media (max-width:980px){ body.studio-home .home-proof-section{padding:72px 0 !important} body.studio-home .home-proof-grid{grid-template-columns:1fr !important;gap:30px !important} body.studio-home .home-proof-photo{max-width:340px !important;margin:0 auto !important} body.studio-home .selected-work-v2{padding:62px 0 58px !important} body.studio-home .selected-work-v2-head{align-items:flex-start !important;flex-direction:column !important;gap:18px !important} body.studio-home .selected-work-v2-gallery{grid-template-columns:minmax(190px,250px) minmax(0,1fr) !important;gap:14px !important} body.studio-home .selected-work-supporting{grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:10px !important} } @media (max-width:640px){ body.studio-home .home-proof-section{padding:64px 0 !important} body.studio-home .home-proof-photo{max-width:280px !important} body.studio-home .home-proof-copy h2{font-size:clamp(2.25rem,9.5vw,3rem) !important;max-width:none !important} body.studio-home .home-proof-stats{grid-template-columns:repeat(3,minmax(0,1fr)) !important;gap:8px !important} body.studio-home .home-proof-stats>div{padding:14px 10px !important} body.studio-home .home-proof-stats strong{font-size:1.45rem !important} body.studio-home .home-proof-stats span{font-size:.62rem !important;letter-spacing:.04em !important} body.studio-home .selected-work-v2{padding:56px 0 52px !important} body.studio-home .selected-work-v2-head{margin-bottom:22px !important} body.studio-home .selected-work-v2-copy h2{font-size:clamp(2.2rem,9.5vw,2.9rem) !important} body.studio-home .selected-work-v2-gallery{grid-template-columns:1fr !important;gap:12px !important} body.studio-home .selected-work-feature{width:min(100%,240px) !important;margin:0 auto !important} body.studio-home .selected-work-supporting{grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:9px !important} body.studio-home .selected-work-v2-foot{margin-top:15px !important;padding-top:14px !important} } body.studio-home .home-proof-section, html[data-theme="light"] body.studio-home .home-proof-section{ background:#f1ede7 !important; color:#18191f !important; border-block:1px solid rgba(24,25,31,.10) !important; } body.studio-home .home-proof-copy .eyebrow, html[data-theme="light"] body.studio-home .home-proof-copy .eyebrow{ color:#7357a8 !important; } body.studio-home .home-proof-copy h2, html[data-theme="light"] body.studio-home .home-proof-copy h2{ color:#18191f !important; } body.studio-home .home-proof-copy>p, html[data-theme="light"] body.studio-home .home-proof-copy>p{ color:#585b64 !important; } body.studio-home .home-proof-photo, html[data-theme="light"] body.studio-home .home-proof-photo{ background:#0d0f14 !important; border-color:rgba(24,25,31,.14) !important; box-shadow:0 20px 52px rgba(31,26,22,.13) !important; } body.studio-home .home-proof-stats>div, html[data-theme="light"] body.studio-home .home-proof-stats>div{ background:#fbfaf7 !important; border:1px solid rgba(24,25,31,.10) !important; border-radius:14px !important; } body.studio-home .home-proof-stats strong, html[data-theme="light"] body.studio-home .home-proof-stats strong{ color:#18191f !important; } body.studio-home .home-proof-stats span, html[data-theme="light"] body.studio-home .home-proof-stats span{ color:#666974 !important; } body.studio-home .selected-work-v2, html[data-theme="light"] body.studio-home .selected-work-v2{ background:#090b10 !important; color:#f5f5f7 !important; border-block:1px solid rgba(255,255,255,.07) !important; } body.studio-home .selected-work-v2-copy h2, html[data-theme="light"] body.studio-home .selected-work-v2-copy h2{ color:#f5f5f7 !important; } body.studio-home .selected-work-v2-copy p, html[data-theme="light"] body.studio-home .selected-work-v2-copy p{ color:#b9bdc8 !important; } body.studio-home .editorial-statement, html[data-theme="light"] body.studio-home .editorial-statement{ background:#f1ede7 !important; color:#18191f !important; } body.studio-home .studio-services-section, html[data-theme="light"] body.studio-home .studio-services-section{ background:#090b10 !important; color:#f5f5f7 !important; } body.studio-home .studio-process-section, html[data-theme="light"] body.studio-home .studio-process-section{ background:#f1ede7 !important; color:#18191f !important; } body.studio-home .studio-human-section, html[data-theme="light"] body.studio-home .studio-human-section{ background:#090b10 !important; color:#f5f5f7 !important; } body.studio-home .studio-human-section .studio-section-head h2, html[data-theme="light"] body.studio-home .studio-human-section .studio-section-head h2{ color:#f5f5f7 !important; } body.studio-home .studio-human-section .studio-section-head p, html[data-theme="light"] body.studio-home .studio-human-section .studio-section-head p{ color:#aeb3bf !important; } body.studio-home .studio-human-section .studio-section-head .eyebrow, html[data-theme="light"] body.studio-home .studio-human-section .studio-section-head .eyebrow{ color:#b7a6e8 !important; } body.studio-home .studio-human-section .studio-section-head .text-link, html[data-theme="light"] body.studio-home .studio-human-section .studio-section-head .text-link{ color:#f2eefc !important; text-decoration-color:rgba(242,238,252,.45) !important; } body.studio-home .studio-human-section.simple-human-section .human-principle, html[data-theme="light"] body.studio-home .studio-human-section.simple-human-section .human-principle{ color:#f5f5f7 !important; background:#12141a !important; border-color:rgba(255,255,255,.09) !important; box-shadow:none !important; } body.studio-home .studio-human-section.simple-human-section .human-principle h3, html[data-theme="light"] body.studio-home .studio-human-section.simple-human-section .human-principle h3{ color:#f5f5f7 !important; } body.studio-home .studio-human-section.simple-human-section .human-principle p, html[data-theme="light"] body.studio-home .studio-human-section.simple-human-section .human-principle p{ color:#aeb3bf !important; } body.studio-home .studio-final-section, html[data-theme="light"] body.studio-home .studio-final-section{ background:#f1ede7 !important; color:#18191f !important; } body.studio-home .studio-final-section .studio-final-card, html[data-theme="light"] body.studio-home .studio-final-section .studio-final-card{ background:radial-gradient(circle at 75% 35%,rgba(141,99,255,.20),transparent 24%),radial-gradient(circle at 12% 80%,rgba(240,109,98,.12),transparent 25%),linear-gradient(145deg,#14161f,#0b0c11) !important; border-color:rgba(255,255,255,.10) !important; color:#f5f5f7 !important; } body.studio-home .studio-final-section .studio-final-card h2, html[data-theme="light"] body.studio-home .studio-final-section .studio-final-card h2{ color:#f5f5f7 !important; } body.studio-home .studio-final-section .studio-final-card .eyebrow, html[data-theme="light"] body.studio-home .studio-final-section .studio-final-card .eyebrow{ color:#b9acd8 !important; } body.studio-home .selected-work-v2-gallery{ display:grid !important; grid-template-columns:repeat(5,minmax(0,1fr)) !important; gap:12px !important; max-width:1060px !important; align-items:start !important; } body.studio-home .selected-work-supporting{ display:contents !important; } body.studio-home .selected-work-feature, body.studio-home .selected-work-tile{ width:100% !important; min-width:0 !important; min-height:0 !important; aspect-ratio:9 / 16 !important; border-radius:16px !important; overflow:hidden !important; } body.studio-home .selected-work-feature img, body.studio-home .selected-work-tile img{ width:100% !important; height:100% !important; object-fit:cover !important; object-position:center !important; display:block !important; } body.studio-home .selected-work-feature-meta{ left:10px !important; bottom:10px !important; } body.studio-home .selected-work-feature-meta strong{ font-size:.78rem !important; line-height:1 !important; } body.studio-home .selected-work-feature-meta small{ display:none !important; } body.studio-home .selected-work-count{ left:9px !important; bottom:9px !important; font-size:.66rem !important; padding:6px 8px !important; } @media (max-width:980px){ body.studio-home .selected-work-v2-gallery{ grid-template-columns:repeat(3,minmax(0,1fr)) !important; } } @media (max-width:640px){ body.studio-home .selected-work-v2-gallery{ grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:9px !important; } body.studio-home .selected-work-feature{ width:100% !important; margin:0 !important; } } html[data-theme="light"] body.app-page{ --bg:#e9e7e2; --bg-2:#efede8; --surface:#f8f7f3; --surface-2:#f1efe9; --surface-3:#e6e3dc; --text:#17181b; --text-2:#353840; --text-soft:#474a53; --muted:#5f636d; --line:rgba(23,24,27,.13); --line-strong:rgba(23,24,27,.22); --purple:#6846c7; --purple-2:#7a4399; --pink:#aa3f70; --green:#176d47; --amber:#80550d; --danger:#ac3043; --button-gradient:linear-gradient(180deg,#7753d5 0%,#6845c4 100%); --button-gradient-hover:linear-gradient(180deg,#6f4cca 0%,#5d3bb5 100%); background:#e9e7e2 !important; color:var(--text) !important; } html[data-theme="light"] body.app-page .app-header{ background:rgba(239,237,232,.96) !important; border-bottom-color:var(--line) !important; } html[data-theme="light"] body.app-page :is(.app-card,.settings-card,.metric-card,.quick-action-grid>a,.view-toolbar,.project-rail,.workspace-v73-panel,.workspace-v73-view-shell,.workspace-v73-settings){ background:var(--surface) !important; border-color:var(--line) !important; color:var(--text) !important; } html[data-theme="light"] body.app-page :is(h1,h2,h3,h4,h5,h6,strong,.brand,.workspace-head h1,.dashboard-hero h1){ color:var(--text) !important; } html[data-theme="light"] body.app-page :is(p,label,.data-table td,.data-table td a,.task-row strong,.project-rail strong,.assignment-strip strong,.assignment-summary strong){ color:var(--text-2); } html[data-theme="light"] body.app-page :is(.data-table th,.data-table td small,.task-row small,.project-rail small,.assignment-strip small,.assignment-summary small,.form-help,.muted,.workspace-head p,.dashboard-hero p){ color:var(--muted) !important; } html[data-theme="light"] body.app-page .data-table th{ font-weight:800; } html[data-theme="light"] body.app-page .data-table tr{ border-color:var(--line) !important; } html[data-theme="light"] body.app-page :is(input,select,textarea){ color:var(--text) !important; background:#fbfaf7 !important; border-color:var(--line-strong) !important; } html[data-theme="light"] body.app-page :is(input,textarea)::placeholder{ color:#747780 !important; opacity:1 !important; } html[data-theme="light"] body.app-page :is(.button-secondary,.button-ghost,.button-quiet,.notification-button,.account-trigger,.status-dropdown){ color:var(--text) !important; background:#f8f7f3 !important; border-color:var(--line-strong) !important; } html[data-theme="light"] body.app-page .button-primary{ color:#fff !important; } html[data-theme="light"] body.app-page :is(button[disabled],.button[aria-disabled="true"]){ opacity:.72 !important; } html[data-theme="light"] body.app-page .status-success{ color:#135f3b !important; background:#dff2e7 !important; border-color:#82bd9b !important; } html[data-theme="light"] body.app-page .status-warning{ color:#744b05 !important; background:#f7ecd2 !important; border-color:#c8a15b !important; } html[data-theme="light"] body.app-page .status-danger{ color:#9c293c !important; background:#f8e2e6 !important; border-color:#d58b98 !important; } html[data-theme="light"] body.app-page .status-neutral{ color:#3f4249 !important; background:#e9e7e1 !important; border-color:#bbb8b0 !important; } html[data-theme="light"] body.app-page .status-pill{ color:#563a9e !important; background:#ece6f8 !important; border-color:#a996d0 !important; } html[data-theme="light"] body.app-page .status-badge{ box-shadow:none !important; } html[data-theme="light"] body.app-page .flash-success{ color:#135f3b !important; background:#dff2e7 !important; border-color:#82bd9b !important; } html[data-theme="light"] body.app-page .flash-error{ color:#9c293c !important; background:#f8e2e6 !important; border-color:#d58b98 !important; } html[data-theme="light"] body.app-page :is(.text-danger,.form-error){ color:#a1273c !important; } html[data-theme="light"] body.app-page .button-danger{ color:#92263a !important; background:#f8e3e7 !important; border-color:#cc7c8a !important; } @media (hover:hover) and (pointer:fine){ html[data-theme="light"]:not(.suppress-hover) body.app-page .button-danger:hover{ color:#791d2f !important; background:#f3d5da !important; border-color:#b85d70 !important; } } html[data-theme="light"] body.app-page :is(.text-link,.card-link,.file-row>span,.breadcrumbs a){ color:#513793 !important; } html[data-theme="light"] body.app-page .notification-row.unread strong{ color:#4e378e !important; } html[data-theme="light"] body.app-page .task-meta span{ color:#555961 !important; background:#f5f3ee !important; border-color:var(--line) !important; } html[data-theme="light"] body.app-page .sidebar-nav a, html[data-theme="light"] body.app-page .sidebar-footer a{ color:#4b4f58 !important; } html[data-theme="light"] body.app-page .sidebar-nav a.active{ color:#17181b !important; background:#e8e3f1 !important; } html[data-theme="light"] body.app-page .status-dropdown-trigger{ color:#41444c !important; } html{ font-synthesis:none; text-rendering:optimizeLegibility; } body, button, input, select, textarea{ font-family:Arial, Helvetica, sans-serif !important; font-stretch:normal !important; font-kerning:normal; } body :is(h1,h2){ letter-spacing:-.018em !important; font-stretch:normal !important; } body :is(h3,h4,h5,h6){ letter-spacing:-.008em !important; font-stretch:normal !important; } body :is( .workspace-head h1, .project-hero h1, .task-hero h1, .success-panel h1, .studio-hero-copy h1, .studio-hero-copy h1 .hero-subline, .home-work-head h2, .home-proof-copy h2, .studio-section-head h2, .studio-process-copy h2, .statement-grid h2, .studio-final-card h2 ){ letter-spacing:-.018em !important; } body :is( .metric-card strong, .revenue-card strong, .price-line strong, .purchase-price strong, .home-work-statpack strong, .home-proof-stats strong, .work-reel-results article strong ){ letter-spacing:-.01em !important; font-stretch:normal !important; } body :is( .status-badge, .role-badge, .status-pill, .status-dropdown-trigger, .internal-badge, .button, .button-small, .sidebar-nav a, .sidebar-footer a, .view-switch a, .saved-view-links a, .card-link, .data-table th, .potential-client-status, .eyebrow ){ font-stretch:normal !important; line-height:1.28; } body :is(.status-badge,.role-badge,.status-pill,.status-dropdown-trigger,.internal-badge){ font-weight:700 !important; letter-spacing:.012em !important; } body .status-badge{ min-height:32px; padding-inline:11px; font-size:.75rem; } body .role-badge{ min-height:29px; padding-inline:11px; font-size:.71rem; } body .status-pill{ padding:7px 10px; font-size:.7rem; } body :is(.button,.button-small,.sidebar-nav a,.sidebar-footer a,.view-switch a,.saved-view-links a,.card-link){ letter-spacing:.004em !important; } body :is(p,li,td,label,input,select,textarea,small){ letter-spacing:normal; font-stretch:normal !important; } html[data-theme="light"] body.app-page :is(.status-badge,.role-badge,.status-pill), html[data-theme="dark"] body.app-page :is(.status-badge,.role-badge,.status-pill){ text-rendering:optimizeLegibility; } @media (min-width:1021px){ body.app-page .app-layout{ grid-template-columns:248px minmax(0,1fr) !important; } body.app-page .sidebar{ position:fixed !important; inset:0 auto 0 0 !important; width:248px !important; height:100dvh !important; min-height:100dvh !important; max-height:100dvh !important; display:flex !important; flex-direction:column !important; overflow:hidden !important; z-index:110 !important; } body.app-page .app-main{ grid-column:2 !important; min-width:0 !important; } body.app-page .sidebar-nav{ flex:1 1 auto !important; min-height:0 !important; overflow-y:auto !important; overflow-x:hidden !important; overscroll-behavior:contain !important; scrollbar-width:thin; padding-bottom:12px !important; } body.app-page .sidebar-footer, body.app-page .sidebar-bottom{ flex:0 0 auto !important; margin-top:0 !important; } } html[data-theme="light"] body.app-page, html[data-theme="light"] body.app-page .app-main, html[data-theme="light"] body.app-page .dashboard, html[data-theme="light"] body.app-page .app-card, html[data-theme="light"] body.app-page .settings-card, html[data-theme="light"] body.app-page .metric-card, html[data-theme="light"] body.app-page .quick-action-grid a, html[data-theme="light"] body.app-page .data-table, html[data-theme="light"] body.app-page .data-table td, html[data-theme="light"] body.app-page .data-table th{ color:#17181d !important; } html[data-theme="light"] body.app-page :is( h1,h2,h3,h4,h5,h6, label,strong, .card-head, .workspace-head, .dashboard-hero ){ color:#17181d; } html[data-theme="light"] body.app-page .sidebar{ --text:#f4f4f7 !important; --text-2:#d7d8df !important; --muted:#aeb1bc !important; --line:rgba(255,255,255,.09) !important; background:linear-gradient(180deg,#15171e,#101218) !important; color:#f4f4f7 !important; border-right-color:rgba(255,255,255,.08) !important; } html[data-theme="light"] body.app-page .sidebar .brand, html[data-theme="light"] body.app-page .sidebar .brand span, html[data-theme="light"] body.app-page .sidebar-label{ color:#f4f4f7 !important; } html[data-theme="light"] body.app-page .sidebar-nav a, html[data-theme="light"] body.app-page .sidebar-footer a, html[data-theme="light"] body.app-page .sidebar-bottom a{ color:#c6c9d3 !important; } html[data-theme="light"] body.app-page .sidebar-nav a.active{ color:#fff !important; background:#1d2029 !important; border-color:rgba(141,99,255,.20) !important; } @media (hover:hover) and (pointer:fine){ html[data-theme="light"] body.app-page:not(.suppress-hover) .sidebar-nav a:hover, html[data-theme="light"] body.app-page:not(.suppress-hover) .sidebar-footer a:hover, html[data-theme="light"] body.app-page:not(.suppress-hover) .sidebar-bottom a:hover{ color:#fff !important; background:#1a1d25 !important; } } html[data-theme="light"] body.app-page :is( input,select,textarea, .button-secondary,.button-ghost,.button-quiet, .account-trigger,.notification-button,.status-dropdown-trigger ){ color:#17181d !important; } body.app-page :is( .button-primary, .button-danger, .notification-button b ){ color:#fff !important; } :root{ --ui-space-1:6px; --ui-space-2:10px; --ui-space-3:14px; --ui-space-4:18px; --ui-space-5:24px; --ui-space-6:30px; } body.app-page :is(.settings-grid,.admin-detail-grid,.billing-plan-grid){ align-items:start; } body.app-page .settings-grid > *{ align-self:start; height:auto; } body.app-page :is(.settings-card,.app-card) > :first-child{ margin-top:0; } body.app-page :is(.settings-card,.app-card) > :last-child{ margin-bottom:0; } body.app-page .settings-card{ display:block; padding:28px; } body.app-page .settings-card > h2, body.app-page .settings-card > h3, body.app-page .settings-card > h4{ margin:0; } body.app-page .settings-card > h3 + p, body.app-page .settings-card > h4 + p{ margin:10px 0 0; } body.app-page .settings-card > p + form, body.app-page .settings-card > p + .form-actions, body.app-page .settings-card > p + .activity-list, body.app-page .settings-card > h3 + form, body.app-page .settings-card > h3 + .activity-list, body.app-page .settings-card > h3 + .form-actions{ margin-top:20px; } body.app-page .settings-card form:not(.inline-create):not(.inline-form):not(.menu-form){ display:grid; grid-template-columns:minmax(0,1fr); gap:16px; align-items:start; align-content:start; } body.app-page .settings-card form:not(.inline-create):not(.inline-form):not(.menu-form) > .field, body.app-page .settings-card form:not(.inline-create):not(.inline-form):not(.menu-form) > .check{ margin:0; } body.app-page .settings-card form:not(.inline-create):not(.inline-form):not(.menu-form) > .button{ justify-self:start; margin-top:2px; } body.app-page .field{ display:grid; gap:8px; align-content:start; } body.app-page .field > label, body.app-page .field > .field-label-row{ margin:0; line-height:1.35; } body.app-page .field :is(input,select,textarea){ margin:0; } body.app-page .field small, body.app-page .form-help{ margin:0; line-height:1.5; } body.app-page .check{ min-height:24px; display:flex !important; align-items:center; gap:10px; margin:0; line-height:1.45; } body.app-page .check input{ margin:0 !important; flex:0 0 auto; } body.app-page .button{ min-height:42px; display:inline-flex; align-items:center; justify-content:center; line-height:1.2; } body.app-page .form-actions{ margin-top:20px; gap:10px; align-items:center; } body.app-page .settings-card > .theme-grid{ margin-top:14px; } body.app-page .settings-card > .settings-subheading{ margin-top:24px; } body.app-page .theme-choice{ min-height:96px; padding:16px; } body.app-page .activity-list{ display:grid; gap:0; } body.app-page .activity-row{ min-height:58px; padding:14px 0; display:flex; align-items:center; justify-content:space-between; gap:18px; } body.app-page .activity-row > :last-child{ text-align:right; } body.app-page .card-head, body.app-page .workspace-head, body.app-page .dashboard-section-head{ align-items:flex-start; } body.app-page .card-head > div, body.app-page .workspace-head > div, body.app-page .dashboard-section-head > div{ min-width:0; } body.app-page .card-head h2, body.app-page .card-head h3, body.app-page .workspace-head h1{ text-wrap:balance; } body.app-page .form-grid{ column-gap:18px; row-gap:18px; align-items:start; } body.app-page .assignment-forms, body.app-page .status-manager, body.app-page .comment-list, body.app-page .request-list{ align-content:start; } body.auth-page .field, .studio-site .field{ align-content:start; } body.auth-page .form-grid, .studio-site .form-grid{ align-items:start; } body.auth-page .check, .studio-site .check{ align-items:center; } @media(max-width:760px){ body.app-page .settings-card{ padding:20px; } body.app-page .settings-card form:not(.inline-create):not(.inline-form):not(.menu-form){ gap:15px; } body.app-page .settings-card > p + form, body.app-page .settings-card > h3 + form, body.app-page .settings-card > h3 + .activity-list{ margin-top:18px; } body.app-page .activity-row{ min-height:0; align-items:flex-start; flex-direction:column; gap:6px; } body.app-page .activity-row > :last-child{ text-align:left; } body.app-page .settings-card form:not(.inline-create):not(.inline-form):not(.menu-form) > .button{ width:100%; justify-self:stretch; } } body.app-page .skip-link{ position:fixed !important; left:16px !important; top:16px !important; z-index:1000 !important; opacity:0 !important; visibility:hidden !important; pointer-events:none !important; transform:translateY(-150%) !important; transition:opacity .14s ease,transform .14s ease,visibility 0s linear .14s !important; } body.app-page .skip-link:focus-visible{ opacity:1 !important; visibility:visible !important; pointer-events:auto !important; transform:none !important; transition-delay:0s !important; } body.app-page .skip-link:focus:not(:focus-visible){ opacity:0 !important; visibility:hidden !important; pointer-events:none !important; transform:translateY(-150%) !important; } @media (min-width:1021px){ body.app-page .sidebar{ padding:22px 16px 16px !important; } body.app-page .sidebar .brand{ flex:0 0 auto !important; min-height:44px !important; } body.app-page .sidebar-nav{ display:grid !important; grid-auto-flow:row !important; grid-auto-rows:minmax(42px,max-content) !important; align-content:start !important; align-items:stretch !important; flex:1 1 auto !important; gap:5px !important; margin-top:28px !important; padding:0 0 12px !important; } body.app-page .sidebar-nav a{ min-height:42px !important; height:auto !important; padding:0 12px !important; } body.app-page .sidebar-footer{ margin-top:auto !important; padding:12px 6px 0 !important; } } body.onboarding-page .dashboard{ width:min(1260px,100%) !important; padding-top:30px !important; padding-bottom:48px !important; gap:22px !important; } body.onboarding-page .dashboard-hero{ min-height:0 !important; margin:0 !important; padding:6px 0 2px !important; align-items:flex-start !important; } body.onboarding-page .dashboard-hero h1{ margin:0 0 10px !important; font-size:clamp(2.35rem,3.5vw,3.45rem) !important; line-height:1.02 !important; letter-spacing:-.035em !important; } body.onboarding-page .dashboard-hero p{ max-width:720px !important; line-height:1.55 !important; } body.onboarding-page .onboarding-grid{ display:grid !important; grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:16px !important; align-items:stretch !important; } body.onboarding-page .onboarding-grid .price-card{ min-height:0 !important; padding:26px !important; border-radius:18px !important; } body.onboarding-page .price-card .eyebrow{ margin-bottom:7px !important; } body.onboarding-page .price-card h2{ margin:0 !important; font-size:1.45rem !important; line-height:1.12 !important; letter-spacing:-.02em !important; } body.onboarding-page .price-value{ margin:30px 0 18px !important; gap:10px !important; align-items:flex-end !important; } body.onboarding-page .price-value strong{ font-size:clamp(3.25rem,4.8vw,4.7rem) !important; line-height:.9 !important; letter-spacing:-.045em !important; } body.onboarding-page .price-value span{ padding-bottom:4px !important; font-size:.72rem !important; line-height:1.3 !important; } body.onboarding-page .price-card > p{ margin:0 0 16px !important; line-height:1.55 !important; } body.onboarding-page .feature-list{ margin:2px 0 20px !important; padding-left:20px !important; line-height:1.48 !important; } body.onboarding-page .feature-list li + li{ margin-top:3px !important; } body.onboarding-page .price-card .button{ margin-top:18px !important; } body.onboarding-page .price-card .form-help{ margin:8px 0 0 !important; line-height:1.45 !important; } body.onboarding-page .onboarding-grid > .price-card{ align-self:stretch !important; } @media (max-width:1100px) and (min-width:761px){ body.onboarding-page .dashboard{ width:min(100%,960px) !important; } body.onboarding-page .onboarding-grid{ grid-template-columns:repeat(2,minmax(0,1fr)) !important; } } @media (max-width:760px){ body.onboarding-page .dashboard{ padding:18px 16px 34px !important; gap:18px !important; } body.onboarding-page .onboarding-grid{ grid-template-columns:1fr !important; gap:12px !important; } body.onboarding-page .onboarding-grid .price-card{ padding:22px !important; } body.onboarding-page .price-value{ margin:24px 0 15px !important; } body.onboarding-page .price-value strong{ font-size:clamp(3rem,15vw,4rem) !important; } } body.studio-home{ --home-dark:#090a0f; --home-dark-2:#0d0f15; --home-panel:#12141b; --home-paper:#f2efe9; --home-paper-2:#ebe7df; --home-ink:#17181d; --home-muted:#62656e; --home-line-dark:rgba(255,255,255,.10); --home-line-light:rgba(23,24,29,.11); background:var(--home-dark); } body.studio-home .container{width:min(1240px,calc(100% - 56px))} body.studio-home .button{border-radius:13px;min-height:48px;padding-inline:20px} body.studio-home .button-large{min-height:54px;padding-inline:24px} body.studio-home .button-primary{background:linear-gradient(135deg,#8d63f5 0%,#7751df 52%,#d06b86 125%);box-shadow:0 12px 34px rgba(106,73,207,.27),inset 0 1px 0 rgba(255,255,255,.20)} body.studio-home .button-secondary{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.14);color:#f5f5f7} @media (hover:hover) and (pointer:fine){ html:not(.suppress-hover) body.studio-home .button{transition:transform .22s var(--ease),background .22s ease,border-color .22s ease,box-shadow .22s ease} html:not(.suppress-hover) body.studio-home .button:hover{transform:translateY(-2px)} html:not(.suppress-hover) body.studio-home .button-primary:hover{box-shadow:0 18px 42px rgba(106,73,207,.34),inset 0 1px 0 rgba(255,255,255,.24)} html:not(.suppress-hover) body.studio-home .button-secondary:hover{background:rgba(255,255,255,.075);border-color:rgba(179,151,255,.34)} } body.studio-home .studio-header .brand{color:#f6f6f8} body.studio-home .studio-header .button-quiet{color:#c2c4cf} body.studio-home .studio-header.scrolled, html[data-theme="light"] body.studio-home .studio-header.scrolled{ background:rgba(9,10,15,.84)!important; border-color:rgba(255,255,255,.09)!important; box-shadow:0 8px 30px rgba(0,0,0,.08); backdrop-filter:blur(20px) saturate(130%); } body.studio-home .mobile-nav, html[data-theme="light"] body.studio-home .mobile-nav{background:#0d0f15!important;color:#f4f4f6!important;border-color:rgba(255,255,255,.09)!important} body.studio-home .home-hero-v10{ min-height:clamp(720px,92svh,930px)!important; padding:128px 0 72px!important; display:grid!important; align-items:center!important; overflow:hidden!important; background: radial-gradient(circle at 74% 34%,rgba(135,91,240,.16),transparent 23%), radial-gradient(circle at 17% 78%,rgba(232,104,91,.09),transparent 29%), linear-gradient(180deg,#08090d 0%,#0a0b10 100%)!important; border-bottom:0!important; } body.studio-home .home-hero-v10::before{ opacity:.22!important; background-size:84px 84px!important; mask-image:linear-gradient(to bottom,black 0%,rgba(0,0,0,.7) 62%,transparent 96%)!important; } body.studio-home .home-hero-v10-grid{ position:relative; z-index:2; display:grid; grid-template-columns:minmax(0,1.03fr) minmax(430px,.97fr); gap:clamp(60px,7vw,110px); align-items:center; } body.studio-home .home-hero-v10-copy{ width:100%!important; max-width:720px!important; padding:0!important; text-align:left!important; } body.studio-home .home-hero-v10-copy .eyebrow{color:#c7b9ee} body.studio-home .home-hero-v10-copy h1{ display:block!important; width:auto!important; max-width:720px!important; margin:22px 0 25px!important; padding:0!important; text-align:left!important; font-size:clamp(4.3rem,6.3vw,6.65rem)!important; line-height:.91!important; letter-spacing:-.058em!important; font-weight:790!important; } body.studio-home .home-hero-v10-copy h1>span{ display:block!important; width:auto!important; max-width:100%!important; padding:0!important; overflow:visible!important; white-space:normal!important; text-align:left!important; line-height:inherit!important; } body.studio-home .home-hero-v10-copy h1 .hero-subline{ margin-top:.08em!important; color:transparent!important; background:linear-gradient(104deg,#f08a72 0%,#cf77a7 45%,#9c7aff 100%)!important; background-clip:text!important; -webkit-background-clip:text!important; line-height:.96!important; letter-spacing:-.046em!important; font-weight:680!important; } body.studio-home .home-hero-v10-copy>p{ max-width:610px!important; margin:0!important; color:#b9bdc7!important; font-size:clamp(1.04rem,1.25vw,1.16rem)!important; line-height:1.66!important; } body.studio-home .home-hero-v10-copy .hero-actions{margin-top:30px!important;gap:11px!important} body.studio-home .home-hero-trust{ display:flex; flex-wrap:wrap; align-items:center; gap:10px 13px; margin-top:27px; color:#7f8490; font-size:.75rem; font-weight:720; letter-spacing:.03em; } body.studio-home .home-hero-trust i{width:3px;height:3px;border-radius:50%;background:#bd7581;opacity:.78} body.studio-home .home-workflow-preview{ position:relative; min-width:0; padding:24px; border:1px solid rgba(255,255,255,.10); border-radius:24px; background:linear-gradient(165deg,rgba(255,255,255,.055),rgba(255,255,255,.018)); box-shadow:0 32px 90px rgba(0,0,0,.36),inset 0 1px 0 rgba(255,255,255,.045); overflow:hidden; } body.studio-home .home-workflow-preview::before{ content:""; position:absolute; width:320px;height:320px;right:-160px;top:-160px;border-radius:50%; background:radial-gradient(circle,rgba(142,100,246,.18),transparent 68%); pointer-events:none; } body.studio-home .home-workflow-top{position:relative;z-index:1;display:flex;align-items:flex-start;justify-content:space-between;gap:20px;padding-bottom:20px;border-bottom:1px solid rgba(255,255,255,.09)} body.studio-home .home-workflow-top span,body.studio-home .home-workflow-top strong{display:block} body.studio-home .home-workflow-top span{margin-bottom:6px;color:#8f95a2;font-size:.69rem;font-weight:760;text-transform:uppercase;letter-spacing:.10em} body.studio-home .home-workflow-top strong{font-size:1.03rem;letter-spacing:-.02em} body.studio-home .home-workflow-top small{display:inline-flex;align-items:center;min-height:28px;padding:0 9px;border:1px solid rgba(255,255,255,.10);border-radius:999px;color:#bbb0dd;background:rgba(141,99,255,.07);font-size:.66rem;font-weight:800;letter-spacing:.06em} body.studio-home .home-workflow-stage{position:relative;z-index:1;display:grid;grid-template-columns:minmax(165px,.83fr) minmax(0,1.17fr);gap:18px;padding:22px 0} body.studio-home .home-workflow-frame{aspect-ratio:9/14;min-height:300px;padding:20px;display:flex;flex-direction:column;justify-content:flex-end;border:1px solid rgba(255,255,255,.10);border-radius:19px;background:radial-gradient(circle at 76% 18%,rgba(236,106,126,.27),transparent 27%),radial-gradient(circle at 18% 72%,rgba(133,89,239,.32),transparent 31%),linear-gradient(145deg,#252238,#11131a 62%,#0b0c11);box-shadow:0 18px 46px rgba(0,0,0,.26);overflow:hidden} body.studio-home .home-workflow-frame span{color:#d7c9ff;font-size:.64rem;font-weight:850;letter-spacing:.14em} body.studio-home .home-workflow-frame strong{max-width:9ch;margin-top:9px;color:#fff;font-size:1.7rem;line-height:.98;letter-spacing:-.045em} body.studio-home .home-workflow-frame small{margin-top:12px;color:rgba(255,255,255,.55);font-size:.69rem} body.studio-home .home-workflow-notes{display:grid;align-content:center;gap:9px} body.studio-home .home-workflow-notes>div{min-height:78px;padding:14px 14px;display:grid;grid-template-columns:29px 1fr;gap:11px;align-items:start;border:1px solid rgba(255,255,255,.08);border-radius:14px;background:rgba(255,255,255,.02)} body.studio-home .home-workflow-notes>div>span{width:27px;height:27px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.10);border-radius:9px;color:#a995e3;font-size:.64rem;font-weight:800} body.studio-home .home-workflow-notes p{margin:0} body.studio-home .home-workflow-notes strong,body.studio-home .home-workflow-notes small{display:block} body.studio-home .home-workflow-notes strong{font-size:.87rem;line-height:1.25} body.studio-home .home-workflow-notes small{margin-top:5px;color:#8e939f;font-size:.72rem;line-height:1.42} body.studio-home .home-workflow-timeline{position:relative;z-index:1;padding-top:18px;border-top:1px solid rgba(255,255,255,.09)} body.studio-home .timeline-labels{display:flex;justify-content:space-between;margin-bottom:10px;color:#777c88;font-size:.62rem;font-weight:760;letter-spacing:.08em;text-transform:uppercase} body.studio-home .timeline-track{height:8px;display:grid;grid-template-columns:1.3fr .7fr 1.1fr .65fr 1.25fr;gap:4px} body.studio-home .timeline-track i{display:block;border-radius:4px;background:#3c3f49} body.studio-home .timeline-track i:nth-child(2){background:#7559bd} body.studio-home .timeline-track i:nth-child(3){background:#a05d8b} body.studio-home .timeline-track i:nth-child(4){background:#6656a5} body.studio-home .timeline-track i:nth-child(5){background:#d37275} body.studio-home .timeline-wave{height:23px;margin-top:9px;display:flex;align-items:center;gap:3px;opacity:.55} body.studio-home .timeline-wave b{width:3px;border-radius:3px;background:#7f8390;height:8px} body.studio-home .timeline-wave b:nth-child(3n/**/+1){height:16px}body.studio-home .timeline-wave b:nth-child(4n/**/+2){height:21px}body.studio-home .timeline-wave b:nth-child(5n){height:12px} html:not(.reduce-motion) body.studio-home .home-workflow-preview.visible{animation:homePreviewSettle .8s cubic-bezier(.2,.8,.2,1) both} html:not(.reduce-motion) body.studio-home .timeline-track i{animation:timelinePulse 4.8s ease-in-out infinite} html:not(.reduce-motion) body.studio-home .timeline-track i:nth-child(2){animation-delay:-.7s}html:not(.reduce-motion) body.studio-home .timeline-track i:nth-child(3){animation-delay:-1.4s}html:not(.reduce-motion) body.studio-home .timeline-track i:nth-child(4){animation-delay:-2.1s}html:not(.reduce-motion) body.studio-home .timeline-track i:nth-child(5){animation-delay:-2.8s} @keyframes homePreviewSettle{from{opacity:0;transform:translate3d(0,22px,0) scale(.985)}to{opacity:1;transform:none}} @keyframes timelinePulse{0%,100%{filter:brightness(.92)}50%{filter:brightness(1.18)}} body.studio-home .home-capability-strip{border-block:1px solid rgba(255,255,255,.075);background:#0c0d12} body.studio-home .home-capability-strip .container{min-height:64px;display:grid;grid-template-columns:repeat(5,1fr);align-items:center} body.studio-home .home-capability-strip span{min-width:0;padding:0 18px;display:flex;gap:10px;align-items:center;justify-content:center;color:#6f7480;font-size:.66rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase;border-left:1px solid rgba(255,255,255,.065)} body.studio-home .home-capability-strip span:last-child{border-right:1px solid rgba(255,255,255,.065)} body.studio-home .home-capability-strip b{color:#c7c9d1;font-size:.7rem;letter-spacing:.04em} body.studio-home .home-proof-v10, html[data-theme="light"] body.studio-home .home-proof-v10{padding:104px 0!important;background:var(--home-paper)!important;color:var(--home-ink)!important;border:0!important} body.studio-home .home-proof-v10 .home-proof-grid{grid-template-columns:minmax(260px,.72fr) minmax(0,1.28fr)!important;gap:clamp(56px,8vw,112px)!important;align-items:center!important} body.studio-home .home-proof-v10 .home-proof-photo{width:min(100%,350px)!important;max-width:350px!important;justify-self:end!important;border-radius:18px!important;border:1px solid rgba(20,20,24,.12)!important;background:#0c0d11!important;box-shadow:0 28px 65px rgba(40,32,24,.15)!important;transform:rotate(-1.2deg)} body.studio-home .home-proof-v10 .home-proof-copy{max-width:710px} body.studio-home .home-proof-v10 .eyebrow{color:#7657b3!important} body.studio-home .home-proof-v10 .home-proof-copy h2{margin:12px 0 20px!important;max-width:13.5ch!important;color:var(--home-ink)!important;font-size:clamp(3.1rem,5vw,5.15rem)!important;line-height:.96!important;letter-spacing:-.052em!important} body.studio-home .home-proof-v10 .home-proof-copy>p{max-width:590px!important;color:#5f626b!important;font-size:1.02rem!important;line-height:1.72!important} body.studio-home .home-proof-v10 .home-proof-stats{max-width:690px!important;margin-top:31px!important;display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:10px!important} body.studio-home .home-proof-v10 .home-proof-stats>div{padding:18px 18px 16px!important;border:1px solid var(--home-line-light)!important;border-radius:13px!important;background:rgba(255,255,255,.52)!important;box-shadow:none!important} body.studio-home .home-proof-v10 .home-proof-stats strong{color:var(--home-ink)!important;font-size:clamp(1.8rem,2.7vw,2.5rem)!important;line-height:1!important} body.studio-home .home-proof-v10 .home-proof-stats span{margin-top:6px!important;color:#696c75!important;font-size:.68rem!important;letter-spacing:.07em!important} body.studio-home .selected-work-v10, html[data-theme="light"] body.studio-home .selected-work-v10{padding:104px 0 96px!important;background:var(--home-dark)!important;color:#f5f5f7!important;border:0!important;overflow:hidden} body.studio-home .selected-work-v10-head{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(300px,.62fr);gap:clamp(54px,8vw,110px);align-items:end;margin-bottom:40px} body.studio-home .selected-work-v10-head h2{margin:12px 0 0;max-width:12ch;color:#f5f5f7;font-size:clamp(3.15rem,5.2vw,5.25rem);line-height:.96;letter-spacing:-.052em} body.studio-home .selected-work-v10-head>p{max-width:390px;margin:0;color:#9ea3ae;font-size:.98rem;line-height:1.68} body.studio-home .selected-work-v10-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px} body.studio-home .work-piece{position:relative;min-width:0;aspect-ratio:9/14;overflow:hidden;border:1px solid rgba(255,255,255,.10);border-radius:19px;background:#12141a;box-shadow:0 18px 46px rgba(0,0,0,.20);isolation:isolate} body.studio-home .work-piece img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.015);transition:transform .55s cubic-bezier(.2,.75,.2,1),filter .35s ease} body.studio-home .work-piece-shade{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(4,5,8,.05) 0%,rgba(4,5,8,.05) 45%,rgba(4,5,8,.82) 100%);transition:background .35s ease} body.studio-home .work-piece-index{position:absolute;z-index:2;top:15px;left:15px;min-width:31px;height:31px;padding:0 8px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.16);border-radius:9px;background:rgba(8,10,14,.44);backdrop-filter:blur(8px);color:#e1d9f5;font-size:.63rem;font-weight:800;letter-spacing:.06em} body.studio-home .work-piece-meta{position:absolute;z-index:2;left:18px;right:18px;bottom:17px;display:flex;align-items:end;justify-content:space-between;gap:14px} body.studio-home .work-piece-meta strong{color:#fff;font-size:clamp(1.2rem,2vw,1.7rem);line-height:1;letter-spacing:-.035em} body.studio-home .work-piece-meta small{color:#d8d2e5;font-size:.69rem;font-weight:760;white-space:nowrap;opacity:.72;transition:opacity .25s ease,transform .25s ease} @media (hover:hover) and (pointer:fine){ html:not(.reduce-motion):not(.suppress-hover) body.studio-home .work-piece{transition:transform .3s var(--ease),border-color .3s ease,box-shadow .3s ease} html:not(.reduce-motion):not(.suppress-hover) body.studio-home .work-piece:hover{transform:translateY(-6px);border-color:rgba(187,156,255,.34);box-shadow:0 30px 64px rgba(0,0,0,.32)} html:not(.reduce-motion):not(.suppress-hover) body.studio-home .work-piece:hover img{transform:scale(1.055)} html:not(.reduce-motion):not(.suppress-hover) body.studio-home .work-piece:hover .work-piece-shade{background:linear-gradient(180deg,rgba(4,5,8,.01),rgba(4,5,8,.02) 40%,rgba(4,5,8,.76) 100%)} html:not(.reduce-motion):not(.suppress-hover) body.studio-home .work-piece:hover .work-piece-meta small{opacity:1;transform:translateX(2px)} } body.studio-home .selected-work-v10-foot{display:flex;justify-content:flex-end;margin-top:24px;padding-top:20px;border-top:1px solid rgba(255,255,255,.08)} body.studio-home .selected-work-v10 .text-link{color:#f0edf8;text-decoration-color:rgba(240,237,248,.42)} body.studio-home .home-offer-section, html[data-theme="light"] body.studio-home .home-offer-section{padding:82px 0 36px!important;background:var(--home-paper)!important;color:var(--home-ink)!important;border:0!important} body.studio-home .home-offer-card{display:grid;grid-template-columns:minmax(260px,1.15fr) minmax(175px,.55fr) minmax(280px,.9fr) auto;gap:28px;align-items:center;padding:31px 32px;border:1px solid var(--home-line-light);border-radius:20px;background:rgba(255,255,255,.52);box-shadow:0 15px 42px rgba(56,45,35,.065)} body.studio-home .home-offer-copy .eyebrow{color:#7657b3} body.studio-home .home-offer-copy h2{margin:11px 0 10px;max-width:16ch;color:var(--home-ink);font-size:clamp(1.8rem,2.8vw,2.75rem);line-height:1;letter-spacing:-.04em} body.studio-home .home-offer-copy p{max-width:430px;margin:0;color:#666970;font-size:.9rem;line-height:1.58} body.studio-home .home-offer-price{padding-left:24px;border-left:1px solid var(--home-line-light)} body.studio-home .home-offer-price span,body.studio-home .home-offer-price strong,body.studio-home .home-offer-price small{display:block} body.studio-home .home-offer-price span{color:#777a82;font-size:.67rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase} body.studio-home .home-offer-price strong{margin-top:6px;color:var(--home-ink);font-size:2.8rem;line-height:.92;letter-spacing:-.055em} body.studio-home .home-offer-price small{margin-top:7px;color:#6b6e76;font-size:.7rem;font-style:italic} body.studio-home .home-offer-includes{display:flex;flex-wrap:wrap;gap:7px} body.studio-home .home-offer-includes span{padding:7px 9px;border:1px solid rgba(23,24,29,.10);border-radius:8px;background:#f8f6f2;color:#555860;font-size:.68rem;font-weight:730} body.studio-home .home-offer-card>.button{background:#17191f;border-color:#17191f;color:#fff;box-shadow:none} @media (hover:hover) and (pointer:fine){html:not(.suppress-hover) body.studio-home .home-offer-card>.button:hover{background:#262832;border-color:#262832}} body.studio-home .home-services-v10, html[data-theme="light"] body.studio-home .home-services-v10{padding:78px 0 108px!important;background:var(--home-paper)!important;color:var(--home-ink)!important;border:0!important} body.studio-home .home-services-v10 .studio-section-head{align-items:end;margin-bottom:36px} body.studio-home .home-services-v10 .eyebrow{color:#7657b3!important} body.studio-home .home-services-v10 .studio-section-head h2{max-width:12ch;color:var(--home-ink)!important;font-size:clamp(3rem,4.8vw,4.8rem);line-height:.98;letter-spacing:-.048em} body.studio-home .home-services-v10 .studio-section-head p{max-width:530px;color:#60636b!important;line-height:1.67} body.studio-home .home-services-v10 .studio-section-head .text-link{color:#23242a!important;text-decoration-color:rgba(35,36,42,.35)!important} body.studio-home .home-services-v10 .studio-service-grid{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:12px!important} body.studio-home .home-services-v10 .studio-service-card{min-height:240px!important;padding:27px!important;border:1px solid var(--home-line-light)!important;border-radius:17px!important;background:rgba(255,255,255,.48)!important;color:var(--home-ink)!important;box-shadow:none!important;transform:none!important} body.studio-home .home-services-v10 .studio-service-card::before{display:none!important} body.studio-home .home-services-v10 .studio-service-card>span{color:#785bb2!important;font-size:.7rem!important} body.studio-home .home-services-v10 .studio-service-card h3{margin-top:auto!important;color:var(--home-ink)!important;font-size:clamp(1.8rem,2.8vw,2.55rem)!important;line-height:1!important;letter-spacing:-.04em!important} body.studio-home .home-services-v10 .studio-service-card p{max-width:460px;color:#64676f!important;font-size:.93rem!important;line-height:1.58!important} body.studio-home .home-services-v10 .service-tags i{border-color:rgba(23,24,29,.11)!important;background:#f8f6f2!important;color:#60636b!important} @media (hover:hover) and (pointer:fine){html:not(.reduce-motion):not(.suppress-hover) body.studio-home .home-services-v10 .studio-service-card{transition:transform .26s var(--ease),border-color .26s ease,background .26s ease,box-shadow .26s ease}html:not(.reduce-motion):not(.suppress-hover) body.studio-home .home-services-v10 .studio-service-card:hover{transform:translateY(-4px)!important;border-color:rgba(117,84,184,.24)!important;background:#f8f6f2!important;box-shadow:0 20px 42px rgba(47,37,29,.07)!important}} body.studio-home .home-process-v10, html[data-theme="light"] body.studio-home .home-process-v10{padding:108px 0 82px!important;background:var(--home-dark)!important;color:#f5f5f7!important;border:0!important} body.studio-home .home-process-v10 .studio-process-grid{grid-template-columns:minmax(310px,.76fr) minmax(0,1.24fr)!important;gap:clamp(64px,8vw,118px)!important;align-items:start!important} body.studio-home .home-process-v10 .studio-process-copy{position:sticky;top:116px;padding:0!important} body.studio-home .home-process-v10 .studio-process-copy .eyebrow{margin-bottom:18px;color:#bca9ed!important} body.studio-home .home-process-v10 .studio-process-copy h2{margin:0 0 21px!important;max-width:10.5ch!important;color:#f5f5f7!important;font-size:clamp(3.05rem,4.6vw,4.75rem)!important;line-height:.98!important;letter-spacing:-.05em!important} body.studio-home .home-process-v10 .studio-process-copy p{max-width:450px!important;color:#a8adb8!important;font-size:.98rem!important;line-height:1.65!important} body.studio-home .home-process-v10 .studio-process-copy .button{margin-top:25px!important} body.studio-home .home-process-v10 .studio-process-list{gap:0!important;border-top:1px solid rgba(255,255,255,.09)} body.studio-home .home-process-v10 .studio-process-list li{min-height:150px!important;padding:27px 4px!important;grid-template-columns:36px minmax(0,1fr) auto!important;gap:20px!important;align-items:center!important;border:0!important;border-bottom:1px solid rgba(255,255,255,.09)!important;border-radius:0!important;background:transparent!important;opacity:1!important;box-shadow:none!important} body.studio-home .home-process-v10 .studio-process-list li::before{display:none!important} body.studio-home .home-process-v10 .studio-process-list li>span{margin:0!important;color:#7967a6!important;font-size:.72rem!important} body.studio-home .home-process-v10 .studio-process-list h3{margin:0 0 8px!important;color:#f3f3f5!important;font-size:clamp(1.75rem,2.4vw,2.35rem)!important;line-height:1.04!important;letter-spacing:-.035em!important} body.studio-home .home-process-v10 .studio-process-list p{max-width:560px;margin:0!important;color:#9297a2!important;font-size:.91rem!important;line-height:1.55!important} body.studio-home .home-process-v10 .studio-process-list b{min-width:72px;margin:0!important;padding:7px 10px!important;border:1px solid rgba(255,255,255,.10)!important;border-radius:8px!important;background:rgba(255,255,255,.025)!important;color:#9fa4af!important;font-size:.62rem!important;letter-spacing:.06em!important} @media (hover:hover) and (pointer:fine){html:not(.reduce-motion):not(.suppress-hover) body.studio-home .home-process-v10 .studio-process-list li{transition:padding-left .26s var(--ease),background .26s ease}html:not(.reduce-motion):not(.suppress-hover) body.studio-home .home-process-v10 .studio-process-list li:hover{padding-left:12px!important;background:linear-gradient(90deg,rgba(141,99,255,.055),transparent 64%)!important}} body.studio-home .home-human-v10, html[data-theme="light"] body.studio-home .home-human-v10{padding:74px 0 108px!important;background:var(--home-dark)!important;color:#f5f5f7!important;border:0!important} body.studio-home .home-human-v10::before{content:"";display:block;width:min(1240px,calc(100% - 56px));height:1px;margin:0 auto 74px;background:rgba(255,255,255,.08)} body.studio-home .home-human-v10 .studio-section-head{margin-bottom:34px!important} body.studio-home .home-human-v10 .studio-section-head h2{max-width:11ch!important;color:#f5f5f7!important;font-size:clamp(3rem,4.8vw,4.7rem)!important;line-height:.98!important;letter-spacing:-.048em!important} body.studio-home .home-human-v10 .studio-section-head p{max-width:560px!important;color:#a0a5b0!important;line-height:1.65!important} body.studio-home .home-human-v10 .studio-section-head .text-link{color:#efedf6!important;text-decoration-color:rgba(239,237,246,.38)!important} body.studio-home .home-human-v10-grid{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:11px!important} body.studio-home .home-human-v10 .human-principle{min-height:220px!important;padding:25px!important;display:flex!important;flex-direction:column!important;border:1px solid rgba(255,255,255,.09)!important;border-radius:16px!important;background:#101218!important;color:#f5f5f7!important;box-shadow:none!important;transform:none!important} body.studio-home .home-human-v10 .human-principle>span{color:#8e75c8!important;font-size:.68rem!important} body.studio-home .home-human-v10 .human-principle h3{margin-top:auto!important;color:#f5f5f7!important;font-size:clamp(1.65rem,2.4vw,2.2rem)!important;line-height:1.04!important;letter-spacing:-.035em!important} body.studio-home .home-human-v10 .human-principle p{color:#969ba7!important;font-size:.91rem!important;line-height:1.58!important} @media (hover:hover) and (pointer:fine){html:not(.reduce-motion):not(.suppress-hover) body.studio-home .home-human-v10 .human-principle{transition:transform .26s var(--ease),border-color .26s ease,background .26s ease}html:not(.reduce-motion):not(.suppress-hover) body.studio-home .home-human-v10 .human-principle:hover{transform:translateY(-4px)!important;border-color:rgba(179,151,255,.25)!important;background:#13151d!important}} body.studio-home .home-final-v10, html[data-theme="light"] body.studio-home .home-final-v10{padding:104px 0 116px!important;background:var(--home-paper)!important;color:var(--home-ink)!important;border:0!important} body.studio-home .home-final-v10 .studio-final-card{min-height:440px!important;padding:56px clamp(32px,6vw,74px)!important;display:flex!important;flex-direction:column!important;align-items:flex-start!important;justify-content:center!important;gap:0!important;border-radius:22px!important;overflow:hidden!important;background:radial-gradient(circle at 77% 30%,rgba(142,99,255,.23),transparent 25%),radial-gradient(circle at 10% 82%,rgba(235,103,90,.13),transparent 25%),linear-gradient(145deg,#14161e,#0b0c11)!important;color:#f5f5f7!important;border:1px solid rgba(255,255,255,.10)!important;box-shadow:0 30px 70px rgba(43,34,27,.13)!important} body.studio-home .home-final-v10 .studio-final-card::after{right:4%!important;bottom:-37%!important;opacity:.62} body.studio-home .home-final-v10 .eyebrow{color:#bbaee0!important} body.studio-home .home-final-v10 .studio-final-card h2{margin:18px 0 18px!important;max-width:12ch!important;color:#fff!important;font-size:clamp(3.2rem,5.2vw,5.35rem)!important;line-height:.94!important;letter-spacing:-.052em!important} body.studio-home .home-final-v10 .studio-final-card>p{position:relative;z-index:1;max-width:530px;margin:0;color:#aaaeba;font-size:.98rem;line-height:1.62} body.studio-home .home-final-v10 .hero-actions{margin-top:27px!important} html.reveal-enabled:not(.reduce-motion) body.studio-home .reveal{transform:translate3d(0,18px,0);filter:none;transition:opacity .65s cubic-bezier(.2,.75,.2,1),transform .65s cubic-bezier(.2,.75,.2,1)} html.reveal-enabled:not(.reduce-motion) body.studio-home .reveal.visible{transform:none} @media (max-width:1100px){ body.studio-home .home-hero-v10{min-height:auto!important;padding:120px 0 78px!important} body.studio-home .home-hero-v10-grid{grid-template-columns:1fr;gap:48px} body.studio-home .home-hero-v10-copy{max-width:760px!important} body.studio-home .home-hero-v10-copy h1{max-width:760px!important;font-size:clamp(4rem,8.5vw,5.8rem)!important} body.studio-home .home-workflow-preview{width:min(100%,720px)} body.studio-home .home-proof-v10 .home-proof-grid{gap:56px!important} body.studio-home .home-offer-card{grid-template-columns:minmax(0,1fr) minmax(170px,.45fr);gap:24px} body.studio-home .home-offer-includes{grid-column:1/2} body.studio-home .home-offer-card>.button{grid-column:2;grid-row:2;justify-self:start} body.studio-home .home-process-v10 .studio-process-grid{gap:58px!important} } @media (max-width:860px){ body.studio-home .container{width:min(100% - 36px,1240px)} body.studio-home .home-capability-strip .container{grid-template-columns:repeat(5,auto);overflow-x:auto;justify-content:start;scrollbar-width:none} body.studio-home .home-capability-strip .container::-webkit-scrollbar{display:none} body.studio-home .home-capability-strip span{min-width:max-content;padding:0 20px} body.studio-home .home-proof-v10 .home-proof-grid{grid-template-columns:1fr!important;gap:34px!important} body.studio-home .home-proof-v10 .home-proof-photo{justify-self:center!important;width:min(100%,300px)!important} body.studio-home .home-proof-v10 .home-proof-copy{max-width:700px} body.studio-home .selected-work-v10-head{grid-template-columns:1fr;gap:20px} body.studio-home .selected-work-v10-head>p{max-width:560px} body.studio-home .selected-work-v10-grid{gap:11px} body.studio-home .home-services-v10 .studio-service-grid{grid-template-columns:1fr 1fr!important} body.studio-home .home-process-v10 .studio-process-grid{grid-template-columns:1fr!important;gap:44px!important} body.studio-home .home-process-v10 .studio-process-copy{position:relative;top:auto;max-width:650px} body.studio-home .home-process-v10 .studio-process-copy h2{max-width:12ch!important} body.studio-home .home-human-v10-grid{grid-template-columns:1fr 1fr!important} body.studio-home .home-human-v10-grid .human-principle:last-child{grid-column:1/-1} } @media (max-width:640px){ body.studio-home .container{width:calc(100% - 28px)} body.studio-home .home-hero-v10{padding:106px 0 58px!important} body.studio-home .home-hero-v10-grid{gap:34px} body.studio-home .home-hero-v10-copy h1{margin:17px 0 20px!important;font-size:clamp(3.1rem,14vw,4.25rem)!important;line-height:.93!important} body.studio-home .home-hero-v10-copy>p{font-size:.98rem!important;line-height:1.58!important} body.studio-home .home-hero-v10-copy .hero-actions{margin-top:25px!important;display:grid;grid-template-columns:1fr} body.studio-home .home-hero-v10-copy .hero-actions .button{width:100%} body.studio-home .home-hero-trust{gap:8px 9px;margin-top:22px;font-size:.68rem} body.studio-home .home-workflow-preview{padding:17px;border-radius:18px} body.studio-home .home-workflow-stage{grid-template-columns:minmax(120px,.72fr) minmax(0,1.28fr);gap:10px;padding:17px 0} body.studio-home .home-workflow-frame{min-height:245px;padding:14px;border-radius:14px} body.studio-home .home-workflow-frame strong{font-size:1.32rem} body.studio-home .home-workflow-notes{gap:7px} body.studio-home .home-workflow-notes>div{min-height:0;padding:10px;grid-template-columns:24px 1fr;gap:8px;border-radius:11px} body.studio-home .home-workflow-notes>div>span{width:23px;height:23px;border-radius:7px;font-size:.58rem} body.studio-home .home-workflow-notes strong{font-size:.76rem} body.studio-home .home-workflow-notes small{font-size:.64rem;line-height:1.32} body.studio-home .home-capability-strip .container{width:100%} body.studio-home .home-capability-strip span{min-height:54px;padding:0 16px} body.studio-home .home-proof-v10{padding:72px 0!important} body.studio-home .home-proof-v10 .home-proof-photo{width:min(100%,245px)!important} body.studio-home .home-proof-v10 .home-proof-copy h2{max-width:none!important;font-size:clamp(2.55rem,11vw,3.55rem)!important;line-height:.99!important} body.studio-home .home-proof-v10 .home-proof-copy>p{font-size:.94rem!important;line-height:1.62!important} body.studio-home .home-proof-v10 .home-proof-stats{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:7px!important;margin-top:24px!important} body.studio-home .home-proof-v10 .home-proof-stats>div{padding:13px 9px 12px!important} body.studio-home .home-proof-v10 .home-proof-stats strong{font-size:1.4rem!important} body.studio-home .home-proof-v10 .home-proof-stats span{font-size:.57rem!important;letter-spacing:.04em!important} body.studio-home .selected-work-v10{padding:72px 0 68px!important} body.studio-home .selected-work-v10-head{margin-bottom:28px} body.studio-home .selected-work-v10-head h2{max-width:none;font-size:clamp(2.55rem,11vw,3.55rem)} body.studio-home .selected-work-v10-head>p{font-size:.93rem;line-height:1.58} body.studio-home .selected-work-v10-grid{display:flex;overflow-x:auto;gap:10px;padding-bottom:4px;scroll-snap-type:x mandatory;scrollbar-width:none} body.studio-home .selected-work-v10-grid::-webkit-scrollbar{display:none} body.studio-home .work-piece{flex:0 0 min(76vw,300px);scroll-snap-align:start;border-radius:16px} body.studio-home .work-piece-meta{left:14px;right:14px;bottom:14px} body.studio-home .work-piece-meta strong{font-size:1.22rem} body.studio-home .work-piece-meta small{font-size:.64rem} body.studio-home .selected-work-v10-foot{justify-content:flex-start;margin-top:19px;padding-top:16px} body.studio-home .home-offer-section{padding:60px 0 26px!important} body.studio-home .home-offer-card{grid-template-columns:1fr;gap:20px;padding:23px;border-radius:16px} body.studio-home .home-offer-copy h2{font-size:2rem} body.studio-home .home-offer-price{padding:18px 0 0;border-left:0;border-top:1px solid var(--home-line-light)} body.studio-home .home-offer-price strong{font-size:2.6rem} body.studio-home .home-offer-includes,body.studio-home .home-offer-card>.button{grid-column:auto;grid-row:auto} body.studio-home .home-offer-card>.button{width:100%;justify-self:stretch} body.studio-home .home-services-v10{padding:62px 0 78px!important} body.studio-home .home-services-v10 .studio-section-head{align-items:flex-start;gap:20px;margin-bottom:26px} body.studio-home .home-services-v10 .studio-section-head h2{max-width:none;font-size:clamp(2.55rem,11vw,3.55rem)} body.studio-home .home-services-v10 .studio-service-grid{grid-template-columns:1fr!important;gap:9px!important} body.studio-home .home-services-v10 .studio-service-card{min-height:210px!important;padding:22px!important} body.studio-home .home-services-v10 .studio-service-card h3{font-size:1.85rem!important} body.studio-home .home-process-v10{padding:78px 0 66px!important} body.studio-home .home-process-v10 .studio-process-copy h2{max-width:none!important;font-size:clamp(2.55rem,11vw,3.55rem)!important} body.studio-home .home-process-v10 .studio-process-list li{min-height:0!important;padding:20px 0!important;grid-template-columns:28px minmax(0,1fr)!important;gap:12px!important;align-items:start!important} body.studio-home .home-process-v10 .studio-process-list b{grid-column:2;justify-self:start;margin-top:4px!important} body.studio-home .home-process-v10 .studio-process-list h3{font-size:1.72rem!important} body.studio-home .home-human-v10{padding:54px 0 78px!important} body.studio-home .home-human-v10::before{width:calc(100% - 28px);margin-bottom:54px} body.studio-home .home-human-v10 .studio-section-head{align-items:flex-start;gap:18px;margin-bottom:26px!important} body.studio-home .home-human-v10 .studio-section-head h2{max-width:none!important;font-size:clamp(2.55rem,11vw,3.55rem)!important} body.studio-home .home-human-v10-grid{grid-template-columns:1fr!important;gap:9px!important} body.studio-home .home-human-v10-grid .human-principle:last-child{grid-column:auto} body.studio-home .home-human-v10 .human-principle{min-height:195px!important;padding:22px!important} body.studio-home .home-final-v10{padding:72px 0 82px!important} body.studio-home .home-final-v10 .studio-final-card{min-height:390px!important;padding:37px 23px!important;border-radius:18px!important} body.studio-home .home-final-v10 .studio-final-card h2{max-width:none!important;font-size:clamp(2.65rem,11.5vw,3.65rem)!important} body.studio-home .home-final-v10 .studio-final-card>p{font-size:.92rem} body.studio-home .home-final-v10 .hero-actions{width:100%;display:grid!important;grid-template-columns:1fr!important;gap:9px!important} body.studio-home .home-final-v10 .hero-actions .button{width:100%!important} } @media (max-width:390px){ body.studio-home .home-workflow-stage{grid-template-columns:1fr} body.studio-home .home-workflow-frame{width:154px;min-height:240px;margin-inline:auto} body.studio-home .home-workflow-notes>div{grid-template-columns:24px 1fr} body.studio-home .home-proof-v10 .home-proof-stats{grid-template-columns:1fr!important} body.studio-home .home-proof-v10 .home-proof-stats>div{padding:14px 15px!important} body.studio-home .home-proof-v10 .home-proof-stats span{font-size:.62rem!important} } html.reduce-motion body.studio-home .home-workflow-preview, html.reduce-motion body.studio-home .timeline-track i, html.reduce-motion body.studio-home .work-piece, html.reduce-motion body.studio-home .work-piece img{animation:none!important;transition:none!important;transform:none!important} body.studio-home{ --v11-dark:#090a0f; --v11-dark-2:#0e1016; --v11-paper:#f2efe9; --v11-paper-2:#f7f4ef; --v11-ink:#17181d; --v11-muted:#62656e; --v11-light-muted:#a7abb5; font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif; } body.studio-home .container{width:min(1180px,calc(100% - 56px));} body.studio-home h1, body.studio-home h2, body.studio-home h3{overflow:visible;word-break:normal;overflow-wrap:normal;text-wrap:balance;} body.studio-home .eyebrow{font-size:.74rem;font-weight:700;letter-spacing:.09em;line-height:1.25;} body.studio-home .home-v11-hero{ min-height:calc(100svh - 58px)!important; padding:128px 0 92px!important; display:grid!important; align-items:center!important; overflow:hidden!important; background: radial-gradient(circle at 72% 32%,rgba(132,88,236,.15),transparent 25%), radial-gradient(circle at 18% 75%,rgba(229,105,91,.08),transparent 29%), linear-gradient(180deg,#08090d 0%,#0a0b10 100%)!important; border:0!important; } body.studio-home .home-v11-hero::before{opacity:.20!important;} body.studio-home .home-v11-hero-inner{display:flex;align-items:center;justify-content:center;} body.studio-home .home-v11-hero-copy{width:min(100%,1080px);text-align:center;} body.studio-home .home-v11-hero-copy .eyebrow{color:#c6b7ee;} body.studio-home .home-v11-hero-copy h1{ margin:0 auto 25px!important; padding:.02em 0 .08em!important; max-width:1080px!important; color:#f5f5f7!important; font-size:clamp(4.2rem,7vw,7.2rem)!important; line-height:.94!important; letter-spacing:-.055em!important; font-weight:700!important; text-align:center!important; } body.studio-home .home-v11-hero-copy h1>span{ display:block!important; width:fit-content!important; max-width:100%!important; margin:.08em auto 0!important; padding:.01em .03em .08em!important; color:transparent!important; background:linear-gradient(104deg,#f08a72 0%,#cf77a7 45%,#9c7aff 100%)!important; background-clip:text!important; -webkit-background-clip:text!important; font-size:.84em!important; letter-spacing:-.052em!important; line-height:.98!important; white-space:nowrap!important; } body.studio-home .home-v11-hero-copy>p{max-width:680px!important;margin:0 auto!important;color:#b8bcc6!important;font-size:1.05rem!important;line-height:1.68!important;} body.studio-home .home-v11-hero-copy .hero-actions{margin-top:31px!important;justify-content:center!important;gap:11px!important;} body.studio-home .home-v11-hero-note{margin-top:25px;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:9px 12px;color:#818691;font-size:.76rem;font-weight:600;letter-spacing:.01em;} body.studio-home .home-v11-hero-note i{width:3px;height:3px;border-radius:50%;background:#bd7581;} body.studio-home .home-v11-marquee{height:58px;background:#0c0d12;border-block:1px solid rgba(255,255,255,.075);} body.studio-home .home-v11-marquee>.home-marquee-track{height:58px;animation-duration:30s;} body.studio-home .home-v11-marquee .home-marquee-group{height:58px;} body.studio-home .home-v11-marquee .home-marquee-group>span{display:flex;align-items:center;justify-content:center;gap:9px;color:#c8cad1;font-size:.72rem;font-weight:650;letter-spacing:.035em;text-transform:uppercase;} body.studio-home .home-v11-marquee .home-marquee-group>span small{color:#777c88;font-size:.61rem;font-weight:650;letter-spacing:.06em;} body.studio-home .home-v11-marquee .home-marquee-group>span strong{font-size:inherit;font-weight:700;letter-spacing:inherit;} body.studio-home .home-v11-section{padding:104px 0;} body.studio-home .home-v11-section-head{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(300px,.62fr);gap:clamp(54px,8vw,100px);align-items:end;margin-bottom:42px;} body.studio-home .home-v11-section-head h2{margin:11px 0 0;max-width:12.5ch;font-size:clamp(3.15rem,5vw,5.05rem);line-height:.99;letter-spacing:-.049em;font-weight:700;} body.studio-home .home-v11-section-head>p{max-width:420px;margin:0;font-size:.98rem;line-height:1.68;} body.studio-home .home-v11-section-link{margin-top:28px;display:flex;justify-content:flex-end;} body.studio-home .home-v11-work{background:var(--v11-paper);color:var(--v11-ink);} body.studio-home .home-v11-work .eyebrow{color:#7558b0;} body.studio-home .home-v11-work .home-v11-section-head h2{color:var(--v11-ink);} body.studio-home .home-v11-work .home-v11-section-head>p{color:#666970;} body.studio-home .home-v11-work .home-v11-section-head, body.studio-home .home-v11-work-grid, body.studio-home .home-v11-work-foot{width:min(100%,960px);margin-inline:auto;} body.studio-home .home-v11-work-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;} body.studio-home .home-v11-video{min-width:0;color:var(--v11-ink);} body.studio-home .home-v11-video-media{position:relative;aspect-ratio:9/16;overflow:hidden;border:1px solid rgba(23,24,29,.11);border-radius:16px;background:#dcd8d1;box-shadow:0 10px 30px rgba(45,36,28,.06);} body.studio-home .home-v11-video-media img{width:100%;height:100%;object-fit:cover;object-position:center;image-rendering:auto;transform:none!important;filter:none!important;} body.studio-home .home-v11-video-meta{padding:17px 2px 0;display:flex;align-items:center;justify-content:space-between;gap:16px;} body.studio-home .home-v11-video-meta strong{font-size:1.03rem;font-weight:700;letter-spacing:-.015em;} body.studio-home .home-v11-video-meta span{color:#6f7279;font-size:.82rem;font-weight:600;white-space:nowrap;} body.studio-home .home-v11-work-foot{margin-top:28px;padding-top:20px;display:flex;justify-content:flex-end;border-top:1px solid rgba(23,24,29,.11);} body.studio-home .home-v11-work .text-link{color:#25262b;text-decoration-color:rgba(37,38,43,.35);} @media (hover:hover) and (pointer:fine){ html:not(.reduce-motion):not(.suppress-hover) body.studio-home .home-v11-video-media{transition:border-color .25s ease,box-shadow .25s ease;} html:not(.reduce-motion):not(.suppress-hover) body.studio-home .home-v11-video:hover .home-v11-video-media{border-color:rgba(116,82,180,.32);box-shadow:0 14px 34px rgba(45,36,28,.09);} html:not(.reduce-motion):not(.suppress-hover) body.studio-home .home-v11-video-meta span{transition:color .2s ease;} html:not(.reduce-motion):not(.suppress-hover) body.studio-home .home-v11-video:hover .home-v11-video-meta span{color:#5b3e96;} } body.studio-home .home-v11-services{background:var(--v11-dark);color:#f5f5f7;} body.studio-home .home-v11-services .eyebrow{color:#bba9e9;} body.studio-home .home-v11-services .home-v11-section-head h2{color:#f5f5f7;} body.studio-home .home-v11-services .home-v11-section-head>p{color:var(--v11-light-muted);} body.studio-home .home-v11-service-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-top:1px solid rgba(255,255,255,.09);} body.studio-home .home-v11-service{min-height:245px;padding:30px 28px;display:flex;flex-direction:column;border-bottom:1px solid rgba(255,255,255,.09);} body.studio-home .home-v11-service:nth-child(odd){border-right:1px solid rgba(255,255,255,.09);} body.studio-home .home-v11-service>span{color:#927ac9;font-size:.72rem;font-weight:700;letter-spacing:.05em;} body.studio-home .home-v11-service h3{margin:auto 0 9px;color:#f5f5f7;font-size:clamp(1.9rem,2.7vw,2.55rem);line-height:1.03;letter-spacing:-.037em;font-weight:700;} body.studio-home .home-v11-service p{max-width:470px;margin:0;color:#989da8;font-size:.94rem;line-height:1.6;} body.studio-home .home-v11-services .text-link{color:#efedf6;text-decoration-color:rgba(239,237,246,.38);} @media (hover:hover) and (pointer:fine){ html:not(.reduce-motion):not(.suppress-hover) body.studio-home .home-v11-service{transition:background .22s ease;} html:not(.reduce-motion):not(.suppress-hover) body.studio-home .home-v11-service:hover{background:rgba(255,255,255,.025);} } body.studio-home .home-v11-process{background:var(--v11-paper);color:var(--v11-ink);} body.studio-home .home-v11-process-grid{display:grid;grid-template-columns:minmax(300px,.76fr) minmax(0,1.24fr);gap:clamp(64px,8vw,112px);align-items:start;} body.studio-home .home-v11-process-copy{position:sticky;top:116px;} body.studio-home .home-v11-process-copy .eyebrow{color:#7558b0;} body.studio-home .home-v11-process-copy h2{margin:15px 0 18px;max-width:10.5ch;color:var(--v11-ink);font-size:clamp(3.1rem,4.8vw,4.8rem);line-height:.99;letter-spacing:-.049em;font-weight:700;} body.studio-home .home-v11-process-copy p{max-width:420px;margin:0;color:#62656d;font-size:.97rem;line-height:1.66;} body.studio-home .home-v11-dark-button{margin-top:25px;background:#18191e;border-color:#18191e;color:#fff;} body.studio-home .home-v11-process-list{margin:0;padding:0;list-style:none;border-top:1px solid rgba(23,24,29,.12);} body.studio-home .home-v11-process-list li{min-height:132px;padding:24px 0;display:grid;grid-template-columns:40px minmax(0,1fr);gap:20px;align-items:center;border-bottom:1px solid rgba(23,24,29,.12);} body.studio-home .home-v11-process-list li>span{color:#775cad;font-size:.72rem;font-weight:700;letter-spacing:.04em;} body.studio-home .home-v11-process-list h3{margin:0 0 7px;color:var(--v11-ink);font-size:clamp(1.8rem,2.4vw,2.3rem);line-height:1.05;letter-spacing:-.035em;font-weight:700;} body.studio-home .home-v11-process-list p{max-width:560px;margin:0;color:#686b73;font-size:.92rem;line-height:1.56;} body.studio-home .home-v11-team{background:var(--v11-dark);color:#f5f5f7;} body.studio-home .home-v11-team .eyebrow{color:#bba9e9;} body.studio-home .home-v11-team .home-v11-section-head h2{color:#f5f5f7;} body.studio-home .home-v11-team .home-v11-section-head>p{color:#a1a6b0;} body.studio-home .home-v11-team-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid rgba(255,255,255,.09);border-bottom:1px solid rgba(255,255,255,.09);} body.studio-home .home-v11-team-item{min-height:250px;padding:28px;display:flex;flex-direction:column;} body.studio-home .home-v11-team-item+ .home-v11-team-item{border-left:1px solid rgba(255,255,255,.09);} body.studio-home .home-v11-team-item>span{color:#927ac9;font-size:.72rem;font-weight:700;letter-spacing:.05em;} body.studio-home .home-v11-team-item h3{margin:auto 0 9px;color:#f5f5f7;font-size:clamp(1.8rem,2.5vw,2.35rem);line-height:1.04;letter-spacing:-.035em;font-weight:700;} body.studio-home .home-v11-team-item p{margin:0;color:#989da8;font-size:.92rem;line-height:1.58;} body.studio-home .home-v11-final{background:var(--v11-paper);color:var(--v11-ink);padding:108px 0 116px;} body.studio-home .home-v11-final-card{position:relative;min-height:420px;padding:54px clamp(34px,6vw,70px);display:flex;flex-direction:column;align-items:flex-start;justify-content:center;overflow:hidden;border:1px solid rgba(255,255,255,.10);border-radius:20px;background:radial-gradient(circle at 78% 28%,rgba(140,98,244,.22),transparent 25%),linear-gradient(145deg,#14161e,#0b0c11);box-shadow:0 28px 66px rgba(43,34,27,.13);color:#f5f5f7;} body.studio-home .home-v11-final-card .eyebrow{color:#bcaee0;} body.studio-home .home-v11-final-card h2{position:relative;z-index:1;margin:17px 0 17px;padding-bottom:.06em;max-width:13ch;color:#fff;font-size:clamp(3.15rem,5vw,5rem);line-height:.99;letter-spacing:-.048em;font-weight:700;} body.studio-home .home-v11-final-card>p{position:relative;z-index:1;max-width:540px;margin:0;color:#a9aeb8;font-size:.97rem;line-height:1.62;} body.studio-home .home-v11-final-card .hero-actions{position:relative;z-index:1;margin-top:26px!important;} body.studio-home .home-v11-service, body.studio-home .home-v11-team-item, body.studio-home .home-v11-process-list li{transform:none!important;filter:none!important;} @media (max-width:900px){ body.studio-home .container{width:min(100% - 36px,1180px);} body.studio-home .home-v11-section{padding:82px 0;} body.studio-home .home-v11-section-head{grid-template-columns:1fr;gap:18px;margin-bottom:32px;} body.studio-home .home-v11-section-head h2{max-width:14ch;} body.studio-home .home-v11-section-head>p{max-width:620px;} body.studio-home .home-v11-process-grid{grid-template-columns:1fr;gap:42px;} body.studio-home .home-v11-process-copy{position:relative;top:auto;max-width:640px;} body.studio-home .home-v11-process-copy h2{max-width:12ch;} } @media (max-width:680px){ body.studio-home .container{width:calc(100% - 28px);} body.studio-home .home-v11-hero-copy h1>span{width:auto!important;max-width:none!important;font-size:1em!important;white-space:normal!important;} body.studio-home .home-v11-work .home-v11-section-head, body.studio-home .home-v11-work-grid, body.studio-home .home-v11-work-foot{width:100%;} body.studio-home .home-v11-hero{min-height:auto!important;padding:112px 0 72px!important;} body.studio-home .home-v11-hero-copy h1{margin:18px auto 20px!important;font-size:clamp(3.25rem,15vw,4.45rem)!important;line-height:.96!important;letter-spacing:-.05em!important;} body.studio-home .home-v11-hero-copy>p{font-size:.98rem!important;line-height:1.6!important;} body.studio-home .home-v11-hero-copy .hero-actions{display:grid!important;grid-template-columns:1fr!important;gap:9px!important;} body.studio-home .home-v11-hero-copy .hero-actions .button{width:100%;} body.studio-home .home-v11-hero-note{font-size:.69rem;} body.studio-home .home-v11-marquee, body.studio-home .home-v11-marquee>.home-marquee-track, body.studio-home .home-v11-marquee .home-marquee-group{height:50px;} body.studio-home .home-v11-marquee .home-marquee-group{min-width:760px;} body.studio-home .home-v11-marquee .home-marquee-group>span{font-size:.66rem;gap:7px;padding-inline:13px;} body.studio-home .home-v11-marquee .home-marquee-group>span small{font-size:.57rem;} body.studio-home .home-v11-section{padding:70px 0;} body.studio-home .home-v11-section-head{margin-bottom:26px;} body.studio-home .home-v11-section-head h2{max-width:none;font-size:clamp(2.55rem,11vw,3.45rem);line-height:1;} body.studio-home .home-v11-work-grid{display:flex;overflow-x:auto;gap:12px;padding-bottom:4px;scroll-snap-type:x mandatory;scrollbar-width:none;} body.studio-home .home-v11-work-grid::-webkit-scrollbar{display:none;} body.studio-home .home-v11-video{flex:0 0 min(78vw,300px);scroll-snap-align:start;} body.studio-home .home-v11-video-meta{padding-top:12px;} body.studio-home .home-v11-video-meta strong{font-size:.95rem;} body.studio-home .home-v11-video-meta span{font-size:.76rem;} body.studio-home .home-v11-work-foot{justify-content:flex-start;margin-top:20px;padding-top:16px;} body.studio-home .home-v11-service-grid{grid-template-columns:1fr;} body.studio-home .home-v11-service{min-height:210px;padding:24px 4px;border-right:0!important;} body.studio-home .home-v11-service h3{font-size:1.9rem;} body.studio-home .home-v11-process-copy h2{max-width:none;font-size:clamp(2.55rem,11vw,3.45rem);} body.studio-home .home-v11-process-list li{min-height:0;padding:20px 0;grid-template-columns:32px minmax(0,1fr);gap:13px;align-items:start;} body.studio-home .home-v11-process-list h3{font-size:1.7rem;} body.studio-home .home-v11-team-grid{grid-template-columns:1fr;} body.studio-home .home-v11-team-item{min-height:200px;padding:24px 4px;} body.studio-home .home-v11-team-item+.home-v11-team-item{border-left:0;border-top:1px solid rgba(255,255,255,.09);} body.studio-home .home-v11-team-item h3{font-size:1.85rem;} body.studio-home .home-v11-final{padding:72px 0 82px;} body.studio-home .home-v11-final-card{min-height:390px;padding:36px 23px;border-radius:18px;} body.studio-home .home-v11-final-card h2{max-width:none;font-size:clamp(2.7rem,11.5vw,3.7rem);line-height:1;} body.studio-home .home-v11-final-card>p{font-size:.92rem;} body.studio-home .home-v11-final-card .hero-actions{width:100%;display:grid!important;grid-template-columns:1fr!important;gap:9px!important;} body.studio-home .home-v11-final-card .hero-actions .button{width:100%;} } @media (max-width:380px){ body.studio-home .home-v11-hero-note i{display:none;} body.studio-home .home-v11-hero-note{gap:6px 12px;} } body.studio-home .home-v11-hero-copy{ width:100%!important; max-width:1180px!important; margin-inline:auto!important; overflow:visible!important; } body.studio-home .home-v11-hero-copy h1{ width:100%!important; max-width:none!important; margin:0 auto 25px!important; padding:.03em .12em .11em!important; box-sizing:border-box!important; font-size:clamp(3.8rem,6.7vw,6.3rem)!important; line-height:.94!important; letter-spacing:-.052em!important; text-align:center!important; text-wrap:initial!important; overflow:visible!important; } body.studio-home .home-v11-hero-copy h1 .home-v11-hero-line{ display:block!important; width:max-content!important; max-width:none!important; margin-inline:auto!important; padding:.015em .11em .065em!important; box-sizing:content-box!important; white-space:nowrap!important; text-wrap:nowrap!important; overflow:visible!important; font-size:1em!important; line-height:.96!important; letter-spacing:inherit!important; color:#f5f5f7!important; background:none!important; background-clip:border-box!important; -webkit-background-clip:border-box!important; -webkit-text-fill-color:#f5f5f7!important; } body.studio-home .home-v11-hero-copy h1 .home-v11-hero-gradient{ margin-top:.035em!important; font-size:1em!important; letter-spacing:inherit!important; color:transparent!important; background:linear-gradient(104deg,#f08a72 0%,#cf77a7 45%,#9c7aff 100%)!important; background-clip:text!important; -webkit-background-clip:text!important; -webkit-text-fill-color:transparent!important; } @media (max-width:900px){ body.studio-home .home-v11-hero-copy h1{ font-size:clamp(3.15rem,6.55vw,4.7rem)!important; } } @media (max-width:680px){ body.studio-home .home-v11-hero-copy h1{ width:100%!important; margin:0 auto 20px!important; padding-inline:0!important; font-size:clamp(1.95rem,9.25vw,3.35rem)!important; } body.studio-home .home-v11-hero-copy h1 .home-v11-hero-line{ padding-inline:.06em!important; } } @media (max-width:680px){ body.studio-home .home-v11-hero-copy h1{ font-size:clamp(2.4rem,12vw,3.35rem)!important; } } body.studio-home{ --home-content-width:960px; } body.studio-home .home-v11-section > .container, body.studio-home .home-v11-process > .container{ width:min(var(--home-content-width),calc(100% - 56px)); margin-inline:auto; } body.studio-home .home-v11-section-head, body.studio-home .home-v11-work-grid, body.studio-home .home-v11-work-foot, body.studio-home .home-v11-service-grid, body.studio-home .home-v11-process-grid, body.studio-home .home-v11-team-grid, body.studio-home .home-v11-final-card, body.studio-home .home-v11-section-link{ width:100%; max-width:none; margin-inline:auto; box-sizing:border-box; } body.studio-home .home-v11-section-head{ grid-template-columns:minmax(0,1fr) minmax(260px,.62fr); gap:64px; } body.studio-home .home-v11-section-head > p{ justify-self:end; width:100%; } body.studio-home .home-v11-work .home-v11-section-head, body.studio-home .home-v11-work-grid, body.studio-home .home-v11-work-foot{ width:100%; } body.studio-home .home-v11-final-card{ margin-inline:auto; } @media (max-width:900px){ body.studio-home .home-v11-section > .container, body.studio-home .home-v11-process > .container{ width:min(var(--home-content-width),calc(100% - 36px)); } body.studio-home .home-v11-section-head{ grid-template-columns:1fr; gap:18px; } body.studio-home .home-v11-section-head > p{ justify-self:start; } } @media (max-width:680px){ body.studio-home .home-v11-section > .container, body.studio-home .home-v11-process > .container{ width:calc(100% - 28px); } } body.studio-home{ --home-content-width:1080px; } body.studio-home .home-v11-hero-copy{ max-width:1240px!important; } body.studio-home .home-v11-hero-copy h1{ max-width:1240px!important; display:flex!important; flex-direction:column!important; align-items:center!important; } body.studio-home .home-v11-hero-copy h1 .home-v11-hero-line{ margin-inline:0!important; } body.studio-home .home-v11-hero-copy h1 .home-v11-hero-line:first-child{ position:relative!important; inset-inline-start:.16em!important; } body.studio-home .home-v11-hero-copy h1 .home-v11-hero-gradient{ position:relative!important; inset-inline-start:0!important; margin-top:.02em!important; } @media (max-width:900px){ body.studio-home .home-v11-hero-copy h1 .home-v11-hero-line:first-child{ inset-inline-start:.10em!important; } } @media (max-width:680px){ body.studio-home .home-v11-hero-copy h1 .home-v11-hero-line:first-child{ inset-inline-start:.04em!important; } } .checklist-item .check-indicator{width:15px;height:15px;display:block;border:1.5px solid currentColor;border-radius:4px;position:relative;} .checklist-item.done .check-indicator::after{content:"";position:absolute;left:4px;top:1px;width:4px;height:8px;border:solid currentColor;border-width:0 2px 2px 0;transform:rotate(45deg);} @keyframes homeMarquee{ from{transform:translate3d(0,0,0)} to{transform:translate3d(-50%,0,0)} } @keyframes v934MarqueeSweep{ 0%,18%{left:-28%;opacity:0} 28%{opacity:1} 68%{opacity:1} 82%,100%{left:108%;opacity:0} } @keyframes v934HeroGlow{ from{transform:translate3d(-10px,4px,0) scale(.96);opacity:.7} to{transform:translate3d(14px,-9px,0) scale(1.05);opacity:1} } @keyframes v934GradientDrift{ from{background-position:0% 50%} to{background-position:100% 50%} } @keyframes v934HeroLineIn{ from{opacity:0;transform:translate3d(0,22px,0) scale(.985)} to{opacity:1;transform:translate3d(0,0,0) scale(1)} } @keyframes v934FeaturedGlow{ from{box-shadow:0 22px 55px rgba(93,65,160,.11)} to{box-shadow:0 25px 62px rgba(110,72,190,.20)} } @keyframes v934FaqOpen{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}} @keyframes v935MarqueeLoop{ from{transform:translate3d(0,0,0)} to{transform:translate3d(calc(-1 * var(--marquee-unit)),0,0)} } .v937-home-loader{ display:none; position:fixed; inset:0; z-index:3000; place-items:center; background:#08090e; color:#fff; opacity:1; visibility:visible; transition:opacity .28s ease,visibility .28s ease; } html.home-loader-active .v937-home-loader{display:grid;} .v937-home-loader-inner{width:min(230px,62vw);display:grid;gap:17px;text-align:center;} .v937-home-loader-brand{display:flex;align-items:center;justify-content:center;gap:10px;font-size:1.05rem;font-weight:800;letter-spacing:-.04em;} .v937-home-loader-brand img{width:34px;height:28px;object-fit:contain;} .v937-home-loader-line{height:2px;overflow:hidden;background:rgba(255,255,255,.12);border-radius:99px;} .v937-home-loader-line i{display:block;width:100%;height:100%;background:linear-gradient(90deg,#ea8a7c,#c774ab,#8d65f4);transform:scaleX(0);transform-origin:left;animation:v937LoaderProgress .48s cubic-bezier(.22,1,.36,1) forwards;} .v937-home-loader small{color:rgba(255,255,255,.45);font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;} html.home-loader-leaving .v937-home-loader{opacity:0;visibility:hidden;} @keyframes v937LoaderProgress{to{transform:scaleX(1)}} @media (prefers-reduced-motion:reduce){ .v937-home-loader-line i{animation:none;transform:scaleX(1);} .v937-home-loader{transition:none;} } @keyframes v100Wash{to{transform:translate(7vw,5vw) scale(1.08)}} @keyframes v100Sheen{0%,58%{transform:translateX(-120%)}78%,100%{transform:translateX(120%)}} @keyframes v100Pulse{50%{opacity:.4;box-shadow:0 0 2px rgba(156,109,244,.4)}} @keyframes v100Orbit{to{transform:translate(-50%,-50%) rotate(360deg)}} @keyframes v100MarqueeLoop{ from{transform:translate3d(0,0,0);} to{transform:translate3d(-50%,0,0);} } @keyframes v100CenteredWash{ from{opacity:.82;transform:scale(1)} to{opacity:1;transform:scale(1.035)} } html[data-theme="light"] body.app-page{ --bg:#f4f4f1; --bg-2:#f1f1ee; --surface:#ffffff; --surface-2:#f7f7f4; --surface-3:#ecece8; --text:#171719; --text-2:#414147; --text-soft:#55555d; --muted:#74747d; --line:rgba(23,23,25,.10); --line-strong:rgba(23,23,25,.17); --purple:#7350d6; --purple-2:#8a4db0; --pink:#b84779; --green:#176c45; --amber:#76500d; --danger:#a83246; --shadow-sm:0 8px 24px rgba(22,22,25,.045); --shadow-md:0 14px 34px rgba(22,22,25,.06); --shadow-lg:0 24px 58px rgba(22,22,25,.08); background:#f4f4f1 !important; color:var(--text) !important; } html[data-theme="light"] body.app-page .app-main, html[data-theme="light"] body.app-page .dashboard{ background:#f4f4f1 !important; } html[data-theme="light"] body.app-page .sidebar{ --text:#f6f6f8 !important; --text-2:#d5d6dd !important; --muted:#a8abb6 !important; --line:rgba(255,255,255,.085) !important; background:#111217 !important; border-right-color:rgba(255,255,255,.075) !important; box-shadow:none !important; } html[data-theme="light"] body.app-page .sidebar .brand, html[data-theme="light"] body.app-page .sidebar .brand span, html[data-theme="light"] body.app-page .sidebar-label{ color:#f7f7f9 !important; } html[data-theme="light"] body.app-page .sidebar-nav a, html[data-theme="light"] body.app-page .sidebar-footer a, html[data-theme="light"] body.app-page .sidebar-bottom a{ color:#bfc1cb !important; } html[data-theme="light"] body.app-page .sidebar-nav a.active{ color:#fff !important; background:rgba(255,255,255,.075) !important; border-color:rgba(141,99,255,.22) !important; } @media (hover:hover) and (pointer:fine){ html[data-theme="light"] body.app-page:not(.suppress-hover) .sidebar-nav a:hover, html[data-theme="light"] body.app-page:not(.suppress-hover) .sidebar-footer a:hover, html[data-theme="light"] body.app-page:not(.suppress-hover) .sidebar-bottom a:hover{ color:#fff !important; background:rgba(255,255,255,.055) !important; } } html[data-theme="light"] body.app-page .app-header{ background:rgba(244,244,241,.92) !important; border-bottom-color:rgba(23,23,25,.085) !important; color:var(--text) !important; box-shadow:none !important; backdrop-filter:blur(18px) saturate(135%) !important; } html[data-theme="light"] body.app-page :is( .app-card,.settings-card,.metric-card,.quick-action-grid>a, .view-toolbar,.project-rail,.workspace-v73-panel,.workspace-v73-view-shell, .workspace-v73-settings,.assignment-card,.assignment-strip>div, .assignment-summary>div,.account-menu,.notification-popover, .status-dropdown,.app-dialog ){ background:#fff !important; border-color:rgba(23,23,25,.10) !important; color:var(--text) !important; box-shadow:0 1px 0 rgba(255,255,255,.75),0 10px 30px rgba(22,22,25,.045) !important; } html[data-theme="light"] body.app-page :is(.app-card,.settings-card,.metric-card,.quick-action-grid>a):hover{ border-color:rgba(23,23,25,.14) !important; } html[data-theme="light"] body.app-page :is(h1,h2,h3,h4,h5,h6,strong,.workspace-head h1,.dashboard-hero h1){ color:#171719 !important; } html[data-theme="light"] body.app-page :is(p,label,.data-table td,.data-table td a,.task-row strong,.project-rail strong,.assignment-strip strong,.assignment-summary strong){ color:#414147 !important; } html[data-theme="light"] body.app-page :is( small,.muted,.form-help,.workspace-head p,.dashboard-hero p, .data-table th,.data-table td small,.task-row small,.project-rail small, .assignment-strip small,.assignment-summary small ){ color:#74747d !important; } html[data-theme="light"] body.app-page :is(input,select,textarea){ color:#171719 !important; background:#fff !important; border-color:rgba(23,23,25,.16) !important; box-shadow:inset 0 1px 0 rgba(23,23,25,.02) !important; } html[data-theme="light"] body.app-page :is(input,textarea)::placeholder{ color:#8a8a92 !important; opacity:1 !important; } html[data-theme="light"] body.app-page :is(input,select,textarea):focus{ border-color:rgba(115,80,214,.52) !important; box-shadow:0 0 0 3px rgba(115,80,214,.10) !important; } html[data-theme="light"] body.app-page :is( .button-secondary,.button-ghost,.button-quiet,.notification-button, .account-trigger,.status-dropdown-trigger,.page-back-button,.sidebar-toggle ){ color:#232328 !important; background:#fff !important; border-color:rgba(23,23,25,.13) !important; box-shadow:none !important; } @media (hover:hover) and (pointer:fine){ html[data-theme="light"] body.app-page:not(.suppress-hover) :is( .button-secondary,.button-ghost,.button-quiet,.notification-button, .account-trigger,.status-dropdown-trigger,.page-back-button,.sidebar-toggle ):hover{ background:#f7f7f4 !important; border-color:rgba(115,80,214,.30) !important; } } html[data-theme="light"] body.app-page .button-primary{ color:#fff !important; background:linear-gradient(180deg,#815dde 0%,#704bcf 100%) !important; border-color:rgba(83,53,170,.22) !important; box-shadow:0 8px 20px rgba(95,62,184,.18) !important; } html[data-theme="light"] body.app-page .status-success{color:#145d3b !important;background:#e6f4eb !important;border-color:#a8d4b8 !important} html[data-theme="light"] body.app-page .status-warning{color:#714b08 !important;background:#f8efd9 !important;border-color:#d5ba7d !important} html[data-theme="light"] body.app-page .status-danger{color:#962c40 !important;background:#f8e7ea !important;border-color:#d9a1aa !important} html[data-theme="light"] body.app-page .status-neutral{color:#45454b !important;background:#f0f0ed !important;border-color:#c9c9c3 !important} html[data-theme="light"] body.app-page .status-pill{color:#56379f !important;background:#f0ebfb !important;border-color:#b9a7df !important} html[data-theme="light"] body.app-page .role-owner{color:#73500b !important;background:#f7eed7 !important;border-color:#d7bb7b !important} html[data-theme="light"] body.app-page .role-admin{color:#56379f !important;background:#f0ebfb !important;border-color:#b9a7df !important} html[data-theme="light"] body.app-page .role-editor{color:#285f7a !important;background:#e8f3f8 !important;border-color:#a7cbdc !important} html[data-theme="light"] body.app-page .role-client{color:#145d3b !important;background:#e6f4eb !important;border-color:#a8d4b8 !important} html[data-theme="light"] body.app-page .sidebar .role-owner{color:#ffe4a0 !important;background:rgba(255,190,92,.09) !important;border-color:rgba(255,190,92,.28) !important} html[data-theme="light"] body.app-page .sidebar .role-admin{color:#d8ccff !important;background:rgba(139,92,246,.10) !important;border-color:rgba(139,92,246,.28) !important} html[data-theme="light"] body.app-page .sidebar .role-editor{color:#bfe9ff !important;background:rgba(75,178,255,.09) !important;border-color:rgba(75,178,255,.25) !important} html[data-theme="light"] body.app-page .sidebar .role-client{color:#b7f4cf !important;background:rgba(85,212,147,.08) !important;border-color:rgba(85,212,147,.25) !important} html[data-theme="light"] body.app-page .data-table, html[data-theme="light"] body.app-page .data-table th, html[data-theme="light"] body.app-page .data-table td, html[data-theme="light"] body.app-page .activity-row{ border-color:rgba(23,23,25,.09) !important; } html[data-theme="light"] body.app-page .data-table tbody tr:hover{ background:#f8f8f5 !important; } html[data-theme="light"] body.app-page .theme-choice{ background:#fafaf8 !important; border-color:rgba(23,23,25,.11) !important; color:#28282d !important; box-shadow:none !important; } html[data-theme="light"] body.app-page .theme-choice:has(input:checked){ background:#f4f0fc !important; border-color:#7957d4 !important; box-shadow:0 0 0 3px rgba(121,87,212,.10) !important; } html[data-theme="light"] body.app-page .route-loader{ color:#1a1a1e !important; background:rgba(244,244,241,.985) !important; backdrop-filter:blur(14px) saturate(130%) !important; } html[data-theme="light"] body.app-page .route-loader::before{ background: radial-gradient(circle at 34% 42%,rgba(184,71,121,.055),transparent 28%), radial-gradient(circle at 70% 56%,rgba(115,80,214,.075),transparent 31%) !important; } html[data-theme="light"] body.app-page .route-loader .studio-loader-mark span{ color:#1a1a1e !important; } html[data-theme="light"] body.app-page .route-loader .studio-loader-line{ background:rgba(23,23,25,.12) !important; } html[data-theme="light"] body.app-page .route-loader .route-loader-label, html[data-theme="light"] body.app-page .route-loader small{ color:#74747d !important; } html[data-theme="light"] body.auth-page{ --bg:#f4f4f1; --bg-2:#f1f1ee; --surface:#fff; --surface-2:#f7f7f4; --text:#171719; --text-2:#414147; --muted:#74747d; --line:rgba(23,23,25,.10); --line-strong:rgba(23,23,25,.17); background:#f4f4f1 !important; color:#171719 !important; } html[data-theme="light"] body.auth-page :is(.auth-card,.auth-form){ background:#fff !important; border-color:rgba(23,23,25,.10) !important; color:#171719 !important; box-shadow:0 18px 48px rgba(22,22,25,.07) !important; } html[data-theme="light"] body.auth-page input{ background:#fff !important; color:#171719 !important; border-color:rgba(23,23,25,.16) !important; } .request-layout-improved{ display:grid; grid-template-columns:minmax(0,1.55fr) minmax(300px,380px); gap:32px; align-items:start; margin-top:8px; } .request-form-improved, .request-guide-improved .settings-card{ border-radius:22px; } .request-form-improved{ padding:30px; } .request-form-grid{ row-gap:20px; column-gap:18px; } .request-form-improved textarea{ min-height:180px; } .request-guide-improved{ display:grid; gap:24px; align-content:start; } .request-guide-improved .settings-card{ padding:24px 24px 26px; } .request-guide-improved .settings-card h3{ margin-bottom:16px; } .request-guide-improved .check-list{ margin:0; } .request-guide-improved .check-list li{ line-height:1.5; } .request-card-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:18px; } .request-card-head h3{ margin:0 0 6px; } .request-card-head p{ margin:0; color:var(--muted); } .request-card-badge{ display:flex; align-items:flex-start; justify-content:flex-start; flex:0 0 auto; } .request-access-metrics{ display:grid; gap:12px; } .request-access-metrics > div{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px 16px; border:1px solid var(--line); border-radius:14px; background:var(--surface-2); } .request-access-metrics span{ color:var(--muted); font-size:.78rem; font-weight:750; letter-spacing:.02em; } .request-access-metrics strong{ font-size:1rem; } @media (max-width:1100px){ .request-layout-improved{ grid-template-columns:minmax(0,1fr); } } @media (max-width:760px){ .request-layout-improved{ gap:24px; } .request-form-improved{ padding:22px; } .request-guide-improved{ gap:20px; } .request-guide-improved .settings-card{ padding:20px 20px 22px; } .request-card-head{ flex-direction:column; align-items:flex-start; } .request-access-metrics > div{ padding:13px 14px; } } .request-guide-improved .settings-card h3{ margin-bottom:20px; } .request-guide-improved .request-card-head h3{ margin-bottom:8px; } .request-guide-improved .request-card-head{ margin-bottom:22px; } .request-layout-improved > *{ min-width:0; } .request-form-improved .field{ display:grid; gap:10px; } .request-form-improved .field small{ margin-top:2px; } .request-form-improved .form-actions{ margin-top:28px; gap:14px; flex-wrap:wrap; } .request-guide-improved .settings-card{ display:grid; align-content:start; } .request-guide-improved .settings-card > * + *{ margin-top:14px; } .request-guide-improved .check-list{ gap:16px; } .request-guide-improved .check-list li{ line-height:1.55; } .request-guide-improved .request-card-head{ gap:18px; } .request-guide-improved .request-card-head p{ margin-top:6px; } .request-access-metrics{ gap:14px; } .request-access-metrics > div{ min-height:60px; padding:15px 16px; } .request-access-metrics strong{ line-height:1.3; } @media (max-width:760px){ .request-form-improved .form-actions{ margin-top:24px; gap:12px; } .request-guide-improved .settings-card > * + *{ margin-top:12px; } .request-guide-improved .check-list{ gap:14px; } .request-access-metrics > div{ min-height:56px; } } :root{ --font-ui:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI Variable Text","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif; --font:var(--font-ui); } body, button, input, select, textarea{ font-family:var(--font-ui)!important; font-stretch:normal!important; font-kerning:normal; font-optical-sizing:auto; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } body.app-page :is( .button, .sidebar-nav a, .sidebar-footer a, .view-switch a, .workspace-filters, .toolbar-actions, .status-badge, .status-pill, .role-badge, .account-trigger, .field label, .field small, .data-table, .breadcrumbs, .saved-view-links, .workspace-v73-views, .workspace-v73-search, .workspace-v73-filter, .workspace-v73-task-meta, .workspace-v73-task-foot, .request-guide, .check-list ){ font-family:var(--font-ui)!important; } body.app-page .button{font-weight:700;letter-spacing:0;} body.app-page .view-switch a{font-weight:650;letter-spacing:.005em;} body.app-page .sidebar-nav a{font-weight:650;letter-spacing:0;} body.app-page .sidebar-footer a{font-weight:600;letter-spacing:0;} body.app-page .field label{font-weight:700;letter-spacing:0;} body.app-page :is(.status-badge,.status-pill,.role-badge){font-weight:700;} body.studio-site :is(.studio-display,em){ font-family:var(--studio-display,Georgia,"Times New Roman",serif); } body.app-page .client-summary-grid-clean{ grid-template-columns:repeat(2,minmax(0,1fr)); max-width:860px; } body.app-page .client-summary-grid-clean .metric-card{ min-height:126px; } body.app-page .client-summary-grid-clean .metric-card > strong{ font-size:clamp(2rem,3vw,2.8rem); letter-spacing:-.045em; } body.app-page .client-summary-grid-clean .metric-card small{ margin-top:5px; } body.app-page .request-card-head:has(.request-card-badge:empty){ display:block; } @media(max-width:760px){ body.app-page .client-summary-grid-clean{grid-template-columns:1fr;max-width:none;} body.app-page .client-summary-grid-clean .metric-card{min-height:108px;} } .ideas-layout{ display:grid; grid-template-columns:minmax(0,1.55fr) minmax(300px,380px); gap:28px; align-items:start; } .ideas-main-card{ min-width:0; } .idea-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; } .idea-card{ min-height:220px; display:flex; flex-direction:column; justify-content:space-between; gap:24px; padding:22px; border:1px solid var(--line); border-radius:17px; background:var(--surface-2); } .idea-card h3{ margin:9px 0 10px; font-size:1.08rem; line-height:1.35; } .idea-card p{ margin:0; color:var(--muted); line-height:1.6; } .idea-card .button{ align-self:flex-start; } .ideas-side{ display:grid; gap:20px; align-content:start; } .idea-request-card form{ display:grid; gap:18px; } .idea-request-card textarea{ min-height:132px; } .idea-request-state{ display:grid; gap:12px; } .idea-request-state .status-badge{ justify-self:start; } .idea-request-state p{ margin:0; color:var(--muted); } .used-idea-list{ display:grid; gap:10px; } .used-idea-list > div{ display:grid; gap:4px; padding:12px 0; border-bottom:1px solid var(--line); } .used-idea-list > div:last-child{ border-bottom:0; padding-bottom:0; } .used-idea-list small{ color:var(--muted); } .idea-request-shortcut p{ margin:0 0 18px; color:var(--muted); line-height:1.55; } .request-form-improved .field small a{ color:var(--link); font-weight:650; text-decoration:none; } .request-form-improved .field small a:hover{ text-decoration:underline; } .content-ideas-admin-grid{ align-items:start; } .idea-admin-request-list{ display:grid; gap:14px; } .idea-admin-request-list article{ display:grid; gap:14px; padding:16px; border:1px solid var(--line); border-radius:14px; background:var(--surface-2); } .idea-admin-request-list article > div{ display:grid; gap:5px; } .idea-admin-request-list article p{ margin:7px 0 0; color:var(--muted); line-height:1.55; } .idea-admin-request-list article small{ color:var(--muted); } .idea-admin-request-list form{ display:flex; align-items:center; gap:10px; } .idea-admin-request-list form select{ min-width:150px; } @media(max-width:1100px){ .ideas-layout{ grid-template-columns:1fr; } } @media(max-width:760px){ .idea-grid{ grid-template-columns:1fr; } .idea-card{ min-height:0; } .idea-admin-request-list form{ align-items:stretch; flex-direction:column; } .idea-admin-request-list form select, .idea-admin-request-list form .button{ width:100%; } } @media (max-width:760px){ :root{--movectus-mobile-gutter:20px;} html,body{max-width:100%;overflow-x:clip;} body.app-page .dashboard, body.workspace-page .dashboard{ padding-left:var(--movectus-mobile-gutter) !important; padding-right:var(--movectus-mobile-gutter) !important; } body.app-page .app-header{ padding-left:var(--movectus-mobile-gutter) !important; padding-right:var(--movectus-mobile-gutter) !important; } body.app-page :is( .app-card,.settings-card,.metric-card,.view-toolbar,.access-banner, .project-hero,.task-hero,.client-action-banner,.workspace-v73-commandbar, .workspace-v73-panel,.workspace-v73-view-shell,.workspace-v73-settings ){ max-width:100%; box-sizing:border-box; } body.app-page :is(input,select,textarea,button){ max-width:100%; min-width:0; } body.app-page :is(.dashboard-hero,.workspace-head,.card-head,.workspace-v73-hero) :is(h1,h2,h3,p){ max-width:100%; overflow-wrap:break-word; } .workspace-v73-commandbar{ padding:11px; } .workspace-v73-panel, .workspace-v73-view-shell{ padding:14px; } body.auth-page .auth-side{ padding-left:var(--movectus-mobile-gutter) !important; padding-right:var(--movectus-mobile-gutter) !important; } body.auth-page .auth-main{ padding-left:var(--movectus-mobile-gutter) !important; padding-right:var(--movectus-mobile-gutter) !important; } body.auth-page .auth-form-card{ width:100%; max-width:100%; box-sizing:border-box; } .app-dialog{ width:calc(100% - (var(--movectus-mobile-gutter) * 2)); max-width:680px; } .workspace-v73-filter-panel{ max-width:calc(100vw - (var(--movectus-mobile-gutter) * 2)); } } @media (max-width:380px){ :root{--movectus-mobile-gutter:16px;} } :root{ --font-ui-clean:"Segoe UI Variable Text","Segoe UI",system-ui,-apple-system,BlinkMacSystemFont,Roboto,"Helvetica Neue",Arial,sans-serif; --font-ui:var(--font-ui-clean); --font:var(--font-ui-clean); } body, button, input, select, textarea{ font-family:var(--font-ui-clean) !important; font-synthesis:none; font-kerning:normal; text-rendering:auto; -webkit-font-smoothing:antialiased; } body :is(.button,.nav,.mobile-nav,.view-switch a,.sidebar-nav a,.sidebar-footer a){ font-weight:650; letter-spacing:0; } @keyframes v100-marquee-slide{to{transform:translate3d(-50%,0,0)}}


/* Movectus v10.0.59: public-page visibility safeguard */


/* Movectus v10.0.60 - Firefox rendering stability hotfix
   Do not skip or paint-contain public homepage sections. */

/* Movectus v10.0.61 - robust section flow and clipping fix
   Keep viewport-responsive spacing, but let section height be driven by content. */


/* Movectus v10.0.62 - Firefox stability / public performance safeguard */

/* v10.7: readable primary labels and account notices in both themes. */
:root{
  --button-gradient:linear-gradient(180deg,#7950d1 0%,#693bc2 100%);
  --button-gradient-hover:linear-gradient(180deg,#7045ca 0%,#6233b9 100%);
}
html[data-theme="light"] body.auth-page .auth-side{
  --muted:#59545f;
}
html[data-theme="light"] body.auth-page .flash-error{
  color:#96263e;background:#fff0f3;border-color:#da9ca9;
}
html[data-theme="light"] body.auth-page .flash-success{
  color:#175c38;background:#edf8f1;border-color:#a4cdb2;
}