/* ============================================================ helmet-signup.css — the Groundcraft "get your website" sign-up surface Scope: .gcs (page) + .gcs-takeover (the wizard overlay, mounted on ). Slug-independent (NOT body.gc-page-*) so the same surface can be staged on a preview page and swapped onto the real slug without a rescope. Consumes the global design tokens from tokens.css (brand #9bd45f, graphite #525750, Space Grotesk / Inter / Plus Jakarta Sans, graphite-tinted shadows). The flagship conversion page: hero that IS the start of the flow, a focused Operate-mode wizard, honest pricing. No gradients — flat graphite dark bands. ============================================================ */ .gcs{ --deep:var(--nav-bg); /* #20231e flat graphite band */ --deep-ink:var(--nav-ink); /* #b6bbb0 */ --deep-ink-strong:var(--nav-ink-strong); /* #f2f3ef */ --font-label:"Plus Jakarta Sans",ui-sans-serif,system-ui,sans-serif; --shadow-lift:0 22px 48px -28px rgba(23,26,21,.45),0 2px 6px rgba(23,26,21,.06); --maxw:1180px; color:var(--ink-2);font-family:var(--font-body);font-size:16px;line-height:1.6; } .gcs *{box-sizing:border-box} .gcs h1,.gcs h2,.gcs h3,.gcs h4{font-family:var(--font-display);color:var(--ink);margin:0;letter-spacing:-.02em;line-height:1.06;font-weight:700} .gcs p{margin:0} .gcs a{color:var(--brand-strong);text-decoration:none} .gcs svg{display:block} .gcs .shell{max-width:var(--maxw);margin-inline:auto;padding-inline:clamp(20px,5vw,40px)} .gcs .ic{width:20px;height:20px;flex:none;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round} .gcs .ic-sm,.gcs-takeover .ic-sm{width:17px;height:17px} /* ---- buttons ---- */ .gcs .btn,.gcs-takeover .btn{display:inline-flex;align-items:center;gap:9px;font-family:var(--font-label);font-weight:700;font-size:15px; letter-spacing:.01em;padding:15px 24px;border-radius:var(--r-pill);border:1px solid transparent;cursor:pointer; transition:background .14s ease,border-color .14s ease,color .14s ease,transform .14s ease;text-align:center;justify-content:center;text-decoration:none} .gcs .btn-brand,.gcs-takeover .btn-brand{background:var(--brand);color:var(--brand-ink);box-shadow:var(--shadow-card)} .gcs .btn-brand:hover,.gcs-takeover .btn-brand:hover{background:#a9dc76;color:var(--brand-ink)} .gcs .btn-brand:active,.gcs-takeover .btn-brand:active{transform:translateY(1px)} .gcs .btn-ghost,.gcs-takeover .btn-ghost{background:transparent;color:var(--ink);border-color:var(--border-strong)} .gcs .btn-ghost:hover,.gcs-takeover .btn-ghost:hover{border-color:var(--ink);background:var(--surface)} .gcs .btn-lg,.gcs-takeover .btn-lg{padding:17px 30px;font-size:16px} .gcs .btn-block,.gcs-takeover .btn-block{display:flex;width:100%} .gcs .btn:disabled,.gcs-takeover .btn:disabled{opacity:.42;cursor:not-allowed} /* ---- HERO (pitch + wizard step 1) ---- */ .gcs .hero{padding:clamp(28px,5vw,64px) 0 clamp(40px,6vw,80px)} .gcs .hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,4.5vw,64px);align-items:center} .gcs .hero-pitch{max-width:560px;animation:gcs-rise .5s cubic-bezier(.22,1,.36,1) both} .gcs .ed{display:inline-flex;align-items:center;gap:8px;background:var(--brand-soft);color:var(--brand-strong); font-family:var(--font-label);font-weight:700;font-size:12.5px;letter-spacing:.04em;padding:7px 13px 7px 11px;border-radius:var(--r-pill)} .gcs .ed .dot{width:7px;height:7px;border-radius:50%;background:var(--brand);box-shadow:0 0 0 4px rgba(155,212,95,.25)} .gcs h1.hero-h{font-size:clamp(40px,5.4vw,66px);margin:20px 0 0;letter-spacing:-.032em} .gcs h1.hero-h .u{color:var(--brand-strong)} .gcs .hero-sub{font-size:clamp(17px,1.5vw,19px);color:var(--ink-2);margin-top:20px;max-width:33ch} .gcs .hero-trust{display:flex;flex-wrap:wrap;gap:10px 20px;margin-top:26px} .gcs .hero-trust span{display:inline-flex;align-items:center;gap:8px;font-size:14.5px;font-weight:500;color:var(--ink)} .gcs .hero-trust .ic{color:var(--brand-strong)} .gcs .hero-cta-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px;align-items:center} .gcs .price-note{font-size:14px;color:var(--muted)} .gcs .price-note b{color:var(--ink);font-weight:600} .gcs .price-note s{color:var(--muted)} /* ---- START CARD (wizard host, step 1) ---- */ .gcs .start-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg); box-shadow:var(--shadow-lift);padding:26px;animation:gcs-rise .6s .08s cubic-bezier(.22,1,.36,1) both} .gcs .sc-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:4px} .gcs .sc-kick{font-family:var(--font-label);font-weight:700;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)} .gcs .sc-price{font-family:var(--font-display);font-weight:700;font-size:15px;color:var(--ink)} .gcs .sc-price s{color:var(--muted);font-weight:500;font-size:13px;margin-right:5px} /* The price block — this card is where the buyer commits, so the number carries real weight here rather than being a footnote. Rule below separates the offer from the first question. */ .gcs .sc-priceblock{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px; padding:12px 0 16px;margin-bottom:16px;border-bottom:1px solid var(--border)} .gcs .sc-amount{display:inline-flex;align-items:baseline;gap:10px} .gcs .sc-amount b{font-family:var(--font-display);font-weight:700;font-size:44px;line-height:1; color:var(--ink);letter-spacing:-.03em} .gcs .sc-amount s{font-family:var(--font-display);font-weight:500;font-size:19px;color:var(--muted);order:-1} .gcs .sc-priceterms{flex:1 1 100%;font-size:13px;color:var(--muted)} .gcs .sc-priceterms b{color:var(--brand-strong);font-weight:700} .gcs .sc-q{font-family:var(--font-display);font-weight:700;font-size:22px;color:var(--ink);letter-spacing:-.02em;margin:8px 0 4px} .gcs .sc-hint{font-size:14px;color:var(--muted);margin-bottom:16px} .gcs .opts{display:flex;flex-direction:column;gap:10px} .gcs .opt{display:flex;align-items:center;gap:14px;width:100%;text-align:left;background:var(--surface); border:1.5px solid var(--border);border-radius:var(--r-md);padding:15px 16px;cursor:pointer; transition:border-color .14s ease,background .14s ease,box-shadow .14s ease;font-family:inherit} .gcs .opt:hover{border-color:var(--border-strong);background:var(--grey-25,#f7f8f4)} .gcs .opt.sel{border-color:var(--brand);background:var(--brand-soft);box-shadow:0 0 0 3px rgba(155,212,95,.18)} .gcs .opt .oi{width:40px;height:40px;flex:none;border-radius:11px;display:grid;place-items:center;background:var(--surface-2);color:var(--ink-2);transition:background .14s,color .14s} .gcs .opt.sel .oi{background:var(--brand);color:var(--brand-ink)} .gcs .opt>span:not(.oi):not(.ock){display:flex;flex-direction:column;gap:2px;min-width:0} .gcs .opt .ot{display:block;font-weight:600;font-size:15.5px;color:var(--ink);line-height:1.25} .gcs .opt .os{display:block;font-size:13px;color:var(--muted);line-height:1.35} .gcs .opt .ock{margin-left:auto;color:var(--brand-strong);opacity:0;transition:opacity .14s} .gcs .opt.sel .ock{opacity:1} .gcs .sc-foot{margin-top:18px} .gcs .sc-fine{display:flex;align-items:center;gap:8px;justify-content:center;margin-top:14px;font-size:12.5px;color:var(--muted)} .gcs .sc-fine .ic{width:14px;height:14px;color:var(--brand-strong)} /* ---- sections ---- */ .gcs section{padding:clamp(48px,7vw,88px) 0} .gcs .sec-head{max-width:640px;margin-bottom:clamp(28px,4vw,48px)} .gcs h2.sec-h{font-size:clamp(29px,3.4vw,42px);letter-spacing:-.028em} .gcs .sec-lede{font-size:clamp(16px,1.5vw,18px);color:var(--ink-2);margin-top:14px} .gcs .band{background:var(--surface)} /* value grid */ .gcs .val{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(16px,2.5vw,28px) clamp(28px,4vw,56px)} .gcs .val-item{display:flex;gap:15px;align-items:flex-start} .gcs .val-item .vic{width:42px;height:42px;flex:none;border-radius:12px;display:grid;place-items:center;background:var(--brand-soft);color:var(--brand-strong)} .gcs .val-item h3{font-size:18px;font-family:var(--font-display);font-weight:700;color:var(--ink);letter-spacing:-.01em;margin-bottom:3px} .gcs .val-item p{font-size:14.5px;color:var(--ink-2)} /* steps */ .gcs .steps{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,2vw,24px)} .gcs .step .sn{font-family:var(--font-display);font-weight:700;font-size:15px;color:var(--brand-ink);background:var(--brand);width:34px;height:34px;border-radius:50%;display:grid;place-items:center;margin-bottom:14px} .gcs .step h3{font-size:17px;color:var(--ink);margin-bottom:5px} .gcs .step p{font-size:14px;color:var(--ink-2)} /* pricing strip */ .gcs .pricing{background:var(--deep);color:var(--deep-ink);border-radius:var(--r-lg);padding:clamp(28px,4vw,48px);display:grid;grid-template-columns:1fr auto;gap:32px;align-items:center} .gcs .pricing h2{color:var(--deep-ink-strong);font-size:clamp(26px,3vw,38px);letter-spacing:-.02em} .gcs .pricing .pi{margin-top:14px;display:flex;flex-direction:column;gap:9px} .gcs .pricing .pi span{display:flex;align-items:center;gap:10px;font-size:15px;color:var(--deep-ink)} .gcs .pricing .pi .ic{color:var(--brand)} .gcs .pcard{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.12);border-radius:var(--r-md);padding:26px;text-align:center;min-width:250px} .gcs .pcard .was{color:var(--deep-ink);text-decoration:line-through;font-size:16px} .gcs .pcard .now{font-family:var(--font-display);font-weight:700;font-size:56px;color:#fff;line-height:1;margin:4px 0 2px} .gcs .pcard .per{color:var(--deep-ink);font-size:14px} .gcs .pcard .btn{margin-top:18px} .gcs .pcard .rn{font-size:12.5px;color:var(--deep-ink);margin-top:12px} /* faq */ .gcs .faq{display:grid;grid-template-columns:repeat(2,1fr);gap:0 clamp(28px,5vw,64px)} .gcs .qa{border-top:1px solid var(--border);padding:20px 0} .gcs .qa h3{font-size:16.5px;color:var(--ink);margin-bottom:7px} .gcs .qa p{font-size:14.5px;color:var(--ink-2)} /* closing */ .gcs .closing{background:var(--deep);color:var(--deep-ink);text-align:center} .gcs .closing h2{color:#fff;font-size:clamp(30px,4vw,48px);letter-spacing:-.03em} .gcs .closing p{max-width:44ch;margin:16px auto 0;color:var(--deep-ink);font-size:17px} .gcs .closing .btn{margin-top:28px} /* ---- WIZARD TAKEOVER (mounted on body) ---- */ .gcs-takeover{position:fixed;inset:0;z-index:9999;display:none;place-items:center;padding:20px; background:rgba(20,22,18,.5);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px); font-family:var(--font-body);color:var(--ink-2)} .gcs-takeover.open{display:grid;animation:gcs-fade .2s ease both} .gcs-takeover *{box-sizing:border-box} .gcs-takeover h3{font-family:var(--font-display);color:var(--ink);margin:0;letter-spacing:-.02em} .gcs-takeover .to-panel{position:relative;background:var(--surface);border-radius:var(--r-lg);box-shadow:var(--shadow-pop);width:min(520px,100%); max-height:92vh;overflow:auto;padding:28px;animation:gcs-pop .28s cubic-bezier(.22,1,.36,1) both} .gcs-takeover .to-close{position:absolute;top:18px;right:20px;background:none;border:0;color:var(--muted);cursor:pointer} .gcs-takeover .to-close:hover{color:var(--ink)} .gcs-takeover .ic{width:20px;height:20px;flex:none;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round} .gcs-takeover .sc-q{font-family:var(--font-display);font-weight:700;font-size:22px;color:var(--ink);letter-spacing:-.02em;margin:2px 0 4px} .gcs-takeover .sc-hint{font-size:14px;color:var(--muted);margin-bottom:16px} .gcs-takeover .sc-fine{display:flex;align-items:center;gap:8px;justify-content:center;margin-top:14px;font-size:12.5px;color:var(--muted)} .gcs-takeover .sc-fine .ic{width:14px;height:14px;color:var(--brand-strong)} .gcs-takeover .wz-prog{display:flex;align-items:center;gap:6px;margin-bottom:18px} .gcs-takeover .wz-prog i{height:4px;border-radius:2px;background:var(--border);flex:1;transition:background .3s ease} .gcs-takeover .wz-prog i.on{background:var(--brand)} .gcs-takeover .wz-back{display:inline-flex;align-items:center;gap:6px;background:none;border:0;color:var(--muted);font-family:var(--font-body);font-size:13.5px;font-weight:500;cursor:pointer;padding:0;margin-bottom:12px} .gcs-takeover .wz-back:hover{color:var(--ink)} .gcs-takeover .field{margin-bottom:14px} .gcs-takeover .field label{display:block;font-size:13px;font-weight:600;color:var(--ink);margin-bottom:6px} .gcs-takeover .field input{width:100%;font-family:inherit;font-size:15px;color:var(--ink);background:var(--surface); border:1.5px solid var(--border);border-radius:var(--r-sm);padding:12px 14px;transition:border-color .14s,box-shadow .14s} .gcs-takeover .field input::placeholder{color:var(--muted)} .gcs-takeover .field input:focus{outline:0;border-color:var(--brand);box-shadow:0 0 0 3px rgba(155,212,95,.2)} /* plan switcher at review — same visual weight as the text fields */ .gcs-takeover .field select{width:100%;font-family:inherit;font-size:15px;color:var(--ink);background:var(--surface); border:1.5px solid var(--border);border-radius:var(--r-sm);padding:12px 14px;cursor:pointer; transition:border-color .14s,box-shadow .14s} .gcs-takeover .field select:focus{outline:0;border-color:var(--brand);box-shadow:0 0 0 3px rgba(155,212,95,.2)} .gcs-takeover .field .sub{font-size:12.5px;color:var(--muted);margin-top:6px} .gcs-takeover .dsearch-row{display:flex;gap:8px} .gcs-takeover .dsearch-row input{flex:1} .gcs-takeover .dres{margin-top:6px;display:flex;flex-direction:column;gap:8px;max-height:230px;overflow:auto} .gcs-takeover .dres-item{display:flex;align-items:center;gap:12px;border:1.5px solid var(--border);border-radius:var(--r-sm);padding:11px 13px;cursor:pointer;background:var(--surface);transition:border-color .14s,background .14s} .gcs-takeover .dres-item:hover{border-color:var(--border-strong)} .gcs-takeover .dres-item.sel{border-color:var(--brand);background:var(--brand-soft)} .gcs-takeover .dres-item .dn{font-weight:600;color:var(--ink);font-size:15px} .gcs-takeover .dres-item .dp{margin-left:auto;text-align:right;font-size:13px} .gcs-takeover .dres-item .dp b{color:var(--brand-strong);font-weight:700} .gcs-takeover .dres-item .dp s{color:var(--muted);display:block;font-size:11.5px} .gcs-takeover .dmsg{font-size:13px;color:var(--muted);padding:8px 2px} .gcs-takeover .badge-free{background:var(--brand);color:var(--brand-ink);font-family:var(--font-label);font-weight:700;font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;padding:3px 8px;border-radius:var(--r-pill);white-space:nowrap} .gcs-takeover .oauth{display:flex;flex-direction:column;gap:9px;margin-bottom:14px} .gcs-takeover .oauth button{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;border:1.5px solid var(--border);background:var(--surface);border-radius:var(--r-sm);padding:12px;font-family:inherit;font-size:14.5px;font-weight:600;color:var(--ink);cursor:pointer;transition:border-color .14s,background .14s} .gcs-takeover .oauth button:hover{border-color:var(--border-strong);background:var(--grey-25,#f7f8f4)} .gcs-takeover .divider{display:flex;align-items:center;gap:12px;color:var(--muted);font-size:12.5px;margin:4px 0 14px} .gcs-takeover .divider::before,.gcs-takeover .divider::after{content:"";height:1px;background:var(--border);flex:1} .gcs-takeover .summary{background:var(--grey-25,#f7f8f4);border:1px solid var(--border);border-radius:var(--r-md);padding:16px;margin-bottom:16px} .gcs-takeover .summary .row{display:flex;justify-content:space-between;align-items:baseline;padding:7px 0;font-size:14.5px} .gcs-takeover .summary .row+.row{border-top:1px solid var(--border)} .gcs-takeover .summary .row .k{color:var(--ink-2)} .gcs-takeover .summary .row .v{color:var(--ink);font-weight:600} .gcs-takeover .summary .row .v.free{color:var(--brand-strong)} .gcs-takeover .summary .tot{display:flex;justify-content:space-between;align-items:baseline;margin-top:10px;padding-top:12px;border-top:1.5px solid var(--border-strong)} .gcs-takeover .summary .tot .k{font-weight:600;color:var(--ink)} .gcs-takeover .summary .tot .v{font-family:var(--font-display);font-weight:700;font-size:24px;color:var(--ink)} .gcs-takeover .spin{width:18px;height:18px;border:2px solid rgba(255,255,255,.5);border-top-color:var(--brand-ink);border-radius:50%;animation:gcs-spin .7s linear infinite} @keyframes gcs-rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}} @keyframes gcs-fade{from{opacity:0}to{opacity:1}} @keyframes gcs-pop{from{opacity:0;transform:translateY(12px) scale(.985)}to{opacity:1;transform:none}} @keyframes gcs-spin{to{transform:rotate(360deg)}} @media (prefers-reduced-motion:reduce){.gcs *,.gcs-takeover *{animation:none!important;transition-duration:.01ms!important}} @media (max-width:900px){ .gcs .hero-grid{grid-template-columns:1fr;gap:32px} .gcs .hero-pitch{max-width:none;order:1} .gcs .start-card{order:2} .gcs .val,.gcs .faq{grid-template-columns:1fr} .gcs .steps{grid-template-columns:repeat(2,1fr)} .gcs .pricing{grid-template-columns:1fr;text-align:center} .gcs .pricing .pi span{justify-content:center} }