/* ====== Lifetile LP ====== */

:root{
  --bg: #FAF7F1;
  --bg-warm: #F2EDE2;
  --ink: #0B0E13;
  --ink-soft: #1A1F2A;
  --muted: #6B7280;
  --line: #E7E1D2;
  --line-strong: #1A1F2A;

  /* Lifetile palette */
  --tile-past: #7DD8A0;
  --tile-save: #2F84FB;
  --tile-draw: #D33CEA;
  --tile-warn: #F5A03B;
  --tile-end:  #FF453A;
  --tile-life: #0AC2A7;

  --radius-sm: 10px;
  --radius:    18px;
  --radius-lg: 28px;

  --maxw: 1240px;
}

*{ box-sizing:border-box; margin:0; padding:0; }
html,body{ background:var(--bg); color:var(--ink); }
body{
  font-family:"Zen Kaku Gothic New","Hiragino Kaku Gothic ProN","Yu Gothic UI",system-ui,sans-serif;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  font-feature-settings: "palt";
  line-height:1.7;
  letter-spacing:0.005em;
}
img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; cursor:pointer; }

.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 28px; }

/* ---------- TOP NAV ---------- */
.nav{
  position:sticky; top:0; z-index:50;
  background:rgba(250,247,241,0.85);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom:1px solid rgba(11,14,19,0.06);
}
.nav-inner{
  display:flex; align-items:center; justify-content:space-between;
  height:68px;
}
.brand{ display:flex; align-items:center; gap:10px; font-weight:700; letter-spacing:0.02em; }
.brand-mark{
  width:28px; height:28px; border-radius:7px;
  display:grid; grid-template-columns:repeat(3,1fr); grid-template-rows:repeat(3,1fr);
  gap:2px;
}
.brand-mark span{ border-radius:1.5px; background:var(--ink); }
.brand-mark span:nth-child(1){ background:var(--tile-past); }
.brand-mark span:nth-child(2){ background:var(--tile-past); }
.brand-mark span:nth-child(3){ background:var(--tile-save); }
.brand-mark span:nth-child(4){ background:var(--tile-save); }
.brand-mark span:nth-child(5){ background:var(--tile-save); }
.brand-mark span:nth-child(6){ background:var(--tile-draw); }
.brand-mark span:nth-child(7){ background:var(--tile-draw); }
.brand-mark span:nth-child(8){ background:var(--tile-draw); }
.brand-mark span:nth-child(9){ background:var(--tile-warn); }
.brand-name{ font-size:18px; }

.nav-links{ display:flex; gap:28px; font-size:14px; color:var(--ink-soft); }
.nav-links a:hover{ color:var(--ink); }
.nav-cta{
  display:inline-flex; align-items:center; gap:10px;
  background:var(--ink); color:#fff;
  padding:12px 22px;
  border-radius:999px;
  font-size:15px; font-weight:600;
  white-space:nowrap;
}
.nav-cta svg{ width:18px; height:18px; }

@media (max-width: 760px){
  .nav-links{ display:none; }
}

