/* Independent Codex hero candidate, November 2, 2026.
   V4 composition with existing words and original full-frame food film.
   Deliberately scoped to the header and hero at computer widths only. */
@media (min-width:1000px) {
  body.flow-refinement #unit-hero#unit-hero #top#top {
    --hv-frame:min(1200px,calc(100% - 96px));
    --hv-edge:max(48px,calc((100% - 1200px) / 2));
    display:grid;
    grid-template-rows:minmax(0,1fr) auto;
    height:clamp(740px,100svh,1000px);
    min-height:740px;
    max-height:none;
    margin:0;
    padding:0;
    overflow:hidden;
    background:var(--oh-deep);
  }
  body.flow-refinement #unit-hero#unit-hero #nav#nav {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:96px;
    min-height:96px;
    padding:0 max(48px,calc((100% - 1200px) / 2));
    background:transparent;
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
  }
  body.flow-refinement #unit-hero#unit-hero #nav#nav::after {
    content:"";
    position:absolute;
    left:max(48px,calc((100% - 1200px) / 2));
    right:max(48px,calc((100% - 1200px) / 2));
    bottom:0;
    height:1px;
    background:rgb(255 255 255 / .18);
  }
  body.flow-refinement #unit-hero#unit-hero #nav#nav .cf-logo {height:32px}
  body.flow-refinement #unit-hero#unit-hero #nav#nav nav {gap:28px;margin-right:24px}
  body.flow-refinement #unit-hero#unit-hero #nav#nav nav a {font-size:14px;color:#fff}
  body.flow-refinement #unit-hero#unit-hero #nav#nav .cf-nav-order {
    height:44px;
    padding:0 20px;
    border:1px solid rgb(255 255 255 / .6);
    border-radius:20px;
    background:transparent;
    color:#fff;
    font-size:13px;
    font-weight:600;
  }
  body.flow-refinement #unit-hero#unit-hero #nav#nav[data-top="false"] {
    position:fixed;
    height:64px;
    min-height:64px;
    background:var(--oh-deep);
  }
  body.flow-refinement #unit-hero#unit-hero #nav#nav[data-top="false"] .cf-logo {height:26px}
  body.flow-refinement #unit-hero#unit-hero #top#top .cf-hero-media {
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    max-height:none;
  }
  body.flow-refinement #unit-hero#unit-hero #top#top .cf-hero-media .pm-film,
  body.flow-refinement #unit-hero#unit-hero #top#top .cf-hero-media video {
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:62% 50%;
    animation:none;
  }
  body.flow-refinement #unit-hero#unit-hero #top#top .cf-hero-shade {
    background:
      linear-gradient(90deg,rgb(10 42 42 / .96) 0%,rgb(10 42 42 / .87) 30%,rgb(10 42 42 / .52) 57%,rgb(10 42 42 / .12) 82%),
      linear-gradient(180deg,rgb(10 42 42 / .45),transparent 23%,transparent 65%,rgb(10 42 42 / .62));
  }
  body.flow-refinement #unit-hero#unit-hero #top#top .cf-hero-copy {
    align-self:center;
    justify-self:center;
    align-items:flex-start;
    width:var(--hv-frame);
    max-width:none;
    margin:0;
    padding:144px 0 72px;
    background:none;
    text-align:left;
    animation:none;
  }
  body.flow-refinement #unit-hero#unit-hero #top#top .cf-hero-copy::before {display:none}
  body.flow-refinement #unit-hero#unit-hero #top#top .cf-community {
    display:inline-flex;
    gap:8px;
    min-height:24px;
    margin:0 0 22px;
    padding:0;
    color:#fff;
    font-size:var(--oh-small);
    line-height:1.4;
    letter-spacing:0;
  }
  body.flow-refinement #unit-hero#unit-hero #top#top #hero-title {
    width:min(780px,65vw);
    max-width:100%;
    margin:0;
    color:#fff;
    font-size:clamp(64px,6.667vw,96px);
    font-weight:600;
    line-height:1.01;
    letter-spacing:-.05em;
    text-align:left;
    text-wrap:balance;
    white-space:normal;
  }
  body.flow-refinement #unit-hero#unit-hero #top#top #hero-title .cr-line {display:block}
  body.flow-refinement #unit-hero#unit-hero #top#top #hero-title .cr-line+.cr-line {margin-left:0}
  body.flow-refinement #unit-hero#unit-hero #top#top .cf-hero-lede {
    max-width:480px;
    margin:24px 0 0;
    color:#fff;
    font-size:var(--oh-body);
    font-weight:400;
    line-height:1.5;
    letter-spacing:0;
    text-align:left;
  }
  body.flow-refinement #unit-hero#unit-hero #top#top .cf-hero-actions {
    flex-direction:row;
    align-items:center;
    gap:28px;
    margin:28px 0 0;
  }
  body.flow-refinement #unit-hero#unit-hero #top#top a.cf-button {
    width:auto;
    min-width:214px;
    height:54px;
    min-height:54px;
    margin:0;
    padding:0 28px;
    border-radius:20px;
    background:var(--oh-lime);
    color:var(--oh-deep);
    font-size:13px;
    font-weight:700;
    letter-spacing:.025em;
    text-transform:uppercase;
  }
  body.flow-refinement #unit-hero#unit-hero #top#top .hero-buy-details {
    flex-direction:column;
    align-items:flex-start;
    gap:3px;
    margin:0;
    color:#fff;
    line-height:1.35;
    letter-spacing:0;
  }
  body.flow-refinement #unit-hero#unit-hero #top#top .hero-buy-details .hero-from {
    color:#fff;
    font-size:var(--oh-price);
    font-weight:600;
    letter-spacing:0;
  }
  body.flow-refinement #unit-hero#unit-hero #top#top .hero-buy-details .hero-flexibility {
    color:#fff;
    font-size:var(--oh-small);
    font-weight:400;
    letter-spacing:0;
  }
  body.flow-refinement #unit-hero#unit-hero #top#top .hero-buy-details span+span::before {display:none}
  body.flow-refinement #unit-hero#unit-hero #top#top .cf-hero-base {
    justify-self:stretch;
    width:100%;
    padding:0 var(--hv-edge);
    background:rgb(10 42 42 / .6);
    border-top:1px solid rgb(255 255 255 / .18);
    animation:none;
  }
  body.flow-refinement #unit-hero#unit-hero #top#top .cf-hero-facts {
    min-height:80px;
    border:0;
  }
  body.flow-refinement #unit-hero#unit-hero #top#top .cf-hero-facts li {
    justify-content:flex-start;
    min-height:80px;
    padding:0 24px;
    border:0;
    border-left:1px solid rgb(255 255 255 / .18);
    color:#fff;
    font-size:var(--oh-small);
    font-weight:400;
    line-height:1.4;
    letter-spacing:0;
    text-align:left;
  }
  body.flow-refinement #unit-hero#unit-hero #top#top .cf-hero-facts li:first-child {padding-left:0;border-left:0}
  body.flow-refinement #unit-hero#unit-hero #top#top .pm-film-toggle {
    top:auto;
    right:var(--hv-edge);
    bottom:104px;
    width:44px;
    height:44px;
    background:rgb(10 42 42 / .72);
    animation:none;
  }
  @media (max-height:790px) {
    body.flow-refinement #unit-hero#unit-hero #top#top .cf-hero-copy {padding-top:120px;padding-bottom:52px}
    body.flow-refinement #unit-hero#unit-hero #top#top #hero-title {font-size:clamp(64px,6.1vw,88px)}
  }
}