/* saku.kantongstudio.com: Warm Ochre tokens from plan/07-design.md. No scripts on this site; light theme only (owner, 2026-10-26). */
:root {
  --bg:#F8F3E8; --surface:#FFFDF7; --surface-2:#F1E6CF; --line:#E9DCC0;
  --fg:#1F1A14; --muted:#5C5244; --accent:#8A3F12;
  --primary:#E9A93A; --on-primary:#1F1A14;
  --hero:#F4CF62; --on-hero:#2A1E0E; --tint:#FBEACB; --on-tint:#8A3F12;
  --navy:#32334F; --on-navy:#FBE4A8;
  --income:#1B763A; --spend:#A14A42; --mark:#F4CF62;
  --data1:#C9831F; --data2:#F3D58E; --track:#F2E7D0; --bad:#A8321F; --sel-bg:#1F1A14; --sel-fg:#F4CF62;
  --shadow:0 1px 2px rgba(31,26,20,.06), 0 12px 32px rgba(31,26,20,.08);
}

* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body {
  margin:0; background:var(--bg); color:var(--fg);
  font:500 16px/1.6 Manrope, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
a { color:var(--accent); text-underline-offset:.15em; }
a:focus-visible, summary:focus-visible { outline:3px solid var(--primary); outline-offset:3px; border-radius:6px; }
h1, h2, h3 { font-weight:800; letter-spacing:-.02em; line-height:1.2; }
.wrap { max-width:70rem; margin:0 auto; padding:0 16px; }
.skip { position:absolute; left:-999px; }
.skip:focus { left:16px; top:8px; background:var(--surface); padding:.5rem .75rem; border-radius:8px; z-index:2; }

/* Header and footer, shared by every page */
.top { border-bottom:1px solid var(--line); background:var(--bg); }
.top .wrap { display:flex; align-items:center; gap:1rem; min-height:64px; }
.brand { display:flex; align-items:center; gap:.6rem; color:var(--fg); text-decoration:none; font-weight:800; font-size:1.15rem; letter-spacing:-.02em; }
.brand img { width:36px; height:36px; border-radius:10px; }
.top nav { margin-left:auto; display:flex; gap:1.25rem; align-items:center; font-weight:700; font-size:.95rem; }
.top nav a { color:var(--muted); text-decoration:none; }
.top nav a:hover, .top nav a[aria-current] { color:var(--fg); }
.lang { border:1px solid var(--line); border-radius:999px; padding:.15rem .6rem; font-size:.8rem; }
@media (max-width:640px) { .top nav .hide-sm { display:none; } }

.foot { border-top:1px solid var(--line); margin-top:4rem; padding:2rem 0 2.5rem; color:var(--muted); font-size:.9rem; }
.foot .wrap { display:flex; flex-wrap:wrap; gap:.75rem 1.5rem; align-items:center; }
.foot nav { display:flex; flex-wrap:wrap; gap:.5rem 1.25rem; margin-left:auto; }
.foot a { color:var(--muted); }

/* Buttons */
.btn { display:inline-flex; align-items:center; gap:.6rem; min-height:48px; padding:.7rem 1.25rem; border-radius:14px; font-weight:800; text-decoration:none; }
.btn-primary { background:var(--primary); color:var(--on-primary); box-shadow:var(--shadow); }
.btn-primary:hover { filter:brightness(1.05); }
.btn-ghost { color:var(--fg); border:1.5px solid var(--line); background:var(--surface); }
.btn svg { width:20px; height:20px; flex:none; }

/* Landing: hero */
.hero .wrap { display:grid; grid-template-columns:1.1fr .9fr; gap:3rem; align-items:center; padding-top:4rem; padding-bottom:3rem; }
.eyebrow { display:inline-block; background:var(--tint); color:var(--on-tint); font-weight:800; font-size:.8rem; padding:.3rem .7rem; border-radius:999px; }
.hero h1 { font-size:clamp(2.1rem, 5vw, 3.4rem); margin:0 0 1rem; }
.hero h1 em { font-style:normal; background:linear-gradient(transparent 62%, var(--mark) 62%); }
.lede { font-size:1.15rem; color:var(--muted); max-width:34rem; margin:0 0 1.75rem; }
.cta { display:flex; flex-wrap:wrap; gap:.75rem; }
.fine { color:var(--muted); font-size:.85rem; margin-top:1rem; }
@media (max-width:860px) { .hero .wrap { grid-template-columns:1fr; gap:2.5rem; padding-top:2.5rem; } }

/* Hero phone: the real Beranda screenshot (status bar cropped off) in a frame */
.phone { justify-self:center; width:min(300px, 100%); background:var(--navy); border-radius:42px; padding:10px; box-shadow:var(--shadow); }
.phone img { display:block; width:100%; height:auto; border-radius:32px; }

/* Closing banner: links to the Play listing */
.banner { display:block; border-radius:28px; overflow:hidden; box-shadow:var(--shadow); }
.banner img { display:block; width:100%; height:auto; }
.banner:focus-visible { outline:3px solid var(--primary); outline-offset:4px; }

/* Landing: sections */
section.block { padding:3.5rem 0 0; }
.block h2 { font-size:clamp(1.6rem, 3.2vw, 2.2rem); margin:0 0 .5rem; }
.block > .wrap > p.sub { color:var(--muted); max-width:40rem; margin:0 0 2rem; font-size:1.05rem; }
.grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:1rem; }
@media (max-width:860px) { .grid { grid-template-columns:repeat(2, 1fr); } }
@media (max-width:560px) { .grid { grid-template-columns:1fr; } }
.feat { background:var(--surface); border:1px solid var(--line); border-radius:20px; padding:1.25rem; }
.feat h3 { font-size:1.05rem; margin:.85rem 0 .35rem; }
.feat p { margin:0; color:var(--muted); font-size:.95rem; }
.icon { width:44px; height:44px; border-radius:14px; background:var(--tint); color:var(--on-tint); display:grid; place-items:center; }
.icon svg { width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }

