:root { color-scheme: light; font-family: "Segoe UI", system-ui, -apple-system, sans-serif; color: #122a32; background: #fffdf9; --section-gap:36px; }
* { box-sizing: border-box; } [hidden] { display: none !important; } body { margin: 0; }
a { color: #12666b; text-underline-offset: 3px; } button { font: inherit; cursor: pointer; } button,a { -webkit-tap-highlight-color: transparent; }
button:focus-visible,a:focus-visible,summary:focus-visible { outline: 3px solid #bf8236; outline-offset: 4px; } h1,h2,h3,p { margin: 0; }
.skip-link { position:absolute;left:16px;top:-100px;z-index:100;padding:12px;background:white; } .skip-link:focus { top:10px; }
.landing-header { position:sticky;top:0;z-index:50;background:#fffdfb;border-bottom:1px solid #f0e1d5; }
.header-inner { max-width:1280px;min-height:68px;padding:12px 28px;margin:auto;display:flex;align-items:center;justify-content:space-between;gap:24px; }
.landing-brand { display:inline-flex;align-items:center;gap:11px;color:#321811;text-decoration:none;font-size:27px;font-weight:750;letter-spacing:-.04em;white-space:nowrap; }
.landing-brand svg,.landing-brand .brand-icon { width:46px;height:43px;flex-shrink:0;object-fit:contain; }
.landing-nav { display:flex;align-items:center;gap:36px; } .landing-nav a { color:#152c35;text-decoration:none;font-size:14px;font-weight:600; } .landing-nav a:hover { color:#9b3e56; }
.landing-nav .login-button { border:1px solid #25636b;border-radius:11px;min-width:90px;padding:9px 22px;margin-left:40px;text-align:center; }
.menu-toggle { display:none;width:42px;height:42px;border:0;background:transparent;padding:9px; } .menu-toggle span { display:block;height:2px;width:24px;margin:5px 0;background:#172c34; }
.hero { background:#fff0df;overflow:hidden; } .hero-inner { max-width:1280px;margin:auto;min-height:444px;position:relative;display:flex;align-items:center; }
.hero-copy { position:relative;z-index:2;width:62%;padding:40px 44px 38px; }
.hero h1 { color:#391a11;font-size:clamp(35px,4.3vw,57px);font-weight:780;letter-spacing:-.045em;line-height:1.06; } .hero h1 span { display:block;white-space:nowrap; }
.hero-copy > p:not(.login-note) { margin:10px 0 18px;color:#40241b;font-size:22px;line-height:1.36; }
.primary-button { display:inline-flex;justify-content:center;align-items:center;min-height:48px;padding:11px 30px;border:0;border-radius:17px;background:#0f666b;color:white;font-size:19px;line-height:1.25;font-weight:700;text-decoration:none;transition:background-color .15s; }
.primary-button:hover { background:#084f54; } .hero-button { min-width:330px; }
.demo-link { display:block; width:330px; max-width:100%; margin-top:14px; text-align:center; font-size:16px; font-weight:650; }
.login-note { color:#2f383b;margin-top:10px;font-size:14px;text-align:center; } .hero-copy .login-note { width:330px; } .login-note a { font-weight:650; }
.hero-art { position:absolute;right:-12px;bottom:-85px;width:62%;height:auto;object-fit:contain;object-position:right bottom; }
.landing-content { max-width:1280px;margin:auto;padding:var(--section-gap) 28px 0; } section[id] { scroll-margin-top:85px; }
.steps { display:grid;grid-template-columns:minmax(0,1fr) 24px minmax(0,1fr) 24px minmax(0,1fr);gap:6px;align-items:center; }
.step { min-width:0;height:238px;padding:14px 24px 12px;border-radius:17px;display:flex;flex-direction:column; }
.step-grade { background:#eaf3ef; } .step-coins { background:#fff0df; } .step-wish { background:#fcece7; }
.step h2 { display:flex;align-items:center;gap:12px;font-size:25px;font-weight:750;letter-spacing:-.04em;line-height:1.2; }
.step-number { width:38px;height:38px;display:grid;place-items:center;border-radius:50%;font-size:23px;color:white;background:#146570;border:2px solid white; }
.step-coins .step-number { background:#cb7d15; } .step-wish .step-number { background:#a43954; }
.step > p { margin-top:auto;text-align:center;color:#112830;font-size:16px;font-weight:600;line-height:1.3; } .step-arrow { display:block;color:#db770c;width:24px;height:24px; }
.spot { display:block;flex-shrink:0;width:128px;height:128px;background-image:url('/assets/landing/illustrations.webp');background-repeat:no-repeat;background-size:400% 200%; }
.art-note { background-position:0 0; } .art-coins { background-position:33.333333% 0; } .art-game { background-position:66.666667% 0; } .art-books { background-position:100% 0; }
.art-cinema { background-position:0 100%; } .art-plant { background-position:33.333333% 100%; } .art-dog { background-position:66.666667% 100%; } .art-plates { background-position:100% 100%; }
.notebook-art { margin:auto;width:170px;height:160px;position:relative; } .notebook-art .spot { width:170px;height:160px; }
.notebook-subject { position:absolute;left:37px;top:32px;color:#1b333c;font-size:16px;font-weight:600;transform:rotate(-10deg); }
.coins-example { flex:1;display:flex;align-items:center;justify-content:center;gap:0; } .coins-example .spot { width:170px;height:160px; } .coins-example > strong { color:#a8431f;font-size:54px;letter-spacing:-.05em; }
.wish-example { flex:1;display:flex;align-items:center;justify-content:center;gap:0; } .wish-example .spot { width:175px;height:155px; } .goal-example { width:120px;flex-shrink:0; }
.game-art { position:relative;flex-shrink:0; } .game-title { position:absolute;left:36%;top:37%;width:55%;font-size:14px;font-weight:750;line-height:1.1;color:#143541;transform:skewY(-9deg);transform-origin:left top; }
.goal-example > strong { display:flex;align-items:center;gap:7px;font-size:20px;white-space:nowrap;color:#482321; }
.tiny-coin,.mini-coin { display:inline-grid;place-items:center;width:34px;height:34px;border:2px solid #ffd991;background:#e8a630;border-radius:50%;color:#ffdf98;font-size:23px;box-shadow:inset 0 0 0 2px #f2bd5c;flex-shrink:0; }
.mini-coin { width:16px;height:16px;font-size:10px;border-width:1px;box-shadow:none; }
.progress-track { display:block;height:15px;margin-top:8px;border-radius:20px;background:#fff6f0;border:1px solid #a74460;padding:2px; } .progress-track > span { display:block;width:80%;height:100%;border-radius:20px;background:#be6076; }
.coin-explanation { margin:20px 0;border-radius:12px;padding:7px 16px;min-height:41px;display:flex;align-items:center;justify-content:center;gap:11px;background:#fff0e4;color:#73283c;font-size:16px;font-weight:650; }
.coin-explanation > span { width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:#a13956;color:white;font-family:Georgia,serif;font-size:22px;font-weight:bold;flex-shrink:0; }
.family-roles { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px; }
.role-card { display:grid;grid-template-columns:1.6fr 1fr;align-items:start;gap:15px;border-radius:16px;padding:20px;min-width:0; } .parent-role { background:#edf4ee; } .child-role { background:#fff0e5; }
.role-card h2 { font-size:20px;font-weight:750;line-height:1.24;letter-spacing:-.04em;margin-bottom:8px; } .role-card p { font-size:16px;line-height:1.43;color:#34434a; }
.grade-preview,.balance-preview { background:#fffefd;border:1px solid #e0e5dc;border-radius:12px;padding:11px;min-width:0; }
.grade-preview h3,.balance-preview h3 { font-size:13px;margin-bottom:6px; }
.grade-preview > div { display:grid;grid-template-columns:minmax(0,1fr) 20px 48px;gap:4px;align-items:center;border-top:1px solid #e6ebe8;padding:8px 0;font-size:12px; }
.grade-preview strong { display:flex;align-items:center;justify-content:flex-end;gap:3px; } .preview-balance { display:flex;align-items:center;gap:8px;font-size:30px;line-height:1;color:#421b12; }
.preview-goal { display:flex;align-items:center;border-top:1px solid #ebe3da;margin-top:8px;padding-top:7px; } .preview-goal .spot { width:56px;height:56px; } .preview-goal > div { flex:1;min-width:0; }
.preview-goal b,.preview-goal > div > span:not(.progress-track) { display:block;text-align:right;font-size:11px;line-height:1.35; } .preview-goal .progress-track { height:9px;padding:1px;margin-top:4px; }
.rewards-section { background:#fff0df;margin-top:var(--section-gap);padding:18px 26px 12px;border-radius:16px; }
.rewards-section h2,.faq-section > h2 { color:#3a180f;font-size:28px;font-weight:750;letter-spacing:-.04em;line-height:1.15; } .rewards-section > p { margin-top:3px;font-size:16px;color:#444545; }
.rewards-list { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px; } .rewards-list article { display:flex;align-items:center;gap:8px;min-width:0; }
.rewards-list .spot { width:142px;height:132px; } .rewards-list h3 { font-size:17px;color:#331e16;margin-bottom:7px;line-height:1.2; } .rewards-list p { font-size:15px;color:#444c50;line-height:1.35; }
.chores-section { display:flex;align-items:center;gap:18px;padding:14px 24px;margin-top:var(--section-gap);border-radius:16px;background:#edf2e8; }
.chores-copy { flex:1;min-width:0; } .chores-copy h2 { font-size:23px;line-height:1.25;letter-spacing:-.04em; } .chores-copy p { font-size:15px;color:#34434a;line-height:1.4;margin-top:4px; }
.chores-list { display:flex;flex:1.12;gap:8px;list-style:none;margin:0;padding:0; } .chores-list li { flex:1;display:flex;align-items:center;background:#fffdf6;border-radius:12px;padding:6px;min-width:0; }
.chores-list .spot { width:62px;height:62px; } .chores-list li > div { font-size:12px;font-weight:600;line-height:1.3; } .chores-list strong { display:block;font-size:21px;color:#bf6305;margin-top:3px; }
.faq-section { margin-top:var(--section-gap); } .faq-section > h2 { font-size:25px;margin-bottom:14px; } .faq-list { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px; }
.faq-list details { padding:14px 18px;border:1px solid #e8e1d8;border-radius:12px;background:#fffdf9;align-self:start; }
.faq-list summary { position:relative;padding-right:20px;color:#34221c;font-size:16px;font-weight:650;cursor:pointer;list-style:none;line-height:1.35; }
.faq-list summary::-webkit-details-marker { display:none; } .faq-list summary::after { content:'›';position:absolute;right:0;top:-3px;font-size:26px;color:#163440; } .faq-list details[open] summary::after { transform:rotate(90deg); }
.faq-list p { margin-top:8px;font-size:15px;line-height:1.4;color:#46505a; }
.closing-section { overflow:hidden;position:relative;text-align:center;margin:var(--section-gap) -12px 0;padding:17px 24px 10px;border-radius:16px;background:#176a70;color:white; }
.closing-section > h2 { position:relative;font-size:27px;line-height:1.2;font-weight:700;letter-spacing:-.03em; } .closing-section > p:not(.login-note) { position:relative;margin:3px 0 10px;font-size:17px; } .closing-section a { position:relative; }
.light-button { min-height:35px;padding:6px 26px;background:#fffefa;color:#173b40;font-size:16px;border-radius:24px; } .light-button:hover { background:#fce8d2; }
.closing-section .login-note { color:#fff;margin-top:7px;font-size:12px; } .closing-section .login-note a { color:white; }
.closing-leaf { position:absolute;height:180px;width:135px;bottom:-46px;opacity:.28;transform:rotate(-20deg);background:url('/assets/landing/leaf.svg') center/contain no-repeat; } .leaf-left { left:12px; } .leaf-right { right:5px;transform:rotate(30deg) scaleX(-1); }
.landing-footer { display:flex;align-items:center;justify-content:space-between;min-height:50px;padding:8px 4px; } .landing-footer .landing-brand { font-size:19px;gap:6px; } .landing-footer .landing-brand svg,.landing-footer .landing-brand .brand-icon { width:32px;height:30px; }
.privacy-button,.landing-footer > a:not(.landing-brand) { border:0;background:transparent;padding:8px;color:#33434c;font-size:12px; } .privacy-button:hover { text-decoration:underline; }
.pilot-note { padding-bottom:12px;color:#657071;font-size:12px;line-height:1.5;text-align:center; }
dialog { width:min(90vw,580px);border:1px solid #eadcd3;border-radius:16px;padding:28px;color:#26343a;background:#fffdf9; } dialog::backdrop { background:#18353665; } dialog h2 { font-size:26px;margin-bottom:18px; } dialog p { font-size:16px;line-height:1.55;margin-top:14px; } dialog form { margin-top:20px; }
@media (min-width:1500px) { .hero-inner { min-height:480px; } }
@media (max-width:1100px) and (min-width:761px) {
  .game-title { font-size:11px;transform:skewY(-10deg); }
  .header-inner { min-height:59px;padding:9px 24px; } .landing-brand { font-size:24px; } .landing-brand svg,.landing-brand .brand-icon { width:38px;height:35px; } .landing-nav { gap:25px; } .landing-nav .login-button { margin-left:12px; }
  .hero-inner { min-height:384px; } .hero-copy { padding:30px 28px; } .hero-copy > p:not(.login-note) { font-size:18px; } .hero h1 { font-size:clamp(33px,4vw,43px); } .hero-button,.hero-copy .login-note { min-width:0;width:290px; } .hero-art { width:62%;bottom:-65px; }
  .step { height:208px;padding:12px 16px; } .step h2 { font-size:22px; } .step > p { font-size:14px; } .step-number { width:34px;height:34px;font-size:21px; }
  .notebook-art,.notebook-art .spot { width:145px;height:140px; } .notebook-subject { left:32px;top:28px;font-size:13px; } .coins-example .spot { width:145px;height:135px; } .coins-example > strong { font-size:45px; } .wish-example .spot { width:135px;height:135px; } .goal-example { width:97px; } .goal-example > strong { font-size:17px; } .tiny-coin { width:28px;height:28px;font-size:19px; }
  .role-card { padding:16px;gap:12px; } .role-card h2 { font-size:18px; } .role-card p { font-size:14px; } .grade-preview { padding:8px; } .grade-preview > div { font-size:10px;grid-template-columns:minmax(0,1fr) 12px 34px; }
  .rewards-list { gap:10px; } .rewards-list .spot { width:115px;height:110px; } .rewards-list h3 { font-size:15px; } .rewards-list p { font-size:13px; } .chores-copy h2 { font-size:20px; } .chores-copy p { font-size:13px; } .chores-list .spot { width:47px;height:50px; } .chores-list li > div { font-size:10px; }
  .faq-list p,.faq-list summary { font-size:14px; }
}
@media (max-width:760px) {
  :root { --section-gap:24px; }
  .game-title { font-size:13px;transform:skewY(-8.5deg); }
  .header-inner { padding:8px 18px;min-height:58px;gap:12px;flex-wrap:wrap; } .landing-brand { font-size:23px;gap:8px; } .landing-brand svg,.landing-brand .brand-icon { width:35px;height:34px; }
  .menu-ready .menu-toggle { display:block;margin-left:auto; } .landing-nav { width:100%;flex-direction:column;align-items:stretch;gap:0;padding:8px 0; } .landing-nav a { padding:13px 10px;font-size:16px; } .landing-nav .login-button { margin:6px 0 0;min-width:0; } .menu-ready .landing-nav { display:none; } .menu-ready .landing-header[data-menu-open] .landing-nav { display:flex; }
  .hero-inner { min-height:0;display:block; } .hero-copy { width:100%;padding:24px 22px 0; } .hero h1 { font-size:clamp(28px,7.6vw,44px);letter-spacing:-.035em;line-height:1.06; } .hero h1 span { white-space:normal; }
  .hero-copy > p:not(.login-note) { font-size:17px;line-height:1.35;margin:10px 0 14px; } .desktop-break { display:none; } .hero-button { min-width:0;width:100%;min-height:45px;font-size:18px;border-radius:14px; } .hero-copy .login-note { width:100%;margin-top:8px;font-size:12px; }
  .hero-art { display:block;position:relative;width:100%;height:auto;max-height:310px;object-fit:contain;object-position:center bottom;right:auto;bottom:0;margin:0 auto; }
  .landing-content { padding:var(--section-gap) 18px 0; } section[id] { scroll-margin-top:78px; }
  .steps { display:flex;flex-direction:column;gap:0; } .step { width:100%;height:192px;padding:10px 18px;border-radius:14px; } .step h2 { font-size:21px;gap:10px; } .step-number { width:31px;height:31px;font-size:19px; } .step > p { font-size:14px; } .step-arrow { transform:rotate(90deg);margin:4px 0; }
  .notebook-art,.notebook-art .spot { height:133px;width:150px; } .notebook-subject { left:32px;top:27px;font-size:13px; } .coins-example { gap:7px; } .coins-example .spot { width:150px;height:132px; } .coins-example > strong { font-size:46px; } .wish-example .spot { width:163px;height:137px; } .goal-example { width:117px; } .goal-example > strong { font-size:20px; }
  .coin-explanation { margin:16px 0;padding:8px 10px;gap:8px;justify-content:flex-start;font-size:12px;min-height:37px; } .coin-explanation > span { width:23px;height:23px;font-size:18px; }
  .family-roles { display:flex;flex-direction:column;gap:14px; } .role-card { padding:12px 14px;display:block;border-radius:12px; } .role-card h2 { font-size:19px;margin-bottom:5px; } .role-card p { font-size:14px;line-height:1.35; } .grade-preview,.balance-preview { display:none; }
  .rewards-section { padding:14px 14px 10px;margin-top:var(--section-gap);border-radius:12px; } .rewards-section h2 { font-size:22px; } .rewards-section > p { font-size:13px;line-height:1.3; } .rewards-list { gap:5px; } .rewards-list article { display:flex;flex-direction:column;gap:0;text-align:center; } .rewards-list .spot { width:88px;max-width:100%;height:88px; } .rewards-list h3 { font-size:12px;margin:2px 0 0;line-height:1.25; } .rewards-list p { display:none; }
  .chores-section { display:block;padding:12px 12px 9px;margin-top:var(--section-gap);border-radius:12px; } .chores-copy h2 { font-size:19px; } .chores-copy p { font-size:12px;line-height:1.35; } .chores-list { margin-top:5px;gap:5px; } .chores-list li { padding:2px 0;background:transparent;gap:1px; } .chores-list .spot { width:40px;height:44px; } .chores-list li > div { font-size:10px; } .chores-list strong { font-size:16px;margin-top:1px; }
  .faq-section { margin-top:var(--section-gap); } .faq-section > h2 { font-size:22px;margin-bottom:12px; } .faq-list { display:block; } .faq-list details { padding:10px 12px;border-radius:9px;margin-bottom:10px; } .faq-list summary { font-size:13px; } .faq-list summary::after { font-size:22px; } .faq-list p { font-size:12px;margin-top:4px;line-height:1.4; }
  .closing-section { margin:var(--section-gap) -5px 0;padding:16px 17px 12px;border-radius:12px; } .closing-section > h2 { font-size:22px; } .closing-section > p:not(.login-note) { font-size:13px;line-height:1.3;margin:5px 0 9px; } .light-button { font-size:14px;min-height:34px;padding:6px 23px; } .closing-section .login-note { font-size:11px;margin-top:7px; } .closing-leaf { width:70px;height:90px;opacity:.15; }
  .landing-footer { min-height:49px; } .landing-footer .landing-brand { font-size:17px; } .landing-footer .landing-brand svg,.landing-footer .landing-brand .brand-icon { width:27px;height:26px; } .privacy-button { font-size:11px;padding:6px 0; } .pilot-note { font-size:10px;padding-bottom:10px; }
}