/* DANARA — warm product-led design, based on the owner's visual reference. */
:root { --cs-bg:#faf8f2; --cs-acc:#164e3d; --cs-ink:#17231d; --cs-body:#555e54; --cs-line:#e6e5da; --cs-soft:#f1f0e7; --cs-sage:#e5ede2; }
html { scroll-padding-top:0; }
main#atas,main>section[id],#tabungan { scroll-margin-top:82px; }
body { background:var(--cs-bg); }
.wrap { max-width:1240px; padding-inline:40px; }
.section { padding-block:88px; }
.h1, .section .h2, .band .h2, .money-story .h2, .closing .h2 { font-family:"DM Sans",sans-serif; font-weight:750; letter-spacing:-.055em; line-height:1.08; text-transform:none; text-wrap:balance; }
.section .h2, .money-story .h2 { font-size:clamp(32px,3.7vw,48px); }
.h2 span { color:var(--cs-acc); }
.eyebrow { display:inline-flex; margin:0 0 18px; padding:5px 10px; border-radius:30px; background:#eaece3; color:#526052; font-size:9px; font-weight:600; letter-spacing:.13em; line-height:1.4; text-transform:uppercase; }
.lead { font-size:16px; line-height:1.7; color:var(--cs-body); }
.section__head { max-width:650px; margin-bottom:36px; }
.section__head .lead { margin-top:18px; max-width:56ch; }
.btn { display:inline-flex; gap:13px; align-items:center; justify-content:center; border-radius:999px; min-height:46px; font-size:12px; padding:12px 21px; text-decoration:none; }
.btn svg,.text-link svg { width:16px; height:16px; fill:none; stroke:currentColor; }
.btn--primary { background:var(--cs-acc); color:#fffdf7; box-shadow:0 6px 16px #143e3110; }
.btn--primary:hover { background:#0e3a2d; transform:translateY(-2px); }
.btn--lg { min-height:49px; font-size:13px; }
.text-link { display:inline-flex; align-items:center; gap:10px; font-size:13px; color:var(--cs-acc); font-weight:600; text-underline-offset:5px; }
.nav { background:#faf8f2f5; color:var(--cs-ink); backdrop-filter:blur(14px); border-bottom:1px solid transparent; }
.nav .brand,.nav .nav__link { color:var(--cs-ink); }
.nav .brand { font-size:14px; letter-spacing:.02em; margin-right:30px; }
.nav .brand img { width:34px; height:34px; }
.nav__inner { min-height:82px; gap:18px; }
.nav__links { display:flex; margin-right:auto; gap:13px; }
.nav .nav__link { font-size:11px; padding:8px 3px; }
.nav .btn--primary { background:var(--cs-acc); color:white; font-size:11px; min-height:40px; }
.nav-login { color:var(--cs-body); font-size:11px; text-decoration:none; }
.motion-switch,.nav-toggle { flex:none; display:grid; place-items:center; height:36px; width:36px; border:1px solid #e8e8de; background:#efefe5; color:var(--cs-acc); border-radius:50%; cursor:pointer; }
.motion-switch[hidden] { display:none; }
.motion-switch svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.7; }
.nav-toggle { display:none; }
.hero--reference { position:relative; overflow:hidden; padding:44px 0 0; background:var(--cs-bg); color:var(--cs-ink); }
.hero--reference .hero__grid { display:grid; grid-template-columns: .91fr 1.25fr; align-items:center; gap:0; min-height:520px; }
.hero__copy { display:block; position:relative; z-index:2; padding-bottom:35px; }
.hero--reference .h1 { font-size:clamp(42px,4.4vw,62px); line-height:1.04; margin:0 0 24px; }
.hero--reference .lead { margin:0; max-width:380px; font-size:17px; line-height:1.6; color:#354237; }
.hero--reference .hero__actions { display:flex; gap:12px; margin-top:27px; }
.btn--demo { color:#26372b; background:#efeee4; border:1px solid transparent; }
.play-icon { display:grid; place-items:center; width:22px; height:22px; border-radius:50%; background:#1c2d24; color:#fff; font-size:8px; padding-left:2px; }
.hero-trust { display:flex; align-items:center; gap:10px; margin:24px 0 0; color:#697367; font-size:11px; line-height:1.6; }
.hero-trust svg { flex:none; width:29px; height:29px; border-radius:50%; padding:7px; background:#e2ebdf; fill:none; stroke:var(--cs-acc); }
.hero-product { position:relative; height:510px; min-width:0; margin-right:-70px; }
.ribbon-art { pointer-events:none; user-select:none; }
.hero-ribbon { position:absolute; width:820px; height:auto; max-width:none; right:-150px; top:-80px; transform:rotate(-22deg); opacity:.85; }
.hero-laptop { position:absolute; width:650px; right:-5px; top:65px; transform:perspective(1300px) rotateY(-12deg) rotateZ(-6deg); filter:drop-shadow(0 22px 20px #13291f20); }
.hero-laptop .laptop-base { height:12px; }
.hero-laptop .laptop-base>span { height:4px; }
.hero-laptop .laptop-device { animation:none; }
.wallet-peek { position:absolute; z-index:3; width:235px; bottom:-12px; left:24%; padding:19px; border:1px solid #fff; border-radius:19px; background:#fafaf5f5; box-shadow:0 12px 35px #28392a25; transform:rotate(3deg); }
.wallet-peek__heading { display:flex; align-items:center; gap:9px; font-size:12px; font-weight:700; }
.wallet-peek__heading>svg { width:23px; height:23px; stroke:var(--cs-acc); fill:none; }
.wallet-peek small { display:block; font-size:8px; color:#7b8277; font-weight:400; }
.wallet-peek__types { display:flex; gap:7px; margin:14px 0; font-size:8px; }
.wallet-peek__types span { padding:4px 8px; background:#f0f0e7; border-radius:20px; }
.wallet-peek__types span:first-child { background:#19503d; color:white; }
.wallet-peek__label { font-size:8px; color:#737e70; }
.wallet-peek>strong { display:block; font-size:10px; padding:6px 8px; margin-top:4px; border:1px solid #e9eadf; border-radius:6px; background:white; }
.wallet-peek__fields { display:flex; justify-content:space-between; margin:10px 0 13px; }
.wallet-peek__fields b { font-size:10px; font-weight:500; }
.wallet-peek__done { display:flex; align-items:center; gap:5px; font-size:9px; color:#2a654b; }
.wallet-peek__done svg { width:13px; height:13px; stroke:currentColor; fill:none; }
.hand-note { font-family:"Caveat",cursive; font-size:22px; line-height:1.15; color:#506353; transform:rotate(8deg); }
.hand-note svg { width:75px; height:46px; fill:none; stroke:currentColor; stroke-width:1.3; stroke-linecap:round; }
.hero-note { position:absolute; right:8px; bottom:4px; font-size:20px; }
.account-strip { padding-block:30px 39px; }
.account-strip>span { display:block; font-size:9px; letter-spacing:.14em; text-transform:uppercase; color:#8b9185; }
.account-strip ul { display:flex; flex-wrap:wrap; gap:25px; list-style:none; padding:0; margin:13px 0 0; }
.account-strip li { display:flex; align-items:center; gap:7px; font-size:11px; color:#536151; }
.account-strip svg { width:14px; height:14px; fill:none; stroke:currentColor; }
.money-story { position:relative; overflow:hidden; color:#faf8f2; background:#0b211a; padding:75px 0 85px; border-radius:48% 0 45% 0 / 4% 0 5% 0; }
.money-story__grid { display:grid; grid-template-columns:.9fr 1.1fr; gap:70px; align-items:center; }
.money-story .eyebrow { background:transparent; color:#c5d5c8; border:1px solid #65827155; }
.money-story .h2 { margin:0 0 23px; font-size:49px; }
.money-story .h2 span { color:#a1cbb0; }
.money-story__grid>div>p:last-child { color:#cad5c9; font-size:14px; line-height:1.75; max-width:360px; }
.receipt-scene { position:relative; min-height:320px; }
.floating-receipt { position:absolute; z-index:2; display:flex; align-items:flex-start; gap:12px; width:190px; padding:17px; background:#faf9f1; color:#26352b; border-radius:18px; box-shadow:0 15px 30px #0003; animation:gentle-float 8s ease-in-out infinite; }
.receipt-one { left:10%; top:0; transform:rotate(-6deg); }
.receipt-two { left:36%; top:98px; animation-delay:-2s; rotate:5deg; }
.receipt-three { left:0; top:187px; animation-delay:-4s; rotate:-7deg; }
.receipt-four { left:49%; top:245px; animation-delay:-6s; rotate:-5deg; }
.floating-receipt b,.floating-receipt strong,.floating-receipt small { display:block; }
.floating-receipt b { font-size:11px; font-weight:600; }
.floating-receipt strong { font-size:10px; font-weight:500; color:#b46a4e; margin:3px 0; }
.floating-receipt small { font-size:8px; color:#858b80; }
.receipt-icon { padding:7px; border-radius:10px; background:#e9dfc9; color:#665234; }
.receipt-icon svg { width:20px; height:20px; fill:none; stroke:currentColor; }
.receipt-icon--orange { color:#b36c40; background:#f3e7d4; }.receipt-icon--rose { color:#ac7663; background:#f0e3db; }.receipt-icon--green { color:#477461; background:#dfece2; }
.receipt-thought { position:absolute; right:0; top:0; padding:20px; border:1px solid #8cae9e30; border-radius:28px 28px 28px 0; font-size:12px; color:#bfd1c3; text-align:center; transform:rotate(-5deg); }
.receipt-orbit { position:absolute; inset:15% 0 0 10%; border:35px solid #c7e2c80c; border-radius:45%; transform:rotate(-30deg); }
.overview-section { padding-top:90px; }
.overview-grid { display:grid; grid-template-columns:.95fr 1.15fr; align-items:center; gap:40px; }
.overview-copy>p:not(.eyebrow) { max-width:390px; color:var(--cs-body); font-size:15px; line-height:1.75; margin:22px 0; }
.overview-devices { position:relative; }
.overview-devices .device-showcase { max-width:540px; }
.overview-devices .device-showcase__stage { aspect-ratio:1.3; }
.overview-devices .device-preview--laptop { top:15%; }
.overview-devices .device-preview--phone { top:7%; width:30%; left:69%; }
.overview-devices .device-showcase[data-active-device="laptop"] .device-preview--phone { transform:translateX(-250%) translateY(-1%) rotateY(8deg) rotateZ(-7deg) scale(.9); }
.overview-devices .device-showcase[data-active-device="laptop"] .device-preview--laptop { transform:translateX(14%) rotateY(-5deg) rotateZ(3deg); }
.overview-devices .hand-note { position:absolute; right:0; top:-30px; font-size:19px; z-index:3; }
.overview-devices .device-showcase__halo { opacity:.4; }
.feature-tiles { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-top:36px; }
.feature-tile { display:block; padding:24px; border:1px solid #ecece2; border-radius:23px; background:#fdfcf7; text-decoration:none; box-shadow:0 10px 28px #34412804; transition:transform 200ms ease,box-shadow 200ms ease; }
.feature-tile:hover { transform:translateY(-4px); box-shadow:0 12px 24px #28452d0c; }
.feature-tile>span { display:grid; place-items:center; width:42px; height:42px; border-radius:13px; background:#e0edde; color:#1b5d42; }
.feature-tile:nth-child(2)>span { color:#b06b43; background:#f5e6d8; }.feature-tile:nth-child(4)>span { color:#4e7f9d; background:#e3edf0; }
.feature-tile svg { width:23px; height:23px; fill:none; stroke:currentColor; }
.feature-tile h3 { margin:17px 0 7px; font-size:15px; letter-spacing:-.02em; }
.feature-tile p { margin:0; font-size:12px; line-height:1.65; color:#737b6e; }
.hero-ribbon { animation:ribbon-breathe 18s ease-in-out infinite; }
[data-atmosphere]:not([data-decorative-running="true"]) .floating-receipt,
[data-atmosphere]:not([data-decorative-running="true"]) .hero-ribbon,
[data-atmosphere]:not([data-decorative-running="true"]) .phone-device,
[data-atmosphere]:not([data-decorative-running="true"]) .laptop-device { animation-play-state:paused; }
@keyframes gentle-float { 0%,100% { translate:0 0; }50% { translate:0 -12px; } }
@keyframes ribbon-breathe { 0%,100% { transform:rotate(-22deg) translateY(0); }50% { transform:rotate(-19deg) translateY(-12px); } }
@media(max-width:1050px) {
 .nav__links { gap:6px; }.nav__inner { gap:12px; }.nav .brand { margin-right:12px; }
 .hero--reference .h1 { font-size:45px; }.hero-laptop { width:530px; right:-60px; top:85px; }.hero-product { height:490px; margin-right:-25px; }.hero-ribbon { width:700px; }.wallet-peek { left:10%; width:220px; bottom:12px; }.hero-note { display:none; }
 .money-story__grid { gap:35px; }.receipt-thought { right:-10px; top:0; font-size:10px; padding:13px; }.floating-receipt { width:160px; padding:14px; }.money-story .h2 { font-size:42px; }
 .overview-grid { gap:22px; }.feature-tile { padding:20px; }
}
@media(max-width:759px) {
 .wrap { padding-inline:22px; }.section { padding-block:58px; }.section .h2,.money-story .h2 { font-size:35px; }
 .nav__inner { min-height:70px; gap:10px; }.nav .brand { margin-right:auto; font-size:13px; }.nav .brand img { width:30px; height:30px; }.nav-login { display:none; }.nav-start svg { display:none; }.nav .nav-start { font-size:10px; min-height:38px; padding:9px 14px; }.motion-switch { width:30px; height:30px; }.nav-toggle { display:grid; width:30px; height:30px; background:transparent; border:0; }.nav-toggle svg { width:20px; height:20px; stroke:currentColor; fill:none; stroke-width:1.5; }
 .nav__links { display:none; position:absolute; left:16px; right:16px; top:64px; padding:16px; background:#fcfbf6; border:1px solid #e3e7dc; border-radius:16px; box-shadow:0 14px 30px #193d2615; }
 .nav[data-menu-open="true"] .nav__links { display:flex; flex-direction:column; align-items:stretch; }.nav .nav__link { padding:10px 12px; font-size:13px; }
 .hero--reference { padding-top:32px; }.hero--reference .hero__grid { grid-template-columns:1fr; min-height:0; gap:0; }.hero__copy { padding:0; }.hero--reference .h1 { font-size:clamp(40px,7.8vw,58px); max-width:560px; margin-bottom:20px; }.hero--reference .lead { font-size:15px; max-width:350px; }.hero--reference .hero__actions { margin-top:23px; gap:10px; }.hero__actions .btn { min-height:46px; padding:11px 16px; font-size:11px; }.hero-trust { font-size:10px; margin-top:19px; }
 .hero-product { height:420px; width:100%; max-width:560px; margin:25px auto 0; }.hero-laptop { width:100%; right:-7%; top:45px; }.hero-ribbon { width:660px; right:-170px; top:-90px; }.wallet-peek { width:200px; padding:16px; left:25%; bottom:0; }.account-strip { padding-block:20px 32px; }.account-strip ul { gap:13px 18px; }.account-strip li { font-size:10px; }
 .money-story { padding:55px 0 65px; border-radius:45% 0 45% 0 / 2% 0 2% 0; }.money-story__grid { grid-template-columns:1fr; gap:38px; }.money-story__grid>div>p:last-child { font-size:14px; }.receipt-scene { min-height:310px; width:100%; max-width:480px; margin:auto; }.receipt-thought { top:0; right:0; font-size:10px; }.receipt-one { left:4%; }.receipt-two { left:41%; top:95px; }.receipt-three { top:181px; }.receipt-four { left:44%; top:242px; }
 .overview-grid { grid-template-columns:1fr; gap:45px; }.overview-copy>p:not(.eyebrow) { font-size:14px; }.overview-devices { max-width:540px; width:100%; margin:auto; }.overview-devices .hand-note { right:6px; font-size:17px; }.feature-tiles { grid-template-columns:repeat(2,1fr); gap:12px; margin-top:20px; }.feature-tile { padding:19px 16px; }.feature-tile h3 { font-size:13px; }.feature-tile p { font-size:11px; }.feature-tile>span { height:36px; width:36px; }
}
@media(max-width:420px) { .hero-product { height:330px; }.hero-ribbon { width:540px; right:-150px; top:-70px; }.hero-laptop { top:30px; }.wallet-peek { width:178px; left:23%; padding:13px; bottom:0; }.wallet-peek__types { gap:4px; }.wallet-peek__types span { padding-inline:6px; }.wallet-peek__heading { font-size:11px; }.wallet-peek__fields b { font-size:8px; }.hero__actions .btn { padding-inline:14px; font-size:10px; }.receipt-thought { max-width:143px; }.floating-receipt { width:150px; padding:13px; }.receipt-two { left:45%; }.receipt-four { left:47%; } }
@media(prefers-reduced-motion:reduce) { .hero-ribbon,.floating-receipt { animation:none; }.motion-switch { display:none; }.feature-tile { transition:none; } }

/* Product demonstrations keep their own tested data and controls. */
.bulk-scene { padding-block:30px 55px; background:var(--cs-bg); }
.bulk-layout { display:grid; grid-template-columns:.85fr 1.15fr; align-items:center; gap:35px; padding:55px 45px; background:#f0f0e7; border:1px solid #ebebe1; border-radius:32px; }
.bulk-copy>p:not(.eyebrow):not(.hand-note) { font-size:14px; line-height:1.75; color:var(--cs-body); max-width:320px; margin:20px 0; }
.bulk-copy .h2 { font-size:40px; }
.bulk-tip code { padding:3px 5px; border-radius:4px; background:#e2e8dc; color:#28553e; font-family:"DM Mono",monospace; font-size:11px; }
.bulk-copy .hand-note { margin-top:30px; font-size:24px; rotate:-10deg; }
.bulk-art { min-width:0; }
.bulk-scene .demo { display:block; position:relative; min-height:490px; }
.bulk-scene .demo>.ui:first-child { position:absolute; top:76px; left:-8px; z-index:2; width:206px; border:1px solid #e1e6d8; border-radius:16px; box-shadow:0 18px 30px #203d251c; transform:rotate(-6deg); }
.bulk-scene .demo>.ui:last-child { position:relative; width:310px; margin-left:auto; min-height:480px; border:6px solid #26342c; border-radius:32px; padding-top:16px; box-shadow:0 20px 32px #203d2520; }
.bulk-scene .demo>.ui:last-child::before { content:""; position:absolute; top:5px; left:calc(50% - 26px); width:52px; height:6px; border-radius:10px; background:#26342c; }
.bulk-scene .demo__arrow { display:none; }
.bulk-scene .typed { padding:16px; min-height:140px; font-size:10px; line-height:2.1; }
.bulk-scene .demo .ui__bar { padding:13px 14px; }.bulk-scene .demo .ui__title { font-size:11px; }.bulk-scene .demo .tag,.bulk-scene .demo .ui__hint { font-size:8px; }
.bulk-scene .demo .row { padding:13px 12px; gap:8px; }.bulk-scene .demo .row__title { font-size:11px; }.bulk-scene .demo .row__meta { font-size:8px; }.bulk-scene .demo .row__value { font-size:10px; }.bulk-scene .demo .row__icon { width:27px; height:27px; border-radius:8px; }
.bulk-scene .demo .ui__foot { font-size:9px; padding:11px 13px; }.bulk-scene .demo .check { padding:10px 12px; font-size:9px; }.bulk-scene .demo__save { min-height:36px; font-size:10px; background:var(--cs-acc); }.bulk-scene .demo__savebar { padding:10px 12px 0; }
.bulk-scene .demo__controls { padding:0; margin-top:16px; justify-content:flex-end; gap:10px; }.bulk-scene .demo__steps { font-size:9px; gap:3px; }.bulk-scene .demo__steps span { padding:5px 8px; }.bulk-scene .demo-motion-toggle { min-height:34px; font-size:9px; padding:6px 10px; background:transparent; }
.wallet-layout { display:grid; grid-template-columns:.95fr 1fr; gap:100px; align-items:center; }
.wallet-copy>p:not(.eyebrow) { font-size:15px; line-height:1.8; color:var(--cs-body); max-width:390px; margin:20px 0; }
.wallet-stage { background:#e9eee3; padding:40px 30px; border-radius:30px; }
.wallet-demo { transform:rotate(-3deg); max-width:410px; }
.wallet-selected { background:#154b38; padding:25px 20px; }
.wallet-scene .feature-controls { max-width:390px; }
.feature-controls { margin-top:22px; padding-top:16px; gap:8px; }
.feature-controls>span { font-size:10px; }.feature-controls button { font-size:10px; min-height:36px; }
.currency-pair { display:flex; align-items:center; gap:12px; margin-top:23px; }.currency-pair>span { display:grid; place-items:center; width:42px; height:42px; border:1px solid #cbd9c5; background:#e9f0e3; color:var(--cs-acc); border-radius:50%; font-size:18px; }.currency-pair>i { font-style:normal; color:#83957d; }
.planning-section { background:#f2f2e9; border-radius:45% 0 45% 0 / 1.5% 0 1.5% 0; }
.planning-section>.wrap>.section__head { margin-inline:auto; text-align:center; max-width:750px; margin-bottom:44px; }
.planning-grid { display:grid; grid-template-columns:1fr 1fr; gap:30px; align-items:start; }
.planning-card { min-width:0; padding:30px; border:1px solid #e4e6d9; border-radius:25px; background:#fafaf4; }
.planning-copy { min-height:145px; }.planning-copy h3 { margin:12px 0 12px; font-size:25px; letter-spacing:-.04em; line-height:1.15; font-weight:650; }.planning-copy p { margin:0 0 25px; font-size:13px; line-height:1.7; color:var(--cs-body); }.feature-number { font-size:9px; letter-spacing:.08em; text-transform:uppercase; color:#799176; }
.planning-card .duo__visual { padding:0; background:transparent; }.planning-card .ui { transform:none; border-radius:18px; box-shadow:0 10px 22px #29492a07; }.planning-card .ui__title { font-size:12px; }.planning-card .ui__foot { font-size:10px; background:#f1f2e9; }.planning-card .cats { gap:9px; }.planning-card .cat__head { font-size:10px; }.planning-card .mode-label { font-size:8px; margin-bottom:9px; }
.planning-card .feature-controls { border:0; }.planning-note { margin:18px 0 0; font-size:10px; color:#89917f; }
.planning-card .ui__bar { padding-block:11px; }.planning-card .ui__body { padding-block:12px; }.planning-card .seg span { min-height:29px; font-size:11px; }.planning-card .budget-demo-event { padding:10px 13px; margin:0 14px 12px; font-size:10px; }.planning-card .ui__foot { margin:0; padding:10px 14px; }.planning-card .cats { display:grid; grid-template-columns:1fr 1fr; gap:12px 17px; }.planning-card .cat__head { display:grid; gap:2px; }.planning-card .cat__head .num { font-size:8px; }.planning-card .meter__line { font-size:11px; }
.planning-card .row { padding:14px; }.planning-card .row__title { font-size:12px; }.planning-card .row__meta { font-size:9px; }.planning-card .row__value { font-size:11px; }
.getting-started .section__head { max-width:none; }.getting-started .lead { font-size:14px; margin-top:12px; }
.steps { gap:24px; }.step { position:relative; padding:25px; border:1px solid #e8e9df; border-radius:22px; background:#fcfbf6; box-shadow:0 8px 24px #2d402905; gap:5px; }.step:not(:last-child)::after { content:"→"; position:absolute; right:-20px; top:50%; color:#7d9b7f; font-size:22px; }
.step-top { display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; }.step__num { margin:0; width:auto; height:auto; border:0; font-family:"DM Sans",sans-serif; font-size:31px; font-weight:700; color:var(--cs-acc); }.step-top svg { width:34px; height:34px; padding:8px; background:#e4eddf; border-radius:10px; fill:none; stroke:var(--cs-acc); }.step h3 { margin:0; font-size:17px; letter-spacing:-.025em; }.step p { font-size:12px; color:#7a8374; line-height:1.7; margin:4px 0 0; }
.reports-section { padding-top:20px; }.report-layout { display:grid; grid-template-columns:1fr 1fr; gap:85px; align-items:center; }.report-showcase { padding:28px; border-radius:28px; background:#10382b; box-shadow:0 20px 35px #173b2417; transform:rotate(-2deg); }.report-showcase>.ui { border:0; border-radius:17px; }.report-showcase .ui__body { padding:22px; }.report-showcase h3 { margin:0; font-size:17px; letter-spacing:-.02em; }.report-showcase .ui__body>p { font-size:12px; line-height:1.7; color:var(--cs-body); }.report-demo__stage { min-height:340px; margin-top:20px; }.report-preview__page { height:315px; }.report-showcase .feature-controls { margin-top:16px; }.report-showcase .report-open { font-size:10px; }
.report-copy>.h2 { font-size:45px; }.report-copy>p:not(.eyebrow) { color:var(--cs-body); font-size:14px; line-height:1.8; max-width:400px; margin:24px 0; }.report-copy .report-copy__hint { font-family:"Caveat",cursive; font-size:22px; color:#667e61; rotate:2deg; }
.report-copy>.ui { margin-top:28px; box-shadow:none; background:#f2f3e9; border-color:#e1e7d7; border-radius:19px; max-width:410px; }.report-copy>.ui .ui__body { padding:22px; }.report-copy>.ui h3 { margin:0; font-size:16px; }.report-copy>.ui p { font-size:11px; color:var(--cs-body); }.report-copy .mini { font-size:11px; }.report-copy .record-input { min-width:105px; min-height:32px; }.report-copy .feature-controls { margin-top:12px; padding-top:12px; }
.stories-section { padding-block:70px; }.stories-section .stories-intro .h2 { font-size:38px; font-weight:700; line-height:1.15; }.stories-intro__text { font-size:13px; }.story-card { border-radius:22px; border-color:#e5e7db; box-shadow:0 8px 25px #20382005; }.story-card__text { font-size:13px; line-height:1.8; }.stories-note { font-size:10px; }.stories-intro { margin-bottom:32px; }
.privacy-section { background:transparent; padding-top:25px; }.privacy-panel { border-radius:26px; box-shadow:none; background:#fbfcf6; border-color:#dfe6d5; }.privacy-intro { background:#e9efe2; padding:38px; }.privacy-intro h2 { font-size:44px; }.privacy-emblem { margin-bottom:20px; }.privacy-lead { font-size:13px; }.privacy-questions { padding:12px 32px; }.privacy-questions summary { font-size:13px; min-height:72px; }.privacy-answer p { font-size:12px; }
.faq-section { padding-top:15px; }.faq-section>.wrap { display:grid; grid-template-columns:.7fr 1fr; gap:90px; align-items:start; }.faq-section .section__head { position:sticky; top:110px; }.faq-section .h2 { font-size:41px; }.faq-section .lead { font-size:14px; }.faq summary { font-size:13px; min-height:64px; }.faq p { font-size:12px; }
.closing-section { position:relative; overflow:hidden; background:#0f3024; color:#faf8f2; padding:60px 0 0; border-radius:40% 45% 0 0 / 6% 7% 0 0; }.closing-grid { display:grid; grid-template-columns:1fr 1fr; gap:30px; align-items:center; min-height:480px; }.closing-copy { padding-block:30px 60px; position:relative; z-index:2; }.closing-copy .eyebrow { background:#244938; color:#c4d6c2; }.closing-copy .h2 { font-family:"DM Sans",sans-serif; font-size:50px; font-weight:700; letter-spacing:-.05em; line-height:1.1; margin:0 0 23px; }.closing-copy>p:not(.eyebrow):not(.hand-note) { color:#d2dfcd; font-size:14px; line-height:1.8; margin:0 0 26px; }.closing-copy .btn { background:#faf8ee; color:#1c4937; }.closing-copy .hand-note { font-size:22px; color:#c3d4bf; position:absolute; left:220px; bottom:40px; }
.closing-art { position:relative; height:490px; }.closing-ribbon { position:absolute; width:900px; max-width:none; top:-120px; right:-250px; opacity:.55; rotate:10deg; }.closing-phone { position:absolute; width:235px; top:20px; left:0; rotate:-7deg; z-index:2; filter:drop-shadow(0 15px 20px #0005); }.closing-phone--dark { top:65px; left:220px; rotate:9deg; z-index:1; }.closing-phone img { width:100%; height:auto; }.closing-phone__status { display:flex; align-items:center; justify-content:space-between; gap:20px; height:22px; font-size:8px; padding-inline:15px; }.closing-phone__status i { width:55px; height:13px; border-radius:20px; background:#17221b; }.closing-phone--dark .phone-screen { background:#080f0b; color:#f7f7ef; }.closing-phone--dark .closing-phone__status i { background:#020504; }.closing-phone .phone-device { animation:gentle-float 8s ease-in-out infinite; }.closing-phone--dark .phone-device { animation-delay:-4s; }
.footer { background:#0f3024; border-top:1px solid #ffffff12; padding-block:23px; }.footer__inner { gap:25px; font-size:10px; }.footer .brand { color:#eef4e7; font-size:12px; margin-right:0; letter-spacing:.05em; }.footer .brand img { width:28px; height:28px; }.footer__meta { margin-left:auto; gap:22px; }
@media(max-width:1099px) {
 .bulk-layout { padding:35px 28px; gap:20px; grid-template-columns:.8fr 1.2fr; }.bulk-copy .h2 { font-size:34px; }.bulk-scene .demo>.ui:first-child { width:180px; left:-5px; }.bulk-scene .demo>.ui:last-child { width:285px; }.bulk-scene .typed { font-size:9px; }.wallet-layout { gap:40px; }.planning-card { padding:24px; }.report-layout { gap:45px; }.report-copy>.h2 { font-size:38px; }.report-showcase { padding:20px; }.faq-section>.wrap { gap:45px; }.closing-phone { width:205px; }.closing-phone--dark { left:175px; }.closing-copy .h2 { font-size:44px; }
}
@media(max-width:899px) and (min-width:760px) {
 .hero--reference .hero__grid { grid-template-columns: .95fr 1.05fr; }
 .hero--reference .h1 { font-size:42px; }
 .hero--reference .lead { font-size:15px; }
 .hero-product { height:450px; margin-right:0; }
 .hero-laptop { width:420px; right:-65px; top:85px; }
 .wallet-peek { width:185px; left:21%; bottom:10px; padding:15px; }
 .wallet-peek__types { flex-wrap:wrap; gap:4px; }
 .wallet-peek__types span { white-space:nowrap; }
 .bulk-layout { grid-template-columns:1fr; }.bulk-copy { display:grid; grid-template-columns:1fr 1fr; gap:0 30px; }.bulk-copy .eyebrow { grid-column:1 / -1; justify-self:start; }.bulk-copy .hand-note { display:none; }.bulk-copy .h2 { grid-row:2 / span 3; }.bulk-art { max-width:580px; width:100%; margin:25px auto 0; }.bulk-scene .demo>.ui:first-child { width:230px; }.bulk-scene .demo>.ui:last-child { width:320px; }.bulk-scene .typed { font-size:11px; }
 .planning-grid { gap:16px; }.planning-card { padding:20px 16px; }.planning-copy { min-height:190px; }.planning-copy h3 { font-size:22px; }.planning-card .row { gap:7px; }.planning-card .row__value { font-size:10px; }.planning-card .meter__line { font-size:10px; }.planning-card .ui__body { padding:13px; }
 .report-layout { gap:25px; }.report-showcase { padding:16px; }.report-showcase .ui__body { padding:16px; }.report-copy>.h2 { font-size:33px; }.report-months button { min-width:42px; }.report-history { padding:13px; }.report-history__row { font-size:10px; }.report-history__row .num { font-size:9px; }.report-copy .ui__body { padding:16px!important; }.closing-phone { width:180px; }.closing-phone--dark { left:140px; }.closing-copy .hand-note { display:none; }
}
@media(max-width:759px) {
 .bulk-scene { padding:0 0 30px; }.bulk-layout { display:block; padding:30px 20px; border-radius:24px; }.bulk-scene>.wrap { padding-inline:12px; }.bulk-copy .h2 { font-size:33px; }.bulk-copy>p:not(.eyebrow):not(.hand-note) { font-size:13px; max-width:400px; }.bulk-copy .hand-note { display:none; }.bulk-art { max-width:490px; margin:32px auto 0; }.bulk-scene .demo { min-height:0; }.bulk-scene .demo>.ui:first-child { position:relative; width:100%; top:auto; left:auto; transform:none; margin-bottom:18px; border-radius:14px; }.bulk-scene .typed { min-height:117px; padding:13px 16px; font-size:11px; }.bulk-scene .demo>.ui:first-child .ui__foot { font-size:10px; }.bulk-scene .demo>.ui:last-child { width:100%; max-width:340px; margin-inline:auto; }.bulk-scene .demo__controls { justify-content:space-between; }.bulk-scene .demo>.ui:last-child .row { padding-block:15px; }.bulk-scene .demo .row__title { font-size:12px; }.bulk-scene .demo .row__value { font-size:11px; }.bulk-scene .demo .row__meta { font-size:9px; }
 .wallet-layout { grid-template-columns:1fr; gap:30px; }.wallet-copy>p:not(.eyebrow) { font-size:14px; }.wallet-stage { padding:32px 20px; }.wallet-demo { max-width:430px; }.wallet-copy .feature-controls { max-width:none; }.currency-pair { margin-top:20px; }
 .planning-grid { grid-template-columns:1fr; gap:22px; }.planning-card { padding:24px 19px; }.planning-copy { min-height:0; }.planning-copy h3 { font-size:25px; }.planning-section>.wrap>.section__head { text-align:left; margin-bottom:32px; }.planning-card .duo__visual { max-width:440px; margin:auto; }.planning-card .feature-controls { margin-top:14px; }
 .steps { grid-template-columns:1fr; gap:16px; }.step { padding:22px; }.step:not(:last-child)::after { content:none; }.step-top { margin-bottom:8px; }.step__num { font-size:28px; }.step p { max-width:400px; }.getting-started .h2 { font-size:32px; }
 .report-layout { grid-template-columns:1fr; gap:35px; }.report-copy { display:contents; }.report-copy>.eyebrow { grid-row:1; justify-self:start; margin:0; }.report-copy>.h2 { grid-row:2; margin: -20px 0 0; font-size:35px; }.report-copy>p:not(.eyebrow) { grid-row:3; margin:-16px 0 0; }.report-copy>.report-copy__hint { display:none; }.report-showcase { padding:20px; transform:none; max-width:500px; width:100%; margin:auto; }.report-copy>.ui { margin:0; max-width:none; }.report-showcase .ui__body { padding:18px; }.report-demo__stage { min-height:330px; }
 .stories-section { padding-block:45px; }.stories-section .stories-intro .h2 { font-size:32px; }.stories-intro__text { font-size:13px; }.story-card__text { font-size:13px; }.stories-intro { margin-bottom:24px; }
 .privacy-section { padding-top:15px; }.privacy-intro { padding:28px; }.privacy-intro h2 { font-size:38px; }.privacy-lead { max-width:none; }.privacy-questions { padding:10px 24px; }.privacy-questions summary { min-height:68px; font-size:13px; }
 .faq-section>.wrap { grid-template-columns:1fr; gap:8px; }.faq-section .section__head { position:static; margin-bottom:18px; }.faq-section .h2 { font-size:35px; }.faq-section .lead { font-size:13px; }.faq summary { font-size:13px; min-height:65px; }
 .closing-section { padding-top:35px; border-radius:40% 40% 0 0 / 2% 2% 0 0; }.closing-grid { grid-template-columns:1fr; gap:0; }.closing-copy { padding:25px 0 25px; }.closing-copy .h2 { font-size:39px; }.closing-copy>p:not(.eyebrow):not(.hand-note) { font-size:13px; }.closing-copy .hand-note { position:static; margin:20px 0 0 140px; font-size:20px; }.closing-art { height:390px; width:100%; max-width:440px; margin:auto; }.closing-phone { width:52%; left:1%; top:10px; }.closing-phone--dark { left:47%; top:45px; }.closing-ribbon { width:650px; right:-200px; top:-70px; }
 .footer__inner { flex-wrap:wrap; justify-content:space-between; gap:17px; }.footer__meta { margin-left:0; flex-basis:100%; justify-content:space-between; gap:14px; font-size:10px; }
}
@media(prefers-reduced-motion:reduce) { .closing-phone .phone-device { animation:none; } }
@media(max-width:759px) {
 main#atas,main>section[id],#tabungan { scroll-margin-top:70px; }
 .nav .nav-start { min-height:44px; }
 .motion-switch,.nav-toggle { width:44px; height:44px; }
 .nav__inner { gap:7px; }
 .hero-product { margin-top:30px; }
 .wallet-peek { left:43%; }
 .wallet-peek__types { flex-wrap:wrap; gap:4px; }
 .wallet-peek__types span { white-space:nowrap; }
}
@media(max-width:420px) {
 .hero-product { height:360px; }
 .hero-laptop { top:22px; right:-2%; }
 .wallet-peek { width:177px; bottom:0; }
}
@media(max-width:359px) { .nav .brand>span { display:none; }.nav .brand { gap:0; }.nav .nav-start { font-size:10px; padding-inline:13px; }.hero--reference .h1 { font-size:36px; }.wallet-peek { left:auto; right:0; } }

/* Portrait history preview: real mobile UI with a separate device shell. */
.report-layout { grid-template-columns:1fr 1fr; gap:80px; }
.report-showcase { position:relative; padding:24px 0; min-width:0; background:transparent; border-radius:0; box-shadow:none; transform:none; }
.report-showcase::before { content:""; position:absolute; inset:12% -3% 19%; border-radius:48% 52% 45% 55%; background:radial-gradient(ellipse at 40% 40%,#d8e5d3,#eaf0e2 58%,#eaf0e200 75%); rotate:-15deg; pointer-events:none; }
.report-showcase .report-demo { position:relative; max-width:390px; margin-inline:auto; }
.report-phone { position:relative; width:300px; margin-inline:auto; padding:7px; border:1px solid #7c847b; border-radius:43px; background:linear-gradient(120deg,#9da69b,#283229 8%,#131c16 52%,#687267 90%,#c0c7bc); box-shadow:inset 0 0 0 2px #9fa69b,0 28px 42px -14px #1c3d2c4a,0 4px 8px #1c3d2c24; }
.report-phone::before,.report-phone::after { content:""; position:absolute; width:3px; border-radius:3px; background:#697467; box-shadow:inset 1px 0 #bdc4b7; }
.report-phone::before { left:-3px; top:105px; height:42px; box-shadow:inset 1px 0 #bdc4b7,0 51px #697467; }
.report-phone::after { right:-3px; top:140px; height:66px; }
.report-phone__glass { border:1px solid #0d1710; border-radius:35px; overflow:hidden; background:#faf7f1; }
.report-phone__status { position:relative; display:flex; justify-content:space-between; align-items:center; height:34px; padding:0 20px; color:#202b22; background:#faf7f1; }
.report-phone__status>b { font-size:9px; font-weight:700; letter-spacing:-.04em; }
.report-phone__island { position:absolute; top:8px; left:50%; translate:-50% 0; width:77px; height:18px; border-radius:20px; background:#142018; box-shadow:inset 0 1px 2px #0008; }
.report-phone__island i { position:absolute; right:7px; top:5px; width:7px; height:7px; border:2px solid #253b2e; background:#0a180e; border-radius:50%; }
.report-phone__signals { display:flex; gap:5px; align-items:center; }.report-phone__signals svg { width:13px; height:10px; fill:none; stroke:currentColor; stroke-width:2; }.report-phone__signals>span { width:17px; height:8px; padding:1px; border:1px solid currentColor; border-radius:2px; position:relative; }.report-phone__signals>span::before { content:""; display:block; width:11px; height:4px; background:currentColor; border-radius:1px; }.report-phone__signals>span::after { content:""; position:absolute; width:1px; height:3px; right:-3px; top:1.5px; background:currentColor; }
.report-phone__screen { aspect-ratio:390/844; overflow:hidden; background:#faf7f1; isolation:isolate; }
.report-phone .report-history { width:100%; height:100%; padding:0; border:0; border-radius:0; background:transparent; }
.report-history__screen { display:block; width:100%; height:100%; object-fit:contain; }
.report-phone__home { display:flex; align-items:center; justify-content:center; height:14px; background:#faf7f1; }.report-phone__home span { width:32%; height:3px; border-radius:3px; background:#233126; }
.report-phone .report-preview { display:flex; flex-direction:column; width:100%; height:100%; border:0; border-radius:0; }
.report-phone .report-preview__toolbar { flex:none; padding:10px; gap:8px; background:#f2f2e9; border-bottom:1px solid #dfe5d8; }
.report-phone .report-preview__toolbar>span { font-size:8px; line-height:1.5; }
.report-phone .report-preview__toolbar button { min-height:30px; font-size:9px; padding:6px 8px; }
.report-phone .report-preview__page { display:flex; align-items:center; flex:1; min-height:0; height:auto; padding:12px 9px; overflow:hidden; background:#e4e9df; }
.report-phone .report-preview__page img { width:100%; height:100%; object-fit:contain; filter:drop-shadow(0 3px 7px #15271a24); }
.report-actions { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:12px 16px; margin-top:25px; }
.report-actions .report-months { margin:0; gap:5px; }
.report-actions .report-months button { min-width:38px; min-height:38px; font-size:11px; }
.report-actions .report-preview-button { width:auto; min-height:38px; margin:0; padding:8px 14px; font-size:10px; border-radius:999px; }
.report-actions .report-open { flex-basis:100%; justify-content:center; font-size:10px; margin:0; min-height:30px; }
.report-showcase .feature-controls { margin-top:12px; padding-top:12px; justify-content:center; text-align:center; }.report-showcase .feature-controls>span { flex-basis:100%; }
@media(max-width:1099px) and (min-width:760px) { .report-layout { gap:38px; }.report-phone { width:280px; } }
@media(max-width:759px) { .report-layout { grid-template-columns:1fr; gap:30px; }.report-showcase { padding:18px 0; max-width:430px; width:100%; margin:auto; }.report-phone { width:min(290px,calc(100% - 24px)); }.report-showcase::before { inset:15% -12px 20%; rotate:0deg; }.report-actions { margin-top:23px; }.report-phone .report-preview__toolbar button { min-height:32px; } }