/* Singapore red, white and charcoal. Research: reference/SG_DESIGN_RESEARCH.md */
:root {
 --bg:#f6f7f9; --bg-2:#fff; --surface:#fff; --surface-strong:#fff;
 --text:#182230; --muted:#526071; --accent:#c92538; --accent-2:#182230;
 --accent-3:#a91e30; --accent-4:#c92538; --border:#dfe3e8;
 --shadow:0 8px 24px rgba(24,34,48,.04); --radius:16px; --sg-red-soft:#fff2f3;
}
body { background:#fff; font-family:"Inter","Segoe UI","Helvetica Neue",Arial,sans-serif; font-size:1rem; line-height:1.7; -webkit-font-smoothing:antialiased; }
body::before { display:none; }
::selection { background:#fbdde1; color:var(--text); }
a { text-underline-offset:4px; }
.content a,.site-footer a { color:#a91e30; }
.content a.button.primary { color:#fff; }
a:focus-visible,button:focus-visible,summary:focus-visible { outline:3px solid var(--accent); outline-offset:5px; }
.container { width:min(1160px,calc(100% - 64px)); }
h1,h2,h3 { color:var(--text); font-weight:700; text-wrap:balance; }
h1 { font-size:clamp(2.35rem,4.3vw,3.65rem); line-height:1.12; letter-spacing:-.045em; }
h2 { font-size:clamp(1.65rem,2.7vw,2.35rem); line-height:1.2; letter-spacing:-.03em; }
h3 { font-size:1.15rem; line-height:1.4; letter-spacing:-.015em; }
p { margin:0 0 1rem; }
.lead { max-width:54ch; font-size:1.125rem; line-height:1.75; }
.eyebrow { color:#a91e30; letter-spacing:.1em; font-size:.75rem; font-weight:700; }
.section { padding-top:48px; padding-bottom:48px; }
.section-heading { gap:32px; margin-bottom:28px; }
.section-heading>div { max-width:45rem; }
.section-heading p:last-child { max-width:48ch; }
.card,.image-card { border:1px solid var(--border); box-shadow:none; background:#fff; }
.card { padding:28px; border-radius:var(--radius); }
.content p,.content li { max-width:62ch; }
.content h2:not(:first-child) { margin-top:28px; }
.feature-grid,.preset-grid,.faq-grid,.two-column { gap:20px; }
/* Compact primary navigation. */
.site-header { border-top:4px solid var(--accent); border-bottom:1px solid var(--border); background:#fff; backdrop-filter:none; }
.nav { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:24px; padding:18px 0; }
.brand { gap:10px; }
.brand-text { font-size:1rem; letter-spacing:-.025em; }
.brand-mark { width:40px; height:40px; border-radius:10px; box-shadow:none; }
.nav-links { justify-content:center; gap:4px; flex-wrap:wrap; min-width:0; }
.nav-links a { border-radius:8px; font-size:.85rem; font-weight:500; padding:10px; white-space:nowrap; }
.nav-links a:hover,.nav-links a[aria-current="page"] { background:var(--sg-red-soft); color:#a91e30; }
.nav-download,.primary { background:var(--accent); color:#fff; box-shadow:none; }
.nav-download { border-radius:9px; font-size:.85rem; font-weight:600; padding:0 16px; height:44px; }
.nav-download:hover,.primary:hover { background:#a91e30; }
.nav-store-links { display:flex; align-items:center; gap:8px; }
.nav-download-android { border:1px solid var(--accent); background:#fff; color:var(--accent); }
.nav-download-android:hover { background:var(--sg-red-soft); color:#a91e30; }
.store-icon { display:block; width:1.15rem; height:1.15rem; flex:0 0 auto; }
.store-icon-apple { fill:currentColor; }
.store-icon-play { width:1.2rem; height:1.2rem; }
.store-button { display:inline-flex; align-items:center; justify-content:center; gap:9px; }
.nav-download .store-icon { width:1rem; height:1rem; }
.nav-toggle { display:none; border-radius:8px; box-shadow:none; background:#fff; }
.button { min-height:48px; padding:12px 20px; font-size:.95rem; font-weight:600; border-radius:9px; box-shadow:none; }
.secondary { border-color:var(--border); background:#fff; }
.secondary:hover { border-color:var(--accent); color:#a91e30; }
.actions { gap:12px; }
.platform-note { font-size:.8125rem; color:var(--muted); margin:12px 0 0; }
/* Photo-led hero with neutral typography and restrained red actions. */
.hero-singapore { padding:72px 0 64px; background:linear-gradient(180deg,#fafbfc,#fff); border-bottom:1px solid #edf0f3; }
.hero-grid { grid-template-columns:1.3fr 1fr; gap:64px; align-items:center; }
.hero-copy { padding:16px 0; }
.hero-copy h1 { max-width:17ch; margin-bottom:24px; }
.hero-copy .lead { max-width:42ch; margin-bottom:28px; }
.hero-badges { margin-top:28px; gap:8px; }
.pill { background:#f6f7f9; border:1px solid #e8ebef; border-radius:6px; font-size:.75rem; font-weight:500; padding:6px 10px; }
.hero-panel,.app-poster-card { background:#fff; border:1px solid var(--border); border-radius:20px; padding:28px; box-shadow:0 16px 48px rgba(24,34,48,.07); }
.hero-panel::after { display:none; }
.panel-label { text-transform:none; letter-spacing:0; font-size:.9rem; margin-bottom:24px; }
.sg-hero-photo { display:block; width:min(100%,184px); height:auto; margin:0 auto 24px; padding:8px; border:1px solid var(--border); background:#fff; border-radius:8px; }
.metric-grid { gap:12px; }
.metric { padding:14px; background:#f6f7f9; border:0; border-radius:9px; box-shadow:none; }
.metric span { color:var(--muted); font-size:.75rem; }
.metric strong { color:var(--text); font-size:1.05rem; }
.panel-note { background:var(--sg-red-soft); border-color:#f3d3d9; }
/* Retain all source content with a readable editorial rhythm. */
.split-section { gap:56px; align-items:center; grid-template-columns:1.15fr .85fr; }
.split-section>.content { border:0; padding:0; background:transparent; }
.sg-intro h2 { max-width:30ch; }
.sg-example { margin:0; padding:24px; background:#f6f7f9; border:0; border-radius:20px; text-align:center; }
.sg-example img { display:block; width:auto; max-width:100%; max-height:420px; margin:auto; border-radius:8px; }
.sg-example figcaption { padding-top:16px; color:var(--muted); font-size:.8125rem; }
.sg-guidance { border-top:1px solid #edf0f3; border-bottom:1px solid #edf0f3; }
.sg-guidance .content h2 { font-size:1.35rem; letter-spacing:-.02em; }
.sg-offer { grid-template-columns:.85fr 1.15fr; }
.sg-offer>.content { padding:32px; border-radius:20px; background:var(--sg-red-soft); }
.sg-price { color:#a91e30; margin-top:24px; max-width:30ch; }
.sg-price strong { display:block; font-size:2.5rem; line-height:1.2; margin:8px 0; letter-spacing:-.04em; }
.sg-features h2 { font-size:1.65rem; }
.preset-card { padding:24px; transition:border-color .15s ease,box-shadow .15s ease; }
.preset-card::before { display:none; }
.preset-card:hover { border-color:#c92538; box-shadow:0 6px 18px rgba(24,34,48,.05); }
.preset-card h3 a { color:var(--text); }
.preset-card h3 a::after { content:" \2197"; color:#a91e30; }
.preset-card p { margin-bottom:0; font-size:.9375rem; }
.sg-guide-grid { grid-template-columns:repeat(4,minmax(0,1fr)); gap:24px; }
.sg-preview-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
.sg-guide-grid .image-card { max-width:none; border-radius:12px; background:#f6f7f9; }
.sg-guide-grid img,.sg-preview-grid img { width:100%; height:auto; object-fit:contain; padding:10px; background:transparent; }
.image-card figcaption { border-top:1px solid var(--border); padding:12px; font-size:.8125rem; font-weight:600; }
.sg-spaced { margin-top:32px; }
.sg-facts { margin-bottom:32px; max-width:700px; }
/* Native disclosures retain the full answers and keyboard interaction. */
.sg-faq-list { display:grid; grid-template-columns:1fr; max-width:880px; }
.sg-faq-list .sg-faq { padding:0; border:0; border-bottom:1px solid var(--border); border-radius:0; }
.sg-faq summary { position:relative; cursor:pointer; padding:24px 40px 24px 0; list-style:none; }
.sg-faq summary::-webkit-details-marker { display:none; }
.sg-faq summary::after { content:"+"; position:absolute; right:4px; top:20px; font-size:1.5rem; color:#a91e30; }
.sg-faq[open] summary::after { content:"\2212"; }
.sg-faq summary h2,.sg-faq summary h3 { margin:0; font-size:1.05rem; }
.sg-faq>p,.sg-faq>ul { margin-bottom:24px; max-width:70ch; }
.cta-banner { border:1px solid var(--border); padding:32px; background:#f6f7f9; border-radius:16px; }
.cta-banner p { margin-bottom:0; }
.site-footer { margin-top:48px; padding:32px 0; border-top:1px solid var(--border); background:#f6f7f9; backdrop-filter:none; }
.site-footer p { font-size:.85rem; color:var(--muted); margin-bottom:8px; }
.skip-link { position:absolute; top:-80px; left:16px; z-index:100; padding:12px 20px; background:#fff; color:#a91e30; border:2px solid var(--accent); }
.skip-link:focus { top:12px; }
@media(max-width:1100px) {
 .nav { gap:16px; } .nav-links a { font-size:.8rem; padding:8px; } .hero-grid { gap:32px; }
}
@media(min-width:921px) and (max-width:1240px) {
 .nav { grid-template-columns:1fr auto auto; }
 .nav-store-links { order:2; }
 .nav-toggle { display:inline-flex; order:3; margin:0; width:44px; height:44px; }
 .nav-links { display:none; grid-column:1 / -1; order:4; }
 .nav.nav-open .nav-links { display:flex; justify-content:flex-start; }
}
@media(max-width:920px) {
 .container { width:calc(100% - 48px); }
 .nav { grid-template-columns:1fr auto auto; }
 .nav-toggle { display:inline-flex; order:3; margin:0; width:44px; height:44px; }
 .nav-links { display:none; grid-column:1 / -1; order:4; width:100%; }
 .nav.nav-open .nav-links { display:grid; gap:4px; grid-template-columns:1fr; }
 .nav-links a { font-size:.9375rem; padding:12px; }
 .nav-download { order:2; }
 .hero-grid { grid-template-columns:1.2fr 1fr; gap:24px; }
 .hero-copy h1 { font-size:clamp(2.25rem,5vw,3rem); }
 .hero-panel { padding:20px; }
 .split-section,.sg-offer { gap:32px; grid-template-columns:1fr 1fr; }
 .preset-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .sg-guide-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media(max-width:640px) {
 .sg-store-actions { display:grid; grid-template-columns:minmax(0,1fr); width:100%; }
 .sg-store-actions .button { width:100%; justify-content:center; }
 .container { width:calc(100% - 40px); }
 .nav { gap:10px; padding:14px 0; }
 .brand-text { font-size:.875rem; } .brand-mark { width:34px; height:34px; border-radius:8px; } .brand { gap:8px; }
 .nav-download { font-size:.75rem; padding:0 10px; gap:5px; } .nav-download svg { width:13px; }
 .hero-singapore { padding:40px 0; }
 .hero-grid,.split-section,.sg-offer { grid-template-columns:1fr; gap:32px; }
 .hero-copy h1 { font-size:clamp(2rem,8.5vw,2.7rem); max-width:19ch; }
 .hero-copy .lead { font-size:1rem; margin-bottom:24px; } .hero-badges { margin-top:24px; }
 .hero-panel { max-width:400px; width:100%; margin:auto; } .sg-hero-photo { width:156px; }
 .section { padding-top:32px; padding-bottom:32px; } .card { padding:22px; }
 .sg-offer>.content { padding:24px; order:-1; } .sg-example img { max-height:340px; }
 .preset-grid,.feature-grid,.two-column { grid-template-columns:1fr; }
 .sg-guide-grid { gap:12px; } .section-heading { gap:16px; } .cta-banner { padding:24px; gap:24px; }
}
@media(max-width:360px) { .nav-download svg { display:none; } .brand-text { font-size:.8125rem; } .nav { gap:8px; } }
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } .preset-card { transition:none; } }

/* Restored original navigation and upload-to-app entry point. */
#photo-upload { scroll-margin-top:112px; }
.sg-nav-menu { position:relative; }
.sg-nav-menu summary { padding:10px; font-size:.85rem; font-weight:500; cursor:pointer; white-space:nowrap; list-style:none; border-radius:8px; }
.sg-nav-menu summary::-webkit-details-marker { display:none; }
.sg-nav-menu summary::after { content:" +"; color:var(--accent); }
.sg-nav-menu[open]>summary { background:var(--sg-red-soft); }
.sg-nav-menu__links { position:absolute; top:calc(100% + 8px); right:0; width:260px; padding:8px; border:1px solid var(--border); background:#fff; border-radius:12px; box-shadow:0 12px 32px rgba(24,34,48,.12); max-height:70vh; overflow-y:auto; z-index:30; }
.sg-nav-menu__links a { display:block; white-space:normal; }
.upload-converter { background:#f6f7f9; border:1px solid var(--border); box-shadow:none; padding:32px; gap:32px; }
.upload-drop { background:#fff; box-shadow:none; border-color:#a91e30; }
.upload-drop:hover { transform:none; box-shadow:none; }
.upload-drop:focus-within { outline:3px solid var(--accent); outline-offset:4px; }
.upload-drop__icon { background:var(--accent); }
.upload-preset span { font-weight:500; border-radius:8px; background:#fff; border-color:var(--border); }
.upload-preset input:checked+span { background:var(--accent); }
.upload-preset input:focus-visible+span { outline:3px solid var(--accent); outline-offset:3px; }
.sg-upload-dialog { border:1px solid var(--border); border-radius:20px; width:min(520px,calc(100% - 32px)); max-height:calc(100dvh - 48px); padding:0; color:var(--text); background:#fff; box-shadow:0 24px 80px rgba(24,34,48,.2); }
.sg-upload-dialog::backdrop { background:rgba(24,34,48,.6); }
.sg-upload-dialog__content { padding:40px 32px 32px; }
.sg-upload-dialog h2 { font-size:1.75rem; }
.sg-upload-dialog .app-modal__close { top:12px; right:12px; background:#f6f7f9; }
.legal-doc { max-width:880px; }
.sg-source-article { max-width:900px; overflow-wrap:anywhere; }
.sg-source-article h2:not(:first-child) { margin-top:2rem; }
.sg-source-article h3 { margin-top:1.5rem; }
.sg-source-article li { margin-block:.45rem; }
.sg-source-table table { width:100%; border-collapse:collapse; text-align:left; }
.sg-source-table th,.sg-source-table td { padding:12px 16px; border-bottom:1px solid var(--border); vertical-align:top; }
.sg-source-table th { color:var(--text); background:var(--surface-alt,#f6f7f9); }
.sg-video { aspect-ratio:16/9; margin-block:1.5rem; }
.sg-video iframe { width:100%; height:100%; border:0; border-radius:12px; }
.legal-doc pre { white-space:pre-wrap; overflow-wrap:anywhere; }
@media(max-width:920px) {
 .sg-nav-menu__links { position:static; width:100%; box-shadow:none; max-height:none; margin:4px 0 12px; }
 .sg-nav-menu summary { font-size:.9375rem; padding:12px; }
 .upload-converter { grid-template-columns:1fr; padding:24px; gap:24px; }
}
@media(prefers-reduced-motion:reduce) { .upload-drop { transition:none; } }
@media(max-width:920px) {
 .nav-store-links { grid-column:1 / -1; order:4; width:100%; }
 .nav-store-links .nav-download { flex:1; justify-content:center; }
 .nav-links { order:5; }
}
