/* Hero film and composition. Product cards are independent HTML, never image crops. */
.hero { position:relative; height:auto; min-height:850px; overflow:hidden; background:#403c35; }
.hero-media,.hero-media::after { position:absolute; inset:0; }
.hero-frame { position:relative; }
.hero-video { pointer-events:none; width:100%; height:100%; object-fit:cover; object-position:50% 40%; }
.hero-media::after { content:''; pointer-events:none; background:linear-gradient(90deg,rgba(24,23,20,.14),transparent 60%),linear-gradient(0deg,rgba(25,24,20,.22),transparent 60%); }
.hero-grid { position:relative; display:flex; flex-direction:column; align-items:flex-start; gap:28px; padding-block:32px; }
.hero-card { position:relative; z-index:2; max-width:545px; padding:28px 30px 26px; border-radius:22px; background:rgba(255,253,248,.86); border:1px solid rgba(255,255,255,.8); -webkit-backdrop-filter:blur(28px) saturate(1.2); backdrop-filter:blur(28px) saturate(1.2); box-shadow:0 12px 44px rgba(26,22,16,.12),inset 0 1px 0 #fff; }
.hero-card h1 { font-size:clamp(42px,4.2vw,62px); line-height:1.02; letter-spacing:-.045em; margin:0 0 16px; }
.hero-sub { font-size:17px; line-height:1.55; color:var(--ink-soft); margin:0 0 22px; max-width:40ch; }
.hero-cta { display:flex; align-items:center; gap:22px; flex-wrap:wrap; }
.hero-alt { font-size:14px; font-weight:550; white-space:nowrap; }
.hero-card .microcopy { margin:17px 0 0; font-size:12px; }
.hero-showcase { position:relative; z-index:3; width:330px; font-family:Inter,-apple-system,sans-serif; line-height:1.35; color:#2b2925; }
.hero-scene-controls { display:flex; align-items:center; gap:3px; width:100%; margin:0 0 16px; padding:4px; border-radius:999px; background:rgba(249,248,244,.9); border:1px solid rgba(255,255,255,.85); box-shadow:0 4px 18px rgba(0,0,0,.12); -webkit-backdrop-filter:blur(24px); backdrop-filter:blur(24px); }
.hero-scene-controls [data-scene] { font:500 12px/1 Inter,sans-serif; color:#59554f; border:0; border-radius:999px; background:transparent; padding:12px 13px; min-height:44px; text-align:center; }
.hero-scene-controls [data-scene] { flex:1; }
.hero-scene-controls [aria-current="true"] { background:#39342e; color:#fff; box-shadow:0 2px 6px #0002; }
.hero-showcase a:focus-visible { outline:2px solid #34302b; outline-offset:4px; }
.hero-scenes { display:grid; min-height:398px; }
.hg-scene { grid-area:1/1; align-self:start; opacity:0; visibility:hidden; transform:translateY(12px); transition:opacity .24s ease,transform .336s cubic-bezier(.2,.7,.2,1),visibility .336s; pointer-events:none; }
.hg-scene.is-active { opacity:1; visibility:visible; transform:none; pointer-events:auto; }
.hg-scene.is-leaving { transform:translateY(-8px); }
@media (max-width:768px) {
 .hero { min-height:0; background:var(--bg); --film-height:520px; }
 .hero-media { height:var(--film-height); }
 .hero-frame { padding-top:0; }
 .hero-grid { padding:28px 12px 0; gap:26px; }
 .hero-showcase { width:min(310px,100%); margin-left:6px; }
 .hero-scenes { min-height:355px; }
 .hero-card { max-width:none; width:100%; padding:24px; margin:0; }
 .hero-card h1 { font-size:45px; }
 .hero-sub { font-size:16px; margin-bottom:20px; }
 .hero-card .microcopy { font-size:11px; }
 .hero-cta { gap:15px; }
 .hero-alt { font-size:13px; }
}
@media (max-width:360px) {
 .hero-showcase { width:calc(100% - 12px); }
 .hero-card { padding:22px 18px; }
 .hero-card h1 { font-size:41px; }
 .hero-scene-controls [data-scene] { padding-inline:10px; }
}
@media (prefers-reduced-motion:reduce) { .hg-scene { transition:none; transform:none; } }

/* ── section rhythm ───────────────────────────────────────────── */

.try, .ways, .pillar, .opt, .home-faq { padding: var(--pad-section) 0 0; }
.home-faq { padding-bottom: calc(var(--pad-section) * 0.4); }

/* ── the review-deck interactive ──────────────────────────────── */

.try-head { max-width: 640px; }

/* the shared swipe-demo partial carries the deck; give it its stage */
.try .sd-demo { max-width: 640px; margin: 40px auto 0; }

/* ── two ways in ──────────────────────────────────────────────── */

.ways-head { max-width: 720px; }

.ways-answer {
  font-size: var(--size-body);
  line-height: 1.7;
  color: var(--ink-soft);
  margin: 0;
}

.ways-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 330px));
  justify-content: center;
  gap: clamp(22px, 4vw, 48px);
  margin-top: 46px;
}

.ways-shot { margin: 0; }
.ways-shot img,
.pillar-shot img {
  width: 100%;
  height: auto;
  border-radius: 24px;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-card);
  background: var(--panel);
}

.ways-shot figcaption {
  margin-top: 12px;
  text-align: center;
  font-size: 14.5px;
  color: var(--ink-soft);
}

/* ── pillar rows (budgets / calendar / plans) ─────────────────── */

.pillar-grid {
  display: grid;
  grid-template-columns: minmax(0, 360px) minmax(0, 1fr);
  align-items: center;
  gap: clamp(28px, 6vw, 88px);
}

.pillar--flip .pillar-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 360px); }
.pillar--flip .pillar-shot { order: 2; }
.pillar--flip .pillar-copy { order: 1; }

