/* A fixed photograph behind the scrolling page; the mobile logo stays above both. */
html{scroll-padding-top:110px}
.hero-cover-layout{
  --hero-title-size:clamp(28px,3.1vw,43px);
  --hero-heading-reveal:calc(var(--hero-title-size) * 3.6 + 46px);
  --hero-min-height:220px;
  --hero-viewport-height:100vh;
  --hero-image-height:max(var(--hero-min-height),calc(var(--hero-viewport-height) - var(--hero-heading-reveal) - var(--hero-offer-clearance,0px)));
  --hero-photo-height:max(var(--hero-min-height),calc(var(--hero-image-height) - var(--hero-photo-trim,0px)));
  padding-top:var(--hero-photo-height);
}
@supports(height:100svh){.hero-cover-layout{--hero-viewport-height:100svh}}
.hero-cover-layout .masthead{
  position:fixed;
  z-index:30;
  top:28px;
  left:40px;
  right:40px;
  width:auto;
  margin:0;
  padding:0;
  border:0;
  pointer-events:none;
}
.hero-cover-layout .masthead>a{width:fit-content;max-width:100%;pointer-events:auto}
.hero-cover-layout .skip:focus{z-index:40}
.hero-cover-layout .hero-photograph{
  position:fixed;
  z-index:0;
  top:0;
  left:0;
  width:100%;
  height:var(--hero-photo-height);
  margin:0;
  pointer-events:none;
}
.hero-cover-layout .page-content{position:relative;z-index:1;display:flow-root;background:#fff}
.hero-cover-layout .hero-photograph>img{
  width:100%;
  height:100%;
  aspect-ratio:auto;
  object-fit:cover;
  object-position:0% 40%;
}
.hero-cover-layout .brand-statement{padding-top:32px}
.hero-cover-layout .statement-heading h1{font-size:var(--hero-title-size)}

@media(max-width:1100px){
  .hero-cover-layout{--hero-title-size:32px}
}
@media(max-width:820px){
  .hero-cover-layout{--hero-title-size:36px}
  .hero-cover-layout .masthead{left:30px;right:30px;top:24px}
}
@media(max-width:760px){
  html{scroll-padding-top:96px}
  .hero-cover-layout{
    --hero-title-size:25px;
    --hero-copy-viewport-height:100vh;
    --hero-heading-reveal:calc(var(--hero-title-size) * 3.7 + 48px);
    --hero-photo-trim:clamp(32px,calc(var(--hero-copy-viewport-height) * .07),60px);
    /* Preserve the headline's previous position independently of the photo. */
    --hero-copy-anchor-height:max(var(--hero-min-height),calc(max(var(--hero-min-height),calc(var(--hero-copy-viewport-height) - var(--hero-heading-reveal) - var(--hero-offer-clearance,0px))) - var(--hero-photo-trim)));
    --hero-copy-lift:calc(var(--hero-photo-height) - var(--hero-copy-anchor-height));
    /* The mobile sheet overlays the page; opening it never resizes the hero. */
    --hero-image-height:var(--hero-viewport-height);
    --hero-photo-height:var(--hero-image-height);
  }
  .hero-cover-layout .masthead{left:20px;right:20px}
  .hero-cover-layout .masthead>a{display:block;width:100%}
  .hero-cover-layout .masthead>a>img{width:100%;max-width:100%;height:auto}
  .hero-cover-layout .hero-photograph{overflow:hidden}
  .hero-cover-layout .hero-photograph>img{
    height:var(--hero-image-height);
    object-position:0% 48%;
    transform:scale(1.2);
    transform-origin:left center;
  }
  .hero-cover-layout .brand-statement{padding-top:28px}
}
@supports(height:100svh){
  @media(max-width:760px){.hero-cover-layout{--hero-copy-viewport-height:100svh}}
}
@supports(height:100dvh){
  @media(max-width:760px){.hero-cover-layout{--hero-viewport-height:100dvh}}
}
@media(max-width:380px){
  .hero-cover-layout{--hero-title-size:24px}
}
@media(max-height:500px) and (orientation:landscape){
  html{scroll-padding-top:68px}
  .hero-cover-layout{
    --hero-title-size:22px;
    --hero-heading-reveal:100px;
    --hero-min-height:160px;
  }
  .hero-cover-layout .masthead{top:15px;display:flex;flex-wrap:nowrap}
  .hero-cover-layout .masthead img{width:180px}
  .hero-cover-layout .brand-statement{padding-top:15px}
  .hero-cover-layout .statement-heading h1{line-height:1.6}
}

/* The square headline shares its typography across desktop and mobile. */
.hero-heading-mealkit{container-type:inline-size;min-width:0}
.hero-heading-logo{display:none}
.hero-copy-content{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  container-type:inline-size;
  min-width:0;
}
.hero-cover-layout .hero-heading-mealkit{
  position:relative;
  flex:none;
  display:grid;
  place-items:center;
  width:var(--hero-square-size);
  aspect-ratio:1;
  margin:calc(var(--hero-square-size) * -.5) auto 0;
  background:#fff;
}
.hero-cover-layout .hero-heading-mealkit h1{
  width:100%;
  padding-inline:6%;
  font-family:"Hiragino Sans","Noto Sans JP","Yu Gothic",Meiryo,sans-serif;
  font-size:11.8cqw;
  font-weight:800;
  line-height:1.4;
  letter-spacing:0;
  text-align:center;
  color:#00a246; /* Match the floating trial banner. */
  overflow-wrap:normal;
}
.hero-heading-mealkit .hero-title-line{
  display:block;
  width:6em;
  max-width:100%;
  margin-inline:auto;
  white-space:nowrap;
  font-kerning:none;
  font-feature-settings:"palt" 0;
  text-align:justify;
  text-align-last:justify;
  text-justify:inter-character;
}
.hero-heading-mealkit .hero-title-line:first-child{
  color:#ff000c; /* Match the simple LP's news ticker text. */
}

/* A question between the hero statement and the comic's existing rule. */
.comic-intro{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:20px;
  padding:12px 0 56px;
  color:#00a246;
  text-align:center;
}
.comic-intro-arrow{display:block;flex:none;width:48px;height:48px}
@media(prefers-reduced-motion:no-preference){
  .comic-intro-arrow{animation:comic-arrow-down 2.8s ease-in-out infinite}
  html[data-motion-paused="true"] .comic-intro-arrow{animation-play-state:paused}
}
@keyframes comic-arrow-down{
  0%,60%,100%{transform:translateY(0)}
  30%{transform:translateY(8px)}
}
.comic-intro h2{
  max-width:100%;
  font-family:"Hiragino Sans","Noto Sans JP","Yu Gothic",Meiryo,sans-serif;
  font-size:clamp(28px,3.3vw,42px);
  font-weight:800;
  line-height:1.65;
  letter-spacing:0;
  font-feature-settings:"palt" 0;
}
.comic-intro h2>span{display:block}
#comic .comic-intro h2>span:first-child,
#trial-intro h2>span:first-child{color:#ff000c}
.trial-intro{margin-top:clamp(48px,6vw,72px)}
#trial-intro + #trial.trial{margin-top:0}
@media(max-width:760px){
  .comic-intro{gap:14px;padding:4px 0 36px}
  .comic-intro-arrow{width:38px;height:38px}
  .comic-intro h2{font-size:clamp(22px,6.1vw,30px);line-height:1.7}
}

/* Center the statement on the page, with more weight and room to read. */
.hero-cover-layout #hero .statement-copy{
  width:min(100%,42em);
  margin-inline:auto;
  font-size:18px;
  font-weight:700;
  -webkit-text-stroke:.3px currentColor;
  line-height:2.25;
  text-align:center;
  text-wrap:balance;
}
.hero-cover-layout #hero .statement-copy br{display:initial}

