/* Inner pages (Features hub, feature pages): the home page's visual language without its scroll scenes.
   Phone renders on soft glows, soft-edged photos, open lists with hairlines (never boxed cards), charcoal bands. */
.num, .lg-bal b, .lg-list b, .pop b { font-variant-numeric: tabular-nums }

/* Below-the-fold sections are laid out only as they near the screen: shaping all of a long page's text at
   once made the first layout ~0.5 s (4x CPU). `auto` remembers each section's real size once it has been seen.
   .moment is left out so the "See how it works" anchor (#how) below it lands exactly. */
.how, .try, .benefits, .fits, .honest, .faq-p, .related, .band-dark, .hg, .band-chinni { content-visibility: auto; contain-intrinsic-size: auto 760px }

/* shared bits */
.kick { display: inline-flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 700; color: var(--link); margin-bottom: 14px }
.kick::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--sky) }
.crumbs ol { display: flex; flex-wrap: wrap; gap: 4px 10px; margin: 0 0 22px; padding: 0; list-style: none; font-size: 14px; color: var(--faint) }
.crumbs li + li::before { content: "/"; margin-right: 10px; color: #A9B4C2 }
.crumbs a { color: var(--link); text-decoration: none } .crumbs a:hover { text-decoration: underline }
.soon { color: var(--faint) }
.render { display: block; position: relative }
.render img { display: block; width: 100%; height: auto }
section h2 { text-wrap: balance }

/* page header (hub) */
.ph { padding: 150px var(--gl) 30px; max-width: 1320px; margin: 0 auto }
.ph h1 { margin: 0; max-width: 15ch; font: 800 clamp(42px, 5.2vw, 80px)/1.02 var(--font); letter-spacing: -0.035em; text-wrap: balance }
.ph .lede { margin: 22px 0 0; max-width: 34em; font-size: clamp(17px, 1.3vw, 20px); color: var(--muted) }

/* hub: one editorial row per job */
.hg { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); align-items: center; gap: 6vw; max-width: 1320px; margin: 0 auto; padding: clamp(60px, 9vh, 110px) var(--gl) }
.hg.flip .hg-vis { order: -1 }
.hg h2 { margin: 0; max-width: 17ch; font: 800 clamp(30px, 3vw, 48px)/1.08 var(--font); letter-spacing: -0.03em }
.hg-p { margin: 16px 0 26px; max-width: 32em; color: var(--muted); font-size: 18px }
.hg-vis { position: relative; display: grid; place-items: center }
.hg-vis::before, .fh-vis::before, .st-vis::before { content: ""; position: absolute; inset: 8% 4%; border-radius: 50%; background: radial-gradient(closest-side, #DDF1FD, rgba(224,242,254,0)); z-index: -1 }
.hg-vis .render { width: min(420px, 100%) }

.flist { list-style: none; margin: 0; padding: 0; border-bottom: 1px solid var(--border) }
.flist li { border-top: 1px solid var(--border) }
.flist a, .flist .soon { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 18px; padding: 16px 4px; text-decoration: none; color: inherit }
.flist b { font-size: 19px; font-weight: 700; letter-spacing: -0.01em } .flist span { grid-column: 1; color: var(--muted); font-size: 16px; line-height: 1.5 }
.flist .ic { grid-column: 2; grid-row: 1 / span 2; align-self: center; color: var(--link); transition: transform .2s }
.flist a:hover b { color: var(--link) } .flist a:hover .ic, .flist a:focus-visible .ic { transform: translateX(4px) }
.flist .soon b { color: var(--muted) }

/* dark bands */
.band-chinni { margin: clamp(30px, 5vh, 60px) var(--gl); border-radius: 36px; background: radial-gradient(70% 90% at 85% 40%, #1E3A4C, rgba(30,58,76,0) 70%), linear-gradient(135deg, #1F2328, #2B3138); color: #fff; overflow: hidden }
.bc-in { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); align-items: center; gap: 5vw; max-width: 1240px; margin: 0 auto; padding: clamp(48px, 6vw, 84px) clamp(24px, 5vw, 72px) 0 }
.bc-text { padding-bottom: clamp(48px, 6vw, 84px) }
.band-chinni .kick { color: #7DD3FC } .band-chinni .kick::before { background: #7DD3FC }
.band-chinni h2 { margin: 0; max-width: 15ch; font: 800 clamp(32px, 3.6vw, 56px)/1.05 var(--font); letter-spacing: -0.03em }
.band-chinni p { margin: 18px 0 24px; max-width: 32em; color: #D0D6DD; font-size: 18px }
.bc-link { color: #7DD3FC; font-weight: 700; text-decoration: none; font-size: 17px } .bc-link:hover { text-decoration: underline } .bc-link.soon { color: #A3ACB7 }
.bc-vis .render { width: min(380px, 100%); margin: 0 auto; margin-bottom: -6% }

.band-dark { margin: clamp(60px, 9vh, 110px) var(--gl) clamp(60px, 9vh, 100px); border-radius: 30px; background: linear-gradient(120deg, #1F2328, #2B3138); color: #fff }
.bd-in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 22px; max-width: 1240px; margin: 0 auto; padding: clamp(36px, 5vw, 60px) clamp(24px, 5vw, 64px) }
.band-dark h2 { margin: 0; font: 800 clamp(28px, 3vw, 44px)/1.08 var(--font); letter-spacing: -0.03em } .band-dark p { margin: 8px 0 0; color: #D0D6DD }

/* feature page: hero */
.fh { position: relative; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); align-items: center; gap: 5vw; max-width: 1320px; margin: 0 auto; padding: 130px var(--gl) 40px; min-height: min(92vh, 900px) }
.fh h1 { margin: 0; max-width: 15ch; font: 800 clamp(40px, 4.6vw, 72px)/1.03 var(--font); letter-spacing: -0.035em; text-wrap: balance }
.fh .lede { margin: 22px 0 0; max-width: 31em; font-size: clamp(17px, 1.3vw, 20px); color: var(--muted) }
.fh .cta { display: flex; flex-wrap: wrap; gap: 12px 14px; margin-top: 32px }
.fh-vis { position: relative; display: grid; place-items: center }
.fh-vis .render { width: min(460px, 100%) }
.pop { position: absolute; background: #fff; border: 1px solid var(--border); border-radius: 18px; padding: 14px 18px; box-shadow: 0 30px 60px -30px rgba(0,49,91,.4) }
.pop small { display: block; font-size: 13px; color: var(--muted) } .pop b { font-size: 26px; letter-spacing: -0.02em }
.pop-1 { left: 0; top: 30% } .pop-2 { right: 2%; bottom: 20% }
.due { color: var(--red) } .ok { color: #0B7A5B }

/* the moment it goes wrong */
.moment { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 5vw; max-width: 1320px; margin: 0 auto; padding: clamp(70px, 10vh, 120px) var(--gl) }
.moment h2 { margin: 0 0 30px; font: 800 clamp(32px, 3.4vw, 54px)/1.06 var(--font); letter-spacing: -0.03em }
.mo-item { padding-left: 22px; border-left: 3px solid #F3C7C7; margin-bottom: 28px; max-width: 34em }
.mo-item h3 { margin: 0 0 6px; font-size: 21px; letter-spacing: -0.01em } .mo-item p { margin: 0; color: var(--muted) }
.mo-photo { display: block; aspect-ratio: 4 / 3;
  -webkit-mask-image: radial-gradient(ellipse 64% 66% at 50% 50%, #000 55%, transparent 100%); mask-image: radial-gradient(ellipse 64% 66% at 50% 50%, #000 55%, transparent 100%) }
.mo-photo img { width: 100%; height: 100%; object-fit: cover; display: block }

/* how it works */
.how { max-width: 1240px; margin: 0 auto; padding: clamp(60px, 9vh, 110px) var(--gl) }
.how-head h2 { margin: 0; font: 800 clamp(32px, 3.4vw, 54px)/1.06 var(--font); letter-spacing: -0.03em } .how-head p { margin: 12px 0 0; color: var(--muted); max-width: 40em }
.steps { list-style: none; margin: 40px 0 0; padding: 0 }
.step { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 6vw; padding: 20px 0 }
.step.flip .st-vis { order: -1 }
.st-n { display: block; font: 800 64px/1 var(--font); color: #BFE6FB; margin-bottom: 10px }
.st-text h3 { margin: 0 0 10px; font: 800 clamp(26px, 2.4vw, 36px)/1.12 var(--font); letter-spacing: -0.02em } .st-text p { margin: 0; color: var(--muted); max-width: 30em; font-size: 18px }
.st-vis { position: relative; display: grid; place-items: center } .st-vis .render { width: min(360px, 90%) }

/* try it */
.try { background: linear-gradient(180deg, var(--bg), #E8F5FE 30%, #E8F5FE 70%, var(--bg)) }
.try-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .8fr); align-items: center; gap: 6vw; max-width: 1180px; margin: 0 auto; padding: clamp(70px, 10vh, 120px) var(--gl) }
.tag { display: inline-block; padding: 5px 12px; border-radius: 99px; background: var(--ink); color: #fff; font-size: 13px; font-weight: 700; margin-bottom: 16px }
.try h2 { margin: 0; font: 800 clamp(30px, 3vw, 46px)/1.08 var(--font); letter-spacing: -0.03em } .try-text > p { margin: 14px 0 24px; color: var(--muted); max-width: 30em }
.opt-l { font-size: 14px; font-weight: 700; color: var(--faint); margin-bottom: 10px }
.opt { display: flex; flex-wrap: wrap; gap: 8px }
.opt button, .acts button { all: unset; box-sizing: border-box; cursor: pointer; font: 700 16px/1 var(--font); border-radius: 99px; padding: 13px 18px; transition: background .15s, color .15s, transform .1s }
.opt button { background: #fff; border: 1.5px solid var(--border); color: var(--ink) } .opt button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff }
.acts { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 18px }
.acts .credit { background: #fff; border: 1.5px solid var(--red); color: var(--red) } .acts .paid { background: var(--teal); color: #00281D }
.acts .reset { padding: 13px 8px; color: var(--link); font-weight: 600; font-size: 15px }
.opt button:active, .acts button:active { transform: scale(.97) }
.opt button:focus-visible, .acts button:focus-visible { outline: 3px solid var(--sky-dark); outline-offset: 3px }
.try-now { display: none; margin: 16px 0 0; font-size: 16px; font-weight: 600; color: var(--muted) } .try-now b { font-size: 20px; font-variant-numeric: tabular-nums }
.try .note { margin-top: 18px; font-size: 13.5px; color: var(--faint) }
.ledger { justify-self: center; width: min(380px, 100%); background: #fff; border: 1px solid var(--border); border-radius: 32px; box-shadow: 0 50px 90px -46px rgba(0,49,91,.5); overflow: hidden }
.lg-top { display: flex; align-items: center; gap: 12px; padding: 18px 20px; border-bottom: 1px solid var(--border); font-size: 18px }
.lg-av { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: var(--sky-light); color: var(--link); font-weight: 800 }
.lg-bal { margin: 16px; padding: 18px 20px; border-radius: 20px; background: #FDF2F2 }
.lg-bal small { display: block; font-size: 14px; color: var(--muted); font-weight: 600 } .lg-bal b { display: block; font: 800 40px/1.15 var(--font); letter-spacing: -0.02em }
.lg-list { list-style: none; margin: 0; padding: 0 16px 16px }
.lg-list li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 4px; border-top: 1px solid var(--border) }
.lg-list li:first-child { border-top: 0 }
.lg-list span b { display: block; font-size: 16px } .lg-list small { color: var(--faint); font-size: 13.5px } .lg-list li > b { font-size: 17px }
.lg-list li.new { animation: lg-in .35s cubic-bezier(.2,.7,.2,1) } @keyframes lg-in { from { opacity: 0; transform: translateY(-8px) } to { opacity: 1; transform: none } }

/* what changes: open two-column list, no borders */
.benefits { max-width: 1240px; margin: 0 auto; padding: clamp(70px, 10vh, 120px) var(--gl) }
.benefits h2, .fits h2, .related h2 { margin: 0 0 36px; font: 800 clamp(30px, 3vw, 46px)/1.08 var(--font); letter-spacing: -0.03em }
.olist { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 34px 64px }
.olist li { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 16px }
.olist .ic { color: var(--link); margin-top: 2px } .olist b { font-size: 19px; letter-spacing: -0.01em } .olist p { margin: 4px 0 0; color: var(--muted) }

/* works best for: photo-led, captions under the photos */
.fits { max-width: 1320px; margin: 0 auto; padding: 0 var(--gl) clamp(70px, 10vh, 110px) }
.fit-row { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px }
.fit-photo { display: block; aspect-ratio: 4 / 3; border-radius: 22px; overflow: hidden } .fit-photo img { width: 100%; height: 100%; object-fit: cover; display: block }
.fit-cap { padding: 14px 2px 0 } .fit-name { font-weight: 700; font-size: 18px; color: var(--ink); text-decoration: none } a.fit-name:hover { color: var(--link) }
.fit-cap p { margin: 4px 0 0; color: var(--muted); font-size: 15.5px }

/* honest notes, questions, related */
.honest { max-width: 1240px; margin: 0 auto; padding: 0 var(--gl) clamp(50px, 8vh, 90px) }
.honest h2 { margin: 0 0 14px; font-size: 24px; letter-spacing: -0.01em }
.honest ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px }
.honest li { position: relative; padding-left: 30px; color: #2F3640 }
.honest li::before { content: "i"; position: absolute; left: 0; top: 2px; width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid var(--faint); color: var(--faint); font: 700 12px/17px var(--font); text-align: center }
.faq-p { max-width: 1240px; margin: 0 auto; padding: 0 var(--gl) clamp(50px, 8vh, 90px) }
.faq-p h2 { margin: 0 0 12px; font: 800 clamp(30px, 3vw, 46px)/1.08 var(--font); letter-spacing: -0.03em }
.faq-p details { border-bottom: 1px solid var(--border); padding: 4px 0 }
.faq-p summary { cursor: pointer; list-style: none; padding: 20px 40px 20px 0; position: relative; font-size: 19px; font-weight: 600 }
.faq-p summary::-webkit-details-marker { display: none }
.faq-p summary::after { content: "+"; position: absolute; right: 6px; top: 16px; font-size: 26px; font-weight: 400; color: var(--link); transition: transform .25s }
.faq-p details[open] summary::after { transform: rotate(45deg) } .faq-p details p { margin: 0 0 22px; color: var(--muted); max-width: 44em }
.related { max-width: 1240px; margin: 0 auto; padding: 0 var(--gl) }
.honest ul, .faq-p details, .related .flist { max-width: 860px }   /* reading width, aligned with the wide sections above */

/* text-only "moment" (no photo) */
.moment.solo { grid-template-columns: minmax(0, 1fr) } .moment.solo .mo-text { max-width: 860px }
.moment.solo .mo-item { max-width: 46em }

/* shop pages: photo hero, links from each step to its feature page, a typical day */
.sh-vis, .hg-vis .sh-photo { position: relative }
.sh-photo { display: block; aspect-ratio: 4 / 3; border-radius: 30px; overflow: hidden; box-shadow: 0 50px 90px -50px rgba(0,49,91,.45) }
.sh-photo img { width: 100%; height: 100%; object-fit: cover; display: block }
.hg-vis .sh-photo { width: 100% }
.st-more { margin-top: 14px !important } .st-link { color: var(--link); font-weight: 700; text-decoration: none } a.st-link:hover { text-decoration: underline }
.ticks { list-style: none; margin: 0 0 22px; padding: 0; display: grid; gap: 10px }
.ticks li { position: relative; padding-left: 28px; color: #2F3640 }
.ticks li::before { content: ""; position: absolute; left: 0; top: .32em; width: 16px; height: 16px; background: var(--teal); -webkit-mask: var(--check) center / contain no-repeat; mask: var(--check) center / contain no-repeat }
.daylist { max-width: 1240px; margin: 0 auto; padding: 0 var(--gl) clamp(60px, 9vh, 100px) }
.daylist h2, .art h2 { margin: 0 0 24px; font: 800 clamp(30px, 3vw, 46px)/1.08 var(--font); letter-spacing: -0.03em }
.daylist ol { list-style: none; margin: 0; padding: 0; max-width: 860px; border-left: 2px solid #BFE6FB }
.daylist li { position: relative; display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 18px; padding: 12px 0 12px 26px }
.daylist li::before { content: ""; position: absolute; left: -7px; top: 19px; width: 12px; height: 12px; border-radius: 50%; background: var(--sky) }
.daylist b { color: var(--link) } .daylist span { color: #2F3640 }

/* simple pages */
.art { max-width: 1320px; margin: 0 auto; padding: clamp(40px, 6vh, 70px) var(--gl) }
.art > p, .art > ul, .art > ol, .art > div { max-width: 860px }
.art > p { margin: 0 0 16px; color: #2F3640; font-size: 18px }
.art .flist { max-width: 860px }
.pairs { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; border-bottom: 1px solid var(--border) }
.pairs li { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; padding: 22px 0; border-top: 1px solid var(--border) }
.pairs b { display: block; font-size: 18px; margin-bottom: 4px } .pairs p { margin: 0; color: var(--muted) }
.pr-was b { color: var(--red) } .pr-now b { color: #0B7A5B }
.nsteps { list-style: none; counter-reset: ns; margin: 0; padding: 0 }
.nsteps li { counter-increment: ns; position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 26px; align-items: center; padding: 22px 0 22px 66px; border-top: 1px solid var(--border) }
.nsteps li.has-vis { grid-template-columns: minmax(0, 1fr) 200px }
.nsteps li::before { content: counter(ns); position: absolute; left: 0; top: 18px; font: 800 40px/1 var(--font); color: #BFE6FB }
.nsteps h3 { margin: 0 0 6px; font-size: 22px; letter-spacing: -0.01em } .nsteps p { margin: 0; color: var(--muted) }
.nsteps .render { width: 200px }
.faq-p.in-art { padding: 0; margin: 0 }
.mails { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; border-bottom: 1px solid var(--border) }
.mails li { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 4px 18px; padding: 18px 0; border-top: 1px solid var(--border) }
.mails a { color: var(--link); font-weight: 700; text-decoration: none } .mails a:hover { text-decoration: underline }
.mails span { grid-column: 2; color: var(--muted) }
.dl-box { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 30px; padding: 30px 0 }
.dl-facts { list-style: none; margin: 18px 0 0; padding: 0; color: var(--muted); display: grid; gap: 6px }
.dl-qr { display: grid; justify-items: center; gap: 8px; text-align: center; color: var(--muted); font-size: 15px; max-width: 220px }
.legal { max-width: 1320px; margin: 0 auto; padding: 20px var(--gl) clamp(60px, 9vh, 110px); color: #2F3640; font-size: 17px }
.legal > * { max-width: 860px }
.legal h2 { margin: 42px 0 12px; font-size: 26px; letter-spacing: -0.02em } .legal h3 { margin: 28px 0 8px; font-size: 20px }
.legal a { color: var(--link) } .legal li { margin: 6px 0 }

@media (max-width: 980px) {
  .ph { padding-top: 112px }
  .hg, .hg.flip, .fh, .moment, .step, .step.flip, .try-in, .bc-in { grid-template-columns: minmax(0, 1fr) }
  .hg.flip .hg-vis, .step.flip .st-vis { order: 0 }
  .hg { gap: 26px } .hg-vis .render { width: min(300px, 76vw) }
  .fh { padding-top: 104px; min-height: 0; gap: 18px } .fh-vis .render { width: min(320px, 78vw) }
  .pop { padding: 10px 14px } .pop b { font-size: 20px } .pop-1 { left: 0; top: 22% } .pop-2 { right: 0; bottom: 14% }
  .moment { gap: 10px } .moment .mo-photo { order: -1 }
  .step { gap: 14px; padding: 26px 0 } .st-vis .render { width: min(280px, 72vw) } .st-n { font-size: 48px }
  .bc-vis .render { width: min(280px, 70vw) }
  .try-now { display: block }
  .pairs li { grid-template-columns: minmax(0, 1fr); gap: 10px }
  .nsteps li, .nsteps li.has-vis { grid-template-columns: minmax(0, 1fr); padding-left: 52px } .nsteps .render { width: 160px }
  .daylist li { grid-template-columns: minmax(0, 1fr); gap: 2px } .mails li { grid-template-columns: minmax(0, 1fr) } .mails span { grid-column: 1 }   /* the ledger is below the fold on phones; show the balance next to the buttons */
  .olist { grid-template-columns: minmax(0, 1fr); gap: 26px } .fit-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 14px }
}
@media (prefers-reduced-motion: reduce) { .lg-list li.new { animation: none } .flist .ic { transition: none } }