:root { --landing-ink:#18251a; --landing-olive:#526b3a; --landing-sage:#dfe7d5; --landing-cream:#fbf8f1; --landing-gold:#bf9a58; --landing-line:rgba(49,71,42,.14); }
.landing-page { min-height:100vh; color:var(--landing-ink); background:var(--landing-cream); font-family:var(--font-body); overflow-x:hidden; }
.landing-nav { position:relative; z-index:10; width:min(78rem,100%); margin:auto; display:flex; align-items:center; justify-content:space-between; gap:1.5rem; padding:1.35rem clamp(1rem,4vw,2rem); }
.landing-brand { display:flex; align-items:center; gap:.7rem; color:var(--landing-ink); text-decoration:none; font-family:var(--font-heading); font-weight:700; font-size:1.05rem; }
.landing-brand > span:last-child { display:grid; gap:.1rem; line-height:1.2; }.landing-brand small { color:#8b927f; font-size:.58rem; font-weight:400; }
.brand-mark { display:grid; place-items:center; width:2.4rem; height:2.4rem; border:1px solid rgba(82,107,58,.35); border-radius:50% 50% 44% 56%; color:#fff; background:var(--landing-olive); font-family:var(--font-names); font-size:1.35rem; }
.landing-nav nav { display:flex; gap:clamp(1rem,3vw,2.3rem); margin-inline-start:auto; margin-inline-end:2rem; }.landing-nav nav a,.text-button { color:#6d7768; font-family:var(--font-heading); font-size:.78rem; text-decoration:none; transition:color .2s ease; }.landing-nav nav a:hover,.text-button:hover { color:var(--landing-olive); }
.landing-nav-actions { display:flex; align-items:center; gap:1rem; }.text-button { white-space:nowrap; }.nav-cta,.secondary-cta { display:inline-flex; align-items:center; justify-content:center; min-height:2.8rem; padding:.6rem 1.15rem; border:1px solid rgba(82,107,58,.35); border-radius:999px; color:#fff; background:var(--landing-olive); font-family:var(--font-heading); font-size:.72rem; font-weight:700; text-decoration:none; box-shadow:0 .5rem 1.2rem rgba(82,107,58,.15); transition:transform .2s ease,background .2s ease; }.nav-cta:hover,.secondary-cta:hover { color:#fff; background:#40582c; transform:translateY(-1px); }
.landing-hero { position:relative; width:min(78rem,100%); min-height:42rem; margin:auto; display:grid; grid-template-columns:minmax(0,.9fr) minmax(28rem,1.1fr); align-items:center; gap:2rem; padding:clamp(3.2rem,8vw,6.3rem) clamp(1rem,4vw,2rem) clamp(4.5rem,8vw,7rem); }.hero-glow { position:absolute; border-radius:50%; filter:blur(2px); pointer-events:none; }.hero-glow-one { width:24rem; height:24rem; top:4rem; right:-11rem; background:rgba(214,225,195,.5); }.hero-glow-two { width:18rem; height:18rem; bottom:0; left:-8rem; background:rgba(244,220,193,.32); }
.hero-copy { position:relative; z-index:1; max-width:31rem; text-align:start; }.landing-eyebrow { display:inline-flex; align-items:center; gap:.55rem; color:var(--landing-olive); font-family:var(--font-heading); font-size:.68rem; font-weight:700; letter-spacing:.02em; }.landing-eyebrow i { display:block; width:.45rem; height:.45rem; border-radius:50%; background:var(--landing-gold); box-shadow:0 0 0 .25rem rgba(191,154,88,.13); }
.hero-copy h1 { margin:1.35rem 0 1.1rem; color:var(--landing-ink); font-family:var(--font-heading); font-size:clamp(2.45rem,6vw,4.45rem); line-height:1.3; letter-spacing:-.05em; }.hero-copy h1 em,.section-heading h2 em,.final-cta h2 em { color:var(--landing-olive); font-family:var(--font-names); font-size:1.15em; font-style:normal; font-weight:700; letter-spacing:0; }.hero-copy p { max-width:29rem; margin:0; color:#7a8473; font-size:1.08rem; line-height:2; }
.hero-actions { display:flex; align-items:center; flex-wrap:wrap; gap:.8rem; margin-top:1.8rem; }.google-button { min-height:3.4rem; display:inline-flex; align-items:center; justify-content:center; gap:.7rem; padding:.8rem 1.2rem; border:1px solid rgba(54,73,50,.2); border-radius:.7rem; color:#31432c; background:#fff; font-family:var(--font-heading); font-size:.76rem; font-weight:700; box-shadow:0 .7rem 1.5rem rgba(57,76,48,.09); cursor:pointer; transition:transform .2s ease,box-shadow .2s ease; }.google-button:hover { transform:translateY(-2px); box-shadow:0 1rem 2rem rgba(57,76,48,.14); }.google-letter { display:grid; place-items:center; width:1.45rem; height:1.45rem; color:#4285f4; font-family:Arial,sans-serif; font-size:1.1rem; font-weight:700; }.secondary-cta { color:var(--landing-olive); background:transparent; box-shadow:none; }.secondary-cta:hover { color:#fff; }.secondary-cta span { margin-inline-start:.4rem; font-size:1rem; }.hero-note { display:flex; align-items:center; gap:.45rem; margin-top:1.2rem!important; color:#9a9e91!important; font-size:.72rem!important; line-height:1.6!important; }.secure-dot { display:inline-grid; place-items:center; width:1.1rem; height:1.1rem; border-radius:50%; color:#fff; background:#8a9f6f; font-size:.65rem; }.auth-status { min-height:1.5rem; margin-top:.5rem!important; color:#9c4d40!important; font-family:var(--font-heading); font-size:.75rem!important; }
.hero-visual { position:relative; min-height:34rem; display:grid; place-items:center; }.dashboard-preview { position:relative; z-index:2; width:min(31rem,100%); min-height:25rem; overflow:hidden; transform:rotate(2deg); border:1px solid rgba(255,255,255,.8); border-radius:1.1rem; background:rgba(255,255,255,.86); box-shadow:0 2rem 4rem rgba(54,74,44,.17),0 0 0 .6rem rgba(255,255,255,.24); }.preview-topbar { display:flex; align-items:center; justify-content:space-between; padding:1.1rem 1.25rem; border-bottom:1px solid var(--landing-line); }.preview-brand { color:#587044; font-family:var(--font-heading); font-size:.72rem; font-weight:700; }.preview-brand b { display:inline-grid; place-items:center; width:1.35rem; height:1.35rem; margin-inline-end:.35rem; border-radius:50%; color:#fff; background:#718a58; font-family:var(--font-names); font-size:.8rem; }.preview-avatar { display:grid; place-items:center; width:1.8rem; height:1.8rem; border-radius:50%; color:#fff; background:#d2b991; font-family:var(--font-heading); font-size:.65rem; }.preview-content { display:grid; gap:1rem; padding:1.5rem 1.65rem 2rem; }.preview-welcome { display:grid; gap:.25rem; }.preview-welcome small { color:#b09a74; font-size:.7rem; }.preview-welcome strong { color:#334a2e; font-family:var(--font-heading); font-size:1.15rem; }.preview-welcome span { color:#9b9f93; font-size:.75rem; }.preview-status { display:flex; align-items:center; gap:.7rem; padding:.8rem; border:1px solid rgba(117,146,91,.18); border-radius:.7rem; background:#f3f7ef; }.status-check { display:grid; place-items:center; width:1.8rem; height:1.8rem; border-radius:50%; color:#fff; background:#7a9a62; font-size:.75rem; }.preview-status span:last-child { display:grid; gap:.12rem; }.preview-status b { color:#537047; font-family:var(--font-heading); font-size:.68rem; }.preview-status small { color:#9aab91; font-size:.65rem; }.preview-link { display:grid; grid-template-columns:1fr auto; gap:.25rem .5rem; align-items:center; padding:.85rem; border:1px solid var(--landing-line); border-radius:.7rem; background:#fffdf8; }.preview-link small { grid-column:1/-1; color:#a39c8e; font-size:.65rem; }.preview-link strong { overflow:hidden; color:#64785a; font-family:Arial,sans-serif; font-size:.68rem; direction:ltr; text-overflow:ellipsis; }.preview-link button { border:0; color:#7c8e6c; background:transparent; font-family:var(--font-heading); font-size:.62rem; }.preview-fields { display:flex; flex-wrap:wrap; gap:.5rem; }.preview-fields span { display:inline-flex; align-items:center; gap:.35rem; padding:.45rem .6rem; border-radius:999px; color:#879181; background:#f2f1eb; font-size:.62rem; }.preview-fields i { width:.35rem; height:.35rem; border-radius:50%; background:#d3ad68; }.preview-decoration { position:absolute; left:-1rem; bottom:-2.1rem; width:8rem; height:8rem; display:grid; place-items:center; border:1px solid rgba(177,145,88,.22); border-radius:50%; color:#c6a366; font-family:var(--font-names); font-size:2.5rem; opacity:.6; }.visual-orbit { position:absolute; border:1px solid rgba(124,151,102,.2); border-radius:50%; transform:rotate(-18deg); }.orbit-one { width:30rem; height:14rem; }.orbit-two { width:35rem; height:18rem; transform:rotate(25deg); }.floating-card { position:absolute; z-index:3; display:flex; align-items:center; gap:.65rem; padding:.7rem .8rem; border:1px solid rgba(255,255,255,.9); border-radius:.75rem; background:rgba(255,255,255,.92); box-shadow:0 .9rem 2rem rgba(55,75,45,.13); }.floating-card span:last-child { display:grid; gap:.1rem; }.floating-card small { color:#9ca396; font-size:.62rem; }.floating-card b { color:#5c7650; font-family:var(--font-heading); font-size:.68rem; }.float-icon { display:grid; place-items:center; width:2rem; height:2rem; border-radius:.55rem; color:#fff; font-size:.8rem; }.key-icon { background:#d0aa68; }.check-icon { background:#7c9d68; }.floating-key { top:3.2rem; right:-1.3rem; }.floating-rsvp { bottom:3.1rem; left:-1.2rem; }
.trust-strip { width:100%; display:flex; align-items:center; justify-content:center; gap:clamp(2rem,7vw,7rem); padding:1.1rem 1rem; border-top:1px solid var(--landing-line); border-bottom:1px solid var(--landing-line); color:#a1a597; font-family:var(--font-heading); font-size:.65rem; }.trust-strip div { display:flex; flex-wrap:wrap; justify-content:center; gap:clamp(1rem,4vw,3rem); color:#74836a; }.trust-strip b { font-weight:500; }
.feature-section,.steps-section { width:min(78rem,100%); margin:auto; padding:clamp(5rem,10vw,8rem) clamp(1rem,4vw,2rem); }.section-heading { max-width:36rem; margin-bottom:3rem; text-align:start; }.section-heading.compact { margin-bottom:2.5rem; }.section-heading h2 { margin:1rem 0 .7rem; color:var(--landing-ink); font-family:var(--font-heading); font-size:clamp(1.8rem,4vw,3rem); line-height:1.45; }.section-heading p { margin:0; color:#899082; font-size:1rem; line-height:1.9; }.features-grid { display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:1rem; }.feature-card { position:relative; min-height:25rem; padding:1.45rem; overflow:hidden; border:1px solid var(--landing-line); border-radius:1rem; background:#fffdf8; }.feature-card h3 { margin:1.35rem 0 .35rem; color:#3e5336; font-family:var(--font-heading); font-size:1rem; }.feature-card p { margin:0; color:#92988a; font-size:.88rem; line-height:1.8; }.feature-number { color:#af9a75; font-family:Arial,sans-serif; font-size:.65rem; }.feature-art { min-height:12rem; display:grid; place-items:center; margin-top:.75rem; border-radius:.75rem; background:#f1f4ea; }.invitation-art { background:linear-gradient(145deg,#e9efdf,#f8eee1); }.art-card { display:grid; justify-items:center; gap:.1rem; width:9rem; min-height:10rem; padding:1rem .65rem; border:1px solid rgba(179,151,97,.25); border-radius:.35rem; color:#657255; background:#fffdf6; box-shadow:0 .7rem 1.3rem rgba(85,102,68,.1); }.art-card small { color:#b79b67; font-size:.48rem; }.art-card b { font-family:var(--font-names); font-size:1.35rem; line-height:1.1; }.art-card i { color:#c09a58; font-family:var(--font-body); font-style:normal; font-size:.7rem; }.art-card span { margin-top:.35rem; color:#a7ab9e; font-size:.48rem; }.link-art { gap:.7rem; background:#eff1eb; }.link-pill,.copy-pill { padding:.75rem .9rem; border-radius:.6rem; background:#fff; box-shadow:0 .5rem 1rem rgba(65,78,57,.08); font-family:Arial,sans-serif; font-size:.65rem; direction:ltr; }.link-pill { color:#9a9e91; }.link-pill b { color:#61785b; }.copy-pill { color:#73906b; font-family:var(--font-heading); direction:rtl; }.guest-art { display:grid; gap:.5rem; padding:1.3rem; background:#f3f4ee; }.guest-row { display:flex; justify-content:space-between; gap:1.4rem; width:100%; padding:.65rem .75rem; border-radius:.55rem; color:#73806d; background:#fff; font-size:.63rem; }.guest-row b { color:#71905f; font-family:var(--font-heading); font-size:.55rem; }.guest-row:last-child b { color:#bd8c83; }
.steps-section { padding-top:0; }.steps-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; }.steps-grid article { display:flex; gap:1rem; padding:1.25rem; border-top:1px solid var(--landing-line); }.steps-grid article > span { display:grid; place-items:center; width:2rem; height:2rem; flex:0 0 2rem; border-radius:50%; color:#fff; background:#7c9468; font-family:Arial,sans-serif; font-size:.75rem; }.steps-grid h3 { margin:.05rem 0 .35rem; color:#49603e; font-family:var(--font-heading); font-size:.85rem; }.steps-grid p { margin:0; color:#969c90; font-size:.82rem; line-height:1.8; }
.final-cta { width:min(78rem,calc(100% - 2rem)); margin:0 auto 2rem; display:flex; align-items:center; justify-content:space-between; gap:2rem; padding:clamp(2rem,6vw,4rem); overflow:hidden; border-radius:1.25rem; color:#fff; background:linear-gradient(120deg,#405b32,#71885b); box-shadow:0 1.4rem 3rem rgba(64,91,50,.2); }.final-cta .landing-eyebrow { color:#e6eedc; }.final-cta h2 { margin:1rem 0 0; font-family:var(--font-heading); font-size:clamp(1.55rem,4vw,2.6rem); line-height:1.55; }.final-cta h2 em { color:#f4dfb4; }.final-cta-actions { display:grid; gap:.75rem; min-width:14rem; }.google-button.light { border-color:rgba(255,255,255,.3); color:#49603e; }.whatsapp-link { display:flex; align-items:center; justify-content:center; gap:.45rem; min-height:3rem; color:#eff8e7; font-family:var(--font-heading); font-size:.72rem; text-decoration:none; }.whatsapp-link svg { width:1.35rem; height:1.35rem; fill:#a7d591; }.landing-footer { width:min(78rem,100%); margin:auto; display:flex; justify-content:space-between; padding:1.2rem clamp(1rem,4vw,2rem) 2rem; color:#a2a795; font-size:.7rem; }
@media (max-width:800px) { .landing-nav nav { display:none; }.landing-hero { grid-template-columns:1fr; padding-top:3rem; }.hero-copy { max-width:36rem; margin:auto; text-align:center; }.hero-copy p { margin-inline:auto; }.hero-actions,.hero-note { justify-content:center; }.hero-visual { min-height:29rem; margin-top:1rem; }.features-grid { grid-template-columns:1fr 1fr; }.feature-main { grid-column:1/-1; }.steps-grid { grid-template-columns:1fr; }.final-cta { flex-direction:column; align-items:flex-start; }.final-cta-actions { width:100%; max-width:20rem; }.trust-strip { flex-direction:column; gap:.8rem; } }
@media (max-width:520px) { .landing-nav { align-items:flex-start; }.landing-nav-actions { gap:.5rem; }.text-button { font-size:.65rem; }.nav-cta { min-height:2.45rem; padding-inline:.8rem; font-size:.63rem; }.hero-copy h1 { font-size:2.6rem; }.hero-actions { flex-direction:column; align-items:stretch; }.google-button,.secondary-cta { width:100%; }.hero-visual { min-height:25rem; }.dashboard-preview { min-height:22rem; }.floating-card { transform:scale(.82); }.floating-key { right:-2rem; }.floating-rsvp { left:-2rem; }.features-grid { grid-template-columns:1fr; }.feature-main { grid-column:auto; }.feature-card { min-height:22rem; }.landing-footer { flex-direction:column; gap:.4rem; } }

.brand-mark img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}