/* ---------- sections after 03 (04 quiet, 05 beyond alerts, security, pricing, FAQ, demo, footer) ----------
   Cream sections continue 03 (product pieces on dark .how-panel, from how.css); the page ends on dark (demo + footer).
   Each section shows a piece the hero and 03 do not. Numbers come from docs/data-story.md. */
.sec{background:var(--cream);color:var(--text);padding:clamp(96px,14vh,128px) 24px 0}
.sec :focus-visible{outline-color:var(--ink)}
.sec-inner{max-width:1200px;margin:0 auto}
.sec-title{margin:0;max-width:16em;font-size:clamp(34px,3.9vw,56px);line-height:1.05;font-weight:600;letter-spacing:-.03em;text-wrap:balance}
.sec-lede{margin:20px 0 0;max-width:34em;font-size:clamp(17px,1.4vw,20px);line-height:1.5;color:var(--text-muted);text-wrap:pretty}
.sec-link{display:inline-flex;gap:8px;margin-top:28px;font-size:17px;font-weight:600;color:var(--text);text-decoration:underline;text-decoration-color:rgba(20,15,21,.3);text-underline-offset:5px;border-radius:6px}
.sec-link:hover{text-decoration-color:var(--text)}
.sec figure{margin-left:0;margin-right:0}
.sec .how-panel{margin-top:40px}

/* 04 quiet month: 30 days as a strip, three alert days marked */
.quiet{max-width:880px;padding:22px 24px 20px}
.quiet .pill{font-size:12px}
.quiet-stats{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:16px;margin:8px 0 26px;padding-bottom:20px;border-bottom:1px solid var(--line-dark-soft)}
.quiet-stats div{display:flex;flex-direction:column;gap:4px}
.quiet-stats b{font-size:32px;font-weight:600;letter-spacing:-.02em}
.quiet-stats span{font-size:13px;color:var(--text-inv-muted)}
.quiet-strip{list-style:none;margin:30px 0 0;padding:0;display:grid;grid-template-columns:repeat(30,1fr);gap:4px}
.q-day{position:relative;height:40px;border-radius:5px;background:rgba(251,247,242,.07)}
.q-day.is-done{background:transparent;box-shadow:inset 0 0 0 1.5px var(--pos)}
.q-day.is-open{background:var(--red)}
.q-tag{position:absolute;bottom:calc(100% + 6px);left:50%;transform:translateX(-50%);font-size:12px;font-weight:600;white-space:nowrap;color:var(--text-inv-2)}
.q-day.is-open .q-tag{left:auto;right:0;transform:none;color:var(--red-on-dark)}
.quiet-axis{display:flex;justify-content:space-between;margin-top:8px;font-size:12px;color:var(--text-inv-muted)}
.quiet-legend{display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:18px;font-size:12px;color:var(--text-inv-2)}
.quiet-legend span,.quiet-days span,.mail li{display:flex;align-items:center;gap:8px}
.quiet-days{display:none}
.k-done,.k-open,.k-quiet{width:10px;height:10px;flex:none;border-radius:3px}
.k-done{box-shadow:inset 0 0 0 1.5px var(--pos)}
.k-open{background:var(--red)}
.k-quiet{background:rgba(251,247,242,.16)}

/* 05 beyond alerts: three pieces the tablet does not show */
.sec-tight{padding-bottom:0}
.beyond{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:48px}
.beyond-item h3{margin:0;font-size:22px;font-weight:600;letter-spacing:-.015em}
.beyond-item>p{margin:10px 0 0;font-size:16px;line-height:1.55;color:var(--text-muted);min-height:4.65em}
.beyond-item .how-panel{margin-top:20px}
.bq{display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:52px;border-top:1px solid var(--line-dark-soft)}
.bq div{display:flex;flex-direction:column;gap:2px;min-width:0}
.bq b{font-size:14px;font-weight:600}
.bq div span{font-size:12px;color:var(--text-inv-muted)}
.bq-tag{height:24px;padding:0 9px;display:inline-flex;align-items:center;flex:none;border-radius:999px;background:rgba(251,247,242,.07);font-size:12px;font-weight:600;color:var(--text-inv-2)}
.bq-tag.is-warn{background:rgba(251,247,242,.12);color:var(--cream)}
.bq-foot{padding-top:12px;border-top:1px solid var(--line-dark-soft)}
.bq-btn{display:inline-flex;align-items:center;height:32px;padding:0 14px;border-radius:999px;border:1px solid var(--line-dark);font-size:13px;font-weight:600}
.pace-num{display:flex;align-items:baseline;gap:10px;margin:14px 0 18px}
.pace-num b{font-size:30px;font-weight:600;letter-spacing:-.02em}
.pace-num span{font-size:13px;color:var(--text-inv-muted)}
.pace-bar{position:relative;height:12px;border-radius:99px;background:rgba(251,247,242,.08)}
.pace-bar i{position:absolute;left:0;top:0;bottom:0;width:var(--w);border-radius:inherit;background:var(--cream)}
.pace-bar em{position:absolute;left:var(--at);top:-6px;bottom:-6px;width:2px;margin-left:-1px;border-radius:2px;background:var(--pos)}
.pace-axis{display:flex;justify-content:space-between;margin-top:12px;font-size:12px;color:var(--text-inv-muted)}
.pace-mark{position:relative;height:18px;margin-bottom:8px;font-size:12px;font-weight:600;color:var(--pos)}
.pace-mark span{position:absolute;right:calc(100% - var(--at));transform:translateX(50%);white-space:nowrap}
.mail{list-style:none;margin:6px 0 0;padding:0}
.mail li{min-height:48px;border-top:1px solid var(--line-dark-soft);font-size:14px;line-height:1.4}

