/* A day with SAPOQUE: readable, screen-led and independent of app styles. */
:root{--ink:#202e29;--green:#146c50;--muted:#56685f;--line:#d8e1dc}body{font-size:17px;line-height:1.85}figure{margin:0}h1,h2,h3,p{overflow-wrap:anywhere}.site-header{position:sticky;top:0;z-index:20;background:#fffffff5}.header-nav a{font-size:14px}.day-hero{padding-block:72px 48px}.hero-copy{max-width:900px}.day-hero h1{font-size:clamp(36px,5.1vw,68px);line-height:1.38;letter-spacing:-.045em;font-weight:750}.day-hero h1 span{color:var(--green)}.day-hero .hero-lead{font-size:20px;line-height:1.9;margin:24px 0}.day-hero .hero-actions{justify-content:flex-start}.hero-points{padding:0;display:flex;flex-wrap:wrap;gap:12px 25px;list-style:none;margin:28px 0}.hero-points li{font-size:15px;font-weight:650}.hero-points li:before{content:'✓';color:var(--green);margin-right:8px}.hero-screen{margin-top:38px;padding:14px;background:#e6eeea;border:1px solid #cddad2;border-radius:18px;box-shadow:0 20px 48px #183b2410}.hero-screen img{display:block;width:100%;height:auto;border-radius:8px}.hero-screen figcaption,.screen figcaption{font-size:13px;color:var(--muted);margin-top:12px;text-align:center}.day-index{padding-block:24px 44px}.day-index>p{font-weight:650}.day-index nav{display:grid;grid-template-columns:repeat(4,1fr);margin-top:20px;border-block:1px solid var(--line)}.day-index a{padding:18px 12px;font-size:16px;color:var(--green);font-weight:650;text-decoration:none}.day-section{padding-block:88px}.section-intro{max-width:830px;margin-bottom:36px}.section-intro h2,.maybe-layout h2,.clear-section h2,.future-section h2,.closing-section h2{font-size:clamp(30px,3.8vw,48px);line-height:1.5;letter-spacing:-.035em;margin:0 0 24px}.section-intro>p:last-child{max-width:760px;font-size:18px;line-height:1.95}.step-number{font-size:14px;letter-spacing:.04em;color:var(--green);margin:0 0 16px}.screen{padding:16px;background:#f3f6f4;border:1px solid var(--line);border-radius:16px;overflow:hidden}.screen a{display:block}.screen img{width:100%;height:auto;display:block;border-radius:8px}.clear-strip{background:#343538;color:#fff;display:flex;align-items:center;gap:24px;padding:22px 28px;border-radius:10px;margin-top:24px}.clear-strip strong{color:#f2d080;white-space:nowrap;letter-spacing:.06em}.clear-strip p{margin:0}.soft-section{background:#f1f6f3}.two-columns{display:grid;grid-template-columns:.8fr 1.2fr;gap:48px;align-items:start}.two-columns h3{font-size:23px;margin:0 0 18px}.two-columns h3:not(:first-child){margin-top:40px}.check-list{padding:0;list-style:none}.check-list li{border-bottom:1px solid #d4dfd8;padding:10px 0}.check-list li:before{content:'✓';color:var(--green);margin-right:12px}.small-note{font-size:14px!important;color:var(--muted);line-height:1.8;margin-top:20px}.text-link{display:inline-block;margin-top:24px;color:var(--green);font-weight:650}.service-tags{display:flex;flex-wrap:wrap;gap:12px;padding:0;list-style:none}.service-tags li{border:1px solid #b7cec0;padding:7px 17px;border-radius:6px;color:#23543d;background:#f4f8f5;font-size:16px}.action-flow,.record-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:32px;padding:0;list-style:none}.action-flow>div,.record-steps li{border-top:3px solid var(--green);padding:24px 12px 16px}.action-flow b,.record-steps b{display:block;font-size:21px}.action-flow span,.record-steps span{display:block;color:var(--muted);font-size:16px;margin-top:8px}.maybe-section{background:#f4f1fb;padding-block:70px}.maybe-layout{display:grid;grid-template-columns:130px 1fr;gap:38px;max-width:990px}.maybe-mark{color:#7150a5;background:#e9dff6;border-radius:28px;font-size:92px;text-align:center;line-height:1.45;height:140px;font-weight:700}.maybe-layout p{margin-bottom:20px}.maybe-layout .eyebrow{color:#624088}.ten-minute{padding:30px 36px;border-left:5px solid var(--green);background:#f1f6f3}.ten-minute strong{display:block;font-size:clamp(23px,3vw,36px);line-height:1.65}.ten-minute strong span{color:var(--green)}.ten-minute p{font-size:14px;max-width:800px;margin:14px 0 0;color:var(--muted)}.section-bottom{margin:28px 0 0;font-size:18px}.clear-section{background:#343538;color:white;padding:80px 0;text-align:center}.clear-section .eyebrow,.clear-section .small-note{color:#eee0be}.clear-section h2{color:white}.clear-word{display:block;font-size:clamp(52px,9vw,108px);color:#f2d080;letter-spacing:.05em;line-height:1.5;margin:20px 0}.document-flow{display:grid;grid-template-columns:1fr 2fr;gap:24px;margin-block:30px}.document-origin{background:#176a4f;color:white;border-radius:12px;padding:25px}.document-origin small,.document-origin strong{display:block}.document-origin strong{font-size:28px}.document-destinations{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.document-destinations span{background:white;border:1px solid #bfd1c6;border-top:5px solid var(--green);padding:30px 12px;font-size:23px;font-weight:650;text-align:center;align-content:center}.connected-section{background:#eef3f7}.connection-grid{display:grid;grid-template-columns:1fr 1fr;gap:32px}.connection-grid>div{border-top:1px solid #b9cbd5;padding-top:22px}.connection-grid h3{font-size:22px;margin-bottom:10px}.small-business-points{display:flex;gap:16px;flex-wrap:wrap;margin-bottom:28px}.small-business-points span{padding:12px 20px;border:1px solid var(--line);font-weight:650}.future-section{border-block:1px solid var(--line);padding-block:60px;margin-bottom:72px}.future-section .eyebrow{color:#66532a}.future-section h3{font-size:24px}.closing-section{padding:80px 0;text-align:center;background:#f1f6f3}.closing-section img{object-fit:contain;margin-bottom:20px}.closing-section p{margin:24px 0}.closing-promise{font-size:24px;font-weight:650;color:var(--green)}.closing-section .button{margin-top:12px}.contact-form-note,.fine{font-size:14px}.screen picture{display:block}#register .screen img{max-height:850px;object-fit:cover;object-position:top}.header-nav{display:flex}.button{min-height:48px}
@media(max-width:700px){.day-hero{padding-block:38px 28px}.day-hero h1{font-size:clamp(29px,7vw,44px)}.day-hero .hero-lead{font-size:17px}.hero-lead br{display:none}.hero-points{display:grid;grid-template-columns:1fr 1fr;gap:10px;font-size:14px}.hero-points li{font-size:14px}.hero-screen{padding:7px;border-radius:10px;margin-top:26px}.day-index nav{grid-template-columns:1fr 1fr}.day-index a{padding:14px 4px;font-size:14px}.day-section{padding-block:56px}.section-intro>p:last-child{font-size:16px}.section-intro h2,.maybe-layout h2,.clear-section h2,.future-section h2,.closing-section h2{font-size:30px}.screen{padding:8px;border-radius:10px}.screen figcaption,.hero-screen figcaption{font-size:12px}.clear-strip{display:block;padding:20px}.clear-strip p{margin-top:8px;font-size:16px}.two-columns{grid-template-columns:1fr;gap:30px}.two-columns .screen{max-width:430px;margin:auto}.action-flow,.record-steps{grid-template-columns:1fr;gap:8px}.action-flow>div,.record-steps li{padding:15px 8px}.maybe-section{padding-block:48px}.maybe-layout{grid-template-columns:1fr;gap:24px}.maybe-mark{font-size:47px;width:72px;height:72px;border-radius:16px}.ten-minute{padding:22px}.ten-minute strong span{display:block}.clear-section{padding:56px 0}.document-flow{grid-template-columns:1fr}.document-origin{padding:18px}.document-destinations{gap:10px}.document-destinations span{font-size:18px;padding:22px 5px}.connection-grid{grid-template-columns:1fr;gap:20px}.future-section{padding-block:44px;margin-bottom:48px}.closing-section{padding:56px 0}.closing-promise{font-size:21px}.day-hero .hero-actions .button{width:auto;flex:1}.header-nav{gap:12px}.header-nav a{font-size:12px}.site-header{flex-wrap:wrap;height:auto;min-height:72px;padding:12px 18px;gap:10px}.header-nav{order:3;width:100%;justify-content:center;border-top:1px solid var(--line);padding-top:8px}.header-cta{font-size:14px}html{scroll-padding-top:122px}#register .screen{max-width:470px;margin-inline:auto}#register .screen img{max-height:780px}.daily-wide img{min-width:0}.fine{font-size:13px}.contact-field label{font-size:15px}.contact-field input,.contact-field select,.contact-field textarea{font-size:16px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

@media(max-width:700px){.header-nav a{display:inline-flex;font-size:14px}.site-header{display:flex}}

/* Show both supported devices on every viewport. */
.device-showcase{margin-top:36px;padding:32px;background:#f1f6f3;border:1px solid var(--line);border-radius:18px}
.device-showcase-heading h2{font-size:clamp(25px,3vw,36px);margin:0 0 14px;line-height:1.5}
.device-showcase-heading p{font-size:17px;margin:0}
.device-showcase-grid{display:grid;grid-template-columns:minmax(0,2.4fr) minmax(0,1fr);gap:30px;align-items:center;margin-top:28px}
.device-example{min-width:0}
.device-example figcaption{display:flex;flex-direction:column;gap:5px;margin-bottom:16px}
.device-example figcaption strong{font-size:19px;color:var(--green)}
.device-example figcaption span{font-size:15px;color:var(--muted)}
.device-example a{display:block;border:1px solid #c4d3ca;border-radius:12px;overflow:hidden;background:white}
.device-example img{display:block;width:100%;height:auto}
.device-example small,.device-showcase-note{display:block;font-size:13px;color:var(--muted);margin-top:12px}
.device-example-phone{max-width:235px;justify-self:center}
.device-showcase-note{text-align:center;margin-bottom:0}
@media(max-width:700px){.device-showcase{padding:20px 14px}.device-showcase-grid{grid-template-columns:1fr;gap:26px}.device-showcase-heading p{font-size:16px}.device-example-phone{width:190px;max-width:100%}.device-example-pc{width:100%}.device-example figcaption span{font-size:14px}.hero-points{gap:10px 6px}.hero-points li{font-size:13px}}

/* Device illustration is part of the page, not a separate framed card. */
.hero-concept{width:100%;margin:30px 0 0;border:0;border-radius:0;box-shadow:none;background:transparent;overflow:visible}
.hero-concept img{display:block;width:100%;height:auto;aspect-ratio:1672/941;object-fit:contain}
.hero-concept figcaption{padding:8px 0 0;color:#56685f;background:transparent;font-size:12px;line-height:1.7;text-align:center}
/* Full-bleed on phones while retaining the complete 16:9 illustration. */
@media(max-width:700px){
  .day-hero .hero-concept{width:100vw;max-width:100vw;margin:20px 0 0 calc(50% - 50vw);border:0;border-radius:0;box-shadow:none}
  .hero-concept img{display:block;width:100%;max-width:none;border-radius:0}
  .hero-concept figcaption{max-width:520px;margin:0 auto;padding:8px 20px 0;font-size:12px;background:transparent}
  .device-showcase{margin-top:30px}
}

/* Sales landing: the illustration is the first view. Avoid repeating its brand logo in the sticky header. */
.product-story .site-header .marketing-home-link{
  display:inline-flex;align-items:center;gap:8px;
  flex:0 0 auto;color:#34443b;text-decoration:none;
  font-size:14px;font-weight:750;white-space:nowrap;
}
.product-story .site-header .marketing-home-link span[aria-hidden]{display:grid;place-items:center;width:30px;height:30px;border:1px solid #dce3df;border-radius:9px;font-size:23px;line-height:1}
.product-story .day-hero{padding-top:12px}
.product-story .day-hero .hero-concept{margin-top:0}
.product-story .day-hero .hero-copy{max-width:900px;margin-top:42px}
.product-story .hero-concept figcaption{padding-top:6px}
@media(max-width:700px){
  .product-story .site-header .marketing-home-link{font-size:13px}
  .product-story .day-hero{padding-top:0}
  .product-story .day-hero .hero-concept{margin-top:0}
  .product-story .day-hero .hero-copy{margin-top:28px}
  .product-story .day-hero .hero-concept figcaption{padding:7px 20px 0}
}

/* Sappo's dual-purpose label: friendly room and a clear path to the user guide. */
.product-story .sappo-nav-link{display:inline-flex;flex-direction:column;align-items:flex-start;justify-content:center;line-height:1.25;gap:2px;white-space:normal}
.product-story .sappo-nav-link small{font-size:11px;font-weight:600;color:#52675c;letter-spacing:0;white-space:nowrap}
.product-story .sappo-hero-link{line-height:1.3;text-align:center}
.product-story .sappo-hero-link small{display:block;margin-top:3px;font-size:12px;font-weight:600;white-space:normal}
@media(max-width:700px){
 .product-story .header-nav{gap:14px;align-items:center}
 .product-story .sappo-nav-link{font-size:13px;white-space:normal}
 .product-story .sappo-nav-link small{font-size:10px}
 .product-story .sappo-hero-link{min-width:0;max-width:100%}
}