/* thesimplefocus.app — the honeycomb direction, revised */
.wrap { max-width: 1240px; margin: 0 auto; padding-inline: 40px; }

.top-in { display: flex; align-items: center; justify-content: space-between; height: 88px; }
.top-nav { display: flex; align-items: center; gap: 28px; font-size: 16px; }
.top-nav a:not(.pill) { text-decoration: none; color: var(--soft); }
.top-nav a:not(.pill):hover { color: var(--ink); }

/* hero */
.hero { position: relative; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 72px; align-items: center; min-height: 0; padding-top: 24px; padding-bottom: 24px; }
.more { grid-column: 1 / -1; justify-self: center; width: 44px; height: 44px; margin-top: 8px; border-radius: 22px; display: flex; align-items: center; justify-content: center; color: var(--soft); background: var(--surface); box-shadow: var(--surface-shadow); text-decoration: none; animation: breathe 2.6s ease-in-out infinite; transition: opacity .5s; }
.more svg { width: 20px; height: 20px; transform: rotate(-90deg); }
@keyframes breathe { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
.hero h1 { font-size: clamp(52px, 6.4vw, 96px); line-height: .98; letter-spacing: -.034em; margin-bottom: 30px; }
.lead { font-size: 19px; line-height: 1.5; color: var(--soft); max-width: 25em; }
.cta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; margin-top: 36px; }
.cta-note { font-size: 14px; color: var(--soft); }
.qr { display: inline-flex; }
.hero .qr { margin-top: 36px; }
.badge { display: block; line-height: 0; }
.badge img { height: 40px; width: auto; }

.hero-comb { width: 100%; max-width: 420px; justify-self: center; align-self: center; }
.comb { width: 100%; height: auto; overflow: visible; }
.comb .day { cursor: default; outline: none; transition: opacity .35s ease; }
.comb .day path { fill: var(--neutral); transition: fill .7s cubic-bezier(.2, .7, .2, 1); }
.comb .day.on path { fill: var(--c); }
.comb .day text { font-family: var(--sans); font-size: 11px; fill: var(--empty-num); pointer-events: none; transition: fill .7s; }
.comb .day.on text { fill: rgba(255, 255, 255, .94); }
.comb.pre .day.on path { fill: var(--neutral); }
.comb.pre .day.on text { fill: var(--empty-num); }
.comb .day.today path { transition: stroke-opacity .6s 1.3s; }
.comb.pre .day.today path { stroke-opacity: 0; transition: none; }
.comb.looking .day:not(.hot) { opacity: .42; }
.comb .day:focus-visible path { stroke: var(--ink); stroke-width: 5; }

.comb-cap { grid-column: 1 / -1; position: relative; text-align: center; margin-top: 8px; font-size: 14px; line-height: 44px; }
.cap-month { color: var(--soft); }
.cap-hint { color: var(--faint); }
.cap-day { position: absolute; right: 0; top: 0; white-space: nowrap; }
.cap-name { color: var(--ink); }
.cap-meta { color: var(--soft); }
.cap-meta::before { content: ' · '; }

/* sections */
.sec { padding-top: clamp(80px, 9vw, 128px); }
.sec h2 { font-size: clamp(28px, 3.1vw, 42px); line-height: 1.16; letter-spacing: -.025em; }
.sec p { font-size: 18px; color: var(--soft); }

