:root{--ink:#24201d;--soft-ink:#655d56;--paper:#f9f6f1;--cream:#f1e7db;--peach:#e7a17e;--coral:#b84d39;--wine:#6a2d29;--sage:#697d50;--line:rgba(52,39,32,.16);--display:Iowan Old Style,Baskerville,Georgia,serif;--sans:ui-rounded,"Avenir Next",Avenir,"Segoe UI",Arial,sans-serif;--mono:"SFMono-Regular",Consolas,monospace}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.55}.grain{position:fixed;inset:0;pointer-events:none;z-index:30;opacity:.14;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 240 240' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.12'/%3E%3C/svg%3E");mix-blend-mode:multiply}.container{width:min(1180px,calc(100% - 48px));margin:auto}.nav-shell{position:sticky;top:0;z-index:20;background:rgba(249,246,241,.9);backdrop-filter:blur(14px)}.nav{height:78px;display:flex;align-items:center;justify-content:space-between}.wordmark{font-weight:800;font-size:21px;letter-spacing:-1.4px;text-decoration:none;color:var(--ink);position:relative}.wordmark span:first-child{color:var(--coral)}.wordmark span:nth-child(2){color:var(--wine)}.wordmark i{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--peach);margin-left:3px;vertical-align:top}.nav-links{display:flex;gap:30px}.nav-links a,.footer a{color:var(--soft-ink);text-decoration:none;font-size:14px;font-weight:700}.nav-links a:hover,.footer a:hover{color:var(--coral)}button{font:inherit}.nav-cta{border:0;background:var(--ink);color:var(--paper);min-height:44px;padding:10px 17px;border-radius:99px;font-weight:800;font-size:13px;cursor:pointer}.nav-cta span{color:#f1b28d;margin-left:4px}.hero{min-height:690px;display:grid;grid-template-columns:.91fr 1.09fr;align-items:center;gap:50px;padding:76px 24px 90px}.eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;font-weight:700;color:var(--wine);margin:0 0 18px}.pulse{display:inline-block;background:var(--coral);width:8px;height:8px;border-radius:50%;margin:0 8px 1px 0}.hero h1,.result-copy h2,.section-heading h2,.privacy-copy h2,.faq-section h2,.cta-section h2,.analyzer-modal h2{font-family:var(--display);font-weight:600;letter-spacing:-.055em;line-height:.98;margin:0}.hero h1{font-size:clamp(52px,6.4vw,82px);max-width:630px}.hero h1 em,.result-copy h2 em,.section-heading h2 em,.privacy-copy h2 em,.faq-section h2 em,.cta-section h2 em,.report-preview h3 em{font-weight:600;color:var(--coral)}.hero-description{max-width:535px;color:var(--soft-ink);font-size:18px;line-height:1.65;margin:27px 0}.hero-actions{display:flex;align-items:center;gap:25px}.button{border:0;border-radius:99px;min-height:52px;padding:14px 22px;font-weight:800;cursor:pointer;transition:transform .2s ease,box-shadow .2s ease}.button:hover{transform:translateY(-2px)}.button-primary{color:#fff;background:var(--coral);box-shadow:0 10px 24px rgba(184,77,57,.2)}.button-primary span,.button-light span,.text-button span{margin-left:9px}.text-link,.text-button{background:none;border:0;padding:0;color:var(--ink);font-weight:800;text-decoration:none;font-size:14px;cursor:pointer}.text-link span,.text-button span{color:var(--coral);margin-left:7px}.price-line{margin:17px 0 0;color:var(--soft-ink);font-size:14px}.price-line strong{color:var(--ink)}.price-line span{color:var(--coral);padding:0 5px}.hero-proof{display:flex;flex-wrap:wrap;gap:8px;margin:26px 0 0;padding:0;list-style:none}.hero-proof li{border:1px solid var(--line);border-radius:99px;padding:6px 10px;color:var(--soft-ink);font:11px var(--mono)}.hero-romance{position:relative;min-height:570px;border-radius:8px;isolation:isolate}.hero-romance>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:8px;box-shadow:0 22px 55px rgba(59,35,27,.2)}.hero-romance:after{content:"";position:absolute;inset:0;border-radius:8px;background:linear-gradient(180deg,rgba(25,18,15,.04) 36%,rgba(25,18,15,.6) 100%);z-index:0}.romance-status{position:absolute;z-index:2;top:18px;left:18px;padding:11px 13px;border-radius:5px;background:rgba(249,246,241,.93);box-shadow:0 8px 22px rgba(28,16,12,.13)}.romance-status span{display:block;color:var(--wine);font:9px var(--mono);letter-spacing:.09em}.romance-status strong{display:block;margin-top:3px;font:600 16px var(--display);letter-spacing:-.03em}.romance-report{position:absolute;z-index:2;left:22px;right:22px;bottom:-42px;padding:18px 19px 16px;border-radius:8px;background:rgba(255,250,244,.97);box-shadow:0 18px 38px rgba(45,24,18,.22)}.signal-top,.report-head{display:flex;align-items:center;gap:8px;color:var(--soft-ink);font:11px var(--mono);letter-spacing:.04em}.signal-top{padding-bottom:10px;border-bottom:1px solid var(--line)}.status-dot{width:7px;height:7px;background:var(--sage);border-radius:50%}.private-label{margin-left:auto;color:var(--wine);font-size:9px}.romance-report h2{font:600 22px/1.12 var(--display);letter-spacing:-.04em;margin:14px 0}.mini-evidence{display:grid;grid-template-columns:1fr 1fr;gap:13px}.mini-evidence p{margin:0;color:var(--soft-ink);font-size:11px;line-height:1.48}.mini-evidence b{display:block;color:var(--ink);font-size:11px;margin-bottom:2px}.result-section{background:var(--ink);color:#fffaf4;padding:118px 0}.result-layout{display:grid;grid-template-columns:.86fr 1.14fr;gap:85px;align-items:center}.result-copy h2{font-size:clamp(43px,4.8vw,67px)}.result-copy h2 em{color:#f2a57e}.result-copy>p:not(.eyebrow){color:#ded3ca;max-width:425px;margin:26px 0}.result-copy .text-link{color:#fffaf4}.report-preview{background:#fffdf9;color:var(--ink);padding:20px 25px 25px;box-shadow:17px 18px 0 #684f43;transform:rotate(1.2deg);max-width:570px}.report-head{padding-bottom:17px;border-bottom:1px solid var(--line);justify-content:space-between}.report-mark{color:var(--coral);font:700 19px var(--display);letter-spacing:-.1em}.report-body{padding:28px 6px 0}.mini-label{font:10px var(--mono);letter-spacing:.1em;color:var(--wine);margin:0 0 6px}.report-preview h3{font:600 28px/1.15 var(--display);letter-spacing:-.04em;margin:0 0 22px;max-width:430px}.next-step{background:#f5e5db;padding:14px 16px;margin-top:14px}.next-step span{font:10px var(--mono);letter-spacing:.07em;color:var(--wine)}.next-step p{font:600 16px/1.35 var(--display);letter-spacing:-.02em;margin:5px 0 0}.steps-section{padding:122px 0}.section-heading{display:flex;justify-content:space-between;gap:45px;align-items:end;margin-bottom:48px}.section-heading h2{font-size:clamp(40px,4vw,58px);max-width:640px}.section-heading>p{max-width:290px;margin:0;color:var(--soft-ink);font-size:14px}.steps-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.step-card{background:#f1e7db;padding:24px 25px 30px;min-height:286px;border-radius:6px}.step-card:nth-child(2){background:#e8c4ad}.step-card-dark{background:#6a2d29!important;color:#fff9f3}.step-card>p{font:11px var(--mono);margin:0}.step-icon{width:54px;height:54px;border-radius:50%;display:grid;place-items:center;margin:44px 0 25px;background:rgba(255,255,255,.58);font:28px var(--display)}.step-card h3{font:700 21px/1.2 var(--display);letter-spacing:-.03em;margin:0 0 9px}.step-card span{font-size:13px;line-height:1.55;display:block;max-width:250px}.privacy-section{background:#ebe3d8;padding:116px 0}.privacy-layout{display:grid;grid-template-columns:.9fr 1.1fr;gap:88px;align-items:center}.privacy-visual{margin:0;position:relative}.privacy-visual img{display:block;width:100%;aspect-ratio:1.14/1;object-fit:cover;border-radius:7px;box-shadow:0 18px 42px rgba(82,40,31,.12)}.privacy-visual figcaption{position:absolute;left:15px;right:15px;bottom:15px;padding:9px 10px;border-radius:4px;background:rgba(249,246,241,.9);font:10px var(--mono);letter-spacing:.03em;color:var(--soft-ink);text-align:center}.privacy-copy h2{font-size:clamp(42px,4.4vw,63px);max-width:620px}.privacy-copy h2 em{color:var(--coral)}.privacy-points{display:grid;gap:14px;margin:27px 0}.privacy-points p{display:grid;grid-template-columns:30px 1fr;gap:10px;margin:0;color:var(--soft-ink);font-size:14px}.privacy-points span{font:11px var(--mono);color:var(--wine);padding-top:2px}.privacy-points b{color:var(--ink)}.faq-section{padding:112px 0;display:grid;grid-template-columns:.85fr 1.15fr;gap:85px}.faq-section h2{font-size:clamp(40px,4.2vw,59px)}.faq-list{border-top:1px solid var(--line)}.faq-list details{border-bottom:1px solid var(--line);padding:18px 0}.faq-list summary{cursor:pointer;font:600 19px/1.25 var(--display);letter-spacing:-.02em}.faq-list p{margin:11px 28px 0 0;color:var(--soft-ink);font-size:14px}.faq-list a{color:var(--wine);font-weight:800}.cta-section{background:var(--coral);padding:72px 78px 58px;color:#fff8f1}.cta-section .eyebrow{color:#fff0e6}.cta-section h2{font-size:clamp(59px,7vw,102px)}.cta-section h2 em{color:#fff8f1}.cta-bottom{display:flex;justify-content:space-between;align-items:end;margin-top:50px}.cta-bottom p{font-size:15px;margin:0;color:#fff2ea}.button-light{background:#fff8f1;color:var(--wine);padding:15px 23px}.footer{border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:30px 0 37px}.footer p{font-size:12px;color:var(--soft-ink)}.footer div{display:flex;gap:20px}.modal-backdrop{display:none;position:fixed;inset:0;z-index:50;background:rgba(38,29,24,.56);padding:20px;align-items:center;justify-content:center;backdrop-filter:blur(8px)}.modal-backdrop.open{display:flex}.analyzer-modal{width:min(600px,100%);max-height:calc(100vh - 40px);overflow:auto;background:#fffaf4;border-radius:16px;padding:29px 34px 34px;position:relative;box-shadow:0 28px 80px rgba(34,20,15,.3)}.modal-topbar{height:32px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center}.modal-topbar p{font:10px var(--mono);color:var(--soft-ink);margin:0}.close-button,.back-button{border:0;background:none;color:var(--soft-ink);font-weight:800;cursor:pointer;min-width:44px;min-height:40px}.close-button{justify-self:end;font-size:28px}.back-button{justify-self:start;padding:0;font-size:13px;text-align:left}.modal-progress{display:flex;align-items:center;gap:8px;margin:15px 0 27px}.modal-progress span{width:25px;height:25px;display:grid;place-items:center;border-radius:50%;font:11px var(--mono);background:#eee4dc;color:var(--soft-ink)}.modal-progress span.active{background:var(--coral);color:#fff}.modal-progress i{flex:1;height:1px;background:#e5d8cf}.modal-intro{color:var(--soft-ink);font-size:15px;margin:15px 0 22px}.upload-zone{min-height:172px;border:1.5px dashed #bf795f;background:#fffdf9;border-radius:10px;display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;text-align:center}.upload-zone input{position:absolute;width:1px;height:1px;opacity:0}.upload-circle{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:#f3ddd1;color:var(--wine);font-size:20px;margin-bottom:9px}.upload-zone strong{font-size:14px}.upload-zone small{font-size:11px;color:var(--soft-ink);margin-top:5px}.upload-zone.has-file{border-style:solid;background:#f8eee7}.consent-row{display:flex;gap:10px;align-items:flex-start;margin:18px 0}.consent-row input{accent-color:var(--coral);margin-top:5px;width:18px;height:18px}.consent-row label{font-size:13px;line-height:1.55;color:var(--soft-ink)}.full-button{width:100%;margin-top:12px}.full-button:disabled{opacity:.45;cursor:not-allowed;transform:none}.modal-step{display:none}.modal-step.active{display:block}.tutorial-card{background:#fffdf9;border:1px solid #e6d6ca;border-radius:10px;overflow:hidden;margin:21px 0}.tutorial-device{background:#f3e2d5;color:var(--wine);font:700 11px var(--mono);letter-spacing:.11em;text-transform:uppercase;margin:0;padding:11px 16px}.tutorial-card ol{margin:0;padding:14px 17px 17px 39px}.tutorial-card li{padding:6px 0 6px 3px;color:#564b44;font-size:14px;line-height:1.45}.tutorial-card li::marker{color:var(--coral);font:700 12px var(--mono)}.tutorial-warning{display:flex;align-items:flex-start;gap:9px;border-left:2px solid var(--peach);padding:3px 0 3px 12px;margin:17px 0}.tutorial-warning span{color:var(--wine);font-weight:800}.tutorial-warning p{margin:0;color:var(--soft-ink);font-size:13px;line-height:1.5}.file-status{display:none;margin:15px 0 0;padding:13px 14px;border-radius:8px;gap:11px;align-items:flex-start}.file-status.valid,.file-status.invalid{display:flex}.file-status.valid{background:#edf3e6;color:#4e6933}.file-status.invalid{background:#fff0e9;color:#8c382b}.file-status>span{width:21px;height:21px;border-radius:50%;display:grid;place-items:center;background:currentColor;color:#fff;font-size:12px;font-weight:800;flex:0 0 auto}.file-status strong{display:block;font-size:13px;color:var(--ink)}.file-status p{margin:3px 0 0;font-size:12px;line-height:1.45;color:var(--soft-ink)}.local-note{font-size:12px;color:var(--soft-ink);text-align:center;margin:15px 15px 0}.compatibility-summary{display:grid;grid-template-columns:1fr 1fr 1.35fr;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:16px 0;margin:22px 0}.compatibility-summary>div{border-right:1px solid var(--line);padding:0 12px}.compatibility-summary>div:first-child{padding-left:0}.compatibility-summary>div:last-child{border:0}.compatibility-summary b{display:block;font:600 20px/1.15 var(--display);letter-spacing:-.035em;color:var(--wine);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.compatibility-summary span{display:block;color:var(--soft-ink);font-size:11px;margin-top:4px}.context-fields{display:grid;gap:16px;margin:23px 0}.context-fields label{font-size:13px;font-weight:800;display:grid;gap:7px}.context-fields select,.context-fields textarea{border:1px solid #ddcdc2;border-radius:7px;background:#fffdf9;padding:12px;font:14px var(--sans);color:var(--ink);resize:vertical}.context-fields textarea{height:88px}.checkout-note{min-height:18px;margin:12px 6px 0;color:var(--soft-ink);font-size:12px;line-height:1.45;text-align:center}.generated-report .report-head{margin-bottom:26px}.generated-report h2{font-size:34px;margin:0 0 14px}.generated-report>p{color:var(--soft-ink);font-size:14px;line-height:1.65}@media(max-width:780px){.container{width:min(100% - 36px,600px)}.nav{height:68px}.nav-links{display:none}.nav-cta{min-height:44px;padding:9px 12px;font-size:12px}.hero{grid-template-columns:1fr;padding:57px 0 36px;gap:20px}.hero h1{font-size:clamp(49px,13vw,67px)}.hero-description{font-size:16px}.hero-actions{gap:18px;align-items:center}.hero-actions .button{max-width:210px}.price-line{font-size:13px;line-height:1.55}.hero-romance{min-height:530px;margin-bottom:76px}.romance-report{left:12px;right:12px;bottom:-57px}.romance-report h2{font-size:21px}.mini-evidence{gap:10px}.result-section{padding:78px 0}.result-layout,.privacy-layout,.faq-section{grid-template-columns:1fr;gap:34px}.result-copy h2{font-size:43px}.report-preview{transform:none;box-shadow:10px 11px 0 #684f43;margin-right:10px}.report-preview h3{font-size:26px}.steps-section{padding:78px 0}.section-heading{display:block;margin-bottom:34px}.section-heading h2{font-size:43px}.section-heading>p{margin-top:18px}.steps-grid{grid-template-columns:1fr;gap:12px}.step-card{min-height:208px}.step-icon{margin:28px 0 17px}.privacy-section{padding:78px 0}.privacy-copy h2,.faq-section h2{font-size:43px}.faq-section{padding:78px 0}.cta-section{padding:52px 28px}.cta-section h2{font-size:62px}.cta-bottom{align-items:start;gap:25px;flex-direction:column;margin-top:32px}.footer{align-items:flex-start;flex-direction:column;gap:14px}.footer div{gap:15px}.analyzer-modal{padding:18px 22px 28px}.modal-backdrop{padding:0}.modal-topbar{height:40px}.modal-progress{margin:10px 0 23px;gap:5px}.modal-progress span{width:24px;height:24px}.modal-progress i{min-width:0}.modal-intro{font-size:14px}.compatibility-summary{grid-template-columns:1fr 1fr}.compatibility-summary>div:last-child{grid-column:1/-1;border:0;padding:14px 0 0;margin-top:14px;border-top:1px solid var(--line)}.generated-report h2{font-size:30px}}@media(max-width:360px){.hero-actions{gap:14px}.hero-actions .button{font-size:14px;padding:13px 15px}.text-link{font-size:13px}.hero-proof li{font-size:10px}.analyzer-modal{padding-left:18px;padding-right:18px}.modal-progress{display:none}.modal-topbar{border-bottom:1px solid var(--line);margin-bottom:20px}}

/* ---- Langkah 4: pilih nama + konteks opsional ---- */

.who-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:0 0 6px}
.who-option{display:grid;gap:5px;align-content:start;padding:14px 15px;border:1px solid #e2d2c6;border-radius:10px;background:#fffdf9;color:var(--ink);cursor:pointer;text-align:left;transition:border-color .2s ease,background .2s ease}
.who-option:hover{border-color:var(--peach);background:#fffaf4}
.who-option.selected{border-color:var(--coral);background:#fff4ec;box-shadow:inset 0 0 0 1px var(--coral)}
.who-option strong{font-size:15px;font-weight:800;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.who-option small{font:12px var(--mono);color:var(--wine)}
.who-option em{font-style:normal;font-size:12px;line-height:1.45;color:var(--soft-ink);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.optional-context{margin:20px 0 0;border-top:1px solid var(--line);padding-top:6px}
.optional-context>summary{cursor:pointer;font-size:13px;font-weight:800;color:var(--soft-ink);min-height:40px;display:flex;align-items:center}
.optional-context .context-fields{margin:4px 0 0}

/* ---- Langkah 5: temuan gratis + insight terkunci ---- */
.free-insight{display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:start;background:#f8eee7;border-radius:10px;padding:18px 19px;margin:18px 0 0}
.free-insight>b{font:600 36px/1 var(--display);letter-spacing:-.045em;color:var(--coral)}
.free-insight strong{display:block;font:600 18px/1.25 var(--display);letter-spacing:-.03em;color:var(--ink);margin-bottom:6px}
.free-insight p{margin:0;font-size:13px;line-height:1.55;color:var(--soft-ink)}
.report-bridge{margin:0 0 20px;font-size:13px;line-height:1.6;color:var(--soft-ink)}
.locked-list{border-top:1px solid var(--line);padding-top:15px}
.locked-heading{font:700 12px var(--mono);letter-spacing:.07em;text-transform:uppercase;color:var(--wine);margin:0 0 6px}
.locked-row{display:grid;grid-template-columns:19px 1fr;gap:11px;align-items:start;padding:12px 0;border-bottom:1px solid var(--line)}
.locked-row:last-child{border-bottom:0}
.locked-row>span{font-size:13px;line-height:1.35;opacity:.55}
.locked-row strong{display:block;font-size:13.5px;color:var(--ink);margin-bottom:3px}
.locked-row small{display:block;font-size:12px;line-height:1.45;color:var(--soft-ink);margin-bottom:8px}
.locked-row small em{font-style:normal;color:var(--wine);font-weight:700}
.blur-bar{display:block;height:9px;width:82%;border-radius:99px;background:linear-gradient(90deg,#d9c7bc,#efe2d9 55%,#e4d3c8);filter:blur(2.5px);opacity:.85}
.locked-row:nth-child(3) .blur-bar{width:66%}
.locked-row:nth-child(4) .blur-bar{width:91%}
.locked-row:nth-child(5) .blur-bar{width:74%}
.restart-link{display:block;margin:18px auto 0;color:var(--soft-ink);font-size:13px}

/* ---- Contoh laporan: peta dinamika, pola 4 lapis, daftar bagian ---- */
/* Kartu jadi jauh lebih tinggi: miringnya dikurangi, kolom kiri rata atas. */
.report-preview{transform:rotate(.6deg)}
.result-layout{align-items:start}
/* Sticky HANYA saat dua kolom. Begitu layoutnya menumpuk di mobile, kolom kiri
   yang nempel bikin kartu contoh laporan menggulung menimpanya — terlihat
   seperti dua teks bertumpuk. Dibatasi lebar layar, bukan dimatikan di media
   query mobile, supaya tidak bisa terlupa lagi kalau breakpoint-nya berubah. */
@media(min-width:781px){.result-copy{position:sticky;top:110px}}
.result-note{font-size:14px;line-height:1.65}
.result-note em{font-style:normal;color:#f2a57e;font-weight:700}
.report-scale{font:12px var(--mono);letter-spacing:.05em;color:var(--wine);margin:0 0 20px;padding-bottom:15px;border-bottom:1px solid var(--line)}
.report-preview h3{margin-bottom:14px}
.portrait{font-size:13.5px;line-height:1.6;color:var(--soft-ink);margin:0 0 10px}
.portrait-contra{font-size:13.5px;line-height:1.6;color:var(--ink);margin:0 0 26px;padding-left:12px;border-left:2px solid var(--peach)}
.num-list{list-style:none;margin:0 0 26px;padding:0;display:grid;gap:2px}
.num-list li{background:#fffdf9;border-top:1px solid var(--line);padding:10px 0 11px}
.num-row{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.num-row span{font-size:13px;color:var(--ink);font-weight:700}
.num-row b{font:600 15px var(--display);letter-spacing:-.02em;color:var(--wine);white-space:nowrap}
.num-row i{font-style:normal;font-size:11px;color:var(--soft-ink);padding:0 2px}
.num-list p{margin:4px 0 0;font-size:12.5px;line-height:1.5;color:var(--soft-ink)}
.dyn-map{list-style:none;margin:0 0 26px;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:4px;overflow:hidden}
.dyn-map li{display:flex;align-items:center;justify-content:space-between;gap:10px;background:#fffdf9;padding:9px 11px;font-size:12px;color:var(--soft-ink)}
.dyn-map b{font:700 12px var(--mono);letter-spacing:.03em;white-space:nowrap}
.lv-good{color:var(--sage)}
.lv-mid{color:var(--coral)}
.lv-low{color:#9a8d84}
.pattern-sample{border-top:1px solid var(--line);padding-top:17px}
.pattern-sample .mini-label i{font-style:normal;color:var(--sage)}
.pattern-sample h4{font:600 20px/1.28 var(--display);letter-spacing:-.03em;margin:0 0 15px;color:var(--ink)}
.layer{display:grid;grid-template-columns:82px 1fr;gap:13px;padding:9px 0;border-top:1px solid rgba(52,39,32,.08);font-size:12.5px;line-height:1.55;color:var(--soft-ink)}
.layer:first-of-type{border-top:0}
.layer b{font:700 12px var(--mono);letter-spacing:.02em;text-transform:uppercase;color:var(--wine)}
.layer p{margin:0}
.toc{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:5px}
.toc li{font:12px var(--mono);color:var(--soft-ink);border:1px solid var(--line);border-radius:99px;padding:4px 9px;white-space:nowrap}

/* ---- Panduan export: ganti device + status memeriksa ---- */
.switch-device{margin:-8px 0 0;min-height:40px;display:inline-flex;align-items:center;font-size:13px;color:var(--soft-ink)}
.upload-zone.checking .upload-circle{font-size:0;background:none;border:2px solid #e7d5c9;border-top-color:var(--coral);animation:bs-spin .7s linear infinite}
@keyframes bs-spin{to{transform:rotate(360deg)}}

/* ---- Bar CTA melayang di mobile ---- */
.mobile-cta{display:none}

/* Nomor urut vs isi: hanya span pertama yang jadi label mono. */
.privacy-points p>span:first-child{font:12px var(--mono);color:var(--wine);padding-top:2px}
.privacy-points p>span:last-child{font:inherit;color:inherit;padding-top:0}

/* ---- Ukuran teks minimum 12px ---- */
.mini-label,.private-label,.romance-status span,.compatibility-summary span,.upload-zone small,.privacy-visual figcaption,.next-step span,.mini-evidence p,.mini-evidence b,.modal-topbar p,.signal-top,.report-head,.step-card>p,.tutorial-device,.modal-progress span{font-size:12px}
.hero-proof li{font-size:13px}

@media(max-width:780px){
  /* Modal setinggi layar sebenarnya (dvh), aman dari URL bar & home indicator */
  .analyzer-modal{max-height:100dvh;min-height:100dvh;border-radius:0;padding-bottom:calc(26px + env(safe-area-inset-bottom))}
  .modal-step .full-button{position:sticky;bottom:calc(4px + env(safe-area-inset-bottom));z-index:4;box-shadow:0 10px 28px rgba(184,77,57,.36)}
  .free-insight{grid-template-columns:1fr;gap:9px;padding:16px 17px}
  .free-insight>b{font-size:32px}
  .layer{grid-template-columns:1fr;gap:3px;padding:10px 0}
  .pattern-sample h4{font-size:18px}
  .locked-row{padding:11px 0}
  .who-grid{grid-template-columns:1fr}
  .mobile-cta{display:block;position:fixed;left:0;right:0;bottom:0;z-index:25;padding:10px 18px calc(10px + env(safe-area-inset-bottom));background:rgba(249,246,241,.95);border-top:1px solid var(--line);transform:translateY(130%);visibility:hidden;transition:transform .28s ease,visibility .28s}
  .mobile-cta.show{transform:none;visibility:visible}
  body.modal-open .mobile-cta{transform:translateY(130%);visibility:hidden}
  .mobile-cta .button{width:100%;min-height:50px;box-shadow:none}
  .footer{padding-bottom:104px}
}

/* Efek mahal dimatikan di perangkat sentuh (Android kelas bawah) */
@media(hover:none){
  .grain{display:none}
  .nav-shell{backdrop-filter:none;background:rgba(249,246,241,.97)}
  .modal-backdrop{backdrop-filter:none;background:rgba(38,29,24,.74)}
}

@media(max-width:360px){
  .hero-proof li{font-size:12px}
  .free-insight>b{font-size:29px}
  .dyn-map{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .button:hover{transform:none}
}

/* Fakta cepat di preview gratis — teaser texture, dihitung lokal */
.fun-facts {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  display: grid;
  gap: 8px;
}
.fun-facts li {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 10px 12px;
  border: 1px dashed var(--line, #d8d2c6);
  border-radius: 10px;
  font-size: 0.86rem;
  line-height: 1.45;
}
.fun-facts li span { flex: 0 0 auto; }
.fun-facts:empty { display: none; }

/* Visualisasi preview — SVG/CSS inline, tanpa library */
.viz { margin-top: 16px; }
.viz:empty { display: none; }

.viz svg { width: 100%; height: 64px; display: block; }
.spark-me   { stroke: var(--accent, #b4462f); stroke-width: 2; stroke-linejoin: round; }
.spark-them { stroke: #8a9a7b; stroke-width: 2; stroke-linejoin: round; }
.spark-legend {
  display: flex; align-items: center; gap: 14px;
  font-size: 0.72rem; letter-spacing: 0.04em; margin-top: 6px;
}
.spark-legend b { margin-left: auto; font-weight: 500; opacity: 0.6; }
.spark-legend i { display: inline-block; width: 10px; height: 3px; border-radius: 2px; margin-right: 6px; vertical-align: middle; }
.dot-me { background: var(--accent, #b4462f); }
.dot-them { background: #8a9a7b; }

.heat-row { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.heat-row > span { flex: 0 0 46px; font-size: 0.72rem; opacity: 0.72; }
.heat-cells { flex: 1; display: grid; grid-template-columns: repeat(24, 1fr); gap: 2px; }
.heat-cells i { height: 16px; border-radius: 2px; background: currentColor; opacity: var(--v, 0); }
.heat-me { color: var(--accent, #b4462f); }
.heat-them { color: #8a9a7b; }
.heat-axis {
  display: flex; justify-content: space-between;
  margin: 4px 0 0 54px; font-size: 0.66rem; opacity: 0.5;
}
.heat-note { font-size: 0.78rem; margin-top: 8px; opacity: 0.8; }