:root{
  --navy:#102a56;
  --navy-deep:#061a35;
  --navy-black:#031326;
  --blue:#7ea9d4;
  --blue-bright:#dfeeff;
  --blue-soft:#d9e9f6;
  --accent:#b9dcff;
  --accent-strong:#eaf5ff;
  --ink:#102447;
  --text:#506783;
  --line:rgba(81,118,151,.24);
  --paper:rgba(250,252,255,.86);
  --white:#fff;
  --shadow:0 26px 70px rgba(7,26,52,.14);
  --shadow-soft:0 14px 36px rgba(7,26,52,.10);
  --shine:linear-gradient(135deg,#ffffff 0%,#eef6ff 45%,#dcecff 100%);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:105px}
body{margin:0;background:#102a56;color:var(--ink);font-family:Manrope,Arial,Helvetica,sans-serif;font-size:16px;line-height:1.55;overflow-x:hidden}
button,input,select,textarea{font:inherit}button,a{-webkit-tap-highlight-color:transparent}button{cursor:pointer}a{color:inherit;text-decoration:none}img{max-width:100%;display:block}h1,h2,h3,p{margin:0}h1,h2{font-family:"Bricolage Grotesque",Manrope,sans-serif;line-height:1.02;letter-spacing:-.035em}h3{line-height:1.2}.container{width:min(1180px,calc(100% - 64px));margin-inline:auto}

.site-header{position:sticky;top:0;z-index:50;color:white;background:linear-gradient(108deg,rgba(180,209,240,.32) 5%,rgba(79,145,222,.38) 10%,rgba(38,84,157,.72) 30%,rgba(38,84,157,.72) 34%,rgba(13,37,82,.94) 55%,rgba(24,66,143,.40) 79%,rgba(10,47,110,.24) 100%),rgba(4,20,45,.90);border-bottom:1px solid rgba(202,232,255,.28);box-shadow:0 5px 14px rgba(0,0,0,.16);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
.header-inner{min-height:92px;width:min(1320px,calc(100% - 56px));display:flex;align-items:center;justify-content:space-between;gap:42px}.brand{display:flex;align-items:center;gap:14px;flex-shrink:0}.logo{width:64px;height:64px;object-fit:contain;filter:drop-shadow(0 4px 8px rgba(0,0,0,.10))}.wordmark{width:245px;height:auto;filter:drop-shadow(0 1px 3px rgba(0,0,0,.28))}nav{display:flex;align-items:center;gap:30px;font-size:14px;font-weight:800}nav a{position:relative;padding:8px 0 10px;border-bottom:0;color:#fff;transition:.2s;text-shadow:0 1px 3px rgba(0,0,0,.30)}nav a:after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:linear-gradient(90deg,#fff,#39b8ff);transform:scaleX(0);transform-origin:center;transition:transform .25s ease}nav a:hover:after,nav a.active:after{transform:scaleX(1)}.menu-toggle{display:none}

.button{border:1px solid transparent;display:inline-flex;justify-content:center;align-items:center;gap:12px;min-height:48px;padding:12px 22px;border-radius:999px;font-size:13px;font-weight:800;line-height:1.2;transition:transform .18s ease,box-shadow .18s ease,background .18s ease,border-color .18s ease,color .18s ease;text-align:center}.button:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(5,31,57,.18)}.button.primary{background:linear-gradient(135deg,#163968,#102a56);color:#fff;border-color:rgba(193,223,248,.34);box-shadow:0 10px 26px rgba(6,29,52,.26)}.button.outline{background:rgba(255,255,255,.78);border-color:rgba(97,128,159,.32);color:var(--navy);box-shadow:0 8px 20px rgba(11,34,58,.08)}.button.outline.light{background:rgba(255,255,255,.94);border-color:rgba(202,232,255,.42);color:var(--navy);box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 7px 18px rgba(0,0,0,.12)}.button.glass{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.42);color:#fff;backdrop-filter:blur(12px)}.button.navy{background:var(--navy);color:#fff}.button.small{min-height:38px;padding:9px 15px;font-size:12px}

main{position:relative;isolation:isolate}.page-background-stack{position:absolute;z-index:0;top:-180px;left:0;width:100%;height:auto;pointer-events:none;user-select:none;overflow:visible}.page-background-stack img{display:block;width:100%;height:auto;margin:0;padding:0;border:0}.page-background-stack .page-background-flipped{transform:scaleX(-1);transform-origin:center center}

.hero{min-height:620px;position:relative;z-index:1;overflow:hidden;color:white;background:transparent}.hero:before,.hero:after{background-image:none!important;background:none!important}.hero-glow{display:none}
.hero-inner{display:grid;grid-template-columns:1.02fr .98fr;gap:36px;align-items:center;min-height:620px;position:relative;z-index:2}.hero-copy{padding:68px 0 80px;max-width:620px}.eyebrow,.section-kicker{font-size:11px;text-transform:uppercase;letter-spacing:.2em;font-weight:800}.eyebrow{display:flex;align-items:center;gap:10px;color:#f4f9fd;margin-bottom:19px;text-shadow:0 2px 8px rgba(0,0,0,.7)}.eyebrow span{width:34px;height:1px;background:var(--accent)}.hero h1{font-size:clamp(48px,5vw,75px);font-weight:800;text-shadow:0 3px 16px rgba(0,0,0,.58),0 1px 2px rgba(0,0,0,.7)}.hero-tagline-image{width:min(100%,610px);height:auto;margin-top:12px;filter:drop-shadow(0 2px 0 rgba(0,0,0,.35)) drop-shadow(0 6px 14px rgba(0,0,0,.48)) drop-shadow(0 14px 28px rgba(0,0,0,.32));}.hero-support-card{max-width:590px;margin:23px 0 34px;padding:18px 20px;border-radius:18px;background:linear-gradient(135deg,rgba(8,25,45,.78),rgba(17,47,79,.68));border:1px solid rgba(218,237,255,.22);box-shadow:0 18px 36px rgba(0,0,0,.24);backdrop-filter:blur(10px)}.hero-support-card p{font-size:19px;line-height:1.65;color:#f2f7fb;font-weight:600;text-shadow:0 2px 10px rgba(0,0,0,.55)}.hero-buttons{display:flex;gap:11px;flex-wrap:wrap}.hero-proof{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}.hero-proof span{font-size:11px;font-weight:700;color:#d7e7f3;border:1px solid rgba(183,211,232,.25);background:rgba(255,255,255,.045);padding:7px 10px;border-radius:999px}.hero-proof span:before{content:"✓";color:var(--accent);margin-right:6px}

.hero-previews{height:510px;position:relative;align-self:end}.preview-orbit{position:absolute;border:1px solid rgba(193,223,248,.18);border-radius:50%;pointer-events:none}.orbit-one{width:500px;height:500px;right:-150px;top:0}.orbit-two{width:355px;height:355px;right:-60px;top:75px;border-color:rgba(146,184,214,.18)}.browser{position:absolute;border:1px solid rgba(209,224,236,.6);background:rgba(218,229,238,.94);border-radius:14px;padding:9px;box-shadow:0 30px 70px rgba(0,0,0,.35);overflow:hidden;width:100%;backdrop-filter:blur(6px)}.browser-bar{display:flex;gap:5px;height:22px;align-items:center;padding:0 4px;color:#546b7e}.browser-bar i{width:7px;height:7px;background:#ffae6f;border-radius:50%;flex:0 0 auto}.browser-bar i:nth-child(2){background:#ebd675}.browser-bar i:nth-child(3){background:#54d1ba}.browser-bar b{font-size:8px;font-weight:600;margin-left:8px;opacity:.66;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.browser.landscaping{top:4px;width:94%;left:6%;transform:rotate(1.8deg);background:#213c56}.browser.cleaning{top:270px;left:-3%;width:92%;transform:rotate(-2.4deg);z-index:2}.browser-caption{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:8px 6px 1px;color:#17304a;font-size:9px}.browser.landscaping .browser-caption{color:#f7fbff}.browser-caption strong{font-size:11px}.browser-caption span{opacity:.72}.site-shot{background-repeat:no-repeat;background-size:contain;background-position:center top;aspect-ratio:302/200;border-radius:7px;background-color:#eef3f8}.site-shot.landscape{background-image:url('images/sample3.png')}.site-shot.clean{background-image:url('images/sample4.png')}.site-shot.barber{background-image:url('images/sample5.png')}
.browser.landscaping .site-shot{background-image:url('images/sample1.png')}
.browser.cleaning .site-shot{background-image:url('images/sample2.png')}
.dashboard-top .site-shot{background-image:url('images/sample6.png')}


.content-shell{position:relative;z-index:1;padding:34px 0 56px;background:transparent;backdrop-filter:none}.access-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:-77px;position:relative;z-index:5}.access-card,.feature-card,.portfolio{background:linear-gradient(145deg,rgba(255,255,255,.74),rgba(244,249,253,.62));border:1px solid rgba(255,255,255,.62);box-shadow:0 16px 38px rgba(10,34,56,.15);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px)}.access-card{min-height:390px;border-radius:22px;padding:24px 24px 22px;display:flex;flex-direction:column;align-items:flex-start;position:relative;overflow:hidden}.access-card:before{content:"";position:absolute;right:-62px;bottom:-80px;width:180px;height:180px;border-radius:50%;background:radial-gradient(circle,rgba(128,175,211,.2),transparent 68%)}.access-card.accent-gold:before{background:radial-gradient(circle,rgba(155,200,235,.24),transparent 68%)}.access-card.accent-navy:before{background:radial-gradient(circle,rgba(39,81,124,.18),transparent 68%)}.card-number{position:absolute;right:22px;top:18px;font-family:"Cormorant Garamond",serif;font-size:32px;color:rgba(255,255,255,.92);font-weight:700;text-shadow:0 2px 10px rgba(5,23,46,.42),0 6px 18px rgba(5,23,46,.22)}.icon{width:59px;height:59px;display:grid;place-items:center;border-radius:18px;background:linear-gradient(145deg,#dbeaf7,#c6dcef);color:var(--navy);font-size:29px;margin-bottom:18px;box-shadow:inset 0 0 0 1px rgba(73,113,149,.12)}.icon i{font-size:30px;line-height:1;display:block}.accent-gold .icon{background:linear-gradient(145deg,#ecf6ff,#cfe1f4)}.accent-navy .icon{background:linear-gradient(145deg,#e0e9f3,#bfcedf)}.card-kicker{font-size:10px;text-transform:uppercase;letter-spacing:.18em;font-weight:800;color:rgba(255,255,255,.95);margin-bottom:8px;text-shadow:0 2px 8px rgba(5,23,46,.4),0 4px 14px rgba(5,23,46,.18)}.access-card h2{font-size:29px;line-height:1.06;margin-bottom:12px;color:var(--ink)}.access-card .card-subhead{font-family:"Bricolage Grotesque",sans-serif;font-size:18px;line-height:1.2;color:var(--ink);font-weight:800;margin:0 0 14px;max-width:320px}.access-card .card-copy{font-size:14px;line-height:1.4;color:var(--text);margin:0 0 18px;max-width:340px}.access-card .button{margin-top:auto;position:relative;z-index:1}

.examples{padding-top:73px}.section-heading-wrap{text-align:center;max-width:790px;margin:0 auto 27px;padding:20px 26px;border-radius:22px;background:linear-gradient(135deg,rgba(8,31,67,.56),rgba(15,53,105,.34));border:1px solid rgba(255,255,255,.2);box-shadow:0 14px 34px rgba(4,20,45,.16);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}.section-kicker{color:#e7f3fb;margin-bottom:9px;text-shadow:0 2px 8px rgba(0,0,0,.52)}.section-heading{display:flex;align-items:center;justify-content:center;gap:18px}.section-heading:before,.section-heading:after{content:"";height:1px;width:62px;background:linear-gradient(90deg,transparent,var(--accent))}.section-heading:after{background:linear-gradient(90deg,var(--accent),transparent)}.section-heading h2{font-size:clamp(34px,4vw,48px);color:#fff;text-shadow:0 3px 12px rgba(0,0,0,.62)}.section-subtitle{text-align:center;color:rgba(255,255,255,.96);font-size:16px;line-height:1.7;margin-top:13px;font-weight:600;text-shadow:0 2px 8px rgba(0,0,0,.5)}.portfolio-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.portfolio{border-radius:20px;overflow:hidden;transition:transform .2s ease,box-shadow .2s ease}.portfolio:hover{transform:translateY(-5px);box-shadow:var(--shadow)}.portfolio-image{padding:9px;background:linear-gradient(145deg,rgba(17,50,80,.96),rgba(45,83,113,.88))}.portfolio:nth-child(2) .portfolio-image{background:linear-gradient(145deg,#dceaf4,#a9c4d8)}.portfolio:nth-child(3) .portfolio-image{background:linear-gradient(145deg,#1b2634,#4d5660)}.portfolio-body{padding:16px 17px 17px;display:flex;align-items:end;justify-content:space-between;gap:14px}.portfolio-body span{font-size:9px;text-transform:uppercase;letter-spacing:.16em;color:#8498aa;font-weight:800}.portfolio h3{font-size:19px;margin-top:4px}.portfolio .outline{color:var(--navy);border-color:rgba(125,165,200,.42);background:rgba(243,249,255,.82);white-space:nowrap}

.bottom-grid{display:grid;grid-template-columns:.92fr 1.08fr;gap:24px;margin-top:29px}.feature-card{border-radius:22px;padding:29px}.feature-card h2{font-size:31px}.feature-card>p:not(.section-kicker){color:var(--text);margin:8px 0 18px}.reference-thumbs{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:22px 0}.reference-thumbs img{width:100%;aspect-ratio:302/200;object-fit:cover;object-position:center top;border-radius:12px;box-shadow:0 8px 18px rgba(6,29,52,.18);border:1px solid rgba(255,255,255,.5);background:#dfe8f1;padding:0}.dashboard-example{background:rgba(255,255,255,.78);border:1px solid rgba(118,151,177,.22);box-shadow:inset 0 1px rgba(255,255,255,.8),0 10px 30px rgba(34,64,89,.06);border-radius:16px;padding:18px}.dashboard-top{display:flex;align-items:center;gap:17px;margin-bottom:18px}.dashboard-top .site-shot{width:128px;border-radius:8px;flex-shrink:0}.dashboard-top h3{font-size:16px;margin-top:8px}.dashboard-top .sample-label{font-size:12px;color:#6f879c;margin-top:3px}.status{font-size:10px;text-transform:uppercase;letter-spacing:.1em;display:flex;align-items:center;gap:7px;color:#54705e;font-weight:800}.status i{width:8px;height:8px;background:#54a565;border-radius:50%;box-shadow:0 0 0 4px rgba(84,165,101,.12)}.dashboard-buttons{display:flex;gap:8px;flex-wrap:wrap}.dashboard-buttons .button{flex:1;padding-inline:9px}

.pricing-section{position:relative;z-index:1;overflow:hidden;padding:72px 0 76px;background:transparent;color:white}.pricing-section:before,.pricing-section:after{background:none!important;background-image:none!important}.pricing-wrap{position:relative;z-index:2;display:grid;grid-template-columns:.75fr 1.25fr;gap:48px;align-items:stretch}.pricing-copy{padding:26px 27px;border-radius:22px;background:linear-gradient(135deg,rgba(8,31,67,.72),rgba(15,53,105,.52));border:1px solid rgba(255,255,255,.2);box-shadow:0 25px 60px rgba(0,0,0,.24);backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px);display:flex;flex-direction:column;justify-content:flex-start}.pricing-card-head,.plan-head{display:flex;align-items:center;gap:13px}.pricing-card-head{min-height:48px;margin-bottom:14px}.pricing-icon{width:44px;height:44px;flex:0 0 44px;border-radius:13px;display:grid;place-items:center;background:linear-gradient(135deg,#edf6ff,#d7e9fb);border:1px solid rgba(91,134,174,.2);box-shadow:0 8px 18px rgba(28,70,112,.12);color:#1d5689}.pricing-icon i{font-size:22px;line-height:1;display:block}.pricing-icon svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.pricing-icon-light{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.2);color:#fff;box-shadow:none}.pricing-copy h2{font-size:clamp(39px,4.5vw,58px);text-shadow:0 3px 12px rgba(0,0,0,.68)}.pricing-copy h2 span{font-family:"Bricolage Grotesque","Manrope",Arial,sans-serif;color:var(--accent-strong);font-style:normal;font-weight:800;letter-spacing:-.03em}.pricing-copy>p:not(.section-kicker){color:#d5e2ed;line-height:1.75;margin:18px 0 24px}.light-kicker{color:#d4e3ef}.pricing-note{border-top:1px solid rgba(255,255,255,.16);padding-top:18px;display:grid;gap:3px;font-size:12px;color:#c8d6e3;margin-top:auto}.pricing-note b{color:#fff}.plans{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:stretch}.plan{position:relative;background:rgba(248,251,254,.9);color:var(--ink);border:1px solid rgba(207,222,234,.5);border-radius:22px;padding:26px;display:flex;flex-direction:column;align-items:flex-start;box-shadow:0 25px 60px rgba(0,0,0,.24);backdrop-filter:blur(16px);min-height:100%}.plan.featured{transform:none;border-color:rgba(160,203,239,.76)}.plan-head{width:100%;min-height:48px}.plan-label{font-size:9px;text-transform:uppercase;letter-spacing:.2em;color:#8497a8;font-weight:800}.plan h3{font-family:"Bricolage Grotesque",sans-serif;font-size:22px;margin-top:3px}.plan-price{font-size:43px;font-weight:800;margin:22px 0 4px;letter-spacing:-.04em}.plan-price span{font-size:13px;font-weight:600;color:var(--text);letter-spacing:0}.plan>p:not(.plan-price):not(.plan-label){color:var(--text);font-size:13px;margin-bottom:15px;min-height:62px}.plan ul{list-style:none;padding:14px 0 0;margin:0 0 23px;border-top:1px solid rgba(99,128,154,.17);width:100%;display:grid;gap:8px;min-height:107px}.plan li{font-size:12px;color:#49617a;display:flex;align-items:flex-start;gap:8px}.plan li:before{content:"✓";color:#3d78ae;font-weight:900;flex:0 0 auto}.plan .button{margin-top:auto}.plan-tag{position:absolute;right:17px;top:-13px;background:linear-gradient(135deg,#f7fbff,#dcecff);color:var(--navy);padding:6px 11px;border-radius:999px;font-size:9px;font-weight:900;text-transform:uppercase;letter-spacing:.1em;box-shadow:0 7px 18px rgba(72,128,183,.18)}

footer{position:relative;z-index:2;padding:34px 0;background:rgba(247,250,252,.9);backdrop-filter:blur(8px);border-top:1px solid rgba(110,143,170,.18)}.footer-inner{display:flex;align-items:center;justify-content:space-between;gap:30px}.footer-inner .wordmark{width:222px}.footer-inner .logo{width:56px;height:56px}.footer-contact{text-align:right}.footer-contact a{display:block;color:var(--navy);font-size:13px;font-weight:700;margin-bottom:4px}.footer-contact p{font-size:11px;color:var(--text);margin-top:8px}

dialog{width:min(600px,calc(100% - 32px));max-height:90dvh;border:1px solid rgba(95,130,159,.3);border-radius:20px;padding:32px;color:var(--ink);box-shadow:0 28px 90px rgba(0,0,0,.4);background:rgba(250,252,255,.98)}dialog::backdrop{background:rgba(3,19,38,.74);backdrop-filter:blur(6px)}dialog h2{padding-right:30px;font-size:31px;margin-bottom:18px}dialog p{color:var(--text);margin:12px 0}dialog .close{position:absolute;right:16px;top:10px;border:0;background:transparent;font-size:30px;color:var(--ink)}dialog .site-shot{margin:15px 0;border-radius:9px}dialog label{display:block;margin:14px 0 6px;font-weight:700;font-size:13px}dialog input,dialog select,dialog textarea{width:100%;padding:12px 13px;border:1px solid #a6bcd3;border-radius:9px;color:var(--ink);background:white}dialog .button{margin-top:15px}dialog .note{font-size:12px}dialog .form-message{color:#a02a21}body.modal-open{overflow:hidden}:focus-visible{outline:3px solid #79a7df;outline-offset:4px}

@media(max-width:1050px){.container{width:calc(100% - 40px)}.wordmark{width:215px}.logo{width:60px;height:60px}nav{gap:17px}.hero-inner{grid-template-columns:1fr 1fr}.hero h1{font-size:54px}.hero-copy>p{font-size:17px}.hero-previews{height:470px}.browser.cleaning{top:250px}.access-card{padding:22px 18px}.access-card h2{font-size:25px}.access-card .card-subhead{font-size:17px;margin-bottom:14px}.access-card .card-copy{font-size:14px;line-height:1.38}.pricing-wrap{gap:27px}.plan{padding:23px}.dashboard-top .site-shot{width:105px}}
@media(max-width:820px){html{scroll-padding-top:78px}.container{width:calc(100% - 32px)}.header-inner{min-height:78px}.brand{gap:10px}.logo{width:51px;height:51px}.wordmark{width:190px}.menu-toggle{display:block;background:rgba(255,255,255,.12);color:white;border:1px solid rgba(193,223,248,.46);border-radius:10px;font-size:21px;padding:4px 10px}nav{display:none;position:absolute;top:78px;left:16px;right:16px;background:linear-gradient(145deg,rgba(18,57,112,.98),rgba(6,29,54,.99));padding:14px;border:1px solid rgba(193,223,248,.24);box-shadow:0 22px 50px rgba(0,0,0,.3);border-radius:14px;flex-direction:column;align-items:stretch;gap:3px}nav.open{display:flex}nav a{padding:11px 6px}.hero{min-height:auto}.hero-inner{display:block;min-height:auto}.hero-copy{padding:50px 0 28px;max-width:none}.hero h1{font-size:clamp(43px,8vw,63px)}.hero-support-card{margin:19px 0 27px;padding:16px 18px}.hero-support-card p{font-size:18px}.hero-previews{height:440px;max-width:590px;margin-inline:auto}.browser.landscaping{width:88%;left:10%}.browser.cleaning{width:87%;left:1%;top:230px}.access-grid{grid-template-columns:1fr;margin-top:-45px;max-width:590px;gap:15px}.access-card{min-height:0}.examples{padding-top:59px}.section-heading h2{font-size:35px}.section-heading:before,.section-heading:after{width:30px}.portfolio-grid{grid-template-columns:1fr;max-width:590px;margin-inline:auto}.bottom-grid{grid-template-columns:1fr;max-width:590px;margin-inline:auto;margin-top:22px}.pricing-wrap{grid-template-columns:1fr}.pricing-copy{max-width:650px}.plans{max-width:650px}.plan.featured{transform:none}.footer-inner{align-items:flex-start}}
@media(max-width:560px){.container{width:calc(100% - 24px)}.wordmark{width:165px}.logo{width:45px;height:45px}.hero-copy{padding-top:42px}.eyebrow{font-size:9px}.hero h1{font-size:clamp(40px,12vw,54px)}.hero-support-card{padding:15px 16px}.hero-support-card p{font-size:16px}.hero-buttons{display:grid;grid-template-columns:1fr 1fr}.hero-buttons .primary{grid-column:1/-1}.hero-buttons .button{width:100%;padding-inline:12px}.hero-proof{gap:6px}.hero-proof span{font-size:9px}.hero-previews{height:340px}.browser{padding:6px;border-radius:10px}.browser-bar{height:17px}.browser-bar b{display:none}.browser.cleaning{top:175px}.browser-caption{display:none}.content-shell{padding-top:27px}.access-grid{margin-top:-35px}.access-card{border-radius:18px;padding:20px}.access-card .card-subhead{font-size:16px;margin-bottom:12px}.access-card .card-copy{font-size:13px;line-height:1.34;margin-bottom:16px}.section-heading{gap:9px}.section-heading:before,.section-heading:after{width:18px}.section-heading h2{font-size:31px}.section-subtitle{font-size:14px}.portfolio-body{align-items:center}.feature-card{padding:23px}.dashboard-top{gap:12px}.dashboard-top .site-shot{width:87px}.dashboard-buttons{flex-direction:column}.pricing-section{padding:58px 0}.pricing-copy h2{font-size:43px}.plans{grid-template-columns:1fr}.plan{border-radius:18px}.plan>p:not(.plan-price):not(.plan-label),.plan ul{min-height:0}.pricing-icon{width:40px;height:40px;flex-basis:40px}.footer-inner{flex-direction:column}.footer-contact{text-align:left}.footer-inner .wordmark{width:190px}.footer-inner .logo{width:48px;height:48px}dialog{padding:24px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.button,.portfolio{transition:none}}

@media(max-width:620px){.section-heading-wrap,.pricing-copy{padding:18px 16px;border-radius:18px}}

.feature-card .section-kicker{color:#647e94;text-shadow:none}.feature-card h2{color:var(--ink)}


.hero .button.primary{background:linear-gradient(135deg,#ffffff 0%,#edf6ff 100%);color:var(--navy);border-color:rgba(193,223,248,.4);box-shadow:0 12px 28px rgba(5,31,57,.24)}
.hero .button.glass{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.42);color:#fff;box-shadow:0 10px 22px rgba(0,0,0,.12)}
.hero .button.glass:hover{background:rgba(255,255,255,.16)}
.content-shell .button.primary,.plans .button.primary,.feature-card .button.primary{background:linear-gradient(135deg,#163968,#102a56);color:#fff}
.page-background-stack img:first-child{margin-top:0}
@media(max-width:1050px){.page-background-stack{top:-120px}}
@media(max-width:820px){.page-background-stack{top:-70px}}
@media(max-width:560px){.page-background-stack{top:-30px}}


/* Pass 3 fixes: stop card overlap and improve hero proof pills */
.hero{padding-bottom:16px}
.hero-previews{margin-bottom:12px}
.content-shell{padding-top:12px}
.access-grid{margin-top:24px;align-items:start}

.hero-proof{position:relative;z-index:3;gap:12px;margin-top:28px}
.hero-proof span{display:inline-flex;align-items:center;white-space:nowrap;min-height:40px;padding:10px 16px;border-radius:999px;background:rgba(6,29,54,.62);border:1px solid rgba(215,231,243,.22);color:#ffffff;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:0 8px 22px rgba(0,0,0,.14);text-shadow:0 1px 2px rgba(0,0,0,.28)}
.hero-proof span:before{margin-right:8px}

@media(max-width:820px){
  .content-shell{padding-top:10px}
  .access-grid{margin-top:18px}
}

@media(max-width:560px){
  .hero-proof{gap:8px;margin-top:22px}
  .hero-proof span{font-size:10px;min-height:36px;padding:8px 12px}
  .content-shell{padding-top:8px}
  .access-grid{margin-top:14px}
}


/* Pass 4: give the hero enough height for the full preview */
@media(min-width:821px){
  .hero{min-height:790px;padding-bottom:36px}
  .hero-inner{min-height:790px;align-items:center}
  .hero-previews{height:650px;margin-bottom:0}
  .browser.landscaping{top:18px}
  .browser.cleaning{top:330px}
  .content-shell{padding-top:18px}
  .access-grid{margin-top:20px}
}
@media(min-width:1051px){
  .hero{min-height:830px}
  .hero-inner{min-height:830px}
  .hero-previews{height:690px}
  .browser.cleaning{top:345px}
}

/* Pass 5: eliminate top band and fully contain browser previews */
.page-background-stack{top:-240px}
.hero{overflow:visible}

@media(min-width:821px){
  .hero{min-height:920px;padding-bottom:54px}
  .hero-inner{min-height:920px;align-items:start}
  .hero-copy{padding-top:72px}
  .hero-previews{height:790px;margin-top:36px;margin-bottom:0;align-self:start}
  .browser.landscaping{top:0}
  .browser.cleaning{top:360px}
  .content-shell{padding-top:16px}
  .access-grid{margin-top:16px}
}

@media(min-width:1051px){
  .hero{min-height:960px}
  .hero-inner{min-height:960px}
  .hero-previews{height:820px}
  .browser.cleaning{top:372px}
}

@media(max-width:1050px) and (min-width:821px){
  .page-background-stack{top:-170px}
}

@media(max-width:820px){
  .page-background-stack{top:-90px}
  .hero{overflow:visible}
  .hero-previews{height:510px}
  .browser.cleaning{top:250px}
}

@media(max-width:560px){
  .page-background-stack{top:-45px}
  .hero-previews{height:390px}
  .browser.cleaning{top:190px}
}


/* Pass 6: reduce bottom gap by overlapping the hero previews more */
@media(min-width:821px){
  .hero{min-height:760px;padding-bottom:18px;overflow:visible}
  .hero-inner{min-height:760px;align-items:start}
  .hero-copy{padding-top:64px;padding-bottom:36px}
  .hero-previews{height:560px;margin-top:20px;margin-bottom:0;align-self:start}
  .browser.landscaping{top:0;left:10%;width:88%;transform:rotate(1.4deg)}
  .browser.cleaning{top:205px;left:0;width:84%;transform:rotate(-2deg);z-index:2}
  .content-shell{padding-top:0}
  .access-grid{margin-top:-8px;align-items:start}
}

@media(min-width:1051px){
  .hero{min-height:800px;padding-bottom:18px}
  .hero-inner{min-height:800px}
  .hero-previews{height:600px;margin-top:18px}
  .browser.landscaping{top:6px;left:12%;width:86%}
  .browser.cleaning{top:225px;left:2%;width:82%}
  .access-grid{margin-top:-12px}
}

@media(max-width:820px){
  .content-shell{padding-top:6px}
  .access-grid{margin-top:8px}
}


/* Pass 7: aggressively tighten desktop hero spacing */
@media(min-width:821px){
  .hero{min-height:625px;padding-bottom:0;overflow:visible}
  .hero-inner{min-height:625px;align-items:start}
  .hero-copy{padding-top:58px;padding-bottom:22px}
  .hero-previews{height:500px;margin-top:10px;margin-bottom:0;align-self:start}
  .browser.landscaping{top:0;left:13%;width:82%;transform:rotate(1.2deg)}
  .browser.cleaning{top:145px;left:2%;width:78%;transform:rotate(-1.7deg);z-index:2}
  .content-shell{padding-top:0}
  .access-grid{margin-top:-6px}
}

@media(min-width:1051px){
  .hero{min-height:650px}
  .hero-inner{min-height:650px}
  .hero-previews{height:520px;margin-top:8px}
  .browser.landscaping{top:0;left:14%;width:80%}
  .browser.cleaning{top:150px;left:3%;width:76%}
  .access-grid{margin-top:-10px}
}


/* Pass 8: force matching service card heights */
.access-grid{align-items:stretch!important}
.access-grid > .access-card{height:100%}
.access-card{height:100%;display:flex;flex-direction:column}
.access-card .button{margin-top:auto}
@media(max-width:820px){
  .access-grid{align-items:stretch!important}
  .access-grid > .access-card{height:auto}
}


/* Pass 6: improve contrast for hero secondary buttons */
.hero .button.glass{
  background:linear-gradient(135deg,rgba(255,255,255,.24) 0%,rgba(186,216,255,.20) 100%);
  border-color:rgba(255,255,255,.58);
  color:#ffffff;
  text-shadow:0 1px 2px rgba(0,0,0,.55);
  box-shadow:0 14px 30px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.28);
  backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
}
.hero .button.glass:hover{
  background:linear-gradient(135deg,rgba(255,255,255,.30) 0%,rgba(201,225,255,.26) 100%);
  border-color:rgba(255,255,255,.72);
  box-shadow:0 18px 34px rgba(0,0,0,.26),inset 0 1px 0 rgba(255,255,255,.34);
}
.hero .button.glass:focus-visible{
  outline:3px solid rgba(234,245,255,.85);
  outline-offset:3px;
}
.hero-buttons .button.glass{min-width:162px;justify-content:center}
@media(max-width:560px){
  .hero-buttons .button.glass{min-width:0}
}


/* Client references page */
.references-page{background:#0d2a56}
.references-main{position:relative;isolation:isolate;overflow:hidden;min-height:100vh;padding-bottom:72px}
.references-bg{position:absolute;inset:0;z-index:-2;background:linear-gradient(180deg,#0e2a56 0%,#103567 38%,#0b2853 100%)}
.references-bg:after{content:"";position:absolute;right:-12%;top:280px;width:75%;height:820px;background:radial-gradient(ellipse at center,rgba(133,201,255,.24),transparent 58%);filter:blur(10px)}
.references-hero{padding:86px 0 58px;color:#fff;text-align:center}
.references-hero-inner{max-width:820px}
.refs-kicker{color:#d9eaff;margin-bottom:15px;text-shadow:0 2px 8px rgba(0,0,0,.3)}
.references-hero h1{font-size:clamp(48px,7vw,82px);text-shadow:0 5px 24px rgba(0,0,0,.28)}
.references-hero h1 span{font-family:"Cormorant Garamond",serif;font-style:italic;color:#dfeeff}
.references-hero p:not(.section-kicker){max-width:690px;margin:22px auto 0;color:#dce8f4;font-size:18px;line-height:1.7}
.reference-projects{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;align-items:stretch}
.reference-project{display:flex;flex-direction:column;min-width:0;background:linear-gradient(145deg,rgba(255,255,255,.91),rgba(232,242,251,.84));border:1px solid rgba(255,255,255,.72);border-radius:24px;overflow:hidden;box-shadow:0 28px 70px rgba(0,0,0,.26);backdrop-filter:blur(14px)}
.reference-preview{margin:16px 16px 0;border-radius:15px;overflow:hidden;min-height:245px;border:1px solid rgba(23,64,103,.13);box-shadow:0 15px 28px rgba(17,50,83,.13);display:flex;flex-direction:column}
.reference-browserbar{height:35px;display:flex;align-items:center;gap:6px;padding:0 12px;background:rgba(237,244,250,.96);color:#567188;font-size:10px;font-weight:700}
.reference-browserbar i{width:7px;height:7px;border-radius:50%;background:#f3a169}.reference-browserbar i:nth-child(2){background:#e5cf67}.reference-browserbar i:nth-child(3){background:#5acbb5}.reference-browserbar span{margin-left:7px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.reference-visual{flex:1;display:grid;place-items:center;align-content:center;gap:15px;color:#fff;text-align:center;position:relative;overflow:hidden}
.reference-visual:after{content:"";position:absolute;width:260px;height:260px;border:1px solid rgba(255,255,255,.16);border-radius:50%;right:-95px;bottom:-125px}
.reference-visual i{font-size:52px;filter:drop-shadow(0 7px 18px rgba(0,0,0,.18))}
.reference-visual span{font-family:"Bricolage Grotesque",sans-serif;font-size:25px;font-weight:800;text-shadow:0 3px 13px rgba(0,0,0,.2)}
.reference-cleaning .reference-visual{background:linear-gradient(135deg,#1a5d88,#68b7d7)}
.reference-salon .reference-visual{background:linear-gradient(135deg,#32284f,#956f93)}
.reference-landscape .reference-visual{background:linear-gradient(135deg,#28503f,#699374)}
.reference-project-body{padding:24px;display:flex;flex:1;flex-direction:column;justify-content:space-between;gap:24px}
.reference-type{font-size:10px;text-transform:uppercase;letter-spacing:.17em;font-weight:800;color:#6d879e;margin-bottom:7px}
.reference-project h2{font-size:29px;color:var(--ink);margin-bottom:12px}
.reference-project-body p:not(.reference-type){font-size:14px;line-height:1.6;color:var(--text)}
.reference-link{align-self:flex-start}
.references-cta{margin-top:34px;border-radius:24px;padding:30px 34px;display:flex;align-items:center;justify-content:space-between;gap:28px;color:#fff;background:linear-gradient(135deg,rgba(6,27,56,.82),rgba(24,63,103,.72));border:1px solid rgba(255,255,255,.16);box-shadow:0 24px 58px rgba(0,0,0,.23);backdrop-filter:blur(12px)}
.references-cta .section-kicker{color:#cfe4f6;margin-bottom:8px}
.references-cta h2{font-size:36px;margin-bottom:8px}
.references-cta p:not(.section-kicker){color:#d8e5ef}
.references-cta .button.primary{flex-shrink:0;background:linear-gradient(135deg,#fff,#e9f4ff);color:var(--navy);border-color:rgba(255,255,255,.6)}
@media(max-width:900px){.reference-projects{grid-template-columns:1fr;max-width:650px}.reference-preview{min-height:300px}.references-cta{max-width:650px;flex-direction:column;align-items:flex-start}}
@media(max-width:560px){.references-hero{padding:62px 0 42px}.references-hero p:not(.section-kicker){font-size:16px}.reference-preview{min-height:220px;margin:12px 12px 0}.reference-project-body{padding:20px}.references-cta{padding:24px}.references-cta h2{font-size:30px}}
.references-cta-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.references-cta .button.secondary{flex-shrink:0;background:rgba(255,255,255,.08);color:#fff;border-color:rgba(255,255,255,.42)}
@media(max-width:900px){.references-cta-actions{width:100%}.references-cta-actions .button{flex:1 1 180px;text-align:center}}
@media(max-width:560px){.references-cta-actions{display:grid;grid-template-columns:1fr}.references-cta-actions .button{width:100%}}



/* Reference page photo screenshots */
.reference-screenshot{width:100%;height:100%;min-height:210px;object-fit:contain;object-position:center top;display:block;flex:1;background:#dce7f0;padding:6px}
.reference-gallery{margin-top:38px}
.reference-gallery-heading{text-align:center;max-width:720px;margin:0 auto 20px;color:#fff}
.reference-gallery-heading h2{font-size:36px;margin:6px 0 10px}
.reference-gallery-heading p:not(.section-kicker){color:#d8e5ef}
.reference-gallery-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.reference-gallery-item{margin:0;background:rgba(255,255,255,.92);padding:12px;border-radius:22px;border:1px solid rgba(255,255,255,.7);box-shadow:0 24px 58px rgba(0,0,0,.22);overflow:hidden}
.reference-gallery-item img{width:100%;aspect-ratio:16/10;object-fit:cover;object-position:top center;border-radius:14px;display:block}
@media(max-width:900px){.reference-gallery{max-width:650px}.reference-gallery-grid{grid-template-columns:1fr}}
@media(max-width:560px){.reference-gallery-heading h2{font-size:30px}.reference-gallery-item{padding:9px;border-radius:18px}}

/* References page begins directly with project cards (no intro hero). */
.references-page .reference-projects{padding-top:48px}
@media(max-width:820px){.references-page .reference-projects{padding-top:28px}}

.portfolio-image,.reference-preview{background-clip:padding-box}
.portfolio-image .site-shot{display:block}


/* Mobile polish pass */
.menu-toggle{
  position:relative;
  width:46px;
  height:46px;
  padding:0;
  border:1px solid rgba(255,255,255,.28);
  border-radius:13px;
  background:rgba(255,255,255,.08);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 8px 20px rgba(0,0,0,.14);
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:5px;
}
.menu-toggle span{
  width:21px;
  height:2px;
  border-radius:999px;
  background:#fff;
  transition:transform .22s ease,opacity .18s ease;
  transform-origin:center;
}
.menu-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.menu-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.menu-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

@media(max-width:820px){
  html{scroll-padding-top:82px}
  body{font-size:15px}
  .container{width:min(100% - 28px,620px)}
  .site-header{position:sticky;top:0}
  .header-inner{min-height:76px;gap:16px}
  .brand{gap:9px;min-width:0}
  .logo{width:49px;height:49px;flex:0 0 49px}
  .wordmark{width:min(185px,52vw)}
  .menu-toggle{display:flex;flex:0 0 46px}
  nav{
    display:flex;
    position:absolute;
    top:calc(100% + 8px);
    left:14px;
    right:14px;
    padding:10px;
    gap:4px;
    flex-direction:column;
    align-items:stretch;
    background:linear-gradient(160deg,rgba(7,30,67,.985),rgba(19,69,139,.97));
    border:1px solid rgba(202,226,255,.25);
    border-radius:18px;
    box-shadow:0 24px 55px rgba(0,0,0,.38);
    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transform:translateY(-8px) scale(.985);
    transform-origin:top center;
    transition:opacity .2s ease,transform .2s ease,visibility .2s;
  }
  nav.open{opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0) scale(1)}
  nav a,nav .button{
    width:100%;
    min-height:48px;
    justify-content:flex-start;
    padding:13px 15px;
    border-radius:12px;
    border-bottom:0;
    font-size:15px;
  }
  nav a:hover,nav a.active{background:rgba(255,255,255,.09);border-color:transparent}
  nav .button.outline.light{margin-top:4px;justify-content:center;background:#fff;color:var(--navy);border-color:#fff}

  .hero{min-height:auto!important;padding-bottom:10px;overflow:hidden}
  .hero-inner{display:flex;flex-direction:column;min-height:0!important;gap:4px;align-items:stretch}
  .hero-copy{max-width:none;padding:42px 0 20px!important}
  .eyebrow{font-size:9px;letter-spacing:.16em;margin-bottom:14px}
  .eyebrow span{width:26px}
  .hero h1{font-size:clamp(40px,10vw,58px);line-height:.98}
  .hero-tagline-image{width:min(100%,520px);margin-top:8px}
  .hero-support-card{max-width:none;margin:18px 0 20px;padding:15px 16px;border-radius:16px}
  .hero-support-card p{font-size:16px;line-height:1.48}
  .hero-buttons{display:grid;grid-template-columns:1fr 1fr;gap:9px}
  .hero-buttons .button{min-height:48px;padding-inline:12px}
  .hero-buttons .primary{grid-column:1/-1}
  .hero-proof{gap:7px;margin-top:18px}
  .hero-proof span{min-height:34px;padding:7px 10px;font-size:9px}

  .hero-previews{height:390px!important;width:100%;max-width:590px;margin:4px auto 0!important;align-self:center}
  .preview-orbit{display:none}
  .browser{border-radius:12px;padding:7px}
  .browser.landscaping{top:10px!important;left:10%!important;width:86%!important;transform:rotate(1deg)}
  .browser.cleaning{top:160px!important;left:0!important;width:84%!important;transform:rotate(-1.2deg)}
  .browser-caption{padding-top:5px}

  .content-shell{padding:20px 0 42px!important}
  .access-grid{grid-template-columns:1fr!important;margin-top:0!important;gap:13px;max-width:620px}
  .access-card{min-height:0!important;height:auto!important;padding:21px 19px;border-radius:18px}
  .access-card .icon{width:52px;height:52px;border-radius:15px;margin-bottom:14px}
  .access-card .icon i{font-size:26px}
  .access-card h2{font-size:25px}
  .access-card .card-subhead{font-size:16px;margin-bottom:11px}
  .access-card .card-copy{font-size:13px;margin-bottom:18px}
  .access-card .button{width:100%;margin-top:4px}
  .card-number{font-size:28px;right:18px;top:16px}

  .examples{padding-top:46px}
  .section-heading-wrap{padding:18px 16px;margin-bottom:18px;border-radius:18px}
  .section-heading{gap:9px}
  .section-heading:before,.section-heading:after{width:20px}
  .section-heading h2{font-size:31px}
  .section-subtitle{font-size:14px;line-height:1.55;margin-top:10px}
  .portfolio-grid{grid-template-columns:1fr;gap:14px;max-width:620px;margin:auto}
  .portfolio{border-radius:18px}
  .portfolio-body{padding:14px 15px 15px;align-items:center}
  .portfolio .button{min-height:42px}

  .bottom-grid{grid-template-columns:1fr!important;gap:14px;max-width:620px;margin:18px auto 0!important}
  .feature-card{padding:21px;border-radius:18px}
  .feature-card h2{font-size:28px}
  .reference-thumbs{gap:7px;margin:16px 0}
  .references-card .button{width:100%}
  .dashboard-example{padding:14px}
  .dashboard-top{gap:12px;align-items:center}
  .dashboard-top .site-shot{width:105px}
  .dashboard-buttons{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .dashboard-buttons .button:first-child{grid-column:1/-1}

  .pricing-section{padding:48px 0 54px}
  .pricing-wrap{grid-template-columns:1fr!important;gap:14px}
  .pricing-copy{padding:22px;border-radius:18px}
  .pricing-copy h2{font-size:42px}
  .pricing-copy>p:not(.section-kicker){margin:14px 0 18px;line-height:1.6}
  .plans{grid-template-columns:1fr!important;gap:13px;max-width:none}
  .plan{padding:21px;border-radius:18px}
  .plan-price{font-size:39px;margin-top:17px}
  .plan>p:not(.plan-price):not(.plan-label),.plan ul{min-height:0}

  .footer-inner{flex-direction:column;align-items:flex-start;gap:18px}
  .footer-contact{text-align:left}
  footer{padding:28px 0}

  dialog{width:calc(100% - 24px);padding:22px;border-radius:18px}
  dialog h2{font-size:27px}

  /* References page */
  .references-main{padding-bottom:48px}
  .reference-projects{grid-template-columns:1fr!important;gap:14px!important;padding-top:26px!important;max-width:620px}
  .reference-project{border-radius:18px!important}
  .reference-preview{margin:10px 10px 0!important;min-height:0!important;border-radius:12px}
  .reference-screenshot{min-height:0!important;height:auto!important;aspect-ratio:auto;object-fit:contain!important;padding:0!important}
  .reference-project-body{padding:18px!important;gap:16px}
  .reference-project-body h2{font-size:27px}
  .reference-link{width:100%}
  .references-cta{margin-top:18px!important;padding:22px!important;border-radius:18px!important;flex-direction:column;align-items:stretch!important}
  .references-cta .button{width:100%}
}

@media(max-width:480px){
  .container{width:calc(100% - 20px)}
  .header-inner{min-height:70px}
  .logo{width:44px;height:44px;flex-basis:44px}
  .wordmark{width:min(158px,49vw)}
  .menu-toggle{width:43px;height:43px;flex-basis:43px;border-radius:12px}
  nav{left:10px;right:10px}
  .hero-copy{padding-top:34px!important}
  .hero h1{font-size:clamp(36px,11vw,48px)}
  .hero-buttons{grid-template-columns:1fr}
  .hero-buttons .primary{grid-column:auto}
  .hero-previews{height:315px!important}
  .browser.landscaping{width:90%!important;left:8%!important}
  .browser.cleaning{top:132px!important;width:88%!important}
  .browser-bar{display:none}
  .browser-caption{display:none}
  .access-card,.feature-card,.pricing-copy,.plan{padding:18px}
  .section-heading h2{font-size:28px}
  .portfolio-body{display:grid;grid-template-columns:1fr;gap:10px;align-items:start}
  .portfolio .button{width:100%}
  .reference-thumbs{grid-template-columns:1fr;gap:9px}
  .reference-thumbs img{aspect-ratio:auto;max-height:none;object-fit:contain;border-radius:10px}
  .dashboard-top{align-items:flex-start}
  .dashboard-top .site-shot{width:92px}
  .dashboard-buttons{grid-template-columns:1fr}
  .dashboard-buttons .button:first-child{grid-column:auto}
  .pricing-copy h2{font-size:38px}
  .footer-inner .wordmark{width:180px}
}


/* Dedicated Preview + Pricing pages */
.standalone-page{background:#0d2a56}
.standalone-main{position:relative;isolation:isolate;overflow:hidden;min-height:calc(100vh - 92px);padding:64px 0 76px;color:#fff}
.standalone-bg{position:absolute;inset:0;z-index:-2;background:linear-gradient(180deg,#0d2a56 0%,#123c78 48%,#0a2855 100%)}
.standalone-bg:before{content:"";position:absolute;left:-12%;top:8%;width:70%;height:620px;background:radial-gradient(circle,rgba(94,177,255,.22),transparent 62%);filter:blur(14px)}
.standalone-bg:after{content:"";position:absolute;right:-18%;bottom:-12%;width:70%;height:620px;background:radial-gradient(circle,rgba(187,220,255,.18),transparent 64%);filter:blur(18px)}

.preview-hero{display:grid;grid-template-columns:.9fr 1.1fr;gap:46px;align-items:center}
.preview-intro{max-width:520px}
.preview-intro .section-kicker,.pricing-page-intro .section-kicker{color:#d9ebfa;margin-bottom:14px}
.preview-intro h1,.pricing-page-intro h1{font-size:clamp(46px,5.2vw,72px);text-shadow:0 3px 16px rgba(0,0,0,.35)}
.preview-intro>p:not(.section-kicker),.pricing-page-intro>p:not(.section-kicker){margin-top:20px;color:#d9e6f2;font-size:18px;line-height:1.7}
.preview-access-card{background:linear-gradient(145deg,rgba(250,252,255,.96),rgba(226,238,249,.9));color:var(--ink);border:1px solid rgba(255,255,255,.72);border-radius:26px;padding:34px;box-shadow:0 28px 75px rgba(0,0,0,.28)}
.preview-access-icon{width:58px;height:58px;display:grid;place-items:center;border-radius:17px;background:linear-gradient(145deg,#eaf5ff,#cfe5f7);color:var(--navy);font-size:27px;margin-bottom:18px}
.preview-access-card h2{font-size:34px;margin-bottom:8px}
.preview-access-card>p{color:var(--text);margin-bottom:23px}
.preview-page-form label{display:block;font-size:12px;font-weight:800;color:var(--ink);margin-bottom:8px}
.preview-input-row{display:grid;grid-template-columns:1fr auto;gap:10px}
.preview-input-row input,.preview-input-row select{min-width:0;border:1px solid #a9bfd3;border-radius:14px;padding:14px 15px;background:#fff;color:var(--ink);outline:none}
.preview-input-row input:focus,.preview-input-row select:focus{border-color:#3c78b5;box-shadow:0 0 0 3px rgba(60,120,181,.15)}
.preview-page-form .form-message{min-height:22px;color:#a02a21;font-size:12px;margin-top:8px}
.preview-help{display:grid;gap:12px;margin:22px 0}
.preview-help>div{display:grid;grid-template-columns:38px 1fr;gap:12px;align-items:start;padding:13px;border-radius:15px;background:rgba(255,255,255,.65);border:1px solid rgba(104,143,177,.18)}
.preview-help i{width:38px;height:38px;display:grid;place-items:center;border-radius:11px;background:#e5f2ff;color:#1d5689;font-size:18px}
.preview-help span{display:grid;color:var(--text);font-size:13px;line-height:1.45}
.preview-help b{color:var(--ink);font-size:14px;margin-bottom:2px}
.preview-request{width:100%}

.pricing-main{padding-top:54px}
.pricing-page-intro{max-width:920px;text-align:center;margin-bottom:22px}
.pricing-page-intro h1{font-size:clamp(44px,5vw,68px)}
.pricing-page-intro>p:not(.section-kicker){max-width:760px;margin:18px auto 0}
.standalone-pricing{padding:24px 0 28px}
.pricing-faq{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:18px}
.pricing-faq article{background:linear-gradient(145deg,rgba(255,255,255,.94),rgba(229,239,248,.9));color:var(--ink);border:1px solid rgba(255,255,255,.7);border-radius:20px;padding:24px;box-shadow:0 18px 42px rgba(0,0,0,.18)}
.pricing-faq i{width:auto;height:auto;display:inline-grid;place-items:center;border-radius:0;background:transparent;color:#1d5689;font-size:28px;margin-bottom:14px;box-shadow:none}
.pricing-faq h2{font-size:22px;margin-bottom:8px}
.pricing-faq p{color:var(--text);font-size:13px;line-height:1.6}

@media(max-width:820px){
  .standalone-main{min-height:calc(100vh - 76px);padding:38px 0 50px}
  .preview-hero{grid-template-columns:1fr;gap:22px}
  .preview-intro{max-width:none;text-align:center}
  .preview-intro h1,.pricing-page-intro h1{font-size:clamp(39px,10vw,54px)}
  .preview-intro>p:not(.section-kicker),.pricing-page-intro>p:not(.section-kicker){font-size:16px;line-height:1.6}
  .preview-access-card{padding:24px;border-radius:20px}
  .preview-access-card h2{font-size:30px}
  .pricing-main{padding-top:34px}
  .pricing-page-intro{margin-bottom:12px}
  .pricing-faq{grid-template-columns:1fr;gap:12px;margin-top:12px}
}
@media(max-width:520px){
  .preview-input-row{grid-template-columns:1fr}
  .preview-input-row .button{width:100%}
  .preview-access-card{padding:20px 18px}
  .preview-help>div{grid-template-columns:34px 1fr;padding:11px}
  .preview-help i{width:34px;height:34px}
}

/* Simplified homepage: hero flows directly into references/dashboard */
#home .content-shell{padding-top:34px}
#home .bottom-grid{margin-top:0}
@media(max-width:820px){#home .content-shell{padding-top:24px}#home .bottom-grid{margin-top:0}}
@media(max-width:560px){#home .content-shell{padding-top:18px}}


/* Exact GitHub phone showcase component values; only the outer wrapper is adapted so it can sit before this site's footer. */
.github-showcase-exact{position:relative;z-index:2;padding:54px 0 58px;overflow:hidden}
.github-showcase-card{position:relative!important;top:auto!important;left:auto!important;right:auto!important;width:min(820px,calc(100% - 56px));height:475px;margin:0 auto;border:1.5px solid rgba(202,232,255,.88);border-radius:26px;transform:none!important;will-change:opacity,filter}
.github-showcase-exact .phone-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));height:100%}
.github-showcase-exact .phone{position:relative;height:100%;min-height:0;overflow:hidden;opacity:0;translate:0 34px;transition:opacity .48s ease,translate .62s cubic-bezier(.16,1,.3,1);background:linear-gradient(150deg,rgba(255,255,255,.23),rgba(255,255,255,.07));border:1px solid rgba(255,255,255,.90);border-radius:25px;box-shadow:0 0 0 5px rgba(255,255,255,.08),0 20px 38px rgba(0,0,0,.28),inset 0 0 0 1px rgba(255,255,255,.22),inset 0 14px 26px rgba(255,255,255,.10);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);transform-origin:center;animation:phoneSpotlight 9s ease-in-out infinite}
.github-showcase-exact .phone:nth-child(1){animation-delay:0s;transition-delay:.04s}.github-showcase-exact .phone:nth-child(2){animation-delay:3s;transition-delay:.14s;padding-bottom:5px}.github-showcase-exact .phone:nth-child(3){animation-delay:6s;transition-delay:.24s}
.github-showcase-exact.cards-loaded .phone{opacity:1;translate:0 0}
.github-showcase-exact .phone::before{content:"";position:absolute;top:8px;left:50%;width:54px;height:4px;transform:translateX(-50%);border-radius:999px;background:#ffffff;box-shadow:inset 0 2px 3px rgba(8,18,42,.42),inset 0 -1px 1px rgba(255,255,255,.92),0 1px 0 rgba(255,255,255,.08),0 2px 5px rgba(0,0,0,.16)}
.github-showcase-exact .phone-screen{display:flex;flex-direction:column;height:100%;padding-top:4px;color:#0d2347}
.github-showcase-exact .solid-card{background:rgba(255,255,255,.96);border:1px solid rgba(255,255,255,.9);border-radius:16px;box-shadow:0 8px 18px rgba(3,18,47,.18);transform-origin:center}
.github-showcase-exact .mini-header{display:flex;justify-content:space-between;align-items:center;padding:12px 14px;background:#ffffff}
.github-showcase-exact .eyebrow{margin:0 0 4px;font-size:11px;font-weight:700;color:#5b5870;letter-spacing:.12em;text-shadow:none}
.github-showcase-exact .card-title{margin:0;font-size:18px;line-height:1.08;color:#18233f;letter-spacing:-.02em}
.github-showcase-exact .icon-bubble{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#22c55e;color:#fff;font-size:13px;font-weight:700;flex:0 0 auto;box-shadow:0 7px 14px rgba(34,197,94,.28)}
.github-showcase-exact .phone:first-child{position:relative;z-index:20}
.github-showcase-exact .photo-frame{padding:10px 10px 2px;overflow:visible;position:relative;z-index:10000;isolation:isolate;background:#ffffff}
.github-showcase-exact .photo-card{display:block;position:relative;z-index:10001;width:calc(100% + 20px);height:136px;margin:-16px -10px -2px;object-fit:contain;object-position:center;background:none;overflow:visible;filter:none;transform:rotate(-18deg) scale(1);transform-origin:center center;will-change:transform;pointer-events:none}
.github-showcase-exact .bowl-shadow{position:absolute;z-index:10000;left:50%;transform:translateX(-50%);pointer-events:none}
.github-showcase-exact .bowl-hit-area{position:absolute;z-index:10002;top:50%;left:50%;width:116px;height:116px;transform:translate(-50%,-50%);border-radius:50%;cursor:grab}.github-showcase-exact .bowl-hit-area:active{cursor:grabbing}
.github-showcase-exact .info-card{position:relative;z-index:1;padding:12px 14px;background:#ffffff}.github-showcase-exact .info-card h3{margin:0 0 5px;font-size:14px;color:#14323b;letter-spacing:-.02em}.github-showcase-exact .info-card p{margin:0;color:#46606e;font-size:11px;line-height:1.35;font-weight:500}
.github-showcase-exact .metric-row{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}.github-showcase-exact .metric{padding:9px 4px;text-align:center;border-radius:14px;background:rgba(255,255,255,.96);box-shadow:0 8px 16px rgba(3,18,47,.14)}.github-showcase-exact .metric:nth-child(1){background:#f97316}.github-showcase-exact .metric:nth-child(2){background:#3b82f6}.github-showcase-exact .metric:nth-child(3){background:#22c55e}.github-showcase-exact .metric strong{display:block;font-size:15px;color:#ffffff;letter-spacing:-.03em}.github-showcase-exact .metric span{font-size:10px;color:rgba(255,255,255,.9)}
.github-showcase-exact .blog-shell{display:flex;flex-direction:column;height:100%;gap:8px;color:#0f172a}.github-showcase-exact .blog-top{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 11px;background:#fff;border:1px solid #e2e8f0;box-shadow:0 8px 18px rgba(15,23,42,.08)}.github-showcase-exact .blog-mark{font-size:14px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}.github-showcase-exact .blog-actions{display:flex;gap:6px}.github-showcase-exact .blog-btn{padding:6px 9px;border:0;border-radius:999px;font-size:9px;font-weight:800;cursor:pointer;transition:transform .18s ease,box-shadow .18s ease,filter .18s ease}.github-showcase-exact .blog-btn:hover{transform:translateY(-1px);filter:brightness(1.04);box-shadow:0 7px 14px rgba(15,23,42,.14)}.github-showcase-exact .blog-btn.login{background:#fff;color:#334155;border:1px solid #e2e8f0}.github-showcase-exact .blog-btn.signup{background:#fff;color:#334155;border:1px solid #e2e8f0;box-shadow:0 6px 12px rgba(15,23,42,.08)}
.github-showcase-exact .blog-viewport{position:relative;flex:1;min-height:0;overflow:clip;border-radius:18px;background:#f8fafc;border:1px solid #e2e8f0;padding:0;box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 10px 22px rgba(15,23,42,.08);touch-action:pan-y;cursor:grab;user-select:none;-webkit-user-select:none;isolation:isolate}.github-showcase-exact .blog-viewport.is-dragging{cursor:grabbing}.github-showcase-exact .blog-viewport.is-dragging .blog-track{transition:none}.github-showcase-exact .blog-track{display:flex;height:100%;gap:0;transition:transform .72s cubic-bezier(.22,.75,.2,1);will-change:transform}.github-showcase-exact .blog-post{position:relative;isolation:isolate;height:100%;padding:7px;display:flex;flex-direction:column;gap:8px;overflow:hidden}.github-showcase-exact .blog-image{position:relative;z-index:1;display:block;flex:1 1 auto;min-height:140px;width:100%;height:auto;object-fit:cover;border-radius:15px;background:#e5e7eb;border:1px solid rgba(255,255,255,.9);box-shadow:0 9px 20px rgba(15,23,42,.14);overflow:hidden;opacity:0;transition:opacity .3s ease;filter:none}
.github-showcase-exact .blog-post::before{content:"";position:absolute;z-index:0;pointer-events:none;top:7px;right:7px;left:7px;bottom:69px;border-radius:15px;background:linear-gradient(90deg,#e5e7eb 25%,#f3f4f6 37%,#e5e7eb 63%);background-size:400% 100%;animation:blogSkeleton 1.25s ease-in-out infinite;box-shadow:0 9px 20px rgba(15,23,42,.10)}.github-showcase-exact .blog-post.image-loaded::before{display:none}.github-showcase-exact .blog-post.image-loaded .blog-image{opacity:1}.github-showcase-exact .blog-post.image-error::before,.github-showcase-exact .blog-post.image-pending::before{display:block}.github-showcase-exact .blog-post.image-error .blog-image,.github-showcase-exact .blog-post.image-pending .blog-image{opacity:0}@keyframes blogSkeleton{0%{background-position:100% 0}100%{background-position:0 0}}
.github-showcase-exact .blog-copy{position:relative;z-index:2;display:flex;flex:0 0 auto;min-height:54px;opacity:1;visibility:visible;align-items:center;justify-content:space-between;gap:8px;padding:10px 11px;background:#fff;border:1px solid #e2e8f0;border-radius:15px;box-shadow:0 8px 16px rgba(15,23,42,.08);overflow:hidden}.github-showcase-exact .blog-copy h3{margin:0;font-size:13px;line-height:1.1;letter-spacing:-.02em}.github-showcase-exact .blog-copy p{margin:3px 0 0;font-size:9px;color:#64748b;font-weight:500}
.github-showcase-exact .like-btn{display:grid;place-items:center;width:30px;height:30px;padding:0;border:1px solid #e2e8f0;border-radius:50%;background:#fff7ed;color:#ea580c;cursor:pointer;box-shadow:0 5px 10px rgba(15,23,42,.08);transition:transform .2s ease,background .2s ease,color .2s ease,box-shadow .2s ease}.github-showcase-exact .like-btn svg{display:block;width:17px;height:17px;overflow:visible}.github-showcase-exact .like-btn .heart-shape{fill:transparent;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;transform-origin:center;transition:fill .2s ease,stroke .2s ease,transform .24s cubic-bezier(.22,1,.36,1)}.github-showcase-exact .like-btn:hover{transform:scale(1.08)}.github-showcase-exact .like-btn:hover .heart-shape{transform:scale(1.06)}.github-showcase-exact .like-btn.liked{background:#ffedd5;color:#c2410c;transform:scale(1.08);box-shadow:0 7px 14px rgba(249,115,22,.18)}.github-showcase-exact .like-btn.liked .heart-shape{fill:currentColor;stroke:currentColor;transform:scale(1.08)}
.github-showcase-exact .blog-dots{display:flex;justify-content:center;gap:5px}.github-showcase-exact .blog-dot{width:5px;height:5px;border-radius:50%;background:#cbd5e1;transition:width .25s ease,background .25s ease}.github-showcase-exact .blog-dot.active{width:15px;border-radius:999px;background:#ffffff;box-shadow:0 1px 3px rgba(15,23,42,.18)}.github-showcase-exact .blog-socials{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px;background:#fff;border:1px solid #e2e8f0;border-radius:16px;box-shadow:0 8px 18px rgba(15,23,42,.08)}.github-showcase-exact .blog-social-label{font-size:9px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#94a3b8}.github-showcase-exact .blog-social-icons{display:flex;align-items:center;gap:8px}.github-showcase-exact .blog-socials a{display:grid;cursor:pointer;place-items:center;width:28px;height:28px;border-radius:50%;color:#fff;box-shadow:0 6px 12px rgba(15,23,42,.16);transition:transform .2s ease,box-shadow .2s ease}.github-showcase-exact .blog-socials a:hover{transform:translateY(-2px) scale(1.05);box-shadow:0 9px 16px rgba(15,23,42,.2)}.github-showcase-exact .blog-socials a:nth-child(1){background:#1877f2}.github-showcase-exact .blog-socials a:nth-child(2){background:linear-gradient(135deg,#833ab4,#fd1d1d,#fcb045)}.github-showcase-exact .blog-socials a:nth-child(3){background:#111}.github-showcase-exact .blog-socials svg{width:14px;height:14px;fill:currentColor}
.github-showcase-exact .budget-card{padding:14px;background:#ffffff}.github-showcase-exact .budget-top{display:flex;justify-content:space-between;align-items:center;gap:10px}.github-showcase-exact .budget-value{font-size:25px;font-weight:700;color:#1e1b4b;letter-spacing:-.03em}.github-showcase-exact .budget-sub{font-size:10px;color:#667085;font-weight:500}.github-showcase-exact .ring{--progress:0;--ring-color:#ef4444;--ring-angle:0deg;display:grid;place-items:center;width:68px;height:68px;border-radius:50%;position:relative;font-size:15px;font-weight:700;flex:0 0 auto}.github-showcase-exact .ring::after{content:"";position:absolute;inset:0;border-radius:50%;background:conic-gradient(var(--ring-color) calc(var(--progress) * 1%),#e8edf6 0);transform:rotate(var(--ring-angle));transform-origin:center;transition:transform .2s linear}.github-showcase-exact .ring::before{content:"";position:absolute;z-index:1;inset:7px;border-radius:50%;background:#fff}.github-showcase-exact .ring span{position:relative;z-index:2;color:#0f172a;display:inline-block}
.github-showcase-exact .category-list{display:flex;flex-direction:column;gap:6px}.github-showcase-exact .category{padding:10px 12px;background:#ffffff;transition:transform .28s ease,box-shadow .28s ease}.github-showcase-exact .category.is-changing{box-shadow:0 11px 22px rgba(15,23,42,.16)}.github-showcase-exact .category-line{display:flex;justify-content:space-between;gap:8px;font-size:11px;font-weight:700;color:#1f2937}.github-showcase-exact .bar{height:6px;margin-top:7px;border-radius:99px;background:rgba(255,255,255,.55);overflow:hidden}.github-showcase-exact .bar i{display:block;height:100%;width:10%;min-width:10%;max-width:100%;border-radius:inherit;background:#ef4444;box-shadow:0 2px 8px rgba(0,0,0,.15);will-change:width}.github-showcase-exact .number-pop{display:inline-block;min-width:1.6ch}.github-showcase-exact .budget-value .number-pop{min-width:3.8ch}
@keyframes phoneSpotlight{0%,73%,100%{transform:scale(1);box-shadow:0 18px 32px rgba(0,0,0,.25),inset 0 0 0 1px rgba(255,255,255,.18),inset 0 12px 22px rgba(255,255,255,.09)}80%{transform:scale(1.018);box-shadow:0 23px 40px rgba(0,0,0,.34),0 0 10px rgba(120,180,235,.16),inset 0 0 0 1px rgba(255,255,255,.24),inset 0 12px 22px rgba(255,255,255,.11)}86%{transform:scale(1.007);box-shadow:0 20px 35px rgba(0,0,0,.29),0 0 5px rgba(120,180,235,.08),inset 0 0 0 1px rgba(255,255,255,.2),inset 0 12px 22px rgba(255,255,255,.1)}}
.github-showcase-exact .phone-screen :is(.mini-header,.photo-frame,.info-card,.metric,.blog-top,.blog-viewport,.blog-copy,.blog-dots,.blog-socials,.budget-card,.category){position:relative;transform-origin:center;will-change:transform,box-shadow,filter;transition:transform .42s cubic-bezier(.16,1,.3,1),box-shadow .42s cubic-bezier(.16,1,.3,1),filter .32s ease}
@media (prefers-reduced-motion:reduce){.github-showcase-exact .phone,.github-showcase-exact .solid-card,.github-showcase-exact .budget-card{animation:none}.github-showcase-exact .phone{opacity:1;translate:0 0;transition:none}.github-showcase-exact .ring{transition:none}}
@media(max-width:900px){.github-showcase-card{width:min(560px,calc(100% - 28px));height:auto;min-height:520px;padding:20px}.github-showcase-exact .phone-grid{grid-template-columns:1fr;height:auto}.github-showcase-exact .phone{min-height:380px}}
@media(max-width:620px){.github-showcase-card{border-radius:24px;height:auto;min-height:520px}.github-showcase-exact{padding:36px 0 42px}}

/* Showcase integration: restore the GitHub component spacing and add a right-side CTA. */
.github-showcase-exact{
  padding:64px 0 72px;
  overflow:visible;
}
.github-showcase-layout{
  width:min(1320px,calc(100% - 64px));
  margin:0 auto;
  display:grid;
  grid-template-columns:minmax(0,820px) minmax(310px,1fr);
  gap:44px;
  align-items:center;
}
.github-showcase-card{
  width:100%!important;
  margin:0!important;
}
/* These are the final spacing overrides used by the GitHub version. */
.github-showcase-exact .phone-grid{gap:18px!important;}
.github-showcase-exact .phone{padding:18px 12px 12px!important;}
.github-showcase-exact .phone-screen{gap:8px!important;}

.showcase-cta{
  position:relative;
  overflow:hidden;
  padding:34px 32px 28px;
  border-radius:26px;
  color:#fff;
  background:linear-gradient(145deg,rgba(11,45,94,.92),rgba(18,68,132,.82));
  border:1px solid rgba(205,231,255,.34);
  box-shadow:0 26px 58px rgba(3,19,45,.26),inset 0 1px 0 rgba(255,255,255,.14);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}
.showcase-cta::before{
  content:"";
  position:absolute;
  width:260px;
  height:260px;
  right:-120px;
  top:-130px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(79,167,255,.32),transparent 68%);
  pointer-events:none;
}
.showcase-cta-kicker{
  margin:0 0 12px;
  color:#d9edff;
  font-size:11px;
  line-height:1;
  font-weight:800;
  letter-spacing:.18em;
  text-transform:uppercase;
}
.showcase-cta h2{
  position:relative;
  margin:0;
  color:#fff;
  font-size:clamp(34px,3vw,48px);
  line-height:1.02;
  text-shadow:0 3px 16px rgba(0,0,0,.24);
}
.showcase-cta>p:not(.showcase-cta-kicker){
  position:relative;
  margin:18px 0 24px;
  color:#dce9f5;
  font-size:15px;
  line-height:1.7;
}
.showcase-cta-actions{
  position:relative;
  display:grid;
  gap:11px;
}
.showcase-cta .button{width:100%;min-height:52px;}
.showcase-cta .showcase-cta-primary{
  background:linear-gradient(135deg,#ffffff,#e7f3ff);
  color:#102a56;
  border-color:rgba(255,255,255,.7);
  box-shadow:0 12px 26px rgba(2,20,48,.2);
}
.showcase-cta .showcase-cta-secondary{
  background:rgba(255,255,255,.08);
  color:#fff;
  border-color:rgba(255,255,255,.35);
}
.showcase-cta-note{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  min-height:34px;
  margin-top:10px;
  color:#cfe3f5;
  font-size:11px;
  font-weight:700;
  line-height:1.2;
}
.showcase-cta-arrow{
  width:46px;
  height:32px;
  margin-top:-12px;
  overflow:visible;
  transform:rotate(-3deg);
}
.showcase-cta-arrow path{
  fill:none;
  stroke:#d9edff;
  stroke-width:2.2;
  stroke-linecap:round;
  stroke-linejoin:round;
  vector-effect:non-scaling-stroke;
  filter:drop-shadow(0 1px 1px rgba(0,0,0,.14));
}

@media(max-width:1180px){
  .github-showcase-layout{
    width:min(100% - 40px,900px);
    grid-template-columns:1fr;
    gap:28px;
  }
  .github-showcase-card{width:820px!important;max-width:100%;justify-self:center;}
  .showcase-cta{max-width:820px;width:100%;justify-self:center;}
}
@media(max-width:900px){
  .github-showcase-exact{padding:48px 0 56px;}
  .github-showcase-layout{width:calc(100% - 32px);}
  .github-showcase-card{width:min(560px,100%)!important;padding:20px!important;}
  .github-showcase-exact .phone-grid{grid-template-columns:1fr!important;gap:18px!important;}
  .github-showcase-exact .phone{min-height:380px;padding:18px 12px 12px!important;}
  .showcase-cta{max-width:560px;padding:28px 24px;}
}
@media(max-width:560px){
  .github-showcase-exact{padding:38px 0 44px;}
  .github-showcase-layout{width:calc(100% - 24px);gap:22px;}
  .github-showcase-card{padding:14px!important;border-radius:22px!important;}
  .showcase-cta{padding:25px 20px;border-radius:22px;}
  .showcase-cta h2{font-size:34px;}
}


/* Make Your Site page + showcase shell adjustment */
.github-showcase-card{border:0!important;border-radius:0!important;}
.make-site-main{min-height:68vh;position:relative;z-index:1;}
@media(max-width:820px){.make-site-main{min-height:72vh;}}

/* Copy simplification pass */
.preview-simple{display:block!important;max-width:760px;margin-inline:auto}.preview-simple .preview-access-card{max-width:720px;margin-inline:auto}.preview-simple .preview-access-card h1{font-size:clamp(38px,5vw,58px);margin:8px 0 8px}.preview-simple .preview-access-card>p{margin:0 0 22px}.dashboard-card .dashboard-top{justify-content:center;margin-bottom:14px}.dashboard-card .dashboard-top .site-shot{width:min(100%,320px)}.dashboard-card .dashboard-buttons{justify-content:center}.dashboard-card .dashboard-buttons .button{flex:0 1 auto;min-width:190px}

/* Keep decorative page artwork from extending the scroll area past the footer. */
html{background:#f7fafc}
body{min-height:100vh;display:flex;flex-direction:column}
main{flex:1 0 auto;overflow:clip}
footer{flex:0 0 auto}
@supports not (overflow:clip){main{overflow:hidden}}

.pricing-faq-contact{margin-top:8px}

/* Standalone FAQ page */
.faq-main{padding-top:54px}
.faq-intro{margin-bottom:28px}
.faq-grid{margin-top:0;margin-bottom:12px}
@media(max-width:620px){.faq-main{padding-top:34px}.faq-intro{margin-bottom:18px}}

/* === Distinct branded artwork by page ===
   Reuses the two Steady Hands background artworks with different flips/crops
   so each page feels related without repeating the exact same composition. */
.standalone-bg,
.references-bg,
.make-site-main::before{
  overflow:hidden;
}

.standalone-bg::before,
.standalone-bg::after,
.references-bg::before,
.references-bg::after,
.make-site-main::before,
.make-site-main::after{
  content:"";
  position:absolute;
  pointer-events:none;
  background-repeat:no-repeat;
  background-size:cover;
  transform-origin:center;
  filter:none;
}

/* PREVIEW — background2 mirrored from the left, background rising from below */
.preview-main .standalone-bg{
  background:linear-gradient(180deg,#0c2b58 0%,#103b73 50%,#092650 100%);
}
.preview-main .standalone-bg::before{
  inset:-7% -8% 36% -8%;
  width:auto;height:auto;
  background-image:url("https://raw.githubusercontent.com/Merci-Chi/Steadyhandsop/main/images/background2.jpg");
  background-position:center 18%;
  opacity:.90;
  transform:scaleX(-1);
}
.preview-main .standalone-bg::after{
  inset:48% -10% -16% -10%;
  width:auto;height:auto;
  background-image:url("https://raw.githubusercontent.com/Merci-Chi/Steadyhandsop/main/images/background.jpg");
  background-position:center 72%;
  opacity:.62;
  transform:scaleY(-1);
}

/* PRICING — background mirrored horizontally with background2 rotated beneath it */
.pricing-main .standalone-bg{
  background:linear-gradient(180deg,#0a2853 0%,#123c77 46%,#0a2854 100%);
}
.pricing-main .standalone-bg::before{
  inset:-12% -10% 30% -10%;
  width:auto;height:auto;
  background-image:url("https://raw.githubusercontent.com/Merci-Chi/Steadyhandsop/main/images/background.jpg");
  background-position:center 30%;
  opacity:.86;
  transform:scaleX(-1);
}
.pricing-main .standalone-bg::after{
  inset:43% -9% -18% -9%;
  width:auto;height:auto;
  background-image:url("https://raw.githubusercontent.com/Merci-Chi/Steadyhandsop/main/images/background2.jpg");
  background-position:center 66%;
  opacity:.66;
  transform:rotate(180deg);
}

/* FAQ — background2 upside-down on top, background mirrored below */
.faq-main .standalone-bg{
  background:linear-gradient(180deg,#0c2a57 0%,#10376c 50%,#08244b 100%);
}
.faq-main .standalone-bg::before{
  inset:-15% -8% 34% -8%;
  width:auto;height:auto;
  background-image:url("https://raw.githubusercontent.com/Merci-Chi/Steadyhandsop/main/images/background2.jpg");
  background-position:center 42%;
  opacity:.86;
  transform:scaleY(-1);
}
.faq-main .standalone-bg::after{
  inset:46% -10% -18% -10%;
  width:auto;height:auto;
  background-image:url("https://raw.githubusercontent.com/Merci-Chi/Steadyhandsop/main/images/background.jpg");
  background-position:center 70%;
  opacity:.62;
  transform:scaleX(-1);
}

/* REFERENCES — deliberately different from Preview: background first, rotated; background2 below, vertically flipped */
.references-bg{
  background:linear-gradient(180deg,#0d2b58 0%,#103767 43%,#09264f 100%);
}
.references-bg::before{
  inset:-16% -12% 31% -12%;
  width:auto;height:auto;
  background-image:url("https://raw.githubusercontent.com/Merci-Chi/Steadyhandsop/main/images/background.jpg");
  background-position:68% 18%;
  opacity:.88;
  transform:rotate(180deg) scaleX(1.04);
}
.references-bg::after{
  inset:45% -12% -20% -12%;
  width:auto;height:auto;
  background-image:url("https://raw.githubusercontent.com/Merci-Chi/Steadyhandsop/main/images/background2.jpg");
  background-position:28% 82%;
  opacity:.62;
  transform:scaleY(-1);
}

/* MAKE YOUR SITE — intentionally empty page, but still visibly on-brand */
.make-site-main{
  isolation:isolate;
  overflow:hidden;
  background:linear-gradient(180deg,#0b2a57 0%,#123d77 52%,#092650 100%);
}
.make-site-main::before{
  z-index:-2;
  inset:-12% -8% 24% -8%;
  background-image:url("https://raw.githubusercontent.com/Merci-Chi/Steadyhandsop/main/images/background2.jpg");
  background-position:center 36%;
  opacity:.88;
  transform:scale(-1,-1);
}
.make-site-main::after{
  z-index:-1;
  inset:47% -10% -18% -10%;
  background-image:url("https://raw.githubusercontent.com/Merci-Chi/Steadyhandsop/main/images/background.jpg");
  background-position:center 72%;
  opacity:.58;
  transform:scaleX(-1);
}

@media(max-width:820px){
  .preview-main .standalone-bg::before,
  .pricing-main .standalone-bg::before,
  .faq-main .standalone-bg::before,
  .references-bg::before,
  .make-site-main::before{background-size:auto 72%;background-position:center top;}
  .preview-main .standalone-bg::after,
  .pricing-main .standalone-bg::after,
  .faq-main .standalone-bg::after,
  .references-bg::after,
  .make-site-main::after{background-size:auto 68%;background-position:center bottom;}
}



/* Real client work grid */
.client-work-shell{padding-top:18px}
.client-work-section{display:block}
.client-work-heading{display:flex;flex-direction:column;align-items:flex-start;gap:6px;margin-bottom:18px}
.client-work-heading h2{font-size:clamp(32px,3.5vw,44px);line-height:1.02;color:#fff}
.client-work-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;align-items:stretch}
.client-work-card{display:flex;flex-direction:column;min-height:340px;padding:12px;border:1px solid rgba(255,255,255,.54);border-radius:24px;background:linear-gradient(145deg,rgba(250,253,255,.95),rgba(226,238,249,.9));box-shadow:0 20px 44px rgba(2,22,53,.18);overflow:hidden}
.live-work-card .mini-site-frame{flex:1;min-height:0;border-radius:18px;overflow:hidden;border:1px solid rgba(23,64,103,.13);box-shadow:0 14px 28px rgba(17,50,83,.12);background:#eaf1f7}
.mini-site-crop{position:relative;height:100%;overflow:hidden;background:#eaf1f7}
.mini-site-crop iframe{position:absolute;top:0;left:0;width:300%;height:760px;border:0;transform:scale(.3333);transform-origin:top left;pointer-events:none;background:#fff}
.client-work-meta{display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding:12px 4px 2px}
.client-work-meta h3{font-size:18px;line-height:1.1;color:var(--ink);margin:0}
.client-work-meta p{margin:0;color:#60778c;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.08em}
.review-work-card{background:linear-gradient(145deg,rgba(9,42,91,.96),rgba(18,77,148,.9));color:#fff;border-color:rgba(255,255,255,.22)}
.review-work-inner{flex:1;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;padding:12px 8px 10px}
.review-work-card .review-quote-mark{font-family:Georgia,serif;font-size:56px;line-height:.6;color:#d8ecff;opacity:.9}
.review-work-copy{margin:10px 0 8px;font-family:"Cormorant Garamond",Georgia,serif;font-size:32px;font-weight:700;line-height:1.02;color:#fff}
.review-work-note{margin:0;color:#c7dbef;font-size:13px;line-height:1.45}
.review-card-meta h3,.review-card-meta p{color:#fff}
.review-card-meta p{opacity:.82;text-transform:none;letter-spacing:0;font-weight:600}
.client-work-actions{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-top:18px}
.client-work-actions .preview-utility-link{margin-left:auto}

@media(max-width:1200px){
  .client-work-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:820px){
  .client-work-shell{padding-top:8px}
  .client-work-heading{margin-bottom:16px}
  .client-work-grid{grid-template-columns:1fr;max-width:620px;margin-inline:auto}
  .client-work-card{min-height:320px}
  .client-work-actions{flex-direction:column;align-items:flex-start;max-width:620px;margin:18px auto 0}
  .client-work-actions .preview-utility-link{margin-left:0}
}
@media(max-width:560px){
  .client-work-card{padding:10px;border-radius:20px}
  .live-work-card .mini-site-frame{border-radius:14px}
  .client-work-meta{padding:11px 2px 2px}
  .client-work-meta h3{font-size:17px}
  .review-work-copy{font-size:28px}
  .client-work-actions{gap:12px}
}

.references-work-shell{padding-top:32px;padding-bottom:10px}
.references-page .client-work-heading h1{font-size:clamp(34px,4vw,48px);line-height:1.02;color:#fff;margin:0}
.references-page .client-work-heading .section-subtitle{max-width:620px;color:#d8e7f6}
.references-page .client-work-actions{justify-content:flex-start}
.references-page .review-work-copy{font-size:26px;line-height:1.08}
@media(max-width:900px){.references-work-shell{padding-top:18px}}

/* Compact client cards */
.client-work-card{
  min-height:278px;
  padding:10px;
  border-radius:20px;
}
.live-work-card .mini-site-frame{
  flex:0 0 176px;
  height:176px;
  border-radius:15px;
}
.mini-site-crop iframe{
  height:640px;
}
.client-work-meta{
  gap:7px;
  padding:9px 3px 1px;
}
.client-work-meta h3{
  font-size:16px;
  line-height:1.08;
}
.client-work-meta p{
  font-size:10px;
  letter-spacing:.07em;
}
.client-work-meta .button{
  min-height:38px;
  padding:9px 14px;
  font-size:11px;
}
.review-work-inner{
  padding:8px 6px 4px;
}
.review-work-card .review-quote-mark{
  font-size:46px;
}
.review-work-copy,
.references-page .review-work-copy{
  margin:7px 0 7px;
  font-size:22px;
  line-height:1.06;
}
.review-work-note{
  font-size:11px;
  line-height:1.35;
}
.client-work-actions{
  margin-top:14px;
}

@media(max-width:1200px){
  .client-work-card{min-height:286px}
  .live-work-card .mini-site-frame{flex-basis:184px;height:184px}
}
@media(max-width:820px){
  .client-work-card{min-height:280px}
  .live-work-card .mini-site-frame{flex-basis:180px;height:180px}
}


/* Review card alignment refinement */
.review-work-inner{
  justify-content:flex-start;
  padding:12px 8px 8px;
}
.review-work-label{
  margin:0 0 6px;
  color:#d8ecff;
  font-size:11px;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.review-work-card .review-quote-mark{
  margin-top:2px;
}
.review-work-copy,
.references-page .review-work-copy{
  margin:6px 0 6px;
  font-size:21px;
  line-height:1.04;
}
.review-work-note{
  margin-top:auto;
  padding-top:8px;
}

/* Shorter, equal-height phone showcase cards */
@media (min-width:901px){
  .github-showcase-card{height:420px!important;}
  .github-showcase-exact .phone{height:100%!important;min-height:0!important;padding:16px 10px 10px!important;}
  .github-showcase-exact .phone-screen{gap:6px!important;}
  .github-showcase-exact .mini-header{padding:10px 12px;}
  .github-showcase-exact .photo-frame{padding:8px 8px 1px;}
  .github-showcase-exact .photo-card{height:118px;margin:-14px -8px -2px;width:calc(100% + 16px);}
  .github-showcase-exact .bowl-hit-area{width:102px;height:102px;}
  .github-showcase-exact .info-card{padding:10px 12px;}
  .github-showcase-exact .info-card h3{margin-bottom:3px;}
  .github-showcase-exact .metric-row{gap:5px;}
  .github-showcase-exact .metric{padding:7px 3px;}
  .github-showcase-exact .blog-shell{gap:6px;}
  .github-showcase-exact .blog-top{padding:8px 10px;}
  .github-showcase-exact .blog-image{min-height:116px;}
  .github-showcase-exact .blog-copy{min-height:47px;padding:8px 10px;}
  .github-showcase-exact .blog-post{gap:6px;padding:6px;}
  .github-showcase-exact .blog-post::before{top:6px;right:6px;left:6px;bottom:59px;}
  .github-showcase-exact .blog-socials{padding:8px 10px;}
  .github-showcase-exact .budget-card{padding:11px 12px;}
  .github-showcase-exact .budget-value{font-size:23px;}
  .github-showcase-exact .ring{width:60px;height:60px;font-size:14px;}
  .github-showcase-exact .category-list{gap:5px;}
  .github-showcase-exact .category{padding:8px 10px;}
  .github-showcase-exact .bar{height:5px;margin-top:5px;}
}

/* References page CTA visibility fix */
.references-page .client-work-actions .button.secondary{
  background:rgba(255,255,255,.12);
  color:#fff;
  border-color:rgba(255,255,255,.46);
  box-shadow:0 8px 20px rgba(0,0,0,.12);
}
.references-page .client-work-actions .button.secondary:hover{
  background:rgba(255,255,255,.18);
  color:#fff;
  border-color:rgba(255,255,255,.62);
}

/* Keep the bowl permanently above every neighboring hover-lift layer. */
.github-showcase-exact .phone:first-child .photo-frame{
  position:relative;
  z-index:1000000!important;
  isolation:auto;
}
.github-showcase-exact .phone:first-child .photo-card{
  position:relative;
  z-index:1000002!important;
}
.github-showcase-exact .phone:first-child .bowl-shadow{
  z-index:1000001!important;
}
.github-showcase-exact .phone:first-child .bowl-hit-area{
  z-index:1000003!important;
}
.github-showcase-exact .phone:first-child .mini-header,
.github-showcase-exact .phone:first-child .info-card,
.github-showcase-exact .phone:first-child .metric{
  z-index:1!important;
}

/* Make Your Site + Contact popup */
.make-flow-intro{margin:0 0 16px;color:#52657c}
.preview-choice-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.preview-choice{appearance:none;border:1px solid rgba(12,91,216,.18);background:#f7faff;border-radius:18px;padding:20px;text-align:left;cursor:pointer;display:grid;gap:7px;color:#0a2342;transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease}
.preview-choice:hover{transform:translateY(-2px);border-color:rgba(12,91,216,.5);box-shadow:0 14px 30px rgba(7,34,74,.1)}
.preview-choice strong{font-size:1.08rem}
.preview-choice span{font-size:.92rem;line-height:1.45;color:#5b6d83}
.make-preview-form{display:grid;gap:14px}
.form-grid-two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.make-preview-form label{display:grid;gap:6px}
.make-preview-form label>span{font-weight:750;color:#102b4e}
.make-preview-form em,.social-details summary span{font-size:.72rem;font-style:normal;font-weight:700;opacity:.58;margin-left:4px}
.make-preview-form input,.make-preview-form textarea,.make-preview-form select{width:100%;box-sizing:border-box;border:1px solid #cfdaea;background:#fff;color:#102b4e;border-radius:12px;padding:11px 12px;font:inherit}.make-preview-form select{cursor:pointer}
.make-preview-form input:focus,.make-preview-form textarea:focus,.make-preview-form select:focus{outline:2px solid rgba(12,91,216,.25);border-color:#0c5bd8}
.make-flow-note{font-size:.9rem;opacity:.72;margin:0}
.social-details{border:1px solid #d9e2ef;border-radius:14px;padding:12px 14px;background:#f8fbff}
.social-details summary{cursor:pointer;font-weight:800;color:#102b4e}
.social-fields{margin-top:12px}
.contact-choice-tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.contact-tab{appearance:none;border:1px solid #d3deed;background:#f6f9fd;color:#183657;border-radius:999px;padding:9px 13px;font:inherit;font-weight:750;cursor:pointer}
.contact-tab.active{background:#0c5bd8;color:#fff;border-color:#0c5bd8}
.contact-panel-card{display:grid;gap:12px}
.contact-panel-card p{margin:0;color:#52657c}
.contact-panel-card strong{font-size:1.1rem;color:#102b4e}
@media(max-width:620px){.preview-choice-grid,.form-grid-two{grid-template-columns:1fr}}

/* Custom grouped category picker */
.custom-category-field{position:relative;display:grid;gap:6px;min-width:0}
.custom-category-label{font-weight:750;color:#102b4e}
.category-picker-toggle{width:100%;min-height:45px;display:flex;align-items:center;justify-content:space-between;gap:12px;border:1px solid #cfdaea;background:#fff;color:#102b4e;border-radius:12px;padding:11px 12px;font:inherit;text-align:left;cursor:pointer}
.category-picker-toggle:focus{outline:2px solid rgba(12,91,216,.25);border-color:#0c5bd8}
.category-picker-value{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#6f8094}
.category-picker-value.has-value{color:#102b4e}
.category-picker-chevron{font-size:1.1rem;transition:transform .18s ease}
.custom-category-field.is-open .category-picker-chevron{transform:rotate(180deg)}
.category-picker-menu{position:absolute;z-index:100000;top:calc(100% + 7px);left:0;width:min(430px,calc(100vw - 40px));max-height:min(520px,62vh);overflow:hidden;border:1px solid #d3deed;border-radius:16px;background:#fff;box-shadow:0 22px 55px rgba(8,34,70,.18)}
.category-picker-search-wrap{position:sticky;top:0;z-index:2;padding:10px;background:#fff;border-bottom:1px solid #edf1f6}
.make-preview-form .category-picker-search{width:100%;border-radius:10px;padding:10px 11px}
.category-picker-groups{max-height:min(455px,54vh);overflow:auto;padding:8px}
.category-picker-group+.category-picker-group{margin-top:8px}
.category-picker-heading{position:sticky;top:0;background:#f4f7fb;color:#52657c;font-size:.72rem;line-height:1;font-weight:850;letter-spacing:.07em;text-transform:uppercase;padding:9px 10px;border-radius:9px;z-index:1}
.category-picker-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px;padding:5px 0 2px}
.category-picker-option{appearance:none;border:0;background:transparent;color:#163656;border-radius:9px;padding:9px 10px;text-align:left;font:inherit;font-size:.9rem;line-height:1.25;cursor:pointer}
.category-picker-option:hover,.category-picker-option:focus{background:#edf5ff;outline:none;color:#064cb8}
.category-picker-option[aria-selected="true"]{background:#e6f0ff;color:#064cb8;font-weight:800}
.category-picker-empty{margin:18px;text-align:center;color:#728297}
@media(max-width:620px){
  .category-picker-menu{position:fixed;left:14px;right:14px;top:auto;bottom:14px;width:auto;max-height:68vh;border-radius:20px}
  .category-picker-groups{max-height:58vh}
  .category-picker-options{grid-template-columns:1fr}
}

/* Match the custom category control to the other form fields exactly */
.make-preview-form .custom-category-field{display:grid;gap:6px}
.make-preview-form .custom-category-label{font-weight:750;color:#102b4e}
.make-preview-form .category-picker-toggle{
  width:100%;
  min-height:52px;
  box-sizing:border-box;
  border:1px solid #cfdaea;
  background:#fff;
  color:#102b4e;
  border-radius:12px;
  padding:11px 12px;
  font:inherit;
  box-shadow:none;
}
.make-preview-form .category-picker-toggle:hover{transform:none;box-shadow:none}
.make-preview-form .category-picker-toggle:focus{
  outline:2px solid rgba(12,91,216,.25);
  outline-offset:0;
  border-color:#0c5bd8;
}
.make-preview-form .category-picker-menu{
  border:1px solid #cfdaea;
  background:#fff;
  border-radius:14px;
  box-shadow:0 18px 42px rgba(8,34,70,.18);
}

/* Category picker layout cleanup */
@media (min-width:621px){
  .make-preview-form .custom-category-field{position:relative}
  .make-preview-form .category-picker-menu{
    left:0;
    right:auto;
    width:100%;
    min-width:100%;
    max-width:100%;
    top:calc(100% + 8px);
    max-height:390px;
  }
  .make-preview-form .category-picker-groups{
    max-height:320px;
    padding:8px 8px 10px;
  }
  .make-preview-form .category-picker-options{
    grid-template-columns:1fr;
    gap:2px;
  }
}
.make-preview-form .category-picker-search-wrap{
  padding:8px;
}
.make-preview-form .category-picker-search{
  min-height:44px;
  border:1px solid #cfdaea;
  border-radius:10px;
  box-shadow:none;
}
.make-preview-form .category-picker-search:focus{
  outline:2px solid rgba(12,91,216,.18);
  border-color:#0c5bd8;
}
.make-preview-form .category-picker-heading{
  position:static;
  margin:4px 0 3px;
  padding:8px 10px;
  border-radius:8px;
  background:#f2f6fb;
  color:#52657c;
  font-size:.7rem;
  letter-spacing:.07em;
}
.make-preview-form .category-picker-option{
  width:100%;
  min-height:40px;
  padding:9px 10px;
  border-radius:8px;
  font-size:.9rem;
}

/* Equal-size Make Your Site fields */
.make-preview-form .form-grid-two{
  align-items:start;
}
.make-preview-form .form-grid-two > label,
.make-preview-form .form-grid-two > .custom-category-field{
  min-width:0;
}
.make-preview-form .form-grid-two input:not([type="hidden"]),
.make-preview-form .category-picker-toggle{
  width:100%;
  height:54px;
  min-height:54px;
  padding:0 14px;
  border:1px solid #cfdaea;
  border-radius:12px;
  background:#fff;
  color:#102b4e;
  font:inherit;
  box-shadow:none;
}
.make-preview-form .category-picker-toggle{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  text-align:left;
}
.make-preview-form .category-picker-value{
  min-width:0;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
}
.make-preview-form .category-picker-toggle:hover{
  transform:none;
  box-shadow:none;
}

/* Business category is a true custom popup, not a dropdown */
.category-picker-overlay[hidden]{display:none!important}
.category-picker-overlay{
  position:fixed;
  inset:0;
  z-index:2147483000;
  display:grid;
  place-items:center;
  padding:24px;
  background:rgba(3,19,38,.42);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
}
.category-picker-popup{
  width:min(760px,calc(100vw - 32px));
  max-height:min(720px,calc(100vh - 48px));
  display:grid;
  grid-template-rows:auto auto minmax(0,1fr);
  overflow:hidden;
  border:1px solid rgba(207,218,234,.95);
  border-radius:22px;
  background:#f8fbff;
  box-shadow:0 28px 80px rgba(3,19,38,.28);
}
.category-picker-popup-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:20px;
  padding:20px 22px 14px;
}
.category-picker-popup-head strong{
  display:block;
  font-family:"Bricolage Grotesque",Manrope,sans-serif;
  font-size:1.35rem;
  line-height:1.1;
  color:#102b4e;
}
.category-picker-popup-head span{
  display:block;
  margin-top:5px;
  color:#657a92;
  font-size:.9rem;
}
.category-picker-close{
  flex:0 0 auto;
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  border:1px solid #d5dfec;
  border-radius:50%;
  background:#fff;
  color:#102b4e;
  font-size:24px;
  line-height:1;
}
.category-picker-search-wrap{
  padding:0 22px 14px;
  border-bottom:1px solid #e5ebf3;
  background:#f8fbff;
}
.make-preview-form .category-picker-search{
  width:100%;
  height:48px;
  min-height:48px;
  padding:0 14px;
  border:1px solid #cfdaea;
  border-radius:12px;
  background:#fff;
}
.category-picker-groups{
  max-height:none;
  overflow:auto;
  padding:14px 16px 18px;
}
.category-picker-group+.category-picker-group{margin-top:14px}
.category-picker-heading{
  position:static;
  margin:0 0 7px;
  padding:8px 10px;
  border-radius:9px;
  background:#edf3fa;
  color:#52657c;
  font-size:.72rem;
  line-height:1;
  font-weight:850;
  letter-spacing:.07em;
  text-transform:uppercase;
}
.category-picker-options{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:6px;
  padding:0;
}
.category-picker-option{
  width:100%;
  min-height:44px;
  padding:10px 12px;
  border:1px solid transparent;
  border-radius:10px;
  background:#fff;
  color:#163656;
  text-align:left;
  font:inherit;
  font-size:.92rem;
}
.category-picker-option:hover,
.category-picker-option:focus{
  outline:none;
  border-color:#c9dcf6;
  background:#edf5ff;
  color:#064cb8;
}
.category-picker-option[aria-selected="true"]{
  border-color:#b7d2f7;
  background:#e6f0ff;
  color:#064cb8;
  font-weight:800;
}
@media(max-width:620px){
  .category-picker-overlay{padding:12px}
  .category-picker-popup{
    width:100%;
    max-height:86vh;
    border-radius:18px;
  }
  .category-picker-popup-head{padding:18px 16px 12px}
  .category-picker-search-wrap{padding:0 16px 12px}
  .category-picker-groups{padding:12px}
  .category-picker-options{grid-template-columns:1fr}
}

/* Easier category navigation */
.category-section-title{
  margin:2px 2px 9px;
  color:#52657c;
  font-size:.72rem;
  font-weight:850;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.category-popular{margin-bottom:18px}
.category-popular-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:8px;
}
.category-browse{margin-top:6px}
.category-group-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:9px;
}
.category-group-card{
  width:100%;
  min-height:72px;
  display:grid;
  grid-template-columns:38px minmax(0,1fr) auto;
  align-items:center;
  gap:11px;
  padding:12px 13px;
  border:1px solid #d7e1ee;
  border-radius:13px;
  background:#fff;
  color:#163656;
  text-align:left;
  font:inherit;
}
.category-group-card:hover,
.category-group-card:focus{
  outline:none;
  border-color:#bcd3f1;
  background:#f2f7fd;
}
.category-group-icon{
  width:36px;
  height:36px;
  display:grid;
  place-items:center;
  border-radius:10px;
  background:#edf4fc;
  color:#0c5bd8;
  font-weight:900;
}
.category-group-copy{
  min-width:0;
  display:grid;
  gap:2px;
}
.category-group-copy strong{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:.93rem;
}
.category-group-copy small{
  color:#7a8da3;
  font-size:.76rem;
}
.category-group-arrow{
  color:#7d91a8;
  font-size:1rem;
}
.category-back-button{
  display:inline-flex;
  align-items:center;
  gap:7px;
  margin-bottom:14px;
  padding:8px 10px;
  border:0;
  border-radius:9px;
  background:#edf4fc;
  color:#0c5bd8;
  font:inherit;
  font-size:.86rem;
  font-weight:800;
}
.category-group-view-title{
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:12px;
  margin-bottom:10px;
}
.category-group-view-title strong{
  color:#102b4e;
  font-family:"Bricolage Grotesque",Manrope,sans-serif;
  font-size:1.12rem;
}
.category-group-view-title span{
  color:#7a8da3;
  font-size:.8rem;
}
.category-picker-options-drilldown,
.category-picker-options-search{
  grid-template-columns:repeat(2,minmax(0,1fr));
}
.category-search-results{min-height:120px}
@media(max-width:760px){
  .category-popular-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .category-group-grid{grid-template-columns:1fr}
}
@media(max-width:520px){
  .category-picker-options-drilldown,
  .category-picker-options-search{grid-template-columns:1fr}
}

}

}

/* Shared preview field structure */
.make-preview-form .form-field{
  display:grid;
  grid-template-rows:24px 54px;
  gap:6px;
  margin:0;
  min-width:0;
  align-self:start;
}
.make-preview-form .form-field > span{
  height:24px;
  line-height:24px;
  margin:0;
  font-weight:750;
  color:#102b4e;
}
.make-preview-form .form-field > input:not([type="hidden"]),
.make-preview-form .form-field > .category-picker-toggle{
  width:100%;
  height:54px;
  min-height:54px;
  margin:0;
  padding:0 14px;
  box-sizing:border-box;
  border:1px solid #cfdaea;
  border-radius:12px;
  background:#fff;
  color:#102b4e;
  font:inherit;
  box-shadow:none;
}
.make-preview-form .custom-category-field > input[type="hidden"]{
  display:none;
}
.make-preview-form .form-field > .category-picker-toggle{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  text-align:left;
}
.make-preview-form .preview-main-row{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
  align-items:start;
}
.short-preview-form{
  gap:16px;
}
.make-preview-form .preview-email-full{
  grid-template-rows:24px 54px auto;
}
.preview-email-full small{
  color:#74869a;
  font-size:.78rem;
  margin-top:1px;
}
.short-preview-form .form-message{
  margin:0;
}
.short-preview-form .button.primary{
  margin-top:2px;
}
@media(max-width:620px){
  .make-preview-form .preview-main-row{
    grid-template-columns:1fr;
  }
}

/* Exact shared field alignment */
.make-preview-form .preview-main-row{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:12px!important;
  align-items:start!important;
}
.make-preview-form .form-field{
  display:grid!important;
  grid-template-rows:24px 54px!important;
  row-gap:6px!important;
  margin:0!important;
  padding:0!important;
  min-width:0!important;
  align-self:start!important;
}
.make-preview-form .form-field-label{
  display:block!important;
  height:24px!important;
  margin:0!important;
  padding:0!important;
  font-family:Manrope,Arial,Helvetica,sans-serif!important;
  font-size:16px!important;
  font-weight:800!important;
  line-height:24px!important;
  letter-spacing:0!important;
  color:#102b4e!important;
}
.make-preview-form .field-control{
  width:100%!important;
  height:54px!important;
  min-height:54px!important;
  margin:0!important;
  padding:0 14px!important;
  box-sizing:border-box!important;
  border:1px solid #cfdaea!important;
  border-radius:12px!important;
  background:#fff!important;
  color:#102b4e!important;
  font-family:Manrope,Arial,Helvetica,sans-serif!important;
  font-size:16px!important;
  font-weight:500!important;
  line-height:1!important;
  box-shadow:none!important;
}
.make-preview-form button.field-control{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:12px!important;
  text-align:left!important;
}
.make-preview-form .custom-category-field{
  margin:0!important;
  padding:0!important;
}
.make-preview-form .custom-category-label{
  all:unset;
}
@media(max-width:620px){
  .make-preview-form .preview-main-row{
    grid-template-columns:1fr!important;
  }
}


/* Polished Contact Us schedule form */
#modal:has(.contact-choice-tabs){
  width:min(720px,calc(100% - 32px));
  padding:34px 38px 36px;
  border-radius:26px;
  border:1px solid rgba(102,137,170,.22);
  background:linear-gradient(150deg,#fbfdff 0%,#f2f7fc 100%);
  box-shadow:0 32px 100px rgba(3,20,43,.42);
}
#modal:has(.contact-choice-tabs) h2{
  font-size:36px;
  letter-spacing:-.035em;
  margin-bottom:18px;
}
#modal:has(.contact-choice-tabs) .close{
  width:40px;height:40px;right:18px;top:15px;border-radius:50%;
  display:grid;place-items:center;font-size:25px;line-height:1;
}
.contact-choice-tabs{
  display:grid;
  grid-template-columns:repeat(3,max-content);
  gap:8px;
  margin-bottom:22px;
}
.contact-tab{
  min-height:44px;
  padding:10px 16px;
  border-radius:999px;
  border:1px solid #cddaea;
  background:rgba(255,255,255,.75);
  box-shadow:0 3px 10px rgba(12,43,77,.04);
}
.contact-tab.active{
  background:linear-gradient(135deg,#1768e5,#0c5bd8);
  border-color:#0c5bd8;
  box-shadow:0 8px 18px rgba(12,91,216,.22);
}
.contact-call-form{gap:17px}
.contact-call-intro{
  display:flex;gap:13px;align-items:flex-start;
  padding:16px 17px;border-radius:16px;
  background:linear-gradient(135deg,#eef6ff,#f7fbff);
  border:1px solid #d9e7f5;
}
.contact-call-icon{
  width:42px;height:42px;flex:0 0 42px;border-radius:13px;
  display:grid;place-items:center;background:#dcecff;color:#0c5bd8;
  font-size:21px;font-weight:900;
}
.contact-call-intro strong{display:block;color:#102b4e;font-size:16px}
.contact-call-intro p{margin:3px 0 0!important;font-size:13px;line-height:1.5;color:#64778c!important}
.contact-required-note{
  margin:-3px 0 0!important;
  font-size:11px;color:#7c8da0!important;
}
.contact-required-note strong{color:#0c5bd8;font-size:13px}
.contact-call-form label>span{font-size:13px;font-weight:800}
.contact-call-form label>span em{
  font-size:11px;font-style:normal;font-weight:650;color:#8190a2;opacity:1;margin-left:3px
}
.contact-call-form input,
.contact-call-form textarea{
  min-height:50px;
  border-radius:13px;
  border:1px solid #cbd9e8;
  background:#fff;
  padding:13px 14px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8);
}
.contact-call-form textarea{min-height:105px}
.contact-call-form label small{
  display:block;margin-top:3px;color:#8291a3;font-size:10px;line-height:1.4;font-weight:600
}
.contact-call-form .form-message{min-height:18px;margin:0;font-size:12px;font-weight:750}
.contact-submit-button{
  width:100%;min-height:52px;margin-top:0!important;border-radius:13px!important;
  box-shadow:0 10px 22px rgba(12,91,216,.18)
}
@media(max-width:620px){
  #modal:has(.contact-choice-tabs){padding:25px 20px 24px;border-radius:22px}
  #modal:has(.contact-choice-tabs) h2{font-size:31px}
  .contact-choice-tabs{grid-template-columns:1fr}
  .contact-tab{width:100%}
  .contact-name-grid{grid-template-columns:1fr}
}


/* Compact Schedule a Call popup */
.contact-call-form{gap:10px}
.contact-call-form .form-grid-two{gap:10px}
.contact-call-form label{gap:4px;margin:0}
.contact-call-form .contact-required-note{margin:0 0 2px!important}
.contact-call-form input,
.contact-call-form textarea{padding:11px 13px}
.contact-call-form label small{margin-top:1px}
.contact-submit-button{min-height:48px}

/* Client portal navigation: flat styling, no shadow or hover underline. */
nav a.client-portal-link,nav a.client-portal-link:hover,nav a.client-portal-link:focus-visible{box-shadow:none!important;text-shadow:none!important;transform:none!important;text-decoration:none!important}
nav a.client-portal-link::after,nav a.client-portal-link:hover::after,nav a.client-portal-link.active::after{content:none!important;display:none!important}

/* Two ways to open a website preview. */
.preview-access-card .preview-method h2{font-size:clamp(22px,4vw,28px);margin-bottom:10px}
.preview-method>p{color:var(--text);font-size:14px;margin-bottom:18px}
.preview-custom{border-top:1px solid #b5c9dc;margin-top:8px;padding-top:26px}
.preview-input-row select{width:100%;text-overflow:ellipsis}
.preview-input-row .button:disabled{opacity:.55;cursor:not-allowed;transform:none}

/* Steady Hands direct contact options. */
.contact-intro>p{max-width:620px;margin-inline:auto}
.contact-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:32px}
.contact-option-card{display:flex;flex-direction:column;align-items:flex-start;gap:18px;min-width:0;padding:30px;background:linear-gradient(145deg,rgba(250,252,255,.96),rgba(226,238,249,.92));border:1px solid rgba(255,255,255,.7);border-radius:24px;color:var(--ink);box-shadow:0 22px 60px #0003}
.contact-option-card>i{font-size:30px;color:var(--navy)}
.contact-option-card h2{font-size:26px;line-height:1.15}
.contact-detail{font-size:17px;font-weight:800;overflow-wrap:anywhere;max-width:100%}
.contact-option-card .button{margin-top:auto;min-height:46px}
.contact-text-link{font-weight:800;text-decoration:underline;text-underline-offset:3px}
.contact-direct-list{display:grid;gap:12px;margin-bottom:22px}
.contact-direct-list a{display:grid;gap:4px;padding:14px 16px;border:1px solid #c8d9e9;border-radius:12px;background:#edf5fc;overflow-wrap:anywhere}
.contact-direct-list span{font-size:13px;color:var(--text)}
.contact-direct-list strong{font-size:16px;color:var(--navy)}
@media(max-width:980px){.contact-options{grid-template-columns:1fr;max-width:640px}.contact-option-card{padding:24px}.contact-detail{font-size:18px}}


/* Horizontally swipeable client references on the homepage */
.client-work-section .client-work-grid{
  display:flex;
  flex-wrap:nowrap;
  gap:16px;
  overflow-x:auto;
  overflow-y:hidden;
  scroll-snap-type:x mandatory;
  scroll-padding-inline:2px;
  overscroll-behavior-x:contain;
  -webkit-overflow-scrolling:touch;
  padding:2px 2px 16px;
  max-width:100%;
  scrollbar-width:thin;
  scrollbar-color:rgba(175,214,255,.8) rgba(255,255,255,.12);
}
.client-work-section .client-work-grid > .client-work-card{
  flex:0 0 calc((100% - 48px)/4);
  min-width:0;
  scroll-snap-align:start;
}
.client-work-section .client-work-grid::-webkit-scrollbar{height:8px}
.client-work-section .client-work-grid::-webkit-scrollbar-thumb{background:rgba(175,214,255,.8);border-radius:999px}
.client-work-section .client-work-grid::-webkit-scrollbar-track{background:rgba(255,255,255,.12);border-radius:999px}
.client-work-section .client-work-grid:focus-visible{outline:2px solid #8dd6ff;outline-offset:4px}
@media(max-width:1200px){
  .client-work-section .client-work-grid > .client-work-card{flex-basis:calc((100% - 32px)/3)}
}
@media(max-width:820px){
  .client-work-section .client-work-grid{max-width:none;margin-inline:0}
  .client-work-section .client-work-grid > .client-work-card{flex-basis:min(76vw,310px)}
}
@media(max-width:560px){
  .client-work-section .client-work-grid > .client-work-card{flex-basis:min(82vw,310px)}
}


/* Clearly visible reference carousel navigation */
.client-work-section .client-work-heading{position:relative;padding-right:118px}
.client-work-section .reference-scroll-hint{color:#c8e4ff;font-size:13px;font-weight:700;margin:1px 0 0}
.client-work-section .reference-scroll-controls{display:flex;gap:9px;position:absolute;right:0;bottom:2px}
.client-work-section .reference-scroll-arrow{width:46px;height:42px;border:1px solid rgba(189,226,255,.65);border-radius:22px;background:rgba(19,64,120,.9);color:#fff;font-size:24px;line-height:1;cursor:pointer;transition:background .18s ease}
.client-work-section .reference-scroll-arrow:hover{background:#2367ae}
.client-work-section .reference-scroll-arrow:focus-visible{outline:2px solid #fff;outline-offset:2px}
.client-work-section .reference-scroll-arrow:disabled{opacity:.35;cursor:default}
@media(max-width:560px){.client-work-section .client-work-heading{padding-right:95px}.client-work-section .reference-scroll-arrow{width:39px;height:39px}.client-work-section .reference-scroll-hint{font-size:11px}}


/* Homepage: compact, intentionally scrollable reference carousel */
#references .client-work-grid{
  display:flex;
  flex-wrap:nowrap;
  width:100%;
  max-width:100%;
  gap:14px;
  overflow-x:auto;
  overflow-y:hidden;
  scroll-snap-type:x mandatory;
  scrollbar-width:auto;
  padding:5px 4px 19px;
  scroll-padding-inline:4px;
}
#references .client-work-grid > .client-work-card{
  box-sizing:border-box;
  flex:0 0 clamp(230px, calc((100% - 56px)/4), 310px);
  min-width:0;
  min-height:0;
  scroll-snap-align:start;
}
#references .client-work-grid .live-work-card .mini-site-frame{height:166px;flex:0 0 166px}
#references .client-work-grid .client-work-meta h3{font-size:15px}
#references .client-work-grid .client-work-meta p{font-size:10px}
#references .reference-scroll-hint{color:#e2f1ff;font-weight:800;font-size:14px}
#references .reference-scroll-arrow{background:#eff8ff;color:#0f315e;border:2px solid #a0cef9;box-shadow:0 4px 12px #001c4180}
#references .reference-scroll-arrow:hover{background:#cce9ff;color:#102950}
#references .client-work-grid::-webkit-scrollbar{height:11px}
#references .client-work-grid::-webkit-scrollbar-thumb{background:#b5dbff;border-radius:20px}
#references .client-work-grid::-webkit-scrollbar-track{background:#193d6d;border-radius:20px}
@media(max-width:820px){
  #references .client-work-grid{max-width:100%;margin-inline:0}
  #references .client-work-grid > .client-work-card{flex-basis:min(74vw,290px)}
}
@media(max-width:560px){
  #references .client-work-grid > .client-work-card{flex-basis:min(82vw,290px)}
}
/* Full References page: normal wrapping grid, never a horizontal carousel */
.references-page .client-work-section .client-work-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  width:100%;
  max-width:100%;
  gap:18px;
  overflow:visible;
  padding:0;
  margin:0;
  scroll-snap-type:none;
}
.references-page .client-work-section .client-work-grid > .client-work-card{
  width:auto;
  min-width:0;
  min-height:290px;
  flex:auto;
  scroll-snap-align:none;
}
@media(max-width:1050px){
  .references-page .client-work-section .client-work-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:640px){
  .references-page .client-work-section .client-work-grid{grid-template-columns:1fr}
}