.pillar-shot { margin: 0; }

.pillar-copy p {
  color: var(--ink-soft);
  max-width: 54ch;
}

.pillar-link { font-weight: 560; }

/* ── optimized-for tiles ──────────────────────────────────────── */

.opt-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin-top: 40px;
}

.opt-tile {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: 24px 22px;
  box-shadow: var(--shadow-lift);
}
.opt-tile h3 { margin-bottom: 8px; }
.opt-tile p { margin: 0; font-size: 16px; color: var(--ink-soft); }

/* ── FAQ block spacing ────────────────────────────────────────── */

.home-faq .faq-list { margin-top: 26px; }

/* ── breakpoints ──────────────────────────────────────────────── */

@media (max-width: 1024px) {
  .pillar-grid,
  .pillar--flip .pillar-grid {
    grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
    gap: 36px;
  }
  .pillar--flip .pillar-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 320px); }
}

@media (max-width: 768px) {
  /* image first, then words — both row directions collapse the same way */
  .pillar-grid,
  .pillar--flip .pillar-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .pillar--flip .pillar-shot { order: 1; }
  .pillar--flip .pillar-copy { order: 2; }
  .pillar-shot { max-width: 340px; margin-inline: auto; width: 100%; }

  .ways-grid { grid-template-columns: minmax(0, 340px); }

  .opt-grid { grid-template-columns: 1fr; gap: 14px; margin-top: 28px; }

}


/* v1.1: equal-size, real app previews. Ink is the initial selection. */
.v11-themes { padding: 90px 0; }
.v11-theme-intro { display:flex; justify-content:space-between; align-items:center; gap:30px; margin-bottom:38px; }
.v11-theme-intro p { max-width:580px; color:var(--muted); }
.v11-theme-switch { display:flex; flex-shrink:0; padding:5px; gap:4px; border:1px solid #d9d1c5; border-radius:40px; }
.v11-theme-switch button { border:0; border-radius:30px; padding:11px 18px; min-height:44px; font:inherit; color:inherit; background:transparent; cursor:pointer; }
.v11-theme-switch button[aria-pressed="true"] { background:#332419; color:#fffaf0; }
.v11-theme-switch button:focus-visible { outline:3px solid #a77754; outline-offset:3px; }
.v11-theme-pair { display:flex; justify-content:center; gap:40px; }
.v11-theme-pair figure { width:min(32%,310px); margin:0; }
.v11-theme-pair img { width:100%; height:auto; border:1px solid #e0d9cd; border-radius:30px; box-shadow:0 15px 35px #33241918; }
.v11-theme-pair figcaption { text-align:center; margin-top:16px; color:var(--muted); font-size:13px; }
@media(max-width:700px) { .v11-theme-switch { width:100%; max-width:380px; }.v11-theme-switch button { flex:1; padding-inline:8px; }.v11-theme-intro { flex-direction:column; align-items:flex-start; }.v11-theme-pair { gap:18px; }.v11-theme-pair figure { width:46%; }.v11-theme-pair img { border-radius:18px; }.v11-themes { padding:60px 0; } }

html:not(.js) .hero-scene-controls { display:none; }

/* Native widget renders: retain their full content and readable scale. */
.home-widgets { padding:var(--pad-section) 0 0; }
.widget-intro { max-width:640px; margin-bottom:32px; }
.widget-intro p { color:var(--ink-soft); }
.widget-gallery { display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.widget-gallery figure { margin:0; padding:26px; border:1px solid var(--border); border-radius:24px; background:var(--panel); }
.widget-gallery img { display:block; width:100%; height:auto; border-radius:20px; }
.widget-gallery .widget-square { width:50%; max-width:200px; margin-inline:auto; }
.widget-gallery figcaption { margin-top:20px; color:var(--ink-soft); font-size:15px; }
.widget-gallery figcaption strong { display:block; color:var(--ink); font-size:18px; margin-bottom:6px; }
.widget-note { max-width:680px; color:var(--ink-soft); margin-top:26px; }
@media(max-width:768px) { .widget-gallery { grid-template-columns:1fr; gap:16px; }.widget-gallery figure { padding:22px; }.widget-gallery .widget-square { width:60%; } }