.color { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 96px; align-items: center; }
.color-words p { margin-top: 26px; max-width: 30em; }
.color-art { display: flex; flex-direction: column; align-items: center; gap: 40px; }
.blend-svg { width: min(100%, 400px); height: auto; overflow: visible; }
.blend-hexes path { mix-blend-mode: multiply; opacity: .9; }
.blend-svg .lbl { font-family: var(--sans); font-size: 14px; fill: var(--soft); }
.blend-svg .mid { font-family: var(--sans); font-size: 13px; fill: #1C1C1B; }
.moods { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 18px 26px; }
.moods li { display: flex; flex-direction: column; align-items: center; gap: 10px; font-size: 14px; color: var(--soft); }
.mood-hex { position: relative; display: inline-block; flex: none; }
.mood-hex > svg { width: 100%; height: 100%; }
.mood-hex > span { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }

.streak { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 96px; align-items: center; }
.frame { justify-self: center; display: flex; justify-content: center; }
.phone { --s: .82; position: relative; flex: none; padding: calc(12px * var(--s)); border-radius: calc(62px * var(--s)); background: #141413; box-shadow: inset 0 0 0 1.5px #3A3936, 0 40px 80px -20px rgba(28, 28, 27, .35), 0 18px 36px -18px rgba(28, 28, 27, .3); }
.phone-screen { position: relative; width: calc(390px * var(--s)); height: calc(844px * var(--s)); border-radius: calc(50px * var(--s)); overflow: hidden; background: #FCFCFB; }
.phone-screen::after { content: ""; position: absolute; z-index: 4; top: calc(11px * var(--s)); left: 50%; width: calc(122px * var(--s)); height: calc(36px * var(--s)); transform: translateX(-50%); border-radius: 999px; background: #000; }
.screen { position: absolute; top: 0; left: 0; width: 390px; height: 844px; transform: scale(var(--s)); transform-origin: 0 0; color: #1C1C1B; font-family: var(--sans); }
.screen > img { position: absolute; inset: 0; width: 390px; height: 844px; object-fit: cover; }
.sb { position: absolute; z-index: 3; top: 0; left: 0; right: 0; height: 54px; display: flex; align-items: center; justify-content: space-between; padding: 4px 28px 0 44px; }
.sb-time { font: 600 17px/1 var(--sans); letter-spacing: -.01em; }
.sb-icons { width: 80px; height: 14px; }
.glass { background: rgba(255, 255, 255, .34); -webkit-backdrop-filter: blur(18px) saturate(1.1); backdrop-filter: blur(18px) saturate(1.1); }
.pt-top { position: absolute; left: 16px; right: 16px; top: 54px; display: flex; align-items: center; justify-content: space-between; }
.round { width: 44px; height: 44px; border-radius: 22px; display: flex; align-items: center; justify-content: center; }
.round svg { width: 20px; height: 20px; }
.month-pill { height: 36px; padding: 0 14px; border-radius: 18px; display: flex; align-items: center; gap: 10px; font-size: 14px; color: rgba(28, 28, 27, .8); }
.dots { display: flex; gap: 4px; }
.dots i { width: 6px; height: 6px; border-radius: 3px; background: rgba(28, 28, 27, .28); }
.dots i:first-child { width: 18px; background: rgba(28, 28, 27, .72); }
.pt-card { position: absolute; left: 12px; right: 12px; bottom: 30px; border-radius: 30px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .4); padding: 20px 16px 20px 22px; display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto; column-gap: 12px; row-gap: 4px; align-items: center; }
.pt-title { font-size: 22px; letter-spacing: -.02em; color: rgba(28, 28, 27, .88); line-height: 1.1; }
.pt-earned { font-size: 14px; color: rgba(28, 28, 27, .7); }
.pt-dl { grid-column: 2; grid-row: 1 / 3; width: 56px; height: 56px; border-radius: 28px; background: rgba(255, 255, 255, .45); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .5); display: flex; align-items: center; justify-content: center; }
.pt-dl svg { width: 22px; height: 22px; }
.streak-words p { margin-top: 26px; max-width: 30em; }
.track { margin-top: 48px; max-width: 470px; }
.track-svg { width: 100%; height: auto; overflow: visible; }
.track-svg text { font-family: var(--sans); font-size: 10px; fill: var(--soft); }

.trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 56px; }
.trio > div { border-top: 1px solid var(--hair); padding-top: 24px; }
.trio h3 { font-size: 24px; letter-spacing: -.015em; margin-bottom: 12px; }
.trio p { font-size: 17px; }

.close { padding-bottom: clamp(104px, 12vw, 176px); }
.thesis { font-size: clamp(30px, 4.2vw, 58px) !important; line-height: 1.1; letter-spacing: -.035em; color: var(--ink) !important; max-width: 17em; }
.close .cta { margin-top: 44px; flex-direction: column; align-items: flex-start; gap: 28px; }
.pill.outline { background: #FFFFFF; color: var(--azure); box-shadow: inset 0 0 0 1.5px var(--azure); }
.pill.outline svg { color: var(--azure); }

/* footer */
.site-foot { border-top: 1px solid var(--hair); }
.foot-inner { max-width: 1240px; margin: 0 auto; padding: 44px 40px 52px; display: grid; grid-template-columns: 1fr auto; gap: 28px 40px; align-items: start; }
.foot-brand p { margin-top: 10px; font-size: 15px; color: var(--soft); }
.foot-links { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 28px; font-size: 15px; }
.foot-links a { text-decoration: none; color: var(--soft); }
.foot-links a:hover { color: var(--ink); }
.foot-fine { grid-column: 1 / -1; font-size: 13px; color: var(--faint); }

/* privacy */
.legal-wrap { padding-top: 56px; padding-bottom: 120px; }
.legal-head h1 { font-size: clamp(48px, 6vw, 88px); line-height: 1; letter-spacing: -.034em; }
.legal-head .lead { margin-top: 18px; font-size: 22px; color: var(--ink85); }
.legal-head .meta { margin-top: 14px; font-size: 15px; color: var(--soft); max-width: 36em; }
.legal-grid { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 80px; margin-top: 72px; align-items: start; }
.toc { position: sticky; top: 32px; }
.toc ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: 15px; }
.toc a { text-decoration: none; color: var(--soft); }
.toc a:hover { color: var(--ink); }
.legal h2#terms { margin-top: 96px; padding-top: 40px; border-top: 1px solid var(--hair); font-size: clamp(32px, 3.4vw, 44px); letter-spacing: -.03em; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .blend-hexes path { mix-blend-mode: screen; opacity: .78; }
  :root:not([data-theme="light"]) .phone { box-shadow: inset 0 0 0 1.5px #4A4844, 0 40px 80px -20px rgba(0, 0, 0, .6); }
  :root:not([data-theme="light"]) .screen { color: #F2F1EE; }
  :root:not([data-theme="light"]) .glass { background: rgba(28, 28, 27, .42); }
  :root:not([data-theme="light"]) .month-pill, :root:not([data-theme="light"]) .pt-title, :root:not([data-theme="light"]) .pt-earned { color: rgba(242, 241, 238, .9); }
  :root:not([data-theme="light"]) .dots i { background: rgba(242, 241, 238, .35); }
  :root:not([data-theme="light"]) .dots i:first-child { background: rgba(242, 241, 238, .85); }
  :root:not([data-theme="light"]) .pt-card { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); }
  :root:not([data-theme="light"]) .pt-dl { background: rgba(28, 28, 27, .42); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16); }
}
:root[data-theme="dark"] .blend-hexes path { mix-blend-mode: screen; opacity: .78; }

@media (max-width: 900px) {
  .wrap { padding-inline: 24px; }
  .top-in { height: 72px; }
  .hide-sm { display: none; }
  .hero { grid-template-columns: 1fr; gap: 32px; min-height: 0; padding-top: 20px; padding-bottom: 8px; }
  .hero h1 { font-size: clamp(46px, 13vw, 64px); margin-bottom: 20px; }
  .lead { font-size: 18px; }
  .hero-comb { justify-self: stretch; order: 2; }
  .hero-words { display: contents; }
  .hero-words h1 { order: 0; } .hero-words .lead { order: 1; margin-top: -14px; }
  .hero-words .qr { order: 3; margin-top: 20px; }
  .comb-cap { order: 2; text-align: left; margin-top: 0; line-height: 1.5; }
  .cap-day { position: static; display: block; }
  .cap-hint { display: none; }
  .hero-comb { max-width: none; }
  .color, .streak { grid-template-columns: 1fr; gap: 56px; }
  .streak .frame { order: 2; }
  .phone { --s: .7; }
  .more { order: 4; margin: 20px auto 0; }
  .trio { grid-template-columns: 1fr; gap: 36px; }
  .foot-inner { grid-template-columns: 1fr; padding: 40px 24px 48px; }
  .legal-grid { grid-template-columns: 1fr; gap: 0; margin-top: 40px; }
  .toc { display: none; }
}

.nf .legal-head { display: flex; flex-direction: column; gap: 14px; }
.nf .legal-head h1 { margin-top: 10px; }