/* Shared finish: crisp surfaces, clear reading order, and accessible color themes. */
:root{--bg:#fafaf7;--panel:#f1f1ef;--muted:#606267;--theme-ink:#000;--theme-surface:rgba(255,255,255,.2);--theme-line:rgba(0,0,0,.2);--group-shadow:0 2px 5px rgba(25,25,25,.025),0 10px 28px rgba(25,25,25,.045);--group-radius:24px;--intro:0s}
body{font-size:1rem}
[id]{scroll-margin-top:88px}
[hidden]{display:none!important}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
:where(a,button,input,textarea,select):focus-visible{outline:3px solid var(--ink);outline-offset:4px}
.nav__in{height:64px;gap:24px;max-width:1200px}
.nav__links{gap:22px}
.nav__brand{flex-shrink:0}
.nav__brand img{width:30px;height:30px;border-radius:8px}
.nav__links a{font-size:.875rem;white-space:nowrap;min-height:44px;display:inline-flex;align-items:center}
.nav__links a.active,.nav__links a[aria-current=page]{text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:2px}
.nav__links a.nav__cta{min-height:38px;padding:8px 18px;color:var(--theme-ink)}
.nav__toggle{flex-shrink:0}
html.navhide .nav{transform:none}
.nav__links a:hover{opacity:.76}
.btn--primary:hover,.btn-primary:hover{background:var(--theme)}
.eyebrow,.section-label,.hl,.tlink,.daytag b,.faq__answer a,.prose a,.legal-content a{color:var(--ink)}
.eyebrow,.section-label{font-size:.875rem;letter-spacing:.07em}
.prose{width:calc(100% - 48px)}
.prose .prose{width:100%}
.page-hero{padding:128px 0 56px;background:transparent}
.page-hero__title{max-width:880px;margin:auto;font-size:clamp(2.4rem,5.8vw,4.5rem);letter-spacing:-.045em;line-height:1.08}
.page-hero__subtitle{max-width:630px;font-size:1.125rem;line-height:1.65}
.page-actions{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:12px;margin-top:28px}
.page-note{font-size:.875rem;color:var(--muted);margin:16px auto 0}
.splash{display:none!important}
html.introing .hero__lock{opacity:1}
/* A single, centered introduction, followed by the real app screenshots. */
.hero{padding:112px 0 64px}
.hero__in{display:flex;flex-direction:column;align-items:center;gap:36px;max-width:1120px}
.hero__copy{text-align:center;position:relative;z-index:1;width:100%;max-width:860px}
.hero__lock{justify-content:center;margin-bottom:24px}
.hero h1{font-size:clamp(3.1rem,7.4vw,5.5rem);font-weight:900;letter-spacing:-.04em;line-height:1.05}
/* These are category colors from the app. Selected page themes keep their own ink. */
html:not(.recolor) .hero h1 .cl:nth-child(1){color:#562185}
html:not(.recolor) .hero h1 .cl:nth-child(2){color:#E21250}
html:not(.recolor) .hero h1 .cl:nth-child(3){color:#B84C0F}
html:not(.recolor) .hero h1 .cl:nth-child(4){color:#0489E8}
html:not(.recolor) .hero h1 .cl:nth-child(5){color:#284B63}
.hero__sub{font-size:1.2rem;max-width:560px;margin:22px auto 0;line-height:1.55}
.hero__cta{justify-content:center;align-items:center;gap:12px;margin-top:28px}
.hero__cta .btn{justify-content:center;font-size:1rem;padding:14px 24px}
.hero__cta .btn--ghost{padding-left:12px;padding-right:12px;min-height:44px}
.hero__platforms{margin:24px auto 0;font-size:1rem;font-weight:500;color:var(--muted)}
.hero__stage{margin:0 auto;width:100%;max-width:680px;will-change:auto}
.hero__devices{filter:none}
.story{padding:48px 0 64px;border-bottom:1px solid var(--line)}
.story h2{font-size:clamp(1.1rem,2vw,1.4rem)}
.story__punch{margin-top:18px;font-size:clamp(1.8rem,3.5vw,2.5rem)}
.colors{padding:92px 0}
.colors h2{font-size:clamp(2.25rem,4.7vw,3.4rem);letter-spacing:-.04em;max-width:740px;margin:auto;line-height:1.12}
.colors p{font-size:1.0625rem}
.colors__hint,.colors .colors__hint{font-size:1rem;padding:0 24px;font-weight:500}
.colors__pair img{max-height:580px;width:auto;max-width:43%;object-fit:contain}
.week__head{margin-bottom:20px}
.week__stage{height:min(68vh,590px)}
/* Half the space around a 54vh chapter keeps both end chapters aligned
   with the phone throughout its 100vh sticky viewport. */
.week__steps{padding:23vh 0}
.wstep{min-height:54vh}
.wstep h3{letter-spacing:-.035em}
.daytag{font-size:.875rem}
.week__dots{right:8px}
.when{background:var(--panel);color:var(--ink);padding:88px 0}
.feature-grid.wrap{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;text-align:left;width:calc(100% - 48px);max-width:940px;padding:0;margin:40px auto 0}
.feature-card{padding:30px;background:var(--card);border:1px solid var(--line);border-radius:var(--group-radius);box-shadow:var(--group-shadow)}
.feature-icon{display:grid;place-items:center;width:56px;height:56px;border-radius:17px;margin-bottom:22px;box-shadow:0 3px 8px rgba(0,0,0,.06)}
.feature-icon svg{display:block;width:28px;height:28px}
.feature-icon--reminders{background:#7ED321;color:#000}
.feature-icon--routines{background:#562185;color:#fff}
.feature-icon--notes{background:#FFBF00;color:#000}
.feature-icon--calendar{background:#0489E8;color:#000}
.feature-card h3{font-size:1.4rem;letter-spacing:-.025em;margin-bottom:10px;color:var(--ink)}
.feature-card p{color:var(--muted);font-size:1.0625rem;line-height:1.6;margin:0;max-width:36ch}
.when .when__note{color:var(--muted);margin-top:32px;font-size:1rem;max-width:740px}
.when__note a{color:var(--ink)}
.when :focus-visible{outline-color:var(--ink)}
.when__head{padding:0 24px}
.when__head h2{letter-spacing:-.04em;color:var(--ink)}
.review{box-shadow:var(--group-shadow);border-radius:var(--group-radius)}
.review__theme,.review figcaption{font-size:1rem}
.plan-summary{display:grid;grid-template-columns:1fr 1fr;text-align:left;gap:20px;max-width:820px;margin:40px auto 0;padding:0;border:0}
.plan-summary>div{padding:28px;background:var(--card);border:1px solid var(--line);border-radius:var(--group-radius);box-shadow:var(--group-shadow)}
.plan-summary h3{font-size:1.25rem;margin-bottom:10px;letter-spacing:-.02em}
.final .plan-summary p{font-size:1rem;line-height:1.65;margin:0;color:var(--muted)}
.final .final__subscription{font-size:.875rem;margin:24px auto 4px;max-width:650px;color:var(--muted)}
.final{padding-top:88px;padding-bottom:88px}
.social{padding:52px 0}
.social-card{box-shadow:var(--group-shadow);border-radius:var(--group-radius)}
.praise{padding-top:64px;padding-bottom:64px}
.pq{box-shadow:var(--group-shadow);border-radius:var(--group-radius)}
.footer__links,.foot__links{gap:16px 24px}
.footer__links a,.foot__links a{padding:5px 0;min-height:32px;font-size:.875rem}
.footer__bottom,.foot__copy{font-size:.875rem}
/* One ribbon treatment across every page. The selected color has a square ring. */
.swatches{display:flex;flex-direction:column;gap:14px;width:100%;max-width:1120px;margin:36px auto 0;padding:12px 0;overflow:hidden;mask-image:linear-gradient(to right,transparent,#000 4%,#000 96%,transparent)}
.swatch-row{position:relative;display:flex;gap:12px;width:max-content;cursor:grab;touch-action:pan-y;user-select:none;will-change:transform}
.swatch-row.dragging{cursor:grabbing}
.swatch{display:block;width:60px;height:60px;flex:0 0 60px;border:0;border-radius:17px;position:relative;box-shadow:inset 0 0 0 1px rgba(0,0,0,.14);cursor:pointer;transform:none;transition:transform .2s var(--ease),box-shadow .2s var(--ease)}
.swatch:hover{transform:translateY(-2px)}
.swatch:active{transform:scale(.97)}
.swatch.selected,.appicon-btn.selected{outline:3px solid var(--ink);outline-offset:4px;transform:none}
.swatch.selected{box-shadow:inset 0 0 0 1px rgba(0,0,0,.14)}
.swatch:focus-visible{border-radius:17px;outline-style:dashed}
.appicon-btn,.appicon-btn:focus-visible{border-radius:16px}
.appicon-btn.selected .appicon{transform:none;box-shadow:var(--shadow-sm)}
.faq-topics{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;max-width:820px;margin:30px auto 0}
.faq-topics a{display:inline-flex;align-items:center;min-height:44px;padding:10px 18px;border:1px solid var(--line);border-radius:999px;background:var(--card);font-size:.875rem;font-weight:600}
.faq-topics a:hover{border-color:var(--ink)}
.faq__answer{max-height:none;transition:none}
.faq__answer[hidden]{display:none}
.faq__question{font-size:1.0625rem;line-height:1.5}
.faq__list{gap:0;background:var(--card);border:1px solid var(--line);border-radius:var(--group-radius);box-shadow:var(--group-shadow);overflow:hidden}
.faq__item,.faq__item.open{box-shadow:none;border:0;border-radius:0;background:transparent}
.faq__item+.faq__item{border-top:1px solid var(--line)}
.faq__question{padding:22px 26px}
.faq__question:focus-visible{outline-offset:-5px}
.faq__question::after{border-color:currentColor}
.contact-section .container{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);max-width:1000px}
.contact-info__value{overflow-wrap:anywhere}
.form-group fieldset,fieldset.form-group{border:0;min-width:0}
.form-group legend{font-size:.95rem;font-weight:700;margin-bottom:10px}
.form-help{font-size:.875rem;color:var(--muted);line-height:1.6;margin:16px 0 0}
.form-group input::placeholder,.form-group textarea::placeholder{color:var(--muted);opacity:1}
.form-group input,.form-group textarea{font-size:1rem}
.form-group input[type=checkbox]:focus-visible+span{outline:3px solid var(--ink);outline-offset:4px}
.release-note{max-width:740px;margin:24px auto 0;padding:18px 24px;border:1px solid var(--line);border-radius:16px;font-size:1rem;color:var(--ink-soft);background:var(--card)}
.release-note a{text-decoration:underline;text-underline-offset:4px;font-weight:600}
.wn-section__header{max-width:740px}
.wn-section__header .section-title{letter-spacing:-.035em}
/* The same restrained grouped surfaces carry through the supporting pages. */
.contact-form,.wn-feature-card,.wn-improvement-item,.keyfact,.answer-capsule,.release-note{border-radius:var(--group-radius);box-shadow:var(--group-shadow)}
.contact-info{padding:28px;background:var(--card);border:1px solid var(--line);border-radius:var(--group-radius);box-shadow:var(--group-shadow)}
.contact-info__item{align-items:flex-start}
.contact-info__label{font-size:1rem;font-weight:500;text-transform:none;letter-spacing:0;margin-bottom:4px}
.contact-info .section-subtitle:last-child{margin-bottom:0}
.form-group label{font-size:1rem}
.wn-feature-card:hover,.wn-improvement-item:hover{transform:none;box-shadow:var(--group-shadow)}
.wn-feature-card__text,.wn-improvement-item p{font-size:1rem}
.wn-features-list{gap:0;background:var(--card);border:1px solid var(--line);border-radius:var(--group-radius);box-shadow:var(--group-shadow);overflow:hidden}
.wn-list-item{padding:20px 24px}
.wn-list-item+.wn-list-item{border-top:1px solid var(--line)}
.article>.prose,.article>.container>.prose,.legal-content{background:var(--card);padding:36px;border:1px solid var(--line);border-radius:var(--group-radius);box-shadow:var(--group-shadow)}
.legal-content{max-width:840px;overflow-wrap:anywhere}
.legal-updated{max-width:840px;padding-left:36px;margin-bottom:16px}
.article--alt{background:transparent}
/* Adaptive ink and surfaces keep all 42 themes legible. */
html.recolor{--ink:var(--theme-ink);--ink-soft:var(--theme-ink);--muted:var(--theme-ink);--muted-dark:var(--theme-ink);--card:var(--theme-surface);--panel:var(--theme-surface);--line:var(--theme-line);--on-dark:var(--theme-ink)}
html.recolor .nav,html.recolor .nav__links{background:var(--theme);border-color:var(--line)}
html.recolor .nav__toggle span{background:var(--ink)}
html.recolor .eyebrow,html.recolor .section-label,html.recolor .hl,html.recolor .daytag b,html.recolor .tlink,html.recolor .prose a,html.recolor .legal-content a,html.recolor .faq__answer a,html.recolor .btn--ghost,html.recolor .contact-info__icon svg,html.recolor .contact-info__value a:hover,html.recolor .cta-section a:not(.btn){color:var(--ink);border-color:var(--line)}
html.recolor .btn--primary,html.recolor .btn-primary,html.recolor .nav__links a.nav__cta{background:var(--ink);color:var(--theme)}
html.recolor .btn--primary:hover,html.recolor .btn-primary:hover{background:var(--ink)}
html.recolor .wn-feature-card,html.recolor .wn-improvement-item,html.recolor .contact-info__icon{background:var(--card);border-color:var(--line)}
html.recolor .faq__item,html.recolor .faq__item.open{background:transparent;border-color:var(--line)}
html.recolor .faq__question::after{border-color:var(--ink)}
html.recolor .form-group input,html.recolor .form-group textarea,html.recolor .pill span{background:var(--card);color:var(--ink);border-color:var(--line)}
html.recolor .form-group input::placeholder,html.recolor .form-group textarea::placeholder{color:var(--muted)}
html.recolor .form-group input:focus,html.recolor .form-group textarea:focus{border-color:var(--ink);box-shadow:none}
html.recolor .pill input:checked+span{background:var(--ink);color:var(--theme);border-color:var(--ink)}
html.recolor .feature-card p,html.recolor .when__note{color:var(--ink)}
html.recolor .wn-list-item__dot{background:var(--ink)}
html.recolor .faq--alt,html.recolor .wn-section--alt{background:var(--panel)}
html.recolor .story .w.grn.lit,html.recolor .story .el.lit{color:var(--ink)}
@media(max-width:1000px){
  .nav__in{gap:14px}.nav__links{gap:14px}.nav__brand{font-size:.95rem}
}
@media(max-width:860px){
  .nav__toggle{display:flex}.nav__in{height:64px}
  .nav__links{position:absolute;top:64px;left:0;right:0;flex-direction:column;align-items:stretch;gap:0;padding:8px 0 16px;background:var(--bg);border-bottom:1px solid var(--line);opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-8px);max-height:calc(100svh - 64px);overflow-y:auto}
  .nav.open .nav__links{opacity:1;visibility:visible;pointer-events:auto;transform:none}
  .nav__links a{padding:12px 24px;font-size:1rem}
  .nav__links a.nav__cta{margin:10px 24px 0;justify-content:center;padding:12px 18px}
  .hero{padding:104px 0 48px}
  .hero__in{gap:30px}
  .hero__lock{margin-bottom:22px}
  .hero__stage{max-width:600px}
  /* The feature story reads naturally on touch screens and enlarged layouts. */
  .week__sticky,.week__dots{display:none!important}
  .week__grid{display:block}.week__steps{padding:0}
  .js .wstep,.wstep{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1fr);gap:0 28px;min-height:0;padding:36px 0;max-width:690px;margin:auto}
  .js .wstep>*{position:static;width:auto;height:auto;margin:0;overflow:visible;clip-path:none;white-space:normal;grid-column:2}
  .js .wstep>.wstep__image{display:block;grid-column:1;grid-row:1 / 5;width:100%;height:290px;max-width:300px;max-height:none;object-fit:contain;margin:0}
  .wstep .daytag{align-self:end;margin-bottom:12px}.wstep h3{font-size:1.8rem;margin-bottom:12px;line-height:1.1}.wstep p{font-size:1rem;align-self:start}
  .contact-section .container{grid-template-columns:1fr;max-width:650px}
  html:not(.js) .nav__toggle{display:none}
  html:not(.js) .nav__links{position:static;opacity:1;visibility:visible;pointer-events:auto;transform:none;flex-direction:row;flex-wrap:wrap;border:0;max-height:none}
  html:not(.js) .nav__in{height:auto;flex-wrap:wrap}
  html:not(.js) .nav__links a{padding:10px;font-size:.875rem}
  html:not(.js) .nav__links a.nav__cta{margin:0}
}
@media(max-width:560px){
  .nav__in{padding:0 18px}.hero__lock img{width:34px;height:34px;border-radius:9px}
  .hero h1{font-size:clamp(2.65rem,11vw,3.6rem)}.hero__sub{font-size:1.0625rem}
  .hero__cta{gap:2px;flex-direction:column}.hero__cta .btn--primary{width:100%;max-width:310px}
  .hero__stage{max-width:380px}.hero__platforms{font-size:.875rem}
  .colors,.reviews,.praise{padding:64px 0}.story{padding:30px 0 48px}
  .swatch,.swatch:focus-visible{width:52px;height:52px;flex-basis:52px;border-radius:15px}
  .swatches{gap:12px}.colors p{padding-left:18px;padding-right:18px;font-size:1rem}
  .feature-grid.wrap{grid-template-columns:1fr;gap:16px;max-width:420px}.feature-card{padding:26px}.feature-icon{margin-bottom:18px}
  .when{padding:64px 0}
  .plan-summary{grid-template-columns:1fr;gap:16px;margin-top:32px}.final{padding:64px 0}
  .js .wstep,.wstep{display:flex;flex-direction:column;align-items:flex-start;padding:30px 6px 42px;max-width:430px}
  .js .wstep>.wstep__image{height:auto;max-height:340px;width:auto;max-width:100%;align-self:center;margin:0 auto 28px}
  .wstep .daytag{align-self:flex-start}.wstep h3{font-size:1.85rem}.wstep p{line-height:1.65}
  .page-hero{padding:104px 0 40px}.page-hero__title{font-size:clamp(2.2rem,9vw,3rem)}.page-hero__subtitle{font-size:1.0625rem}
  .page-actions{flex-direction:column}.page-actions .btn--primary{width:100%;max-width:320px}
  .prose{width:calc(100% - 36px)}.contact-form{padding:24px 20px}.contact-section{padding:40px 0}
  .article>.prose,.article>.container>.prose,.legal-content{padding:26px 22px}.legal-updated{padding-left:22px}
  .contact-info{padding:24px 20px}.contact-info__item{flex-wrap:wrap}
  .faq{padding:44px 0}.faq__question{padding:18px 42px 18px 20px}.faq__answer{padding:0 20px}
  .faq-topics{gap:8px}.faq-topics a{padding:9px 13px}
  .recolor-strip{padding:56px 0}.recolor-strip__title{font-size:2rem}
}
html:not(.js) .faq__answer{max-height:none}
html:not(.js) .swatches,html:not(.js) .colors__hint,html:not(.js) .contact-form,html:not(.js) .wn-mode-toggle{display:none}
@media(prefers-reduced-motion:reduce){
  .hero__stage{transform:none!important;opacity:1!important}
  .js [data-r]{opacity:1;transform:none}
}
/* Keep sample widget controls readable on both demonstration pages. */
.wrow{color:var(--row-ink,#fff);min-height:44px}
.wc::before{border-color:currentColor;opacity:.8}
.wrow.done .wc{background:var(--row-ink,#fff)}
.wdgt__add{width:44px;height:44px}
.keyfact dt{font-size:.875rem}
.form-optional{font-weight:500;color:var(--muted)}
html:not(.js) .wdgt{display:none}
/* Explicit selectors override the older shared focus rules. */
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:3px solid var(--ink);outline-offset:4px}
html.navhide .nav:not(:focus-within){transform:none}
.prose .btn--dark,html.recolor .prose .btn--dark{color:#fff;border-bottom:0}
.wrow.enter,.wrow.out{min-height:0}

/* Brand green stays exact; readable ink carries text on the light background. */
html:not(.recolor) .tlink,
html:not(.recolor) .faq__answer a,
html:not(.recolor) .prose a:not(.btn),
html:not(.recolor) .legal-content a,
html:not(.recolor) .praise__schools a{
  color:var(--ink);
  border-bottom:0;
  text-decoration:underline 2px var(--green);
  text-underline-offset:4px;
}
html:not(.recolor) .btn--ghost:hover{text-decoration:underline 2px var(--green);text-underline-offset:4px}
html:not(.recolor) .pill input:checked+span,
html:not(.recolor) .contact-info__icon svg{color:var(--theme-ink)}
html:not(.recolor) .contact-info__value a:hover,
html:not(.recolor) .contact-info .section-subtitle a,
html:not(.recolor) .cta-section a:not(.btn){color:var(--ink);text-decoration:underline 2px var(--green);text-underline-offset:4px}