/* V3.8 — request-scoped refinements: all-white canvas, supplied photography,
   new restaurant mark, refined editorial typography and centered video control. */
:root { --restaurant-serif: "Iowan Old Style", "Baskerville", "Palatino Linotype", "Book Antiqua", Georgia, serif; }
html { scroll-behavior: smooth; }
body { background: #fff !important; font-family: "Avenir Next", "Manrope", "Segoe UI", Arial, sans-serif; letter-spacing: -.008em; }
.site-header { background: rgba(255,255,255,.97); }
.hero, .social-section, .section-how, .section-benefits,
.section-features, .v36-features, .section-trial, .v36-trial { background: #fff !important; }
.hero { background: #fff !important; }
.hero-bg-shape { opacity: .16; }
.logo-chip, .step-card, .benefit-card, .feature-card { background: #fff; }
/* Restrained restaurant-inspired serif for display headings, clean sans-serif for body/UI. */
.hero h1, .section-header h2, .benefit-text h2, .v36-section-heading h2,
.v36-trial .trial-copy h2 { font-family: var(--restaurant-serif); font-weight: 700; letter-spacing: -.032em; }
.hero h1 { line-height: 1.075; }
.section-header h2, .v36-section-heading h2 { line-height: 1.17; }
.benefit-text h2 { line-height: 1.18; }
.step-body h3, .v36-features .feature-card h3 { letter-spacing: -.012em; }
/* New uploaded black restaurant symbol, paired with existing wordmark text. */
.brand-icon { display: inline-flex; flex:none; width: 42px; height: 42px; align-items: center; justify-content: center; filter: none; }
.brand-icon img { display:block; width:100%; height:100%; object-fit: contain; }
.site-footer .brand-icon img { filter: invert(1); }
/* Supplied step photos are individually numbered already. */
.step-count { display:none !important; }
.step-photo img { object-position: center; }
/* Video CTA is placed exactly in the center of the hero photo, no duplicate label. */
.hero-media { isolation:isolate; }
.hero-video-center {
  position:absolute; left:50%; right:auto; top:50%; bottom:auto;
  transform:translate(-50%,-50%); z-index:5;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px;
  width:auto; height:auto; padding:0; border:0; border-radius:22px;
  background:transparent; backdrop-filter:none; box-shadow:none;
  color:#fff; text-align:center; cursor:pointer;
}
.hero-video-center:hover, .hero-video-center:focus-visible {
  transform:translate(-50%,-50%);
}
.hero-video-center-icon {
  width:82px; height:82px; display:grid; place-items:center;
  color:#242424; background:#fff; border:1px solid rgba(255,255,255,.8);
  border-radius:50%; box-shadow:0 0 0 9px rgba(255,255,255,.20), 0 16px 45px rgba(0,0,0,.28);
  transition:transform .2s ease,box-shadow .2s ease;
}
.hero-video-center:hover .hero-video-center-icon,
.hero-video-center:focus-visible .hero-video-center-icon {
  transform:scale(1.07); box-shadow:0 0 0 12px rgba(255,255,255,.23),0 20px 48px rgba(0,0,0,.34);
}
.hero-video-center-icon .icon { margin-left:4px; }
.hero-video-center-text {
  display:inline-block; padding:6px 14px; border-radius:999px;
  color:white; background:rgba(20,20,20,.48); backdrop-filter:blur(6px);
  font-family:"Avenir Next","Segoe UI",Arial,sans-serif; font-size:14px; line-height:1.35;
  font-weight:700; letter-spacing:.01em; text-shadow:0 2px 8px rgba(0,0,0,.32);
}
/* CTA — new user-supplied photo across the entire banner, natural dark left
   area provides strong legibility; old split CTA copy and behavior retained. */
.v36-trial .trial-banner {
  display:block; position:relative; isolation:isolate; min-height:495px;
  overflow:hidden; border:0; background:#0a1724;
  box-shadow:0 22px 58px rgba(19,30,35,.13);
}
.v36-trial .trial-art { position:absolute; z-index:0; inset:0; min-height:0; height:auto; display:block; overflow:hidden; background:#0a1724; }
.v36-trial .trial-art img { width:100%; height:100%; display:block; object-fit:cover; object-position:center; }
.v36-trial .trial-banner::after {
  position:absolute;content:"";inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,rgba(3,15,31,.30) 0%,rgba(3,15,31,.18) 43%,rgba(3,15,31,0) 72%);
}
.v36-trial .trial-copy {
  position:relative; z-index:2; box-sizing:border-box;
  min-height:495px; max-width:715px;
  display:flex; flex-direction:column; align-items:flex-start; justify-content:center;
  padding:60px 66px; background:transparent; text-align:left;
}
.v36-trial .trial-copy h2 { color:#fff; font-weight:700; font-size:clamp(39px,4.25vw,57px); letter-spacing:-.032em; line-height:1.12; }
.v36-trial .trial-copy h2 em { font-style:normal; color:#ead3b1; }
.v36-trial .trial-kicker { background:rgba(255,255,255,.14); color:#f7efe4; }
.v36-trial .trial-copy p { color:#f0f1f5; }
.v36-trial .btn-inverse { border-radius:999px; background:#fff; }
.v36-trial .btn-inverse:hover { background:#f0e6d9; }
@media (max-width: 980px) {
  .v36-trial .trial-banner, .v36-trial .trial-copy { min-height:470px; }
  .v36-trial .trial-copy { padding:42px 40px; max-width:64%; }
  .v36-trial .trial-copy h2 { font-size:clamp(33px,4.2vw,48px); }
}
@media (max-width: 640px) {
  .brand-icon { width:36px;height:36px; }
  .hero h1 { font-size:clamp(31px,8.5vw,41px); }
  .hero-video-center { left:50%;top:50%;bottom:auto;right:auto;transform:translate(-50%,-50%);width:auto;height:auto; }
  .hero-video-center:hover, .hero-video-center:focus-visible { transform:translate(-50%,-50%); }
  .hero-video-center-icon { width:64px;height:64px;box-shadow:0 0 0 7px rgba(255,255,255,.19),0 12px 30px rgba(0,0,0,.2); }
  .hero-video-center-text { display:none; }
  .v36-trial .trial-banner { display:flex;flex-direction:column; min-height:0; }
  .v36-trial .trial-copy { min-height:0; max-width:none; width:100%; padding:36px 27px 32px; background:#091a2d; }
  .v36-trial .trial-copy h2 { font-size:38px; max-width:100%; }
  .v36-trial .trial-copy p { font-size:14px; }
  .v36-trial .trial-art { position:relative;order:2;z-index:1;width:100%;height:235px;flex:none; }
  .v36-trial .trial-art img { object-position:78% center; }
  .v36-trial .trial-banner::after { display:none; }
  .v36-trial .btn-inverse { width:100%; }
}
@media (max-width: 359px) {
  .hero h1 { font-size:30px; }
  .v36-trial .trial-copy { padding-inline:22px; }
  .v36-trial .trial-copy h2 { font-size:34px; }
}
@media (prefers-reduced-motion:reduce){
  .hero-video-center-icon{transition:none}
}