/* security: four plain facts, each confirmed by the owner (Oct 1, 2026) */
.trust{list-style:none;margin:48px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.trust li{padding:24px 22px;border-radius:20px;background:var(--cream-2);border:1px solid rgba(20,15,21,.06)}
.trust h3{margin:0;font-size:18px;font-weight:600;letter-spacing:-.01em}
.trust p{margin:10px 0 0;font-size:15px;line-height:1.55;color:var(--text-muted)}

/* form (early access, on dark) */
.form{display:flex;flex-direction:column;gap:16px;padding:28px;border-radius:24px}
.form-dark{color-scheme:dark;background:var(--ink-2);border:1px solid var(--ink-3);color:var(--cream)}
.field{display:flex;flex-direction:column;gap:8px;font-size:14px;font-weight:500}
.field em{font-style:normal;font-weight:400;opacity:.7}
.field input,.field select,.field textarea{width:100%;min-height:48px;padding:12px 14px;border-radius:12px;font:400 16px/1.4 var(--font);color:inherit;resize:vertical}
.form-dark .field input,.form-dark .field select,.form-dark .field textarea{background:var(--ink);border:1px solid rgba(251,247,242,.2)}
.form-dark .field select option{color:var(--text)}
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{outline:2px solid currentColor;outline-offset:1px;border-radius:12px}
.form .is-invalid{border-color:var(--red)!important}
.form-dark .is-invalid{border-color:var(--red-on-dark)!important}
.check{display:flex;gap:10px;align-items:flex-start;font-size:14px;line-height:1.5}
.check input{width:18px;height:18px;margin:2px 0 0;flex:none;accent-color:var(--red)}
.form-dark .check{color:var(--text-inv-2)}
.form .btn{align-self:flex-start}
.form-status{margin:0;min-height:1.5em;font-size:14px;line-height:1.5}
.form-dark .form-status.is-error{color:var(--red-on-dark)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.todo{text-decoration:underline dashed;text-underline-offset:4px}

/* FAQ */
.sec-last{padding-bottom:clamp(96px,14vh,128px)}
.faq-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.5fr);gap:clamp(40px,6vw,96px);align-items:start}
.faq-set+.faq-set{margin-top:44px}
.faq-group{margin:0 0 10px;font-size:15px;font-weight:500;letter-spacing:0;color:var(--text-muted)}
.faq details{border-top:1px solid rgba(20,15,21,.12)}
.faq details:last-child{border-bottom:1px solid rgba(20,15,21,.12)}
.faq summary{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:22px 0;font-size:19px;font-weight:600;letter-spacing:-.01em;cursor:pointer;list-style:none;border-radius:8px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";width:12px;height:12px;flex:none;border-right:2px solid var(--text-muted);border-bottom:2px solid var(--text-muted);transform:translateY(-3px) rotate(45deg);transition:transform .3s var(--ease-expo)}
.faq details[open] summary::after{transform:translateY(3px) rotate(225deg)}
.faq details p{margin:0;padding:0 40px 24px 0;font-size:16px;line-height:1.6;color:var(--text-muted)}
.faq a{color:var(--text);text-underline-offset:4px}

/* demo: the page ends on dark */
.demo{background:var(--ink);color:var(--cream);padding:clamp(96px,14vh,128px) 24px}
.demo :focus-visible{outline-color:var(--cream)}
.demo-inner{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,460px);gap:clamp(40px,6vw,96px);align-items:start}
.demo .sec-lede{color:var(--text-inv-3)}
.demo-points{list-style:none;margin:32px 0 0;padding:0;display:flex;flex-direction:column;gap:12px;font-size:17px;color:var(--text-inv-2)}
.demo-points li{display:flex;align-items:center;gap:12px}
.demo-points li::before{content:"";width:6px;height:6px;flex:none;border-radius:50%;background:var(--cream)}

