/* reset-day — per-brand token skin + its unique portrait-stripe hero variant.
   Component rules: shared/css/landing.css. Scale/type/fonts: network-tokens.css.
   Palette maps to the shared contract (network-tokens.css skin
   [data-cw-landing="reset-day"]); brand-divergent gradient tints in landing.css
   derive from var(--indigo)/var(--ink), so no bg override is needed here. */
[data-cw-landing="reset-day"]{
  /* Розвантажувальний день palette — light sage green + honey gold (lighter/emotional) */
  --ink:var(--cw-net-ink,#284a3b);            /* soft mineral green ink */
  --ink-soft:var(--cw-net-ink-soft,#3a5e4d);
  --indigo:var(--cw-net-route,#55806a);         /* lighter warm route */
  --indigo-bright:var(--cw-net-route-bright,#6fa085);
  --indigo-tint:var(--cw-net-route-soft,#eef5f0);
  --chip:var(--cw-net-chip,#e7f1ea);
  --chip-soft:var(--cw-net-chip-soft,#f2f8f3);
  --cta:var(--cw-net-gold,#dba54f);            /* platform gold accent (--cw-sem-warmth) */
  --cta-strong:var(--cw-net-gold-strong,#c2902f);
  --on-cta:var(--cw-net-on-gold,#22382e);        /* deep sage ink on gold (AA) */
  --cream:var(--cw-net-canvas,#fdf6ec);          /* brighter warm canvas, more air */
  --surface:var(--cw-net-surface,#ffffff);
  --surface-cool:var(--cw-net-surface-cool,#f3f7f1);
  --line:var(--cw-net-line,#e0eadf);
  --line-strong:var(--cw-net-line-strong,#c5d6c6);
  --text:var(--cw-net-text,#243530);
  --text-muted:var(--cw-net-text-muted,#4d5b54);
  --text-soft:var(--cw-net-text-soft,#74807a);
  --gold:var(--cw-net-gold,#dba54f);
  /* dark surfaces + on-dark palette */
  --irem-dark-1:#24392c; --irem-dark-2:#3a5c48;
  --irem-grad-dark:linear-gradient(165deg,var(--irem-dark-1),var(--irem-dark-2));
  --irem-gold-bright:#e8bd6a; --irem-gold-soft:#edc371; --irem-gold-tint:#f6eedb;
  --irem-on-dark-soft:#d6e6da; --irem-on-dark-muted:#bcd0c1; --irem-on-dark-faint:#86a08e; --irem-on-dark-label:#b0c8b6;
  --irem-indigo-soft:#7da992;
  /* shared utility/legal aliases */
  --landing-color-primary:var(--ink);
  --landing-color-primary-strong:#1e3228;
  --landing-color-on-primary:#ffffff;
  --landing-color-heading:var(--ink);
  --landing-color-text-muted:var(--text-muted);
  --landing-color-text-soft:var(--text-soft);
  --landing-color-surface-base:rgba(255,255,255,.92);
  --landing-color-surface-muted:color-mix(in srgb, var(--cream) 78%, var(--chip-soft) 22%);
  --landing-color-card-trust:rgba(255,255,255,.94);
  --landing-color-border-soft:rgba(197,214,198,.78);
  --landing-color-border-strong:rgba(125,156,139,.34);
  --landing-shadow-card-unified:0 18px 52px rgba(40,74,59,.1);
  --landing-shadow-cta:0 12px 28px rgba(40,74,59,.14);
  --landing-radius-card-unified:1.65rem;
  /* the button corner is the contract's; see docs/design-system.md "Buttons" */
  --landing-radius-cta-control:var(--r-btn,1rem);
  --landing-type-caption-size:.76rem;
  --landing-type-body-size:1rem;
  --landing-type-button-size:1rem;
}

/* Photos shown plain — no fade/gradient overlay on the author photo. */
[data-cw-landing="reset-day"] .author-photo img{-webkit-mask-image:none;mask-image:none}

/* Reset Day offer answers one decision; align its content with the surrounding
   reading column instead of centering a separate visual island. */
[data-cw-landing="reset-day"] .offer{text-align:left}
/* Switching the block to the left rail also changes what its measure has to do.
   Centred, the shared 20ch reads as a balanced 45%-wide statement; left-aligned
   it becomes a column stranded in the left half of an 1080px card — the same
   thing 24ch was doing to .prob-punch. The measure moves with the alignment. */
[data-cw-landing="reset-day"] .offer h2,
[data-cw-landing="reset-day"] .offer p{margin-inline:0}
[data-cw-landing="reset-day"] .offer h2{max-width:26ch}
[data-cw-landing="reset-day"] .offer-price,
[data-cw-landing="reset-day"] .offer-pay{text-align:center}
[data-cw-landing="reset-day"] .offer-price__amount{display:flex;align-items:baseline;justify-content:center;gap:.55rem}
[data-cw-landing="reset-day"] .offer-price__amount s{font-family:var(--f-display);font-size:clamp(1.35rem,5vw,1.7rem);font-weight:400;color:var(--irem-on-dark-muted)}

/* ============ HERO EXPERIMENT — portrait stripe ============ */
.hero--photo-stripe .hero-grid{
  display:flex;
  flex-direction:column;
  gap:1rem;
}
.hero--photo-stripe .hero-top{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:.85rem;
  align-items:stretch;
}
.hero--photo-stripe .hero-main{
  min-width:0;
  display:flex;
  flex-direction:column;
}
.hero--photo-stripe .hero-badge{
  margin-top:0;
  margin-bottom:.55rem;
  align-self:flex-start;
  white-space:normal;
}
.hero--photo-stripe .hero-copy{min-width:0;padding-right:0}
.hero--photo-stripe .hero-visual{
  width:auto;
  min-width:0;
  display:flex;
  align-self:stretch;
  pointer-events:none
}
.hero--photo-stripe .hero-actions{margin-top:0;align-self:stretch}
.hero--photo-stripe h1{font-size:clamp(1.75rem,8.1vw,3.1rem);line-height:1.03}
.hero--photo-stripe .hero-sub{max-width:none;margin-bottom:0;line-height:1.48}
.hero--photo-stripe .hero-chips{gap:.5rem}
.hero--photo-stripe .hero-price{flex-wrap:wrap;row-gap:.2rem}
.hero--photo-stripe .hv-stage{
  width:100%;
  height:100%;
  min-height:clamp(360px,78vw,560px);
  aspect-ratio:13 / 32;
  border-radius:var(--r-lg);
  overflow:hidden;
  box-shadow:var(--shadow-med);
  position:relative;
}
.hero--photo-stripe .hv-stage::after{
  background:linear-gradient(180deg,rgba(249,247,239,0) 0%,rgba(249,247,239,.14) 56%,rgba(249,247,239,.72) 100%);
}
.hero--photo-stripe .hv-photo{
  position:absolute;
  inset:0 auto 0 0;
  width:240%;
  max-width:none;
  height:100%;
  border-radius:var(--r-lg);
  object-fit:cover;
  object-position:center top;
  transform:translateX(-46%);
  opacity:1;
}
.hero--photo-stripe .hv-glow,
.hero--photo-stripe .hv-stat{display:none}

@media(max-width:767px){
  .hero--photo-stripe{
    padding-top:0;
  }
  .hero--photo-stripe .wrap{
    max-width:none;
    padding-inline:0;
  }
  .hero--photo-stripe .hero-grid{
    position:relative;
    overflow:hidden;
    min-height:clamp(760px,168vw,1080px);
  }
  .hero--photo-stripe .hero-top{
    display:block;
    min-height:0;
  }
  .hero--photo-stripe .hero-visual{
    position:absolute;
    inset:0;
    z-index:1;
  }
  .hero--photo-stripe .hero-main{
    position:relative;
    z-index:2;
    width:min(52%, 268px);
    min-height:clamp(520px,124vw,760px);
    margin-left:auto;
    padding:clamp(18px,5vw,28px) clamp(14px,3.8vw,20px) clamp(22px,5vw,30px);
    display:flex;
    flex-direction:column;
    justify-content:flex-start;
    background:transparent;
  }
  .hero--photo-stripe .hero-badge{
    margin-bottom:.9rem;
    background:rgba(242,248,243,.72);
    border-color:rgba(197,214,198,.72);
    backdrop-filter:blur(6px);
    -webkit-backdrop-filter:blur(6px);
  }
  .hero--photo-stripe .hero-copy{
    display:flex;
    flex-direction:column;
    gap:.35rem;
  }
  .hero--photo-stripe .hv-stage{
    min-height:100%;
    height:100%;
    aspect-ratio:auto;
    border-radius:0;
    box-shadow:none;
  }
  .hero--photo-stripe .hv-stage::after{
    background:
      linear-gradient(90deg,
        rgba(249,247,239,0) 0%,
        rgba(249,247,239,0) 34%,
        rgba(249,247,239,.12) 46%,
        rgba(249,247,239,.46) 56%,
        rgba(249,247,239,.82) 69%,
        rgba(249,247,239,.96) 79%,
        var(--cream) 90%,
        var(--cream) 100%),
      linear-gradient(180deg,
        rgba(249,247,239,0) 0%,
        rgba(249,247,239,.04) 62%,
        rgba(249,247,239,.72) 100%);
  }
  .hero--photo-stripe .hv-photo{
    width:176%;
    height:100%;
    object-position:left top;
    transform:translateX(-23%);
    border-radius:0;
  }
  .hero--photo-stripe h1{
    font-size:clamp(1.78rem,7.7vw,2.55rem);
    line-height:1.02;
    max-width:8.4ch;
  }
  .hero--photo-stripe .hero-sub{
    font-size:1.02rem;
    line-height:1.52;
    color:var(--text-muted);
  }
  .hero--photo-stripe .hero-actions{
    position:relative;
    z-index:2;
    margin-top:1.2rem;
    padding-inline:clamp(20px,5vw,24px);
    padding-bottom:clamp(24px,6vw,32px);
  }
}

@media(min-width:768px){
  /* Grid instead of flex: the photo is much taller than the text (min-height
     640px vs its natural content height), so the text+CTA column is centered
     against it as one balanced group via align-content — rather than pinned
     to the top with a large dead gap before the price/CTA (the old flex-row
     layout let hero-actions start only after the photo's full height). */
  .hero--photo-stripe .hero-grid{
    --reset-hero-col-gap:clamp(28px,4.2vw,52px);
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    grid-template-rows:auto auto;
    column-gap:var(--reset-hero-col-gap);
    row-gap:1.2rem;
    align-content:center;
    min-height:0;
  }
  .hero--photo-stripe .hero-top{display:contents}
  .hero--photo-stripe .hero-visual{
    grid-column:1;
    grid-row:1 / 3;
    order:0;
    position:relative;
    right:auto;
    top:auto;
    margin-top:0;
    display:block;
    width:100%;
    height:auto;
    align-self:stretch;
    pointer-events:none;
  }
  .hero--photo-stripe .hero-main{
    grid-column:2;
    grid-row:1;
    order:0;
    justify-content:flex-start;
    align-self:end;
    min-height:0;
    padding-top:0;
  }
  .hero--photo-stripe .hero-badge{margin-bottom:.8rem}
  .hero--photo-stripe .hero-copy{margin-bottom:0;padding-right:0}
  .hero--photo-stripe .hero-actions{
    grid-column:2;
    grid-row:2;
    width:100%;
    margin-left:0;
    margin-top:0;
    padding-inline:0;
    align-self:start;
    gap:.95rem;
  }
  .hero--photo-stripe h1{font-size:clamp(2.15rem,4.4vw,3.3rem);line-height:1.06}
  .hero--photo-stripe .hero-sub{max-width:34ch;line-height:1.54}
  .hero--photo-stripe .hero-price{row-gap:.35rem}
  .hero--photo-stripe .hv-stage{
    aspect-ratio:4 / 5.15;
    min-height:640px;
    border-radius:calc(var(--r-lg) + .2rem);
    box-shadow:var(--shadow-med);
  }
  .hero--photo-stripe .hv-stage::after{
    background:linear-gradient(180deg,rgba(249,247,239,0) 0%,rgba(249,247,239,.08) 74%,rgba(249,247,239,.58) 100%);
  }
  .hero--photo-stripe .hv-photo{
    width:100%;
    height:100%;
    object-position:center top;
    transform:none;
    border-radius:calc(var(--r-lg) + .2rem);
  }
  .hero--photo-stripe .hero-actions .btn{width:100%}
}

@media(min-width:768px) and (max-width:1199px){
  .hero--photo-stripe .hero-grid{
    --reset-hero-col-gap:clamp(24px,3.5vw,40px);
    row-gap:1rem;
  }
  .hero--photo-stripe h1{font-size:clamp(1.92rem,3.5vw,2.65rem);line-height:1.08}
  .hero--photo-stripe .hero-sub{max-width:30ch;line-height:1.48}
  .hero--photo-stripe .hv-stage{min-height:560px}
}

@media(max-width:480px){
  .hero--photo-stripe .hero-grid{min-height:clamp(730px,174vw,1020px)}
  .hero--photo-stripe .hero-main{
    width:min(53%, 236px);
    min-height:clamp(500px,128vw,700px);
    padding:18px 14px 22px;
  }
  .hero--photo-stripe h1{font-size:clamp(1.66rem,7.3vw,2.2rem)}
  .hero--photo-stripe .hero-sub{font-size:.96rem}
  .hero--photo-stripe .hv-photo{
    width:184%;
    transform:translateX(-21%);
  }
}

/* ============ PHOTO HERO (mobile) — stripe experiment retired ============
   The portrait-stripe hero above (photo left, 52% text column right) was this
   landing's own experiment. With data-cw-hero="photo" the network recipe in
   shared/css/landing.css owns the mobile hero instead: full-bleed photograph,
   copy anchored to the bottom on its scrim. These rules only dissolve the
   stripe's geometry so the shared recipe is unobstructed — no new layout of
   their own. Desktop (>=881px) still runs the stripe's two-column grid. */
@media(max-width:880px){
  [data-cw-hero="photo"] .hero--photo-stripe .wrap{
    max-width:var(--maxw);
    padding-inline:clamp(14px,4vw,40px);
  }
  [data-cw-hero="photo"] .hero--photo-stripe .hero-grid{
    position:static;
    overflow:visible;
    min-height:0;
    gap:0;
  }
  /* display:contents dissolves the stripe's photo/text split: .hero-visual and
     .hero-main become direct children of the grid, which is what the shared
     recipe expects. */
  [data-cw-hero="photo"] .hero--photo-stripe .hero-top{display:contents}
  [data-cw-hero="photo"] .hero--photo-stripe .hero-main{
    position:static;
    z-index:auto;
    width:auto;
    min-height:0;
    margin-left:0;
    padding:0;
  }
  [data-cw-hero="photo"] .hero--photo-stripe .hero-badge{
    margin-bottom:.85rem;
    background:var(--cw-net-mat-tint-media);
    border-color:var(--cw-net-mat-stroke);
    backdrop-filter:var(--cw-net-mat-filter);
    -webkit-backdrop-filter:var(--cw-net-mat-filter);
  }
  [data-cw-hero="photo"] .hero--photo-stripe .hv-stage{
    min-height:0;
    height:100%;
    aspect-ratio:auto;
    border-radius:0;
    box-shadow:none;
  }
  /* This master is a tight head-and-shoulders portrait (1040x1280). Covering
     the full 100svh box would crop 43% of its width and blow the face up to
     nearly twice life size, so the photo layer is given a height close to the
     master's own aspect instead; the hero's scrim colour owns the rest of the
     screen, which the copy band covers anyway. */
  [data-cw-hero="photo"] .hero--photo-stripe{--cw-hero-photo-height:66svh}
  [data-cw-hero="photo"] .hero--photo-stripe .hv-photo{
    --cw-hero-photo-y:center;
    inset:0;
    width:100%;
    border-radius:0;
  }
  [data-cw-hero="photo"] .hero--photo-stripe h1{
    max-width:none;
    font-size:clamp(1.85rem,7.4vw,2.5rem);
    line-height:1.06;
  }
  [data-cw-hero="photo"] .hero--photo-stripe .hero-actions{
    margin-top:1rem;
    padding-inline:0;
    padding-bottom:0;
  }
}

/* #day-look is the only object photograph on the page — the middle otherwise
   runs three screens of cards on beige, and the reader never sees the thing
   itself. Master is a portrait frame (the glass sits low in it), so the band
   crops from the lower two thirds rather than the centre. Third photo block
   after the hero portrait and the author portrait: the base budget. */
[data-cw-landing="reset-day"] .day-shot{
  margin:2.4rem 0 0;border-radius:var(--r-lg);overflow:hidden;background:var(--chip-soft);
  box-shadow:var(--shadow-soft);
}
[data-cw-landing="reset-day"] .day-shot img{
  width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;object-position:50% 68%;display:block;
}
@media(max-width:760px){
  [data-cw-landing="reset-day"] .day-shot img{aspect-ratio:4/3}
}