/* A calm, product-led story: explain, show, then invite people in. */
.product-page{--paper:#f5f2e9;--cream:#fffdf7;--ink:#20283b;--muted:#687287;--blue:#3159a9;--orange:#c85a2b;--line:#d8dce3;background:var(--paper);color:var(--ink)}
.product-nav,.product-footer{width:min(1240px,calc(100% - 64px));margin:auto;display:flex;align-items:center;justify-content:space-between}
.product-nav{height:76px;border-bottom:1px solid #20283b17}
.product-brand{display:flex;align-items:center;gap:10px;font-size:9px;line-height:1.2;letter-spacing:.15em}
.product-brand b{font-weight:700}
.product-brand .brand-icon{width:31px;height:31px;font-size:21px}
.product-nav .nav-action{font-size:10px}
.product-hero{width:min(1240px,calc(100% - 64px));min-height:590px;margin:auto;padding:52px 0 60px;display:grid;grid-template-columns:.9fr 1.1fr;gap:58px;align-items:center}
.hero-copy{position:relative;padding:0}
.product-page .eyebrow{font-size:9px;letter-spacing:.16em;margin:0 0 19px}
.product-page .eyebrow i{display:inline-block;width:7px;height:7px;background:var(--orange);border-radius:50%;margin-right:9px;box-shadow:0 0 0 4px #c85a2b20}
.product-hero h1{max-width:560px;font:400 clamp(44px,4.2vw,58px)/1.02 var(--serif);letter-spacing:-.045em;margin:0}
.product-hero h1 em,.idea-copy h2 em,.how-inner h2 em,.final-copy h2 em{font:400 1.03em/1 var(--display);color:var(--blue);letter-spacing:-.025em}
.product-hero .hero-sub{max-width:460px;margin:22px 0 23px;color:#5f687b;font:400 15px/1.75 var(--sans)}
.why-how{border-top:1px solid #cfd2d7;max-width:470px}
.why-how p{display:grid;grid-template-columns:45px 1fr;gap:10px;margin:0;padding:10px 0;border-bottom:1px solid #d9dbe0;font-size:11px;line-height:1.5}
.why-how b{color:var(--orange);font-size:9px;letter-spacing:.08em;text-transform:uppercase}
.why-how span{color:#5f687b}
.hero-status{display:flex;align-items:center;gap:8px;margin:17px 0 0;color:#7a8290;font-size:9px;line-height:1.5}
.hero-status i{width:7px;height:7px;border-radius:50%;background:#6e9a79;flex:none}
.hero-build{display:flex;width:min(295px,100%);min-width:245px;margin:30px 0 0;justify-content:space-between}
.hero-preview{min-width:0}
.sample-frame{background:#dedbd3;padding:9px;box-shadow:8px 10px 0 #20283b0b;transform:rotate(.3deg)}
.frame-head{display:flex;justify-content:space-between;align-items:center;padding:7px 5px 9px;color:#697287;font-size:7px;letter-spacing:.12em;font-weight:700}
.frame-head>span:last-child{color:#6e9a79}
.sample-dot{display:inline-block;width:6px;height:6px;background:#63a078;border-radius:50%;margin-right:6px}
.sample-frame iframe{display:block;border:0;width:100%;height:320px;background:var(--cream);box-shadow:0 2px 5px #1d263b14}
.sample-cta{margin:18px 0 0;min-width:245px}
.preview-caption{margin:8px 0 0;color:#818797;font-size:9px}
.button-ink{background:var(--ink);color:#fff}
.button-ink span{color:#efa077;font-size:16px}
.idea-section{display:flex;align-items:center;padding:90px 32px;min-height:480px}
.idea-inner{width:min(1030px,100%);margin:auto;display:grid;grid-template-columns:1fr .9fr;gap:90px;align-items:center}
.idea-copy{max-width:485px}
.idea-copy .eyebrow{margin-bottom:17px}
.idea-copy h2,.how-inner h2,.final-copy h2{font:400 clamp(39px,4.5vw,58px)/1.02 var(--serif);letter-spacing:-.035em;margin:0}
.idea-copy>p:last-child,.final-copy>p:not(.eyebrow){font-size:13px;line-height:1.8;color:#626d82;margin:18px 0 0;max-width:445px}
.note-idea{background:#fffdf7}
.note-demo{position:relative;background:#fffdf7;border:1px solid #b9c4dd;padding:31px 33px 28px;box-shadow:7px 8px 0 #20283b0b;transform:rotate(1deg)}
.note-demo:before{content:"";position:absolute;inset:6px;border:1px solid #e0e4ed;pointer-events:none}
.demo-label{font-size:8px;letter-spacing:.14em;color:var(--orange);font-weight:700}
.note-demo h3{font:400 36px var(--serif);margin:22px 0 10px}
.note-demo h3 em{color:var(--blue);font-style:normal}
.note-demo p{font:400 17px/1.5 var(--display);margin:0;max-width:330px;color:#39445c}
.note-demo p+p{margin-top:12px}
.note-demo .demo-opening{font-size:20px;color:#20283b}
.demo-rule{height:1px;background:#d6dce8;margin:22px 0 13px}
.demo-sign{color:#66728a;font-size:8px;letter-spacing:.1em;text-transform:uppercase}
.envelope-idea{background:#e9e7ef}
.idea-stack{grid-template-columns:.85fr 1.15fr;gap:65px}
.envelope-examples{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:11px}
.envelope-chip{grid-column:span 3;min-height:124px;padding:18px;display:flex;flex-direction:column;justify-content:space-between;border:1px solid #c7bfa0;box-shadow:4px 5px 0 #20283b0c;transform:rotate(-.6deg)}
.envelope-chip:nth-child(even){transform:rotate(.7deg)}
.envelope-chip:nth-child(3){grid-column:span 2}
.envelope-chip:nth-child(4),.envelope-chip:nth-child(5){grid-column:span 2}
.envelope-chip span{font-size:7px;letter-spacing:.12em;color:#536078}
.envelope-chip b{font:400 18px/1.15 var(--serif);color:#263149}
.chip-yellow{background:#f3e8ba}.chip-green{background:#d9e8dd}.chip-blue{background:#dce5f3}.chip-lilac{background:#e4dcf0}.chip-peach{background:#f1d8c6}
.reply-idea{background:#f5f2e9}
.reply-preview,.journey-preview{position:relative;padding:26px 28px 23px;background:#fffdf7;border-top:2px solid var(--orange);box-shadow:7px 8px 0 #20283b0b}
.reply-stamp,.journey-title{font-size:8px;letter-spacing:.14em;color:#727b8e;font-weight:700}
.reply-preview blockquote{margin:28px 0 22px;font:400 26px/1.2 var(--display);color:#344057}
.reply-line{height:1px;background:#dfe1e5;margin-bottom:13px}
.reply-hint{display:block;color:#838b99;font-size:9px}
.planned-label{display:inline-block;padding:5px 8px;background:#eeeaf5;color:#706987;font-size:7px;letter-spacing:.1em;font-weight:700}
.reply-preview .planned-label,.journey-preview .planned-label{margin-top:24px}
.activity-idea{background:#20283b;color:#fff}
.activity-idea .idea-copy .eyebrow{color:#ef9b72}
.activity-idea .idea-copy h2{color:#fff}
.activity-idea .idea-copy h2 em{color:#c3d0ee}
.activity-idea .idea-copy>p:last-child{color:#ccd1dc}
.journey-preview{background:#2a3348;border-color:#4a5263;box-shadow:7px 8px 0 #10162455}
.journey-title{display:block;color:#d7dbe4;margin-bottom:20px}
.journey-preview>div{display:grid;grid-template-columns:30px 1fr 15px;align-items:center;gap:10px;border-top:1px solid #ffffff1c;padding:14px 0;font-size:10px;color:#eef0f4}
.journey-preview>div i{font-size:8px;color:#f0a17b;font-style:normal}
.journey-preview>div b{font-size:8px;color:#7cb18b}
.journey-preview>div:last-of-type b{color:#b8bdc9}
.activity-idea .planned-label{background:#42495b;color:#e4e6eb}
.how-section{background:#fffdf7;padding:86px 32px 92px}
.how-inner{width:min(1030px,100%);margin:auto;text-align:center}
.how-inner .eyebrow{margin-bottom:16px}
.how-inner h2{font-size:clamp(36px,4.2vw,52px)}
.how-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:47px;text-align:left;border-top:1px solid #cfd2d7;border-bottom:1px solid #cfd2d7}
.how-steps article{padding:23px 25px 25px;border-right:1px solid #d8dbe0}
.how-steps article:first-child{padding-left:0}
.how-steps article:last-child{border-right:0}
.how-steps article>span{font-size:8px;letter-spacing:.12em;color:var(--orange)}
.how-steps h3{font:400 21px var(--serif);margin:14px 0 7px}
.how-steps p{font-size:10px;line-height:1.7;color:#717a8c;margin:0;max-width:220px}
.builder-note{margin:21px auto 0;color:#858c98;font-size:9px;max-width:500px;line-height:1.6}
.final-sample{background:#e9e7ef;padding:74px 32px 82px}
.final-sample-inner{width:min(1030px,100%);margin:auto;display:grid;grid-template-columns:.9fr 1.1fr;gap:75px;align-items:center}
.final-copy h2{font-size:clamp(40px,4.5vw,56px)}
.final-copy .button{margin-top:22px}
.sample-envelopes{display:grid;gap:8px}
.sample-envelopes span{display:flex;align-items:center;justify-content:space-between;padding:13px 16px;background:#fffdf7;border:1px solid #cecbd7;color:#37415a;font-size:8px;letter-spacing:.11em;box-shadow:3px 4px 0 #20283b08}
.sample-envelopes span:nth-child(1){background:#f3e8ba;border-color:#c6b779}
.sample-envelopes span:nth-child(2){background:#d9e8dd;border-color:#9db7a1}
.sample-envelopes span:nth-child(3){background:#dce5f3;border-color:#a8bad6}
.sample-envelopes span:nth-child(4){background:#e4dcf0;border-color:#b4a2ce}
.sample-envelopes span:nth-child(5){background:#f1d8c6;border-color:#ce9a7a}
.product-footer{min-height:76px;color:#818797;font-size:9px}
.product-footer .product-brand{color:var(--ink)}
@media(max-width:850px){.product-hero{gap:32px;min-height:0;padding-block:42px 48px}.product-hero h1{font-size:clamp(46px,6vw,60px)}.idea-section{min-height:420px;padding-block:72px}.idea-inner,.idea-stack{gap:42px}.final-sample-inner{gap:36px}}
@media(max-width:640px){
  .product-nav,.product-footer{width:calc(100% - 36px)}
  .product-nav{height:64px}
  .product-brand{font-size:8px}
  .product-brand .brand-icon{width:28px;height:28px;font-size:19px}
  .product-nav .nav-action{font-size:9px}
  .product-hero{width:calc(100% - 36px);display:flex;flex-direction:column;align-items:stretch;gap:28px;padding:38px 0 44px}
  .product-page .eyebrow{font-size:8px;margin-bottom:14px}
  .product-hero h1{font-size:clamp(43px,12vw,59px)}
  .product-hero .hero-sub{font-size:13px;margin:16px 0 18px}
  .hero-build{width:100%;max-width:420px}
  .why-how p{grid-template-columns:40px 1fr;font-size:10px}
  .hero-status{font-size:8px}
  .sample-frame{padding:6px}
  .frame-head{font-size:6px}
  .sample-frame iframe{height:315px}
  .sample-cta{width:100%;margin-top:14px}
  .preview-caption{font-size:8px}
  .idea-section{padding:62px 20px;min-height:0}
  .idea-inner,.idea-stack{grid-template-columns:1fr;gap:28px}
  .idea-copy h2,.how-inner h2{font-size:42px}
  .idea-copy>p:last-child,.final-copy>p:not(.eyebrow){font-size:12px}
  .note-demo{padding:25px 23px 22px}
  .note-demo h3{font-size:31px}
  .note-demo p{font-size:16px}
  .envelope-examples{gap:7px}
  .envelope-chip{min-height:100px;padding:12px}
  .envelope-chip span{font-size:6px}
  .envelope-chip b{font-size:15px}
  .reply-preview,.journey-preview{padding:22px 20px 19px}
  .reply-preview blockquote{font-size:23px}
  .how-section{padding:60px 20px 65px}
  .how-steps{grid-template-columns:1fr;margin-top:28px}
  .how-steps article,.how-steps article:first-child{padding:17px 0;border-right:0;border-bottom:1px solid #d8dbe0}
  .how-steps article:last-child{border-bottom:0}
  .how-steps h3{margin:9px 0 4px;font-size:19px}
  .how-steps p{max-width:none}
  .final-sample{padding:58px 20px 62px}
  .final-sample-inner{grid-template-columns:1fr;gap:29px}
  .final-copy h2{font-size:43px}
  .sample-envelopes span{font-size:7px;padding:12px}
  .product-footer{min-height:68px;gap:12px}
  .product-footer>span{font-size:8px;text-align:right}
}
.hosting-choice{padding:80px 24px;background:#f2eee5;border-top:1px solid #e1ddd4;border-bottom:1px solid #e1ddd4}.hosting-choice-inner{max-width:1000px;margin:auto}.hosting-choice h2{font:clamp(36px,5vw,56px)/1 var(--serif);margin:10px 0 28px}.hosting-choice h2 em{font-family:var(--italic);font-weight:400;color:var(--blue)}.hosting-cards{display:grid;grid-template-columns:1fr 1fr;gap:18px}.hosting-cards article{padding:24px;background:#fffdf7;border:1px solid #d8dce3;box-shadow:5px 6px 0 #e6e2d9}.hosting-cards article>span{font-size:9px;letter-spacing:1.4px;color:var(--orange);font-weight:700}.hosting-cards h3{font:27px/1.1 var(--serif);margin:12px 0}.hosting-cards p{font-size:14px;line-height:1.65;color:var(--muted)}.hosting-cards a{display:inline-block;margin-top:10px;color:var(--blue);font-weight:700}.hosting-cards small{font-size:12px;color:#7b8390;font-weight:700}@media(max-width:680px){.hosting-cards{grid-template-columns:1fr}.hosting-choice{padding:55px 20px}}