/* footer (the cat may appear here) */
.foot{position:relative;background:var(--ink);color:var(--text-inv-3);padding:72px 24px 40px;border-top:1px solid var(--line-dark-soft)}
.foot-cat{position:absolute;right:clamp(24px,10vw,160px);top:-81px;width:96px;height:82px;pointer-events:none}
.foot-inner{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:48px}
.foot-brand img{height:30px;width:auto}
.foot-brand p{margin:16px 0 0;font-size:15px;line-height:1.5}
.foot-brand a{display:block;width:max-content;margin-top:10px;font-size:15px;color:var(--text-inv-3);text-decoration:none;border-radius:6px}
.foot-brand a:hover{color:var(--cream)}
.foot-cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.foot-cols h2{margin:0 0 14px;font-size:14px;font-weight:600;color:var(--cream)}
.foot-cols a,.foot-cols span{display:block;width:max-content;margin-bottom:10px;font-size:15px;color:var(--text-inv-3);text-decoration:none;border-radius:6px}
.foot-cols a:hover{color:var(--cream)}
.foot-bottom{max-width:1200px;margin:56px auto 0;padding-top:24px;border-top:1px solid var(--line-dark-soft);display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;font-size:14px;color:var(--text-inv-muted)}
.foot-bottom a{color:var(--text-inv-3);text-decoration:none;border-radius:6px}
.foot-bottom a:hover{color:var(--cream)}

/* cookie consent (js/consent.js): three choices with equal weight (KVKK cookie guide) */
.consent{position:fixed;z-index:60;left:16px;right:16px;bottom:16px;max-width:760px;margin:0 auto;padding:22px 24px;border-radius:22px;
  background:var(--ink-2);border:1px solid var(--line-dark);color:var(--text-inv-2);box-shadow:0 24px 60px -20px rgba(0,0,0,.6);
  opacity:0;transform:translateY(16px);transition:opacity .3s var(--ease-expo),transform .5s var(--ease-expo)}
.consent.is-open{opacity:1;transform:none}
.consent :focus-visible{outline-color:var(--cream)}
.consent h2{margin:0;font-size:17px;font-weight:600;color:var(--cream)}
.consent p{margin:8px 0 0;font-size:14px;line-height:1.55}
.consent-prefs{display:flex;flex-direction:column;gap:12px;margin-top:16px;padding-top:16px;border-top:1px solid var(--line-dark-soft)}
.consent-prefs[hidden]{display:none} /* closed until "Manage preferences" (display:flex above would override the attribute) */
.consent-opt{display:flex;gap:12px;align-items:flex-start;font-size:14px;line-height:1.5}
.consent-opt input{width:18px;height:18px;margin:2px 0 0;flex:none;accent-color:var(--cream)}
.consent-opt b{display:block;color:var(--cream);font-weight:600}
.consent-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.c-btn{height:44px;padding:0 20px;border-radius:999px;border:1px solid rgba(251,247,242,.32);background:transparent;color:var(--cream);font:600 14px var(--font);cursor:pointer}
.c-btn:hover{background:rgba(251,247,242,.08)}
.foot-btn{display:block;margin:0 0 10px;padding:0;border:0;background:none;font:400 15px var(--font);color:var(--text-inv-3);cursor:pointer;border-radius:6px}
.foot-btn:hover{color:var(--cream)}
/* phones: a low bar (short text, three buttons in one row), so the hero's heading, buttons and the top of the tablet stay in view.
   The heading is kept for screen readers only and the .w-long parts of the text are left out (css/main.css). */