/* ---------- HERO ---------- */
.hero{
  padding:48px 0 24px;
  position:relative;
  overflow:hidden;
}
.hero-inner{
  display:grid; grid-template-columns: 1.05fr 0.95fr;
  gap:48px; align-items:center;
}
.eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-size:12px; letter-spacing:0.18em; text-transform:uppercase;
  color:var(--muted);
  font-weight:600;
}
.eyebrow .dot{ width:6px; height:6px; border-radius:50%; background:var(--tile-end); display:inline-block; }
.hero h1{
  margin-top:18px;
  font-weight:900;
  font-size: clamp(40px, 5.6vw, 78px);
  line-height:1.05;
  letter-spacing:-0.01em;
}
.hero h1 .em{
  display:inline-block;
  background: linear-gradient(180deg, var(--tile-save) 0%, var(--tile-draw) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero-sub{
  margin-top:22px;
  font-size:18px; line-height:1.8;
  color:var(--ink-soft);
  max-width:520px;
  text-wrap:pretty;
}
.hero-meta{
  margin-top:28px;
  display:flex; flex-wrap:wrap; gap:10px;
}
.chip{
  font-size:12.5px; font-weight:600;
  padding:8px 14px; border-radius:999px;
  background:#fff; border:1px solid var(--line);
  color:var(--ink-soft);
  display:inline-flex; align-items:center; gap:8px;
}
.chip .swatch{ width:8px; height:8px; border-radius:2px; }

.hero-cta{
  margin-top:32px;
  display:flex; gap:14px; flex-wrap:wrap; align-items:center;
}
.btn-appstore{
  display:inline-flex; align-items:center; gap:12px;
  background:var(--ink); color:#fff;
  padding:10px 22px 10px 18px;
  border-radius:14px;
  font-weight:600;
  transition:transform .15s, background .15s;
  line-height:1;
}
.btn-appstore:hover{ transform: translateY(-1px); background:#000; }
.btn-appstore .apple{ width:28px; height:28px; flex-shrink:0; }
.btn-appstore .label{ display:flex; flex-direction:column; gap:3px; align-items:flex-start; white-space:nowrap; }
.btn-appstore .small{ font-size:10.5px; font-weight:500; letter-spacing:0.04em; opacity:0.78; line-height:1; white-space:nowrap; }
.btn-appstore .big{ font-size:19px; font-weight:600; line-height:1; letter-spacing:0.005em; white-space:nowrap; }
.btn-ghost{
  display:inline-flex; align-items:center; gap:8px;
  padding:14px 18px;
  border-radius:14px;
  border:1px solid var(--line);
  font-weight:600; font-size:14px;
  color:var(--ink-soft);
  background:#fff;
}
.btn-ghost:hover{ border-color:var(--ink); color:var(--ink); }

.hero-trust{
  margin-top:34px;
  display:flex; align-items:center; gap:18px;
  font-size:13px; color:var(--muted);
}
.hero-trust strong{ color:var(--ink); font-weight:700; }
.hero-trust .sep{ width:1px; height:14px; background:var(--line); display:inline-block; }

/* ---------- IPAD SECTION ---------- */
.ipad-sec{
  background:var(--bg-warm);
  padding: 96px 0;
}
.ipad-inner{
  display:grid; grid-template-columns: 0.9fr 1.1fr;
  gap:64px; align-items:center;
}
.ipad-text{ max-width:480px; }
.ipad-device .tablet{
  max-width:640px;
  box-shadow:
    0 50px 100px -30px rgba(11,14,19,0.35),
    0 20px 50px -20px rgba(11,14,19,0.2);
}
@media (max-width: 980px){
  .ipad-inner{ grid-template-columns:1fr; gap:40px; }
  .ipad-device .tablet{ max-width:520px; }
}

/* ---------- ICONS SECTION ---------- */
.icons-sec{
  padding: 96px 0;
  background:var(--bg);
}
.icons-grid{
  margin-top:56px;
  display:grid; grid-template-columns: repeat(3, 1fr);
  gap:24px;
}
.icon-card{
  border-radius: var(--radius-lg);
  padding: 40px 32px 28px;
  display:flex; flex-direction:column; align-items:center; gap:24px;
  border:1px solid var(--line);
  background:#fff;
  transition: transform .2s;
}
.icon-card:hover{ transform: translateY(-4px); }
.icon-card--normal{ background: linear-gradient(180deg, #FFFFFF, #F2EDE2); }
.icon-card--dark{ background: linear-gradient(180deg, #1A1F2A, #0B0E13); border-color:transparent; color:#F2EDE2; }
.icon-card--clear{ background: linear-gradient(180deg, #2A2F3A, #14171F); border-color:transparent; color:#F2EDE2; }

.icon-mount{
  width: 180px; height: 180px;
  border-radius: 40px;
  overflow:hidden;
  box-shadow:
    0 24px 60px -20px rgba(11,14,19,0.35),
    0 8px 24px -8px rgba(11,14,19,0.25);
}
.icon-mount img{ width:100%; height:100%; display:block; }

.icon-card figcaption{
  display:flex; flex-direction:column; align-items:center; gap:4px;
  text-align:center;
}
.icon-card .label{
  font-size:13px; font-weight:700; letter-spacing:0.18em; text-transform:uppercase;
}
.icon-card .sub{
  font-size:12px; opacity:0.6;
}
@media (max-width: 760px){
  .icons-grid{ grid-template-columns:1fr; gap:16px; }
  .icon-mount{ width:140px; height:140px; border-radius:32px; }
}

/* hero device */
.hero-device{
  position:relative;
  display:flex; justify-content:center; align-items:center;
  min-height:680px;
}
.tile-bg{
  position:absolute; inset:0;
  display:grid;
  grid-template-columns: repeat(18, 1fr);
  grid-auto-rows: 1fr;
  gap:6px;
  opacity:0.55;
  -webkit-mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%);
          mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%);
  pointer-events:none;
}
.tile-bg i{ aspect-ratio:1; border-radius:3px; background:#E7E1D2; display:block; }
.phone{
  position:relative; z-index:2;
  width:330px;
  border-radius:48px;
  padding:14px;
  background:linear-gradient(180deg, #1A1F2A, #0B0E13);
  box-shadow:
    0 50px 120px -40px rgba(11,14,19,0.45),
    0 20px 60px -20px rgba(11,14,19,0.25),
    inset 0 1px 0 rgba(255,255,255,0.08);
}
.phone-screen{
  border-radius:36px; overflow:hidden;
  background:#fff;
  aspect-ratio: 1320 / 2688;
}
.phone-screen img{ width:100%; height:100%; object-fit:cover; }

@media (max-width: 980px){
  .hero{ padding:32px 0 16px; }
  .hero-inner{ grid-template-columns:1fr; gap:32px; }
  .hero-device{ min-height: 560px; order:2; }
  .phone{ width: 280px; }
}

/* ---------- SECTION SCAFFOLD ---------- */
section{ padding:96px 0; position:relative; }
.section-eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-size:12px; letter-spacing:0.2em; text-transform:uppercase;
  color:var(--muted);
  font-weight:700;
}
.section-eyebrow .bar{ width:24px; height:1px; background:currentColor; }
.section-title{
  margin-top:18px;
  font-size: clamp(30px, 3.6vw, 52px);
  line-height:1.15;
  letter-spacing:-0.005em;
  font-weight:900;
  text-wrap:balance;
}
.section-lede{
  margin-top:20px;
  font-size:17px; color:var(--ink-soft); line-height:1.85;
  max-width:680px;
  text-wrap:pretty;
}

/* ---------- INTRO / MANIFESTO ---------- */
.manifesto{
  padding: 56px 0 72px;
  border-top:1px solid var(--line);
}
.manifesto p{
  font-size: clamp(24px, 2.4vw, 34px);
  line-height:1.6;
  font-weight:500;
  letter-spacing:-0.005em;
  max-width: 980px;
  text-wrap:pretty;
}
.manifesto p .mark{
  background: linear-gradient(180deg, transparent 62%, rgba(245,160,59,0.4) 62%);
  padding: 0 2px;
}

/* ---------- FEATURES ---------- */
.features{ background:var(--bg); }
.feature-row{
  display:grid; grid-template-columns: 1fr 1fr;
  gap: 80px; align-items:center;
  padding: 80px 0;
  border-top:1px solid var(--line);
}
.feature-row:first-of-type{ border-top:0; padding-top:32px; }
.feature-row.reverse .feature-text{ order:2; }
.feature-text{ max-width:520px; }
.feature-num{
  font-size:13px; font-weight:700; letter-spacing:0.2em;
  color:var(--muted);
}
.feature-text h3{
  margin-top:14px;
  font-size: clamp(28px, 3vw, 40px);
  line-height:1.2;
  font-weight:900;
  letter-spacing:-0.01em;
  text-wrap:balance;
}
.feature-text p{
  margin-top:18px;
  font-size:16px; line-height:1.85;
  color:var(--ink-soft);
}
.feature-bullets{
  list-style:none;
  margin-top:20px;
  display:flex; flex-direction:column; gap:8px;
}
.feature-bullets li{
  display:flex; gap:10px; align-items:flex-start;
  font-size:14.5px; color:var(--ink-soft);
}
.feature-bullets .dot{
  margin-top:9px;
  width:6px; height:6px; border-radius:50%;
  background:var(--ink);
  flex-shrink:0;
}
.feature-tags{
  margin-top:24px; display:flex; flex-wrap:wrap; gap:8px;
}
.feature-tag{
  font-size:12px; font-weight:600;
  padding:6px 12px; border-radius:999px;
  background:#fff; border:1px solid var(--line);
  color:var(--ink-soft);
}

/* feature device */
.feature-device{
  position:relative;
  padding: 32px;
  border-radius: var(--radius-lg);
}
.feature-device.light{ background:linear-gradient(135deg, #F2EDE2, #E7E1D2); }
.feature-device.dark{ background:linear-gradient(135deg, #161B26, #0B0E13); }
.feature-device .phone{
  margin: 0 auto;
  width: 280px;
}
.feature-device .phone-screen{ background:#fff; }
.feature-device.dark .phone-screen{ background:#000; }

/* tablet variant */
.feature-tablet{
  position:relative;
  padding:36px;
  border-radius: var(--radius-lg);
}
.tablet{
  width:100%; max-width:520px; margin:0 auto;
  background:#1A1F2A; padding:14px; border-radius:24px;
  box-shadow: 0 40px 80px -30px rgba(11,14,19,0.3);
}
.tablet-screen{
  border-radius:14px; overflow:hidden;
  aspect-ratio: 2064 / 2652;
}
.tablet-screen img{ width:100%; height:100%; object-fit:cover; }

@media (max-width: 880px){
  .feature-row{ grid-template-columns:1fr; gap:40px; padding:60px 0; }
  .feature-row.reverse .feature-text{ order:0; }
  .feature-device{ padding:24px; }
  .feature-device .phone{ width:240px; }
}

/* ---------- LOGIC / CREDIBILITY ---------- */
.logic{
  background:var(--ink);
  color:#F2EDE2;
}
.logic .section-eyebrow{ color:#9CA3AF; }
.logic .section-lede{ color:#CBD0DA; }
.logic-grid{
  margin-top:56px;
  display:grid; grid-template-columns: repeat(3, 1fr);
  gap:1px;
  background:rgba(255,255,255,0.08);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:var(--radius);
  overflow:hidden;
}
.logic-card{
  background:var(--ink);
  padding:32px 28px;
  display:flex; flex-direction:column; gap:14px;
}
.logic-card .lab{
  font-size:11px; letter-spacing:0.2em; text-transform:uppercase;
  color:#9CA3AF; font-weight:700;
}
.logic-card h4{
  font-size:20px; line-height:1.4; font-weight:800;
  color:#F2EDE2;
  letter-spacing:-0.005em;
}
.logic-card p{ font-size:13.5px; color:#9CA3AF; line-height:1.75; }
.logic-card .source{
  margin-top:auto; padding-top:18px;
  font-size:12px; color:#6B7280;
  border-top:1px dashed rgba(255,255,255,0.08);
}
.logic-card .source strong{ color:#CBD0DA; font-weight:600; }
@media (max-width: 880px){
  .logic-grid{ grid-template-columns:1fr; }
}

/* ---------- PRICING ---------- */
.pricing{ background:var(--bg-warm); }
.price-inner{
  display:grid; grid-template-columns: 1fr 1fr;
  gap:64px; align-items:center;
}
.price-card{
  background:#fff; border:1px solid var(--line);
  border-radius:var(--radius-lg);
  padding:40px;
  position:relative;
  overflow:hidden;
}
.price-card::before{
  content:""; position:absolute; inset:auto -40px -40px auto;
  width:200px; height:200px; border-radius:50%;
  background:radial-gradient(circle, var(--tile-life), transparent 70%);
  opacity:0.15;
}
.price-tag{
  display:inline-flex; align-items:baseline; gap:6px;
  font-size:11px; font-weight:700; letter-spacing:0.18em; text-transform:uppercase;
  color:var(--tile-end);
}
.price-amount{
  margin-top:18px;
  display:flex; align-items:baseline; gap:8px;
  font-feature-settings:"palt", "tnum";
}
.price-amount .y{ font-size:60px; font-weight:900; letter-spacing:-0.02em; }
.price-amount .u{ font-size:18px; font-weight:700; color:var(--muted); }
.price-strike{
  margin-top:8px;
  font-size:14px; color:var(--muted);
}
.price-strike s{ color:#A8A29E; }
.price-perks{
  margin-top:28px;
  display:flex; flex-direction:column; gap:14px;
}
.price-perks li{
  list-style:none;
  display:flex; gap:12px; align-items:center;
  padding:14px 18px;
  background:var(--bg);
  border-radius:14px;
  font-size:14.5px; font-weight:600;
}
.price-perks li svg{ width:18px; height:18px; color:var(--tile-life); flex-shrink:0; }
.price-note{
  margin-top:20px;
  font-size:12.5px; color:var(--muted); line-height:1.7;
}
@media (max-width: 880px){
  .price-inner{ grid-template-columns:1fr; gap:40px; }
}

/* ---------- AUDIENCE ---------- */
.audience{ background:var(--bg); }
.audience-grid{
  margin-top:56px;
  display:grid; grid-template-columns:repeat(2, 1fr);
  gap:14px;
}
.audience-card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:28px 28px 28px 64px;
  font-size:15.5px; line-height:1.7;
  font-weight:500;
  color:var(--ink-soft);
  position:relative;
}
.audience-card::before{
  content:""; position:absolute; left:28px; top:34px;
  width:18px; height:18px; border-radius:5px;
  background:var(--tile-save);
}
.audience-card:nth-child(2)::before{ background:var(--tile-draw); }
.audience-card:nth-child(3)::before{ background:var(--tile-past); }
.audience-card:nth-child(4)::before{ background:var(--tile-warn); }
.audience-card:nth-child(5)::before{ background:var(--tile-end); }
@media (max-width: 760px){
  .audience-grid{ grid-template-columns:1fr; }
}

/* ---------- PRIVACY MINI ---------- */
.privacy-mini{
  background:var(--ink); color:#F2EDE2;
  padding:80px 0;
}
.privacy-mini .section-eyebrow{ color:#9CA3AF; }
.pm-grid{
  margin-top:48px;
  display:grid; grid-template-columns:repeat(4,1fr); gap:24px;
}
.pm-card{
  border:1px solid rgba(255,255,255,0.08);
  border-radius:var(--radius);
  padding:24px;
}
.pm-card .glyph{
  width:36px; height:36px; border-radius:10px;
  background:rgba(125,216,160,0.12);
  display:grid; place-items:center;
  color:var(--tile-past);
  margin-bottom:18px;
}
.pm-card .glyph svg{ width:20px; height:20px; }
.pm-card h4{ font-size:16px; font-weight:800; letter-spacing:-0.005em; }
.pm-card p{ margin-top:8px; font-size:13px; color:#9CA3AF; line-height:1.7; }
@media (max-width: 880px){
  .pm-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width: 520px){
  .pm-grid{ grid-template-columns:1fr; }
}

/* ---------- DEV / SOCIAL ---------- */
.dev{ background:var(--bg-warm); }
.dev-inner{
  display:grid; grid-template-columns: 1fr 1.1fr;
  gap:64px; align-items:center;
}
.dev-card{
  background:#fff;
  border-radius:var(--radius-lg);
  border:1px solid var(--line);
  padding:36px;
}
.dev-avatar{
  width:88px; height:88px; border-radius:50%;
  overflow:hidden;
  background:#0B0E13;
  box-shadow: 0 8px 24px -8px rgba(11,14,19,0.3);
}
.dev-avatar img{ width:100%; height:100%; object-fit:cover; display:block; }
.dev-name{ margin-top:18px; font-size:20px; font-weight:800; letter-spacing:-0.005em; }
.dev-role{ font-size:13px; color:var(--muted); }
.dev-bio{ margin-top:18px; font-size:14.5px; line-height:1.85; color:var(--ink-soft); }
.dev-links{ margin-top:24px; display:flex; gap:10px; flex-wrap:wrap; }
.dev-link{
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 16px; border-radius:999px;
  background:var(--bg); border:1px solid var(--line);
  font-size:13px; font-weight:600;
  color:var(--ink-soft);
}
.dev-link svg{ width:14px; height:14px; }
.dev-link:hover{ border-color:var(--ink); color:var(--ink); }

@media (max-width: 880px){
  .dev-inner{ grid-template-columns:1fr; gap:40px; }
}

/* ---------- DISCLAIMER ---------- */
.disclaimer{
  padding:48px 0;
  border-top:1px solid var(--line);
}
.disclaimer-inner{
  display:grid; grid-template-columns: 200px 1fr; gap:48px;
}
.disclaimer-label{
  font-size:11px; letter-spacing:0.2em; text-transform:uppercase;
  color:var(--muted); font-weight:700;
}
.disclaimer ul{ list-style:none; display:flex; flex-direction:column; gap:14px; }
.disclaimer li{
  font-size:13.5px; line-height:1.75; color:var(--ink-soft);
  padding-left:18px; position:relative;
}
.disclaimer li::before{
  content:""; position:absolute; left:0; top:11px;
  width:6px; height:1px; background:var(--ink);
}
@media (max-width:760px){
  .disclaimer-inner{ grid-template-columns:1fr; gap:18px; }
}

/* ---------- CONTACT ---------- */
.contact{ background:var(--ink); color:#F2EDE2; }
.contact .section-eyebrow{ color:#9CA3AF; }
.contact .section-lede{ color:#CBD0DA; }
.contact-frame{
  margin-top:24px;
  max-width:600px; margin-left:auto; margin-right:auto;
  background:#fff; border-radius:var(--radius-lg);
  padding:26px;
  border:1px solid rgba(255,255,255,0.06);
}
.cform-sink{ display:none; }

/* custom contact form — matches the calculator field styling */
.cform .cfield{ margin-bottom:18px; }
.cform label{ display:block; font-size:13px; font-weight:700; color:var(--ink-soft); margin-bottom:7px; }
.cform .req{ font-size:11px; font-weight:700; color:#fff; background:var(--tile-end); border-radius:5px; padding:2px 7px; margin-left:6px; }
.cform .opt{ font-size:11px; font-weight:600; color:var(--muted); background:var(--bg-warm); border:1px solid var(--line); border-radius:5px; padding:2px 7px; margin-left:6px; }
.cform textarea, .cform input{
  width:100%; box-sizing:border-box; font:inherit; font-size:16px; color:var(--ink);
  background:var(--bg-warm); border:1px solid var(--line); border-radius:var(--radius-sm);
  padding:13px 14px; outline:none; transition:border-color .15s; resize:vertical;
}
.cform textarea:focus, .cform input:focus{ border-color:var(--tile-save); }
.cform textarea::placeholder, .cform input::placeholder{ color:#A8AEB8; }
.cform .chint{ margin-top:7px; font-size:12px; color:var(--muted); }
.cform .cerror{ margin:0 0 14px; font-size:13px; font-weight:600; color:var(--tile-end); }
.cf-submit{
  width:100%; border:0; cursor:pointer; font:inherit; font-weight:700; font-size:15px;
  background:var(--ink); color:#fff; border-radius:999px; padding:15px 20px; transition:opacity .15s, transform .12s;
}
.cf-submit:hover{ opacity:.9; }
.cf-submit:active{ transform:scale(.98); }
.cf-submit[disabled]{ opacity:.55; cursor:default; }
.cform-done{ text-align:center; padding:18px 6px; }
.cform-done .cdone-title{ font-size:20px; font-weight:900; color:var(--ink); }
.cform-done p{ margin-top:8px; font-size:14px; color:var(--ink-soft); line-height:1.7; }
.cf-reset{
  margin-top:16px; border:1px solid var(--line); background:transparent; color:var(--ink);
  cursor:pointer; font:inherit; font-weight:700; font-size:14px; border-radius:999px; padding:11px 20px;
}
.cf-reset:hover{ background:var(--bg-warm); }
.contact-fallback{ text-align:center; margin-top:16px; font-size:13px; color:#CBD0DA; }
.contact-fallback a{ color:#fff; text-decoration:underline; text-underline-offset:3px; }
.contact-fallback a:hover{ opacity:.85; }

/* contact accordion */
.contact-collapse{ margin-top:36px; }
.contact-collapse > summary{
  list-style:none; cursor:pointer;
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  padding: 22px 26px;
  border-radius: 18px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  transition: background .15s, border-color .15s;
}
.contact-collapse > summary:hover{
  background: rgba(255,255,255,0.07);
  border-color: rgba(255,255,255,0.16);
}
.contact-collapse > summary::-webkit-details-marker{ display:none; }
.contact-toggle-label{
  font-size:15px; font-weight:700; color:#F2EDE2;
  letter-spacing:0.005em;
}
.contact-toggle-label .close{ display:none; }
.contact-collapse[open] .contact-toggle-label .open{ display:none; }
.contact-collapse[open] .contact-toggle-label .close{ display:inline; }
.contact-toggle-icon{
  width:32px; height:32px; border-radius:50%;
  display:grid; place-items:center;
  background: rgba(255,255,255,0.06);
  color:#F2EDE2; font-size:18px; line-height:1;
  transition: transform .25s, background .15s;
}
.contact-collapse[open] .contact-toggle-icon{
  transform: rotate(45deg);
  background: #F2EDE2; color: var(--ink);
}

/* ---------- FAQ ---------- */
.faq-list{
  margin-top:40px;
  border-top:1px solid var(--line);
}
.faq-item{
  border-bottom:1px solid var(--line);
}
.faq-q{
  width:100%; text-align:left; background:transparent; border:0;
  padding:24px 0;
  display:flex; justify-content:space-between; align-items:center; gap:24px;
  font-size:17px; font-weight:700; color:var(--ink);
  letter-spacing:-0.005em;
}
.faq-q .ic{
  width:28px; height:28px; border-radius:50%;
  display:grid; place-items:center;
  border:1px solid var(--line);
  font-size:18px; color:var(--ink-soft);
  transition: transform .2s, background .2s, color .2s;
  flex-shrink:0;
}
.faq-item[open] .faq-q .ic{
  background:var(--ink); color:#fff; border-color:var(--ink);
  transform: rotate(45deg);
}
.faq-a{
  padding: 4px 0 24px;
  font-size:14.5px; line-height:1.85;
  color:var(--ink-soft);
  max-width:780px;
}
details > summary{ list-style:none; cursor:pointer; }
details > summary::-webkit-details-marker{ display:none; }

/* ---------- FOOTER ---------- */
.footer{
  background:var(--bg);
  border-top:1px solid var(--line);
  padding: 48px 0 64px;
}
.footer-inner{
  display:grid; grid-template-columns: 1.4fr 1fr 1fr;
  gap:48px; align-items:flex-start;
}
.footer-brand{ display:flex; flex-direction:column; gap:14px; }
.footer-brand p{
  font-size:13px; color:var(--muted); line-height:1.7; max-width:380px;
}
.footer h5{
  font-size:11px; letter-spacing:0.2em; text-transform:uppercase;
  color:var(--muted); font-weight:700;
  margin-bottom:16px;
}
.footer ul{ list-style:none; display:flex; flex-direction:column; gap:10px; }
.footer ul a{ font-size:13.5px; color:var(--ink-soft); }
.footer ul a:hover{ color:var(--ink); }
.footer-meta{
  margin-top:48px;
  padding-top:24px;
  border-top:1px solid var(--line);
  display:flex; justify-content:space-between; gap:24px;
  font-size:12px; color:var(--muted);
}
@media (max-width:760px){
  .footer-inner{ grid-template-columns:1fr; gap:32px; }
  .footer-meta{ flex-direction:column; }
}

/* ---------- UTIL ---------- */
.kbd-arrow{
  display:inline-block; width:10px; height:10px;
  border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor;
  transform: rotate(-45deg);
  margin-left:6px;
}

/* ====================================================== */
/* ============ REFINEMENTS (v2 — cleaner LP) ============ */
/* ====================================================== */

/* ---------- Responsive line-break utilities ---------- */
.d-sm{ display:none; }
.d-md{ display:none; }
@media (max-width: 760px){
  .d-sm{ display:inline; }
}
@media (max-width: 980px){
  .d-md{ display:inline; }
}

/* ---------- Refined hero: text wrapping & entrance ---------- */
.hero-text > *{
  animation: heroIn .8s cubic-bezier(.2,.7,.2,1) both;
}
.hero-text > *:nth-child(1){ animation-delay: .05s; }
.hero-text > *:nth-child(2){ animation-delay: .12s; }
.hero-text > *:nth-child(3){ animation-delay: .20s; }
.hero-text > *:nth-child(4){ animation-delay: .28s; }
.hero-text > *:nth-child(5){ animation-delay: .36s; }
.hero-text > *:nth-child(6){ animation-delay: .44s; }
@keyframes heroIn{
  from{ opacity:0; transform: translateY(8px); }
  to{ opacity:1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce){
  .hero-text > *{ animation: none !important; }
}

/* Slightly more weight to the hero subhead */
.hero-sub{ font-weight:500; }

/* ---------- HOW IT WORKS ---------- */
.how{
  background: var(--bg);
  padding: 96px 0;
  border-top: 1px solid var(--line);
  position: relative;
}
.how::after{
  content:""; position:absolute; left:0; right:0; bottom:0;
  height:1px; background:var(--line);
}
.how-steps{
  list-style: none;
  margin-top: 56px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  counter-reset: step;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.how-step{
  position: relative;
  padding: 40px 32px;
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: var(--bg);
  transition: background .2s;
}
.how-step:last-child{ border-right: 0; }
.how-step:hover{ background:#fff; }
.how-step .step-num{
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--muted);
}
.how-step::before{
  content:""; position:absolute; top:0; left:0;
  width:0; height:3px;
  background: var(--tile-save);
  transition: width .3s ease;
}
.how-step:nth-child(1)::before{ background: var(--tile-past); }
.how-step:nth-child(2)::before{ background: var(--tile-save); }
.how-step:nth-child(3)::before{ background: var(--tile-draw); }
.how-step:hover::before{ width:100%; }
.how-step h3{
  font-size: 20px;
  line-height: 1.45;
  font-weight: 800;
  letter-spacing: -0.005em;
  color: var(--ink);
}
.how-step p{
  font-size: 14.5px;
  line-height: 1.85;
  color: var(--ink-soft);
}
@media (max-width: 880px){
  .how-steps{ grid-template-columns: 1fr; }
  .how-step{ border-right: 0; border-bottom: 1px solid var(--line); padding: 32px 24px; }
  .how-step:last-child{ border-bottom: 0; }
}

/* ---------- Refined manifesto ---------- */
.manifesto{
  padding: 72px 0 88px;
  border-top: 0;
}
.manifesto p{
  text-align: left;
}

/* ---------- Features: small polish ---------- */
.feature-num{
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-weight: 600;
}
.feature-text h3{
  text-wrap: balance;
}

/* ---------- Pricing: comparison strip ---------- */
.price-comparison{
  list-style: none;
  margin-top: 28px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.price-comparison li{
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
}
.price-comparison .pc-label{
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 6px 10px;
  border-radius: 6px;
  background: var(--bg);
  color: var(--ink-soft);
  flex-shrink: 0;
  border: 1px solid var(--line);
  font-feature-settings: "tnum";
}
.price-comparison .pc-pro{
  background: var(--ink);
  color: #F2EDE2;
  border-color: var(--ink);
}
.price-comparison .pc-text{
  font-size: 14px;
  color: var(--ink-soft);
  line-height: 1.55;
}

/* ---------- Audience: refined with numbers ---------- */
.audience-card{
  padding: 28px 28px 28px 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: transform .2s, border-color .2s, box-shadow .2s;
}
.audience-card::before{ display: none !important; }
.audience-card .aud-num{
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--muted);
}
.audience-card p{
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--ink-soft);
  font-weight: 500;
}
.audience-card{
  border-top: 3px solid transparent;
  border-radius: var(--radius);
}
.audience-card:nth-child(1){ border-top-color: var(--tile-past); }
.audience-card:nth-child(2){ border-top-color: var(--tile-save); }
.audience-card:nth-child(3){ border-top-color: var(--tile-draw); }
.audience-card:nth-child(4){ border-top-color: var(--tile-warn); }
.audience-card:nth-child(5){ border-top-color: var(--tile-end); }
.audience-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 18px 40px -20px rgba(11,14,19,0.18);
}
.audience-grid{
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.audience-grid > .audience-card:nth-child(4),
.audience-grid > .audience-card:nth-child(5){
  /* last row centered when 3+2 layout */
}
@media (max-width: 980px){
  .audience-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px){
  .audience-grid{ grid-template-columns: 1fr; }
}

/* ---------- Privacy: link out to full policy ---------- */
.privacy-link-row{
  margin-top: 40px;
  display: flex;
  justify-content: center;
}
.privacy-link{
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0.005em;
  color: #F2EDE2;
  padding: 12px 22px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.16);
  background: rgba(255,255,255,0.04);
  transition: background .2s, border-color .2s;
}
.privacy-link:hover{
  background: rgba(255,255,255,0.10);
  border-color: rgba(255,255,255,0.32);
}

/* ---------- FAQ: section background separation ---------- */
.faq-sec{
  background: var(--bg);
}

/* ---------- Section spacing rhythm ---------- */
section{ padding: 112px 0; }
@media (max-width: 880px){
  section{ padding: 80px 0; }
}

/* ---------- Smaller mobile refinements ---------- */
@media (max-width: 760px){
  .hero{ padding-top: 20px; }
  .hero-trust{ flex-wrap: wrap; gap: 10px 14px; }
  .hero-trust .sep{ display: none; }
  .hero-meta{ gap: 8px; }
  .chip{ font-size: 12px; padding: 7px 11px; }
  .price-amount .y{ font-size: 52px; }
  .nav-cta span{ display: none; }
  .nav-cta{ padding: 10px 14px; }
}

/* ---------- Brand-mark refinement: subtle gradient feel ---------- */
.brand-mark{ box-shadow: 0 1px 2px rgba(11,14,19,0.04); }

/* ---------- Footer link hover refinement ---------- */
.footer ul a{
  transition: color .15s, padding-left .15s;
  position: relative;
}
.footer ul a:hover{ padding-left: 4px; }

/* ---------- Disable hover effects in reduced-motion ---------- */
@media (prefers-reduced-motion: reduce){
  *{ transition: none !important; animation: none !important; }
}

/* ---------- HERO CTA note ---------- */
.hero-cta-note{ margin-top:12px; font-size:13px; color:var(--muted); }

/* ---------- HERO tile fill-in animation ---------- */
@media (prefers-reduced-motion: no-preference){
  .tile-bg.anim i{ opacity:0; animation:tileIn .5s ease forwards; }
  @keyframes tileIn{ to{ opacity:1; } }
}

/* ---------- MOBILE STICKY CTA ---------- */
.mobile-cta{ display:none; }
@media (max-width:760px){
  .mobile-cta{
    display:flex; align-items:center; gap:12px;
    position:fixed; left:0; right:0; bottom:0; z-index:60;
    padding:12px 16px calc(12px + env(safe-area-inset-bottom));
    background:rgba(250,247,241,0.92);
    backdrop-filter:blur(14px) saturate(140%);
    -webkit-backdrop-filter:blur(14px) saturate(140%);
    border-top:1px solid rgba(11,14,19,0.08);
  }
  .mobile-cta .mc-text{ flex:1; line-height:1.3; }
  .mobile-cta .mc-text b{ display:block; font-size:14px; font-weight:700; }
  .mobile-cta .mc-text small{ font-size:11px; color:var(--muted); }
  .mobile-cta .mc-btn{
    display:inline-flex; align-items:center; gap:8px;
    background:var(--ink); color:#fff; font-weight:700;
    padding:12px 18px; border-radius:999px; white-space:nowrap; font-size:14px;
  }
  .mobile-cta .mc-btn svg{ width:16px; height:16px; }
  body{ padding-bottom:76px; }
}

/* ============================================================
   FREE CALCULATOR (section #calc) — scoped under .lt-calc
   ============================================================ */
.lt-calc .card{ background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg); padding:28px; margin-top:26px; }

.lt-calc .form-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }
.lt-calc .field label{ display:block; font-size:13px; font-weight:600; color:var(--ink-soft); margin-bottom:6px; }
.lt-calc .field .inputwrap{ display:flex; align-items:center; gap:8px; background:var(--bg-warm); border:1px solid var(--line); border-radius:var(--radius-sm); padding:0 14px; transition:border-color .15s; }
.lt-calc .field .inputwrap:focus-within{ border-color:var(--tile-save); }
.lt-calc .field input{ width:100%; border:0; background:transparent; font:inherit; font-size:18px; font-weight:700; padding:12px 0; color:var(--ink); outline:none; }
.lt-calc .field .unit{ font-size:13px; color:var(--muted); white-space:nowrap; }
.lt-calc .assume{ margin-top:14px; font-size:12px; color:var(--muted); line-height:1.7; }
.lt-calc .assume b{ color:var(--ink-soft); font-weight:600; }

.lt-calc .result{ margin-top:22px; }
.lt-calc .verdict{ display:flex; align-items:flex-start; gap:12px; }
.lt-calc .verdict .vdot{ flex:none; width:14px; height:14px; border-radius:50%; margin-top:9px; background:var(--tile-life); }
.lt-calc .verdict h3{ font-size:clamp(20px,3.4vw,28px); font-weight:900; line-height:1.3; }
.lt-calc .verdict .vsub{ margin-top:4px; font-size:14px; color:var(--muted); }

.lt-calc .stats{ display:grid; grid-template-columns:repeat(2,1fr); gap:12px; margin-top:18px; }
.lt-calc .stat{ background:var(--bg-warm); border:1px solid var(--line); border-radius:var(--radius); padding:16px 18px; }
.lt-calc .stat .lbl{ font-size:12px; color:var(--muted); }
.lt-calc .stat .val{ font-size:clamp(22px,3.6vw,30px); font-weight:900; margin-top:2px; letter-spacing:-.01em; }

.lt-calc .gridwrap{ margin-top:22px; }
.lt-calc .gridhead{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:8px; gap:10px; }
.lt-calc .gridhead .t{ font-size:13px; font-weight:700; }
.lt-calc .gridhead .s{ font-size:12px; color:var(--muted); }
.lt-calc .lifegrid{ display:grid; grid-template-columns:repeat(20,1fr); gap:5px; opacity:0; transform:translateY(8px); }
.lt-calc .lifegrid.in{ animation:ltGridIn .55s ease forwards; }
@keyframes ltGridIn{ to{ opacity:1; transform:none; } }
.lt-calc .lifegrid i{ aspect-ratio:1; border-radius:4px; background:var(--line); }
.lt-calc .lifegrid i.past{ background:var(--tile-past); }
.lt-calc .lifegrid i.save{ background:var(--tile-save); }
.lt-calc .lifegrid i.draw{ background:var(--tile-draw); }
.lt-calc .lifegrid i.warn{ background:var(--tile-warn); }
.lt-calc .lifegrid i.end{ background:var(--tile-end); }

.lt-calc .legend{ display:flex; flex-wrap:wrap; gap:14px; margin-top:12px; font-size:12px; color:var(--ink-soft); }
.lt-calc .legend span{ display:inline-flex; align-items:center; gap:6px; }
.lt-calc .legend i{ width:11px; height:11px; border-radius:3px; }

.lt-calc .share{ display:flex; flex-wrap:wrap; gap:10px; margin-top:24px; }
.lt-calc .btn{ display:inline-flex; align-items:center; gap:8px; border:0; border-radius:999px; font:inherit; font-weight:700; font-size:14px; padding:13px 20px; cursor:pointer; text-decoration:none; transition:transform .12s, opacity .15s; }
.lt-calc .btn:active{ transform:scale(.97); }
.lt-calc .btn svg{ width:16px; height:16px; }
.lt-calc .btn-primary{ background:var(--ink); color:#fff; }
.lt-calc .btn-primary:hover{ opacity:.9; }
.lt-calc .btn-outline{ background:transparent; color:var(--ink); border:1px solid var(--line); }
.lt-calc .btn-outline:hover{ background:var(--bg-warm); }

.lt-calc .lt-disclaimer{ margin-top:18px; font-size:11.5px; color:var(--muted); line-height:1.75; border-top:1px solid var(--line); padding-top:14px; }

.lt-calc .appcta{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; background:var(--bg-warm); border:1px solid var(--line); border-radius:var(--radius); padding:18px 20px; margin-top:18px; }
.lt-calc .appcta .t{ font-size:14px; font-weight:700; }
.lt-calc .appcta .t small{ display:block; font-weight:400; color:var(--muted); font-size:12px; margin-top:2px; }

.lt-calc .toast{ position:fixed; left:50%; bottom:28px; transform:translateX(-50%) translateY(20px); background:var(--ink); color:#fff; padding:12px 18px; border-radius:999px; font-size:13px; font-weight:600; opacity:0; pointer-events:none; transition:opacity .25s, transform .25s; z-index:100; }
.lt-calc .toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }

@media (max-width:600px){
  .lt-calc .form-grid{ grid-template-columns:1fr; }
  .lt-calc .card{ padding:20px; }
}
@media (prefers-reduced-motion:reduce){
  .lt-calc .lifegrid,.lt-calc .lifegrid.in{ animation:none; opacity:1; transform:none; }
}

/* ====================================================== */
/* ============ PRICING v3 — Free is the price ============ */
/* ====================================================== */

/* Title accent — emphasize 「ぜんぶ無料」 */
.price-em{
  background: linear-gradient(180deg, transparent 62%, rgba(125,216,160,0.55) 62%);
  padding: 0 4px;
}

/* Stacked cards on the right */
.price-stack{
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* FREE card — primary, prominent */
.price-card.price-card-free{
  background: #fff;
  border: 2px solid var(--tile-life);
  position: relative;
  overflow: hidden;
}
.price-card.price-card-free::before{
  /* Soft green glow accent */
  content:""; position:absolute; inset:auto -40px -40px auto;
  width: 220px; height: 220px; border-radius: 50%;
  background: radial-gradient(circle, var(--tile-life), transparent 70%);
  opacity: 0.18;
  pointer-events: none;
}
.price-tag.price-tag-free{
  color: var(--tile-life);
  font-weight: 800;
}
.price-card.price-card-free .price-amount .y{
  color: var(--tile-life);
}

/* OPTION card — clearly secondary */
.price-card.price-card-option{
  background: var(--bg);
  border: 1px solid var(--line);
  padding: 28px 32px;
}
.price-card.price-card-option::before{
  display: none;
}
.price-card.price-card-option .price-tag{
  color: var(--muted);
}
.price-amount.price-amount-small{
  margin-top: 12px;
  gap: 4px;
}
.price-amount.price-amount-small .y{
  font-size: 40px;
  color: var(--ink-soft);
}
.price-amount.price-amount-small .plus{
  font-size: 28px;
  font-weight: 800;
  color: var(--muted);
  letter-spacing: -0.02em;
  margin-right: 2px;
}
.price-amount.price-amount-small .u{
  font-size: 14px;
}
.price-card.price-card-option .price-strike{
  font-size: 13px;
}
.price-card.price-card-option .price-perks li{
  background: #fff;
  padding: 12px 16px;
  font-size: 13.5px;
}
.price-card.price-card-option .price-perks li svg{
  color: var(--muted);
  width: 16px;
  height: 16px;
}
.price-card.price-card-option .price-note{
  font-size: 12px;
  margin-top: 16px;
}

/* Comparison strip — make ¥0 visually dominant over ¥480 */
.price-comparison .pc-label.pc-free{
  background: var(--tile-life);
  color: #fff;
  border-color: var(--tile-life);
  font-size: 14px;
  font-weight: 900;
  letter-spacing: 0.04em;
  padding: 8px 14px;
}
.price-comparison .pc-label.pc-pro{
  background: transparent;
  color: var(--ink-soft);
  border: 1px dashed var(--line-strong);
  font-weight: 700;
}
.price-comparison li:has(.pc-free){
  background: #fff;
  border-color: var(--tile-life);
  border-width: 1.5px;
}
.price-comparison li:has(.pc-pro){
  opacity: 0.78;
}

/* Mobile refinement */
@media (max-width: 880px){
  .price-stack{ gap: 14px; }
  .price-card.price-card-free{ padding: 32px 28px; }
  .price-card.price-card-option{ padding: 24px 26px; }
  .price-amount.price-amount-small .y{ font-size: 32px; }
}