:root { color-scheme: light; --ink:#172630; --muted:#53656f; --accent:#087f9c; --surface:#fff; --page:#f4fafb; --line:#dbe8eb; }
* { box-sizing:border-box; }
body { margin:0; background:var(--page); color:var(--ink); font:16px/1.65 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
main { width:calc(100% - 36px); max-width:1050px; margin:56px auto; }
.brand { width:100%; max-width:420px; margin-bottom:32px; }
.brand a { display:block; width:100%; line-height:0; }
.brand img { display:block; width:100%; max-width:420px; height:auto; }
.brand p { margin:.35rem 0 0; color:var(--muted); font-size:1.35rem; font-weight:650; letter-spacing:.01em; }
.card { background:var(--surface); border:1px solid var(--line); border-radius:18px; padding:clamp(24px,5vw,48px); box-shadow:0 12px 35px rgba(22,61,70,.08); }
h1,h2 { line-height:1.2; }
h2 { margin-top:2rem; }
.card > h1:first-child,.card > h2:first-child { margin-top:0; }
a { color:var(--accent); }
.links { display:flex; flex-wrap:wrap; gap:12px; margin-top:24px; }
.links a { display:inline-block; padding:10px 16px; border:1px solid var(--accent); border-radius:999px; text-decoration:none; font-weight:650; }
.meta { color:var(--muted); }
li + li { margin-top:.45rem; }
footer { margin-top:32px; color:var(--muted); font-size:.92rem; }
@media (max-width:520px) { main { margin:28px auto; } .brand p { font-size:1.15rem; } .card { border-radius:14px; } }

/* Application home page; shared information pages retain their existing layout. */
.home main { max-width:1180px; margin-top:32px; }
.home-header { display:flex; align-items:center; justify-content:space-between; gap:28px; margin-bottom:32px; }
.home-header .brand { max-width:290px; margin:0; }
.home-header .brand a { text-decoration:none; }
.home-header .brand p { font-size:1rem; line-height:1.65; }
.home-nav,.home-footer nav { display:flex; flex-wrap:wrap; gap:22px; }
.home-nav a,.home-footer a { text-decoration:none; font-weight:600; }
.home a:hover { text-decoration:underline; }
.home a:focus-visible { outline:3px solid var(--accent); outline-offset:5px; }
.skip-link { position:absolute; top:8px; left:18px; padding:10px 16px; background:white; z-index:2; transform:translateY(-160%); }
.skip-link:focus { transform:translateY(0); }
.hero { display:grid; grid-template-columns:1.4fr 1fr; align-items:center; gap:48px; overflow:hidden; background:linear-gradient(125deg,#fff 30%,#e4f5f6); padding:clamp(28px,5vw,64px); }
.eyebrow { color:var(--accent); font-size:.75rem; font-weight:750; letter-spacing:.16em; margin:0 0 18px; }
.hero h1 { font-size:clamp(2.6rem,5.5vw,4.8rem); letter-spacing:-.055em; line-height:1.06; margin:0 0 26px; }
.hero-description { font-size:1.15rem; max-width:540px; color:var(--muted); }
.home .links { gap:12px; }
.home .links a { border-radius:12px; padding:12px 18px; }
.home .links .primary-link { color:white; background:var(--accent); }
.hero-note { font-size:.85rem; color:var(--muted); margin-top:24px; }
.hero-phone,.detail-phone { margin:0 auto; width:min(100%,270px); }
.hero-phone img,.detail-phone img { display:block; width:100%; height:auto; border:6px solid #20343c; border-radius:30px; box-shadow:0 20px 40px #183b4626; }
.home figcaption { color:var(--muted); font-size:.85rem; text-align:center; margin-top:14px; }
.home-section { margin-top:72px; scroll-margin-top:28px; }
.home-section h2 { font-size:clamp(1.8rem,3vw,2.5rem); letter-spacing:-.035em; margin:0 0 18px; }
.section-intro { color:var(--muted); margin-bottom:30px; max-width:700px; }
.feature-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px; }
.feature { padding:26px; border-top:4px solid var(--feature-color); }
.goal { --feature-color:#6b9cdd; }.task { --feature-color:#b7b744; }.expense { --feature-color:#945476; }.insight { --feature-color:#9a70b6; }
.feature-label { color:var(--muted); font-size:.72rem; font-weight:700; letter-spacing:.08em; }
.feature h3 { font-size:1.3rem; line-height:1.3; margin:18px 0 12px; }
.feature p { color:var(--muted); font-size:.95rem; margin:0; }
.ai-section { display:grid; grid-template-columns:1.5fr 1fr; align-items:center; gap:64px; }
.steps { padding-left:22px; }.steps li { padding-left:8px; margin:20px 0; }
.personal-grid { display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.personal-grid h2 { font-size:1.8rem; }.personal-grid p:not(.eyebrow) { color:var(--muted); }
.screenshot-gallery { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:32px 24px; }
.screenshot-gallery figure { margin:0; min-width:0; }
.screenshot-gallery a { display:block; border-radius:18px; }
.screenshot-gallery img { display:block; width:100%; height:auto; aspect-ratio:1080 / 2320; object-fit:contain; background:white; border:1px solid var(--line); border-radius:18px; box-shadow:0 6px 18px #163d4610; transition:transform .2s; }
.screenshot-gallery a:hover img { transform:translateY(-4px); }
.help-card { display:flex; align-items:center; justify-content:space-between; gap:24px; margin-top:72px; }
.help-card h2 { margin:0; font-size:1.7rem; }.help-card p:last-child { margin-bottom:0; }.help-card .links { margin:0; flex-shrink:0; }
.home-footer { display:flex; flex-wrap:wrap; justify-content:space-between; gap:18px; padding:0 4px; }
@media (max-width:950px) { .feature-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .home-header { align-items:flex-start; } .home-nav { gap:12px 18px; justify-content:flex-end; } .hero,.ai-section { gap:28px; } .help-card { flex-wrap:wrap; } }
@media (max-width:650px) { .home-header { flex-direction:column; gap:20px; } .home-nav { justify-content:flex-start; } .hero,.ai-section,.personal-grid { grid-template-columns:1fr; } .hero-copy { text-align:left; } .hero-phone { width:230px; margin-top:12px; } .detail-phone { width:230px; } .home-section,.help-card { margin-top:48px; } .screenshot-gallery { grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px 16px; } .feature-grid { gap:14px; } .feature { padding:20px; } .feature h3 { font-size:1.15rem; } .home-footer nav { gap:18px; } }
@media (prefers-reduced-motion:reduce) { .screenshot-gallery img { transition:none; } }

/* Alternating app walkthroughs use the same two-column card as AI planning. */
.walkthrough { --walkthrough-accent:var(--accent); display:grid; grid-template-columns:1.5fr 1fr; align-items:center; gap:64px; }
.walkthrough-goals { --walkthrough-accent:#6c9fe5; }
.walkthrough-tasks { --walkthrough-accent:#b5b63f; }
.walkthrough-expenses { --walkthrough-accent:#945476; }
.walkthrough-insights { --walkthrough-accent:#9a70b6; }
.walkthrough-profile { --walkthrough-accent:#70ab96; }
.home .walkthrough-title { color:var(--walkthrough-accent); font-size:clamp(2.8rem,5vw,4.5rem); line-height:1.1; margin:0 0 20px; letter-spacing:-.04em; }
.walkthrough-subtitle { font-size:clamp(1.35rem,2.4vw,1.8rem); font-weight:650; line-height:1.3; margin:0 0 18px; }
.walkthrough .section-intro { margin-bottom:28px; }
.walkthrough-explanations { display:grid; gap:24px; }
.walkthrough-explanations h3 { color:var(--walkthrough-accent); font-size:1.3rem; line-height:1.3; margin:0 0 8px; }
.walkthrough-explanations p { margin:0; color:var(--muted); }
.walkthrough-images { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); align-items:start; gap:24px 16px; min-width:0; }
.walkthrough-images figure { margin:0; min-width:0; }
.walkthrough-images figure a { display:block; border-radius:20px; }
.walkthrough-images img { display:block; width:100%; height:auto; border:4px solid #20343c; border-radius:20px; box-shadow:0 12px 26px #183b4620; }
.walkthrough-images-single { grid-template-columns:1fr; width:min(100%,270px); margin:auto; }
.walkthrough-reverse { grid-template-columns:1fr 1.5fr; }
.walkthrough-reverse .walkthrough-copy { grid-column:2; grid-row:1; }
.walkthrough-reverse .walkthrough-images { grid-column:1; grid-row:1; }
@media (max-width:950px) { .walkthrough { gap:28px; } }
@media (max-width:650px) {
  .walkthrough,.walkthrough-reverse { grid-template-columns:1fr; }
  .walkthrough-reverse .walkthrough-copy,.walkthrough-reverse .walkthrough-images { grid-column:auto; grid-row:auto; }
  .walkthrough-images { max-width:380px; width:100%; margin:0 auto; }
  .walkthrough-images-single { max-width:230px; }
}

.custom-ai-row { margin-top:48px; padding-top:48px; border-top:1px solid var(--line); }
@media (max-width:650px) { .custom-ai-row { margin-top:32px; padding-top:32px; } }

/* Shared header and navigation across all public pages. */
.info-page main { max-width:1180px; margin-top:32px; }
.home-nav a { display:inline-block; padding:6px 0; }
.home-nav a[aria-current="page"] { border-bottom:2px solid var(--accent); }
.info-page a:focus-visible { outline:3px solid var(--accent); outline-offset:5px; }
@media (max-width:650px) { .info-page .home-header { flex-direction:column; gap:20px; } .info-page .home-nav { justify-content:flex-start; } }

/* Home stays a direct link; the adjacent control opens section links. */
.home-menu-group { display:flex; align-items:center; gap:0; }
.home-nav { align-items:center; }
.home-dropdown { position:relative; }
.home-dropdown summary { display:flex; align-items:center; justify-content:center; width:36px; height:40px; border:0; border-radius:6px; color:var(--accent); background:transparent; cursor:pointer; list-style:none; }
.home-dropdown summary::-webkit-details-marker { display:none; }
.home-dropdown summary:focus-visible { outline:3px solid var(--accent); outline-offset:3px; }
.home-dropdown summary span { display:block; width:8px; height:8px; margin-top:-4px; border-right:1.8px solid currentColor; border-bottom:1.8px solid currentColor; font-size:0; transform:rotate(45deg); transition:transform .18s ease; }
.home-dropdown summary:hover { color:var(--ink); }
.home-dropdown[open] summary span { margin-top:4px; transform:rotate(225deg); }
@media (prefers-reduced-motion:reduce) { .home-dropdown summary span { transition:none; } }
.home-dropdown-links { position:absolute; top:calc(100% + 4px); left:18px; z-index:10; width:140px; padding:0; border:0; border-radius:0; background:transparent; box-shadow:none; }
.home-nav .home-dropdown-links a { display:block; min-height:32px; padding:4px 0; line-height:1.5; border:0; border-radius:0; background:transparent; color:var(--muted); font-size:.95rem; font-weight:550; text-decoration:none; transition:color .16s ease; }
.home-nav .home-dropdown-links a:hover,.home-nav .home-dropdown-links a:focus-visible { color:var(--accent); background:transparent; text-decoration:underline; text-underline-offset:5px; }
@media (prefers-reduced-motion:reduce) { .home-dropdown-links a { transition:none; } }