@media (max-width: 719px){
  .consent{left:8px;right:8px;bottom:calc(8px + env(safe-area-inset-bottom,0px));padding:12px;border-radius:18px}
  .consent h2{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .consent p{margin:0;font-size:13px;line-height:1.4}
  .consent-opt{font-size:13px}
  .consent-actions{flex-wrap:nowrap;gap:6px;margin-top:10px} /* one row; on the narrowest phones the long label wraps inside its button */
  .c-btn{flex:1 1 auto;min-width:0;height:40px;padding:0 8px;font-size:13px;line-height:1.15}
  .consent-actions:has([data-consent="save"]:not([hidden])){flex-wrap:wrap} /* four buttons once the preferences are open: two rows */
}
/* 720 px and up: a small card in the bottom-left corner, so the hero tablet stays in view (owner, Oct 3, 2026).
   It covers only the lower corner of the tablet's sidebar, never the chart or the alert. */
@media (min-width: 720px){
  .consent{right:auto;width:clamp(264px,23vw,320px);margin:0;padding:16px;border-radius:18px;max-height:calc(100vh - 32px);overflow-y:auto}
  .consent h2{font-size:15px}
  .consent p{margin-top:6px;font-size:13px;line-height:1.45}
  .consent-prefs{gap:10px;margin-top:12px;padding-top:12px}
  .consent-opt{gap:10px;font-size:13px;line-height:1.45}
  .consent-actions{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:12px}
  .c-btn{height:36px;padding:0 8px;font-size:13px}
  .c-btn[data-consent="prefs"],.c-btn[data-consent="save"]{grid-column:1/-1}
}
@media (prefers-reduced-motion: reduce){ .consent{transition:none} }

@media (max-width: 959px){
  .beyond{grid-template-columns:1fr;max-width:560px}
  .beyond-item>p{min-height:0}
  .trust{grid-template-columns:1fr 1fr}
  .faq-grid,.demo-inner,.foot-inner{grid-template-columns:1fr}
  .form{max-width:560px}
}
@media (max-width: 719px){
  .sec{padding:80px 20px 0}
  .sec-last{padding-bottom:80px}
  .sec-title{font-size:clamp(28px,7.7vw,32px)} /* phone H2: one clear step under the H1 (36 px) */
  .faq-grid,.demo-inner{gap:32px}
  .sec .quiet{margin-top:32px}
  .quiet{padding:18px 16px}
  .quiet-stats{grid-template-columns:1fr 1fr;row-gap:14px}
  .quiet-stats div:first-child{grid-column:1/-1}
  .quiet-strip{gap:2px}
  .q-day{height:32px;border-radius:3px}
  .q-tag{display:none}
  .quiet-strip{margin-top:4px}
  .quiet-days{display:flex;flex-wrap:wrap;gap:8px 16px;margin:16px 0 0;font-size:12px;font-weight:600;color:var(--text-inv-2)}
  /* 05: the three pieces sit in a swipe row with the next one peeking (like the 03 panels); the texts keep one height so
     the panels line up, and the panels stretch to one height */
  .beyond{display:flex;gap:12px;max-width:none;margin:32px -20px -20px;padding:0 20px 28px;overflow-x:auto;overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory;scroll-padding:0 20px;scrollbar-width:none}
  .beyond::-webkit-scrollbar{display:none}
  .beyond-item{position:relative;flex:0 0 86%;display:flex;flex-direction:column;scroll-snap-align:start} /* relative: keeps the visually hidden captions inside the scroller */
  .beyond-item>p{min-height:6.2em}
  .beyond-item .how-panel{flex:1;margin-top:16px;box-shadow:0 22px 30px -26px rgba(20,15,21,.55)}
  /* motion (js/reveal.js): the three alert days pop in after the 04 panel, the revenue bar fills, the Security cards follow each other */
  .m-motion .quiet .q-day.is-done,.m-motion .quiet .q-day.is-open{transition:transform .5s var(--ease-expo) .5s,opacity .3s var(--ease) .5s}
  .m-motion .quiet .q-day.is-done~.q-day.is-done{transition-delay:.65s}
  .m-motion .quiet .q-day.is-open{transition-delay:.8s}
  .m-motion .quiet:not(.is-in) .q-day.is-done,.m-motion .quiet:not(.is-in) .q-day.is-open{transform:scale(.3);opacity:0}
  .m-motion .pace-bar i{transform-origin:0 50%;transition:transform 1s var(--ease-soft) .2s}
  .m-motion .pace-bar em{transition:opacity .3s var(--ease) 1s}
  .m-motion .pace-bar:not(.is-in) i{transform:scaleX(0)}
  .m-motion .pace-bar:not(.is-in) em{opacity:0}
  .trust li.rv:nth-child(2n){transition-delay:.08s}
  /* security: a tight 2 x 2 */
  .trust{grid-template-columns:1fr 1fr;gap:10px;margin-top:32px}
  .trust li{padding:16px 14px;border-radius:16px}
  .trust h3{font-size:16px;line-height:1.25}
  .trust p{margin-top:8px;font-size:14px;line-height:1.45}
  .form{padding:20px}
  .form .btn{align-self:stretch;height:52px}
  /* the message sits under the button, out of view on a phone: the fields themselves show what is missing */
  .form .is-invalid{box-shadow:inset 0 0 0 1px var(--red)}
  .form-dark .is-invalid{box-shadow:inset 0 0 0 1px var(--red-on-dark)}
  .form-dark .field:has(.is-invalid)>span,.form-dark .check:has(.is-invalid){color:var(--red-on-dark)}
  .form-status:empty{min-height:0;margin-top:-16px}
  .faq summary{font-size:17px;padding:18px 0}
  .faq details p{padding-right:0}
  .demo{padding:80px 20px}
  .foot{padding:64px 20px 32px}
  .foot-cols{grid-template-columns:1fr 1fr}
}