/* Frictions / Signal design system. Shared visual language, September 2026. */
:root{--ink:#14211e;--muted:#5a6863;--lime:#d3ff70;--paper:#f5f6f1;--line:#d9dfd5;--green:#355c32}
body{background:var(--paper)}
::selection{background:#d3ff70;color:#14211e}
.wrap{max-width:1400px;padding-inline:64px}
.preview-bar{background:#d3ff70;color:#23311c;padding:9px 24px;font-size:12px;gap:18px}
.preview-bar>span:first-child{color:#23311c;font-size:10px;letter-spacing:.13em;border-right:1px solid #a1c753;padding-right:18px}
.site-header{max-width:none;background:#101b18;color:#f1f5ed;padding:25px max(64px,calc((100vw - 1272px)/2));border-color:#2b3832}
.brand{font-size:29px;font-weight:750;letter-spacing:-1.5px}.brand-mark{color:#132117;border-radius:11px;width:34px;height:36px}.brand-period{color:var(--lime)}
nav{gap:30px;font-size:13px}nav>a{color:#c5cec5}.nav-cta{color:#f4f7ee;border-color:#4b594e;border-radius:50px;padding:12px 19px}.nav-cta:hover{background:#23342a;text-decoration:none}
.hero{max-width:none;color:#f4f7ed;background:radial-gradient(ellipse at 91% 60%,#354d294d,transparent 45%),#101b18;padding:76px max(64px,calc((100vw - 1272px)/2)) 62px;position:relative;overflow:hidden}
.hero>.eyebrow{color:#b9c7b5;font-size:10px;letter-spacing:.17em;margin-bottom:26px}.tiny-square{background:var(--lime);width:7px;height:7px;border-radius:50%;box-shadow:0 0 0 4px #d3ff7010}
.hero-grid{grid-template-columns:1.17fr 1fr;gap:64px;align-items:center}
h1{font-size:clamp(50px,5.9vw,86px);font-weight:550;line-height:1.04;letter-spacing:-.066em;margin-bottom:26px}h1 span{color:var(--lime);background:none}h1 br{display:block}
.hero-copy{color:#b6c2b7;font-size:16px;line-height:1.8;max-width:520px}.hero-actions{gap:25px}.button{border-radius:50px;font-size:13px;padding:16px 24px;min-height:51px}.primary{background:var(--lime);border-color:var(--lime)}.primary:hover{background:#e0ff9d;box-shadow:0 6px 30px #d3ff7026}.text-link{font-size:13px}.hero .text-link{color:#e2e9da}.hero-note{color:#90a18f;font-size:11px;margin-top:22px}
.moment-note{border:1px solid #43513f;background:linear-gradient(140deg,#263626,#17231d);border-radius:20px;padding:25px;transform:rotate(1.5deg);box-shadow:0 28px 75px #0004;position:relative;min-width:0}
.note-top{font-size:9px;color:#b1bfa8;letter-spacing:.12em}.note-top>span:last-child{color:var(--lime)}.moment-time{font-size:51px;color:var(--lime);margin:23px 0 8px}.moment-note h2{font-size:18px;color:#f0f5e9;letter-spacing:-.035em}.moment-note p:not(.moment-time){color:#a9b8a5;font-size:12px}.example-label{border-color:#40503b;color:#a3b59a;font-size:10px;margin-top:18px}
.signal-preview{background:#f5f6f0;border:1px solid #4a5b42;border-radius:10px;padding:17px;margin:18px 0 0;color:#1b2c22;transform:rotate(-1.5deg);position:relative}.signal-preview .preview-caption{display:flex;justify-content:space-between;font-size:9px;text-transform:uppercase;letter-spacing:.12em;color:#526545;padding-bottom:12px;border-bottom:1px solid #dde3d5}.signal-fields{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:14px 0}.signal-field{height:29px;background:#e5e9df;border-radius:5px;border:1px solid #d4dccb}.signal-field.issue{border:1px solid #b37646;background:#f9eadd;position:relative}.signal-field.issue:after{content:'Required field';position:absolute;left:9px;top:7px;font-size:9px;color:#825026}.signal-pay{padding:8px;background:#243826;border-radius:5px;text-align:center;color:#e8efdf;font-size:9px}.signal-track{height:3px;background:#45563c;margin-top:24px;position:relative}.signal-track:before{content:'';display:block;width:36%;height:3px;background:var(--lime)}.signal-track:after{content:'';position:absolute;left:36%;top:-4px;width:11px;height:11px;background:var(--lime);border:2px solid #20311f;border-radius:50%}
.hero-meta{display:flex;gap:30px;margin-top:53px;padding-top:22px;border-top:1px solid #30402f;color:#96a88e;font-size:10px;letter-spacing:.08em;text-transform:uppercase}.hero-meta span:before{content:'+';color:var(--lime);margin-right:9px}
.demo-band{padding-block:64px;background:#e9ede3;border-block:0}.section-top{margin-bottom:30px}.eyebrow{font-size:10px;letter-spacing:.15em;color:#536845}.section-top h2{font-size:clamp(26px,3vw,40px);font-weight:550;letter-spacing:-.05em;max-width:700px}.sample-label{font-size:9px;border-radius:40px;background:#f5f8ef;border-color:#c7d3bc;padding:8px 12px}.demo-window{border:1px solid #becbb1;border-radius:18px;box-shadow:0 22px 65px #28351b13}.window-bar{background:#18271e;padding:18px 23px}.window-brand{font-size:12px}.window-bar>span:last-child{font-size:10px}.demo-bottom{gap:64px}.demo-bottom p{font-size:12px;line-height:1.8}
.section-space{padding-block:100px}.section-heading{max-width:720px;margin-bottom:45px}h2{font-weight:550;letter-spacing:-.055em;line-height:1.1}.section-heading>p:last-child{font-size:15px}.steps{gap:16px}.steps article{border:1px solid var(--line);border-radius:16px;padding:29px;background:#fff9;position:relative}.step-number{color:#627951;font-size:10px;letter-spacing:.13em;margin-bottom:34px}.steps h3{font-size:19px;font-weight:550}.steps p{font-size:13px;line-height:1.85}.steps article:after{content:'↗';position:absolute;right:25px;top:21px;color:#94a18a;font-size:23px}.wordpress-layout{margin-top:70px;padding-top:65px;gap:70px;grid-template-columns:.72fr 1.28fr}.wordpress-copy h3{font-size:39px;font-weight:550}.wordpress-copy p{font-size:14px;line-height:1.9}.wordpress-image{padding:18px;background:#e5ebdd;border:1px solid #d3ddca;border-radius:20px}.wordpress-image img{border-radius:9px}.wordpress-image figcaption{font-size:10px;margin-top:15px}
.privacy-band{background:radial-gradient(ellipse at 0 100%,#314525,transparent 65%),#121e18;padding-block:90px}.privacy-grid{gap:95px}.privacy-band h2{font-size:clamp(30px,3.8vw,53px);font-weight:500;letter-spacing:-.055em}.privacy-band p{font-size:14px;line-height:1.85;color:#b0bda8}.privacy-band .eyebrow{color:#a3ba91}.privacy-list>div{border-color:#35452d}.privacy-list>div>span{font:11px ui-monospace,monospace;color:var(--lime);border:1px solid #435537;border-radius:50%;width:29px;height:29px;flex-shrink:0;display:grid;place-items:center;padding:0}.privacy-list h3{font-size:16px;font-weight:550}.privacy-list p{font-size:13px}
.plan-grid{gap:18px}.plan-card{padding:37px;border:1px solid #d5ddce;border-radius:20px;background:#fff}.pro-card{background:#e8f1dd;border-color:#b9cf9d}.plan-heading h3{font-size:24px;font-weight:550}.plan-heading>span{font-size:12px}.price>span:first-child{font-size:61px;font-weight:500;letter-spacing:-.06em}.price>span:last-child{font-size:13px}.plan-allowance{font-size:13px}.plan-card li{font-size:13px}.plan-card li:before{color:#4a7529}.plan-card ul{border-color:#cedbc2}.plan-foot{font-size:11px}.billing-switch{border-radius:40px;padding:4px;background:#dce9cd;border-color:#c2d5ae}.billing-switch span{border-radius:40px;font-size:11px;padding:7px 17px}.dark-button{background:#1c2a1c}.plans-fine{font-size:11px;max-width:850px}
.questions{gap:95px;padding-block:80px}.questions h2{font-size:48px;font-weight:500}.faq-list summary{font-size:14px;padding-block:23px}.faq-list details p{font-size:13px}.faq-list details{border-color:#d4ddca}.faq-list summary:after{font-size:23px;color:#668149}.closing{max-width:1272px;margin:10px auto 65px;padding:65px 35px;border:1px solid #d0dcbc;border-radius:24px;background:radial-gradient(ellipse at 50% 120%,#c8e89e,transparent 75%),#e9f0df}.closing h2{font-size:clamp(34px,4.7vw,64px);font-weight:500}.closing .eyebrow{font-size:9px}.closing .primary{background:#1c2a1c;color:var(--lime);border-color:#1c2a1c}footer{padding-block:28px 35px}footer .brand-period{color:#638d32}footer>p{font-size:11px}footer>div{font-size:10px}
@media(min-width:1600px){.hero{padding-top:92px;padding-bottom:70px}.hero-grid{grid-template-columns:1.2fr 1fr}}
@media(max-width:1100px){.wrap{padding-inline:35px}.site-header{padding-inline:35px}.hero{padding:55px 35px}.hero-grid{gap:35px;grid-template-columns:1.1fr 1fr}h1{font-size:clamp(45px,6vw,70px)}.hero-copy{font-size:14px}.hero-actions{gap:17px}.moment-note{padding:20px}.hero .text-link{font-size:12px}.privacy-grid,.questions{gap:45px}.closing{margin-inline:25px}.wordpress-layout{gap:35px}.steps article{padding:24px}}
@media(max-width:760px){.wrap{padding-inline:22px}.preview-bar{padding:9px 22px;gap:6px}.preview-bar>span:first-child{border:0;padding-right:0}.preview-bar>span:last-child{font-size:10px;width:100%}.site-header{padding:20px 22px;gap:18px}.brand{font-size:27px}nav{gap:17px;font-size:11px;width:100%;justify-content:space-between}.nav-cta{padding:8px 12px}.hero{padding:39px 22px 29px}.hero>.eyebrow{font-size:8px;letter-spacing:.13em}.hero-grid{grid-template-columns:1fr;gap:33px}h1{font-size:clamp(42px,10vw,72px);line-height:1.05}.hero-copy{font-size:14px;line-height:1.85}.hero-actions{gap:20px}.hero-note{font-size:10px}.moment-note{display:block;transform:none;max-width:480px;width:100%;margin:0 auto;padding:22px}.moment-time{font-size:39px;margin:20px 0 10px}.moment-note h2{font-size:20px}.moment-note h2 br{display:none}.signal-preview{transform:none}.moment-note p:not(.moment-time){font-size:12px}.hero-meta{gap:13px;flex-wrap:wrap;margin-top:30px;font-size:8px}.hero-meta span:before{margin-right:5px}.demo-band{padding-block:38px}.section-top h2{font-size:29px}.section-top{gap:15px}.sample-label{font-size:8px}.window-bar{padding:14px}.demo-bottom{gap:17px}.demo-bottom p{font-size:11px}.section-space{padding-block:55px}.section-heading h2{font-size:35px}.section-heading>p:last-child{font-size:13px}.steps{gap:13px}.steps article{padding:25px}.step-number{margin-bottom:23px}.wordpress-layout{margin-top:45px;padding-top:40px;gap:28px;grid-template-columns:1fr}.wordpress-copy h3{font-size:32px}.wordpress-image{padding:10px}.privacy-band{padding-block:55px}.privacy-grid{gap:35px}.privacy-band h2{font-size:36px}.privacy-band p{font-size:13px}.plan-card{padding:27px}.plan-heading>span{font-size:11px}.plan-card:first-child .price{margin-top:22px}.price>span:first-child{font-size:52px}.questions{gap:25px}.questions h2{font-size:37px}.faq-list summary{font-size:13px}.closing{margin:0 16px 38px;padding:43px 22px}.closing h2{font-size:36px}.closing .eyebrow{font-size:8px}footer{gap:15px}footer>div{font-size:10px}}
@media(max-width:360px){nav{gap:9px}.nav-cta{padding:8px}.hero-actions{gap:16px}.button{padding:14px 18px}.hero-meta{font-size:7px}h1{font-size:39px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}