/* Desktop: the headline meets the photograph's right and bottom edges. */
@media(min-width:761px){
  .hero-cover-layout .masthead{display:none}
  .hero-cover-layout{
    --hero-square-size:clamp(304px,34vw,440px);
    --hero-min-height:var(--hero-square-size);
  }
  .hero-cover-layout .brand-statement{
    display:grid;
    grid-template-columns:minmax(0,1fr);
    align-items:start;
    gap:clamp(28px,3vw,44px);
    width:100%;
    padding-top:0;
  }
  .hero-cover-layout .hero-heading-mealkit{
    margin:calc(var(--hero-square-size) * -1) 0 0;
    justify-self:end;
    align-self:start;
  }
  .hero-heading-logo{
    position:absolute;
    z-index:1;
    display:block;
    top:5%;
    left:8%;
    width:84%;
  }
  .hero-heading-logo img{display:block;width:100%;height:auto}
  .hero-copy-content{inset:12% 6% 0}
  .hero-cover-layout .hero-heading-mealkit h1{
    padding-inline:4%;
    font-size:13.3cqw;
    line-height:1.48;
  }
  .hero-cover-layout #hero .statement-copy{
    width:min(42em,84%);
    margin-top:0;
    padding-top:0;
    max-width:none;
    justify-self:center;
  }
}

/* Mobile: centered, with the statement below. */
@media(max-width:760px){
  .hero-cover-layout{
    --hero-square-size:min(82vw,360px);
  }
  .hero-cover-layout .brand-statement{
    display:flex;
    flex-direction:column;
    gap:0;
    padding-top:0;
  }
  .hero-cover-layout .hero-heading-mealkit{
    margin-top:calc(var(--hero-square-size) * -.5 - var(--hero-copy-lift));
  }
  .hero-cover-layout .statement-copy{
    /* Start the statement on the white page below the enlarged photograph. */
    margin-top:max(28px,calc(var(--hero-copy-lift) - var(--hero-square-size) * .5 + 28px));
  }
  .hero-cover-layout #hero .statement-copy{font-size:16px}
}
@media(max-width:380px){
  .hero-cover-layout #hero .statement-copy{font-size:15px}
}
@media(max-width:350px){
  .hero-cover-layout #hero .statement-copy{
    width:calc(100vw - 24px);
    max-width:none;
    margin-inline:0;
    align-self:center;
    font-size:14px;
  }
}
@media(max-width:760px) and (max-height:500px) and (orientation:landscape){
  .hero-cover-layout{
    --hero-square-size:min(50svh,240px);
    --hero-min-height:max(160px,calc(var(--hero-square-size) * .5 + 80px));
  }
}

/* Keep the mobile opening quiet, then reveal the original statement once. */
@media(max-width:760px){
  .hero-cover-layout #hero .statement-copy{
    transition:opacity .45s ease,transform .45s ease;
  }
  html[data-mobile-statement="waiting"] .hero-cover-layout #hero .statement-copy{
    opacity:0;
    transform:translateY(10px);
    pointer-events:none;
  }
}
@media(max-width:760px) and (prefers-reduced-motion:reduce){
  .hero-cover-layout #hero .statement-copy{transition:none}
}
@media print{
  html[data-mobile-statement="waiting"] .hero-cover-layout #hero .statement-copy{
    opacity:1;
    transform:none;
  }
}