.jotalong-page{
  --jot-bright:#188E8A;
  --jot-gold:#D3A939;
  --jot-light:#E6F3F8;
  --jot-white:#FFFFFF;
  --jot-deep:#004544;
  --jot-ink:#004544;
  --jot-soft:#F7FCFE;
  --jot-border:rgba(0,69,68,.13);
  --jot-shadow:0 28px 76px rgba(0,69,68,.13);
  color:var(--jot-ink);
  font-family:"Nunito Sans",Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  overflow:hidden;
  background:linear-gradient(180deg,#fff 0%,var(--jot-light) 42%,#fff 100%);
}

.jotalong-page h1,
.jotalong-page h2,
.jotalong-page h3,
.jotalong-page .jot-logo-word{
  font-family:"Quicksand",Inter,system-ui,sans-serif;
  letter-spacing:-.015em;
  font-weight:600;
  color:var(--jot-bright);
}

.jotalong-page .eyebrow{
  color:var(--jot-deep);
  font-family:"Nunito Sans",Inter,sans-serif;
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
  font-size:12px;
}

.jot-hero{
  position:relative;
  width:min(1240px,calc(100% - 44px));
  margin:34px auto 70px;
  padding:clamp(34px,5vw,72px);
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(420px,.92fr);
  gap:clamp(34px,5vw,68px);
  align-items:center;
  border:1px solid var(--jot-border);
  border-radius:34px;
  background:
    radial-gradient(circle at 90% 17%,rgba(230,243,248,.95),transparent 24%),
    radial-gradient(circle at 12% 12%,rgba(230,243,248,.76),transparent 27%),
    linear-gradient(135deg,#fff 0%,var(--jot-light) 62%,#fff 100%);
  box-shadow:var(--jot-shadow);
  overflow:hidden;
}

.jot-hero::before{
  content:"";
  position:absolute;
  right:-210px;
  bottom:-118px;
  width:650px;
  height:330px;
  border:68px solid rgba(24,142,138,.95);
  border-top:0;
  border-radius:0 0 390px 390px;
  transform:rotate(-14deg);
  pointer-events:none;
}

.jot-hero::after{
  content:"";
  position:absolute;
  right:10%;
  top:18%;
  width:118px;
  height:118px;
  border-radius:999px;
  background:rgba(230,243,248,.86);
  box-shadow:-720px 400px 0 62px rgba(230,243,248,.58),-40px 362px 0 -21px rgba(24,142,138,.88),-93px 386px 0 -46px var(--jot-gold);
  pointer-events:none;
}

.jot-hero-copy,
.jot-hero-visual{
  position:relative;
  z-index:1;
}

.jot-lockup{
  width:min(280px,90%);
  height:auto;
  display:block;
  margin:0 0 24px;
}

.jot-parent{
  display:inline-flex;
  align-items:center;
  gap:9px;
  padding:8px 13px;
  border-radius:999px;
  background:rgba(255,255,255,.88);
  border:1px solid var(--jot-border);
  color:var(--jot-deep);
  font-size:13px;
  font-weight:600;
  margin-bottom:18px;
}

.jot-parent::before{
  content:"";
  width:9px;
  height:9px;
  border-radius:50%;
  background:var(--jot-gold);
}

.jot-hero h1{
  font-size:clamp(42px,4.8vw,64px);
  line-height:1.12;
  margin:0 0 22px;
  max-width:720px;
  font-weight:600;
}

.jot-hero h1 em{
  font-style:normal;
  color:var(--jot-bright);
}

.jot-hero h1 span,
.jot-section h2 span,
.jot-impact h2 span{
  color:var(--jot-gold);
}

.jot-lede{
  font-size:clamp(18px,1.35vw,20px);
  line-height:1.68;
  color:rgba(0,69,68,.82);
  max-width:650px;
  margin:0 0 28px;
}

.jot-actions{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
  margin:0 0 28px;
}

.jot-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:50px;
  padding:14px 24px;
  border-radius:999px;
  text-decoration:none;
  font-weight:600;
  transition:transform .2s ease,box-shadow .2s ease,background .2s ease;
}

.jot-btn.primary{
  background:linear-gradient(135deg,var(--jot-deep),#006360);
  color:#fff;
  box-shadow:0 6px 18px rgba(0,69,68,.12);
}

.jot-btn.secondary{
  border:1px solid var(--jot-border);
  color:var(--jot-deep);
  background:rgba(255,255,255,.86);
}

.jot-btn:hover{
  transform:translateY(-2px);
}

.jot-points{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

.jot-points span{
  padding:9px 12px;
  border-radius:999px;
  background:rgba(255,255,255,.84);
  border:1px solid var(--jot-border);
  color:var(--jot-deep);
  font-weight:600;
  font-size:13px;
}

.jot-points span:nth-child(2){
  border-color:rgba(211,169,57,.38);
}

.jot-visual-card{
  position:relative;
  padding:0;
  border-radius:32px;
  background:transparent;
  border:0;
  box-shadow:none;
}

.jot-visual-card::before{
  content:"";
  position:absolute;
  inset:38px auto auto -42px;
  width:118px;
  height:118px;
  border-radius:50%;
  background:rgba(230,243,248,.9);
  z-index:-1;
}

.jot-phone{
  width:min(360px,100%);
  margin:auto;
  border:12px solid #162021;
  border-radius:42px;
  background:#f6f1eb;
  box-shadow:0 18px 40px rgba(0,69,68,.13);
  overflow:hidden;
}

.jot-phone-head{
  display:flex;
  align-items:center;
  gap:12px;
  background:#fff;
  padding:15px 18px;
  border-bottom:1px solid var(--jot-border);
}

.jot-phone-head img{
  width:42px;
  height:42px;
  border-radius:50%;
  background:#fff;
  border:1px solid rgba(0,69,68,.12);
  object-fit:contain;
}

.jot-phone-head strong{
  display:block;
  color:#17242a;
  font-size:18px;
}

.jot-phone-head small{
  display:block;
  color:rgba(0,69,68,.58);
  font-size:12px;
}

.jot-phone-body{
  position:relative;
  padding:24px 18px 20px;
  min-height:438px;
  background:
    linear-gradient(rgba(255,255,255,.64),rgba(255,255,255,.64)),
    radial-gradient(circle at 20% 20%,rgba(0,69,68,.08) 0 1px,transparent 1px);
  background-size:auto,22px 22px;
}

.jot-chat{
  width:fit-content;
  max-width:82%;
  padding:13px 15px;
  border-radius:18px;
  margin-bottom:14px;
  box-shadow:0 4px 12px rgba(0,69,68,.05);
  font-weight:400;
  line-height:1.35;
  color:var(--jot-deep);
  background:#fff;
}

.jot-chat.user{
  margin-left:auto;
  background:#d8f6dc;
}

.jot-note{
  background:#fff;
  border:1px solid var(--jot-border);
  border-left:5px solid var(--jot-bright);
  border-radius:20px;
  padding:16px;
  margin:18px 0;
  box-shadow:0 12px 26px rgba(0,69,68,.11);
}

.jot-note strong{
  display:block;
  color:var(--jot-deep);
  font-size:16px;
  margin-bottom:8px;
}

.jot-note p{
  margin:0;
  color:rgba(0,69,68,.82);
  font-weight:400;
}

.jot-input{
  display:flex;
  align-items:center;
  gap:10px;
  margin-top:18px;
  padding:11px 14px;
  border-radius:999px;
  background:#fff;
  color:rgba(0,69,68,.45);
  font-weight:700;
}

.jot-send{
  margin-left:auto;
  width:35px;
  height:35px;
  border-radius:50%;
  background:var(--jot-bright);
  display:grid;
  place-items:center;
  color:#fff;
  font-weight:900;
}









.jot-metrics{
  width:min(1180px,calc(100% - 44px));
  margin:0 auto 72px;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
}

.jot-metric{
  position:relative;
  min-height:170px;
  padding:28px;
  border-radius:28px;
  background:#fff;
  border:1px solid var(--jot-border);
  box-shadow:none;
  overflow:hidden;
}

.jot-metric::after{
  content:"";
  position:absolute;
  right:-42px;
  bottom:-50px;
  width:150px;
  height:90px;
  border:28px solid rgba(24,142,138,.13);
  border-top:0;
  border-radius:0 0 120px 120px;
  transform:rotate(-11deg);
}

.jot-metric b{
  display:inline-grid;
  place-items:center;
  width:44px;
  height:44px;
  border-radius:16px;
  background:var(--jot-light);
  color:var(--jot-deep);
  font-family:"Quicksand",Inter,sans-serif;
  margin-bottom:20px;
  border:1px solid rgba(0,69,68,.08);
}

.jot-metric:nth-child(2) b{
  background:rgba(211,169,57,.18);
}

.jot-metric h3{
  margin:0 0 8px;
  font-size:27px;
}

.jot-metric p{
  margin:0;
  color:rgba(0,69,68,.72);
  line-height:1.6;
}

.jot-section{
  width:min(1180px,calc(100% - 44px));
  margin:0 auto 76px;
}

.jot-split{
  display:grid;
  grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);
  gap:42px;
  align-items:start;
}

.jot-section h2{
  font-size:clamp(30px,3.2vw,44px);
  line-height:1.16;
  margin:0 0 18px;
}

.jot-section h2 em{
  color:var(--jot-deep);
  font-style:normal;
}

.jot-section p{
  line-height:1.75;
  color:rgba(0,69,68,.74);
  font-size:17px;
}

.jot-card-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:18px;
}

.jot-info-card{
  position:relative;
  padding:26px;
  border-radius:24px;
  background:#fff;
  border:1px solid var(--jot-border);
  box-shadow:none;
  overflow:hidden;
}

.jot-info-card.accent{
  background:linear-gradient(145deg,var(--jot-light),#fff);
}

.jot-feature-icon{
  display:grid;
  place-items:center;
  width:48px;
  height:48px;
  border-radius:16px;
  background:var(--jot-light);
  color:var(--jot-deep);
  margin-bottom:20px;
}
.jot-feature-icon svg{width:25px;height:25px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

.jot-info-card:nth-child(2) .jot-feature-icon{
  background:rgba(24,142,138,.16);
}

.jot-info-card:nth-child(3) .jot-feature-icon{
  background:rgba(211,169,57,.2);
}

.jot-info-card h3{
  margin:0 0 8px;
  font-size:25px;
}

.jot-info-card p{
  font-size:15px;
  margin:0;
}

.jot-workflow{
  width:min(1180px,calc(100% - 44px));
  margin:0 auto 78px;
  padding:38px;
  border-radius:34px;
  background:linear-gradient(135deg,var(--jot-deep),#003130);
  color:#fff;
  position:relative;
  overflow:hidden;
}

.jot-workflow::before{
  content:"";
  position:absolute;
  right:-150px;
  top:-120px;
  width:480px;
  height:270px;
  border:52px solid rgba(24,142,138,.32);
  border-bottom:0;
  border-radius:270px 270px 0 0;
  transform:rotate(20deg);
}

.jot-workflow::after{
  content:"";
  position:absolute;
  right:10%;
  bottom:22px;
  width:18px;
  height:18px;
  border-radius:50%;
  background:var(--jot-gold);
  opacity:.9;
}

.jot-workflow-head{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:1fr .75fr;
  gap:28px;
  align-items:end;
  margin-bottom:26px;
}

.jot-workflow .eyebrow,
.jot-impact .eyebrow{
  color:var(--jot-gold);
}

.jot-workflow h2{
  color:#fff;
  font-size:clamp(30px,3.2vw,44px);
  line-height:1.16;
  margin:0;
}

.jot-workflow h2 span{
  color:var(--jot-gold);
}

.jot-workflow p{
  color:rgba(255,255,255,.82);
  line-height:1.7;
  margin:0;
}

.jot-steps{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:15px;
}

.jot-step{
  padding:24px;
  border-radius:24px;
  background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.16);
  backdrop-filter:blur(6px);
}

.jot-step b{
  display:grid;
  place-items:center;
  width:38px;
  height:38px;
  border-radius:50%;
  background:var(--jot-bright);
  color:#fff;
  margin-bottom:16px;
}

.jot-step:nth-child(2) b{
  background:var(--jot-gold);
  color:var(--jot-deep);
}

.jot-step h3{
  color:#fff;
  margin:0 0 8px;
  font-size:24px;
}

.jot-step p{
  font-size:15px;
}

.jot-visual-band{
  width:min(1180px,calc(100% - 44px));
  margin:0 auto 80px;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(280px,.68fr);
  gap:24px;
  align-items:stretch;
}

.jot-thought-panel{
  position:relative;
  min-height:310px;
  padding:38px;
  border-radius:32px;
  background:var(--jot-light);
  overflow:hidden;
}

.jot-thought-panel::before{
  content:"";
  position:absolute;
  left:38px;
  bottom:-60px;
  width:360px;
  height:190px;
  border:58px solid var(--jot-bright);
  border-top:0;
  border-radius:0 0 240px 240px;
  transform:rotate(-8deg);
  opacity:.98;
}

.jot-thought-panel::after{
  content:"";
  position:absolute;
  right:110px;
  bottom:72px;
  width:96px;
  height:96px;
  border-radius:50%;
  background:#fff;
  box-shadow:-16px 18px 0 -30px var(--jot-gold);
}

.jot-thought-panel h2{
  position:relative;
  z-index:1;
  max-width:520px;
  margin:0;
  font-size:clamp(32px,3.4vw,46px);
  line-height:1.15;
  color:var(--jot-bright);
}

.jot-brand-tile{
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:22px;
  padding:34px;
  border-radius:32px;
  background:#fff;
  border:1px solid var(--jot-border);
  box-shadow:none;
}

.jot-brand-tile img{
  width:96px;
  height:96px;
  border-radius:26px;
  box-shadow:none;
}

.jot-brand-tile h3{
  font-size:30px;
  margin:0 0 8px;
}

.jot-brand-tile p{
  margin:0;
  color:rgba(0,69,68,.72);
  line-height:1.65;
}

.jot-impact{
  width:min(1180px,calc(100% - 44px));
  margin:0 auto 86px;
  padding:40px;
  border-radius:34px;
  background:linear-gradient(135deg,#003735,var(--jot-deep));
  color:#fff;
  display:grid;
  grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:34px;
  align-items:start;
  position:relative;
  overflow:hidden;
}

.jot-impact::after{
  content:"";
  position:absolute;
  right:-120px;
  bottom:-130px;
  width:370px;
  height:220px;
  border:40px solid rgba(24,142,138,.28);
  border-top:0;
  border-radius:0 0 240px 240px;
  transform:rotate(-12deg);
}

.jot-impact::before{
  content:"";
  position:absolute;
  right:92px;
  top:44px;
  width:18px;
  height:18px;
  border-radius:50%;
  background:var(--jot-gold);
}

.jot-impact h2{
  color:#fff;
  font-size:clamp(30px,3.2vw,44px);
  line-height:1.16;
  margin:0 0 16px;
}

.jot-impact p{
  color:rgba(255,255,255,.8);
  line-height:1.7;
}

.jot-impact-list{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:14px;
  position:relative;
  z-index:1;
}

.jot-impact-item{
  padding:20px;
  border-radius:22px;
  background:rgba(255,255,255,.09);
  border:1px solid rgba(255,255,255,.14);
}

.jot-impact-item strong{
  display:block;
  color:#fff;
  margin-bottom:6px;
}

.jot-impact-item span{
  color:rgba(255,255,255,.74);
  line-height:1.55;
}

.jot-final{
  width:min(1180px,calc(100% - 44px));
  margin:0 auto 96px;
  padding:40px;
  display:grid;
  grid-template-columns:1fr auto;
  gap:24px;
  align-items:center;
  border-radius:34px;
  background:
    radial-gradient(circle at 100% 0,rgba(24,142,138,.14),transparent 26%),
    linear-gradient(135deg,#fff,var(--jot-light));
  border:1px solid var(--jot-border);
  box-shadow:0 20px 52px rgba(0,69,68,.08);
}

.jot-final h2{
  margin:0 0 10px;
  color:var(--jot-bright);
  font-size:clamp(34px,3.8vw,58px);
  line-height:1.02;
}

.jot-final p{
  margin:0;
  color:rgba(0,69,68,.75);
  font-size:17px;
}

@media(max-width:980px){
  .jot-hero,
  .jot-split,
  .jot-workflow-head,
  .jot-visual-band,
  .jot-impact,
  .jot-final{
    grid-template-columns:1fr;
  }

  .jot-metrics,
  .jot-steps,
  .jot-impact-list{
    grid-template-columns:1fr 1fr;
  }

  
}

@media(max-width:720px){
  .jot-hero{
    padding:36px 24px;
  }

  .jot-hero h1{
    font-size:46px;
  }

  .jot-lockup{
    width:min(280px,100%);
  }

  .jot-metrics,
  .jot-card-grid,
  .jot-steps,
  .jot-impact-list{
    grid-template-columns:1fr;
  }

  .jot-visual-card,
  .jot-workflow,
  .jot-impact,
  .jot-final{
    padding:28px 22px;
    border-radius:26px;
  }

  
}

.jot-btn:focus-visible{outline:3px solid var(--jot-deep);outline-offset:4px;}

.jot-lockup{mix-blend-mode:multiply;}

/* Space between the hero edge and benefits; gentler spacing between later sections. */
main.jotalong-page>.jot-hero{padding-bottom:72px!important;}
main.jotalong-page>.jot-metrics{margin-top:40px!important;margin-bottom:36px!important;}
main.jotalong-page>.jot-section{padding-top:52px!important;padding-bottom:52px!important;}
main.jotalong-page>.jot-workflow{margin-top:24px!important;margin-bottom:64px!important;}
main.jotalong-page>.jot-visual-band{margin-bottom:64px!important;}
main.jotalong-page>.jot-impact{margin-top:36px!important;margin-bottom:64px!important;}
main.jotalong-page>.jot-final{margin-bottom:72px!important;}

/* Blend the unchanged approved artwork directly with the hero background. */
.jot-hero{isolation:isolate;}
.jot-hero::before,.jot-hero::after{z-index:-1;}
.jot-hero-copy{z-index:auto;}

@media(max-width:760px){
  main.jotalong-page>.jot-hero{padding-bottom:48px!important;}
  main.jotalong-page>.jot-metrics{margin-top:32px!important;margin-bottom:40px!important;}
  main.jotalong-page>.jot-visual-band{margin-bottom:48px!important;}
}