.privacy-band { background:var(--navy); color:#F4EDDF; border-radius:28px; padding:2.25rem; display:grid; grid-template-columns:.9fr 1.1fr; gap:2rem; }
.privacy-band h2 { color:#FFF7E6; }
.privacy-band p { color:#D9D2C3; }
.privacy-band a { color:var(--on-navy); font-weight:800; }
.privacy-band ul { list-style:none; margin:0; padding:0; display:grid; gap:.9rem; }
.privacy-band li { display:flex; gap:.75rem; align-items:flex-start; }
.privacy-band li svg { flex:none; width:22px; height:22px; margin-top:.15rem; fill:none; stroke:var(--on-navy); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
@media (max-width:760px) { .privacy-band { grid-template-columns:1fr; padding:1.5rem; border-radius:22px; } }

.faq { display:grid; gap:.75rem; max-width:48rem; }
.faq details { background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:0 1.1rem; }
.faq summary { cursor:pointer; font-weight:800; padding:1rem 0; list-style:none; display:flex; justify-content:space-between; gap:1rem; }
.faq summary::-webkit-details-marker { display:none; }
.faq summary::after { content:"+"; color:var(--accent); font-size:1.3rem; line-height:1; }
.faq details[open] summary::after { content:"−"; }
.faq details p { margin:0 0 1rem; color:var(--muted); }
.contact { margin-top:1.5rem; display:flex; flex-wrap:wrap; gap:.75rem; }

/* Landing: Tur Saku carousel. Scroll-snap works everywhere (swipe, trackpad, arrow keys when focused);
   browsers with CSS carousels (::scroll-button, ::scroll-marker) also draw arrows and progress segments. No script. */
.tour { position:relative; }
.tour-track {
  display:flex; gap:16px; overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth;
  overscroll-behavior-x:contain; padding-bottom:12px; scrollbar-width:thin; scrollbar-color:var(--line) transparent;
  scroll-marker-group:after;
}
.tour-track:focus-visible { outline:3px solid var(--primary); outline-offset:4px; border-radius:28px; }
.slide {
  flex:0 0 100%; scroll-snap-align:start; display:grid; grid-template-columns:minmax(0, 300px) 1fr; gap:2.5rem; align-items:center;
  background:var(--surface); border:1px solid var(--line); border-radius:28px; padding:2rem;
}
.slide-text .step { color:var(--accent); font-weight:800; font-size:.85rem; }
.slide-text h3 { font-size:clamp(1.4rem, 3vw, 1.9rem); margin:.4rem 0 .6rem; }
.slide-text p { color:var(--muted); font-size:1.05rem; margin:0 0 1rem; max-width:32rem; }
.slide-text .tip { display:flex; gap:.6rem; background:var(--tint); color:var(--fg); border-radius:14px; padding:.75rem .9rem; font-size:.95rem; }
.tip svg { flex:none; width:20px; height:20px; fill:none; stroke:var(--on-tint); stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
@media (max-width:760px) {
  .tour-track { gap:12px; }
  .slide { flex-basis:90%; grid-template-columns:1fr; gap:1.25rem; padding:1rem 1rem 1.25rem; border-radius:24px; }
  .slide-text p { font-size:1rem; }
}
.tour-hint { color:var(--muted); font-size:.85rem; font-weight:700; margin:.5rem 0 0; }
.tour-track::scroll-marker-group { display:flex; gap:6px; align-items:center; height:48px; margin-right:120px; }
.slide::scroll-marker { content:"" / attr(aria-label); width:28px; height:6px; border-radius:99px; background:var(--line); }
.slide::scroll-marker:target-current { background:var(--data1); }
.slide::scroll-marker:focus-visible { outline:3px solid var(--primary); outline-offset:3px; }
.tour-track::scroll-button(*) {
  position:absolute; bottom:0; width:48px; height:48px; border-radius:50%; border:1.5px solid var(--line);
  background:var(--surface); color:var(--fg); font:800 1.3rem/1 inherit; cursor:pointer;
}
.tour-track::scroll-button(*):disabled { opacity:.35; cursor:default; }
.tour-track::scroll-button(*):focus-visible { outline:3px solid var(--primary); outline-offset:3px; }
.tour-track::scroll-button(left) { content:"‹" / attr(data-prev); right:56px; }
.tour-track::scroll-button(right) { content:"›" / attr(data-next); right:0; }
@supports selector(::scroll-marker) { .tour-hint { display:none; } .tour-track { scrollbar-width:none; } }

/* Mini app screens inside the slides: drawn after the in-app tour (design/screens/P2Tour.html), one 4.5 s loop each */
.mini {
  position:relative; width:100%; max-width:300px; aspect-ratio:314/384; margin:0 auto; overflow:hidden;
  background:var(--bg); border:1px solid var(--line); border-radius:28px; padding:14px;
  display:flex; flex-direction:column; gap:8px; font-size:12px; line-height:1.3; font-weight:700;
}
.m-h { font-size:15px; font-weight:800; }
.m-label { color:var(--muted); font-size:11px; }
.m-amt { font-size:32px; font-weight:800; letter-spacing:-.02em; font-variant-numeric:tabular-nums; line-height:1.1; }
.m-amt span { color:var(--muted); font-size:18px; }
.m-chips { display:flex; flex-wrap:wrap; gap:6px; }
.m-chip { background:var(--tint); color:var(--on-tint); border-radius:99px; padding:3px 9px; font-size:10.5px; font-weight:800; }
.m-keys { flex:1; display:grid; grid-template-columns:repeat(3, 1fr); gap:6px; }
.m-keys span { background:var(--surface); border:1px solid var(--line); border-radius:10px; display:grid; place-items:center; font-size:14px; font-weight:800; }
.m-btn { background:var(--primary); color:var(--on-primary); border-radius:12px; padding:9px; text-align:center; font-weight:800; }
.m-btns { display:flex; gap:6px; } .m-btns span { flex:1; text-align:center; border:1px solid var(--line); border-radius:10px; padding:7px 0; }
.m-btns .m-btn { flex:1.4; border:0; padding:7px 0; }
.m-toast { position:absolute; left:14px; right:14px; bottom:14px; background:var(--fg); color:var(--bg); border-radius:12px; padding:9px 12px; font-weight:800; }
.m-card { background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:10px 12px; }
.m-hero { background:var(--hero); color:var(--on-hero); border-radius:16px; padding:12px; }
.m-hero small { font-size:11px; opacity:.85; }
.m-hero b { display:block; font-size:22px; letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
.m-row { display:flex; align-items:center; gap:10px; }
.m-row + .m-row { border-top:1px solid var(--line); margin-top:8px; padding-top:8px; }
.m-row > div { flex:1; min-width:0; }
.m-row small { display:block; color:var(--muted); font-size:10px; font-weight:600; }
.m-v { font-weight:800; font-variant-numeric:tabular-nums; white-space:nowrap; }
.m-v.out { color:var(--spend); } .m-v.in { color:var(--income); }
.m-ic { flex:none; width:26px; height:26px; border-radius:8px; display:grid; place-items:center; color:#fff; font-size:9px; font-weight:800; background:var(--data1); }
.m-ic.ok { background:var(--income); } .c-teal { background:#1F5F5B; } .c-clay { background:#8A3B1C; } .c-slate { background:#3F4A55; } .c-indigo { background:#3F5F99; }
.m-shot { display:flex; gap:10px; align-items:center; }
.m-shot i { flex:none; width:40px; height:52px; border-radius:8px; background:#2F7BEA; }
.m-shot p { margin:0; color:var(--muted); font-size:11px; font-weight:600; }
.m-toggle { flex:none; position:relative; width:30px; height:18px; border-radius:99px; background:var(--income); }
.m-toggle::after { content:""; position:absolute; top:3px; right:3px; width:12px; height:12px; border-radius:50%; background:#fff; }
.m-row.dim > :not(.m-toggle) { opacity:.45; }
.m-row.dim .m-toggle { background:var(--line); } .m-row.dim .m-toggle::after { right:15px; }
.m-section { color:var(--muted); font-size:10px; letter-spacing:.06em; text-transform:uppercase; }
.m-bars { display:flex; align-items:flex-end; gap:8px; height:118px; padding:12px 12px 0; }
.m-bars i { flex:1; border-radius:6px 6px 0 0; background:var(--data2); transform-origin:bottom; }
.m-bars i:nth-child(1) { height:50%; } .m-bars i:nth-child(2) { height:72%; } .m-bars i:nth-child(3) { height:60%; }
.m-bars i:nth-child(4) { height:84%; } .m-bars i:nth-child(5) { height:66%; } .m-bars i:nth-child(6) { height:96%; background:var(--data1); }
.m-months { display:flex; justify-content:space-around; color:var(--muted); font-size:10px; padding:4px 6px 0; }
.m-cat + .m-cat { margin-top:8px; }
.m-cat div { display:flex; justify-content:space-between; margin-bottom:4px; }
.m-meter { height:7px; border-radius:99px; background:var(--track); overflow:hidden; }
.m-meter i { display:block; height:100%; border-radius:99px; background:var(--data1); transform-origin:left; }
.w30 { width:30%; } .w45 { width:45%; } .w55 { width:55%; } .w72 { width:72%; } .w100 { width:100%; }
.m-meter i.over { background:var(--bad); }
.m-v.over { color:var(--bad); }
.m-tabs { display:flex; background:var(--surface-2); border-radius:10px; padding:3px; font-size:10.5px; }
.m-tabs span { flex:1; text-align:center; padding:5px 0; border-radius:8px; }
.m-tabs .on { background:var(--sel-bg); color:var(--sel-fg); }
.m-notif { position:absolute; top:14px; left:14px; right:14px; z-index:1; display:flex; gap:10px; align-items:center; box-shadow:var(--shadow); }
.m-notif p { margin:0; color:var(--muted); font-size:11px; font-weight:600; }
.m-q { align-self:flex-end; max-width:85%; background:var(--sel-bg); color:var(--sel-fg); border-radius:14px 14px 4px 14px; padding:8px 11px; }
.m-a b { display:block; font-size:22px; letter-spacing:-.02em; font-variant-numeric:tabular-nums; margin:2px 0 6px; }
.m-grid { flex:1; display:grid; grid-template-columns:repeat(3, 1fr); gap:10px; align-content:center; }
.m-grid .icon { margin:0 auto; width:56px; height:56px; border-radius:18px; }
.m-grid .icon svg { width:28px; height:28px; }
.m-logo { width:64px; height:64px; border-radius:18px; margin:6px auto 0; display:block; }
.m-center { text-align:center; }
.m-space { flex:1; }
/* Feature flags (feature_flag.md): a flagged slide ships with `hidden` and stays out of the carousel until released */
.slide[hidden] { display:none; }
/* Saku Pro slide: a dark card with a slow ochre shimmer, then Free vs Pro rows from the app's comparison table */
.m-pro { border-radius:16px; padding:14px; color:var(--sel-fg); background:linear-gradient(110deg, var(--sel-bg) 40%, #4A3514 50%, var(--sel-bg) 60%) 0 0 / 250% 100%; }
.m-pro b { display:block; font-size:22px; letter-spacing:-.02em; margin-top:6px; }
.m-pro small { font-size:11px; opacity:.85; }
.m-cmp { display:grid; grid-template-columns:1fr 56px 52px; gap:6px; align-items:center; font-size:11px; padding:6px 0; }
.m-cmp + .m-cmp { border-top:1px solid var(--line); }
.m-cmp span:nth-child(2), .m-cmp b { text-align:center; }
.m-cmp span:nth-child(2) { color:var(--muted); }
.m-cmp b { color:var(--accent); }
.m-cmp-h { color:var(--muted); font-size:10px; padding-top:0; }
.m-top { display:flex; justify-content:space-between; align-items:center; gap:8px; }

/* The loops. Base styles are the finished frame, so no-motion users see a complete screen. */
@keyframes m-tap { 0%, 100% { background:var(--surface); } 8% { background:var(--hero); } 16% { background:var(--surface); } }
@keyframes m-toast { 0%, 58% { opacity:0; transform:translateY(12px); } 64%, 92% { opacity:1; transform:none; } 100% { opacity:0; } }
@keyframes m-in1 { 0%, 12% { opacity:0; transform:translateY(8px); } 22%, 100% { opacity:1; transform:none; } }
@keyframes m-in2 { 0%, 26% { opacity:0; transform:translateY(8px); } 36%, 100% { opacity:1; transform:none; } }
@keyframes m-in3 { 0%, 46% { opacity:0; transform:translateY(8px); } 56%, 100% { opacity:1; transform:none; } }
@keyframes m-notif { 0% { transform:translateY(-130%); } 10%, 38% { transform:none; } 48%, 100% { transform:translateY(-130%); } }
@keyframes m-grow { 0%, 6% { transform:scaleY(0); } 30%, 100% { transform:scaleY(1); } }
@keyframes m-fill { 0%, 8% { transform:scaleX(0); } 40%, 100% { transform:scaleX(1); } }
@keyframes m-off { 0%, 40% { opacity:1; } 48%, 100% { opacity:.45; } }
@keyframes m-type { 0%, 4% { clip-path:inset(0 100% 0 0); } 34%, 100% { clip-path:inset(0); } }
@keyframes m-shine { 0% { background-position:100% 0; } 100% { background-position:-150% 0; } }
@keyframes m-pop { 0%, 5% { transform:scale(0); } 18%, 100% { transform:scale(1); } }
.mini .k3, .mini .k5, .mini .k000 { animation:m-tap 4.5s infinite; }
.mini .k5 { animation-delay:.45s; } .mini .k000 { animation-delay:.9s; }
.mini .m-toast { animation:m-toast 4.5s infinite; }
.mini .m-row.dim > :not(.m-toggle) { animation:m-off 4.5s infinite both; }
.mini .a1 { animation:m-in1 4.5s infinite both; } .mini .a2 { animation:m-in2 4.5s infinite both; } .mini .a3 { animation:m-in3 4.5s infinite both; }
.mini .m-notif { animation:m-notif 4.5s infinite both; }
.mini .m-bars i { animation:m-grow 4.5s infinite both; }
.mini .m-bars i:nth-child(2) { animation-delay:.08s; } .mini .m-bars i:nth-child(3) { animation-delay:.16s; }
.mini .m-bars i:nth-child(4) { animation-delay:.24s; } .mini .m-bars i:nth-child(5) { animation-delay:.32s; } .mini .m-bars i:nth-child(6) { animation-delay:.4s; }
.mini .m-meter i { animation:m-fill 4.5s infinite both; }
.mini .m-pro { animation:m-shine 4.5s linear infinite; }
.mini .m-cmp.a1 { animation:m-in1 4.5s infinite both; } .mini .m-cmp.a2 { animation:m-in2 4.5s infinite both; } .mini .m-cmp.a3 { animation:m-in3 4.5s infinite both; }
.mini .m-q { animation:m-type 4.5s steps(24) infinite both; }
.mini .m-grid .icon { animation:m-pop 4.5s infinite both; }
.mini .m-grid .icon:nth-child(2) { animation-delay:.1s; } .mini .m-grid .icon:nth-child(3) { animation-delay:.2s; }
.mini .m-grid .icon:nth-child(4) { animation-delay:.3s; } .mini .m-grid .icon:nth-child(5) { animation-delay:.4s; } .mini .m-grid .icon:nth-child(6) { animation-delay:.5s; }
@media (prefers-reduced-motion: reduce) {
  .tour-track { scroll-behavior:auto; }
  .mini, .mini * { animation:none !important; }
  .mini .m-toast, .mini .m-notif { display:none; }
}

/* Documents: privacy, terms, delete account */
.doc { max-width:44rem; margin:0 auto; padding:1.5rem 16px 0; }
.doc h1 { font-size:clamp(1.8rem, 4vw, 2.4rem); margin:1.5rem 0 .25rem; }
.doc h2 { font-size:1.2rem; margin:2rem 0 .25rem; }
.doc p, .doc li { margin:.5rem 0; }
.doc ul, .doc ol { padding-left:1.25rem; }
.doc .muted { color:var(--muted); font-size:.92rem; }
.doc .tabs { display:flex; flex-wrap:wrap; gap:.5rem; padding:1rem 0; border-bottom:1px solid var(--line); }
.doc .tabs a { padding:.35rem .85rem; border-radius:999px; background:var(--surface); border:1px solid var(--line); color:var(--fg); text-decoration:none; font-weight:700; font-size:.9rem; }
.doc section + section { margin-top:3.5rem; padding-top:1.5rem; border-top:1px solid var(--line); }
.doc section { scroll-margin-top:1rem; }
.note { background:var(--tint); color:var(--fg); border-radius:16px; padding:1rem 1.15rem; margin:1.25rem 0; }
.steps { counter-reset:s; list-style:none; padding:0 !important; }
.steps li { counter-increment:s; display:flex; gap:.85rem; align-items:flex-start; margin:.75rem 0; }
.steps li::before { content:counter(s); flex:none; width:28px; height:28px; border-radius:50%; background:var(--hero); color:var(--on-hero); font-weight:800; display:grid; place-items:center; font-size:.9rem; }

.lost { text-align:center; padding:5rem 16px 2rem; }
.lost h1 { font-size:2.2rem; margin:.5rem 0; }
.lost .muted { color:var(--muted); }