/* =========================================================================
   Website Packages - offer section
   Visual language follows the supplied reference: warm ivory ground with
   dappled leaf shadows, cream cards, one deep forest card, all-serif
   typography, centred card content and pill buttons.

   Theme lock: light only. The ivory/forest pairing is the identity.

   Radius rule (one system, applied everywhere):
     cards            22px   --r-card
     inner panels     14px   --r-panel
     inputs           12px   --r-input
     buttons, badges  pill   --r-pill
   ========================================================================= */

:root {
  /* ground + surfaces */
  --ivory:        #efe8db;
  --cream:        #f7f2e7;
  --cream-sunk:   #efe8d8;

  /* ink. Measured against --cream: ink 16.2:1, muted 6.7:1, faint 4.9:1 */
  --ink:        #16180f;
  --ink-muted:  #5a5443;
  --ink-faint:  #6e6754;

  /* lines */
  --line:        #ddd3bd;
  --line-strong: #cdc0a4;

  /* accent: deep forest, the single accent for the whole page */
  --forest:        #1c4733;
  --forest-ink:    #27553e;   /* 7.7:1 on cream */
  --forest-hover:  #16382a;
  --tan:           #e6d7ae;

  /* on forest. Measured against --forest: 12.9:1 / 6.8:1 / 5.2:1 */
  --on-forest:       #f2ede1;
  --on-forest-muted: #c3d4c7;
  --on-forest-faint: #a4bcac;

  /* radii */
  --r-card:  22px;
  --r-panel: 14px;
  --r-input: 12px;
  --r-pill:  999px;

  /* type */
  --font-display: "Playfair Display", Georgia, "Times New Roman", serif;
  --font-body: "Lora", Georgia, "Times New Roman", serif;

  --ease: cubic-bezier(0.16, 1, 0.3, 1);

  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

html, body {
  margin: 0;
  overflow-x: clip;
  max-width: 100%;
}

body {
  background: var(--ivory);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, p, ul { margin: 0; }
ul { list-style: none; padding: 0; }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

:where(a, button, input, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--forest-ink);
  outline-offset: 3px;
  border-radius: var(--r-input);
}
.card--feature :where(a, button):focus-visible { outline-color: var(--tan); }

/* -------------------------------------------------------------------------
   Ground: real foliage-shadow texture multiplied over the ivory, plus a
   fine paper grain. Both fixed and pointer-events none, off the scroll path.
   ------------------------------------------------------------------------- */
.leaves {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: url("assets/leaf-shadow.webp");
  background-size: cover;
  background-position: center top;
  mix-blend-mode: multiply;
  opacity: 0.55;
}

.grain {
  position: fixed;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  opacity: 0.3;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='0.08'/%3E%3C/svg%3E");
}

/* -------------------------------------------------------------------------
   Shell
   ------------------------------------------------------------------------- */
.offer {
  position: relative;
  z-index: 1;
  padding-block: clamp(3rem, 1.8rem + 5vw, 6rem);
  padding-inline: clamp(1rem, 0.4rem + 2.4vw, 2.5rem);
}

.shell {
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
}

/* -------------------------------------------------------------------------
   Intro, centred like the reference
   ------------------------------------------------------------------------- */
.intro {
  text-align: center;
  max-width: 68rem;
  margin-inline: auto;
}

.eyebrow {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--forest-ink);
  margin-bottom: 1rem;
}

.intro__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.95rem, 1.2rem + 2.6vw, 3.35rem);
  line-height: 1.12;
  letter-spacing: -0.012em;
  color: var(--ink);
}
.intro__title > span { display: inline-block; text-wrap: balance; }

/* Brush underline under the italic clause, as a real image asset. */
.intro__accent {
  font-style: italic;
  font-weight: 600;
  padding-bottom: 0.22em;
  background-image: url("assets/swash.webp");
  background-repeat: no-repeat;
  background-position: center bottom 0.02em;
  background-size: 100% 0.24em;
}

.intro__lede {
  margin-top: 1.1rem;
  margin-inline: auto;
  max-width: 46ch;
  font-size: clamp(1rem, 0.94rem + 0.28vw, 1.2rem);
  color: var(--ink-muted);
}

/* Icon row, mirroring the reference's three-up strip */
.assure {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.35rem 0;
  margin-top: 1.1rem;
  font-size: 0.9375rem;
  color: var(--forest-ink);
}
.assure li {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-inline: 0.6rem;
}
.assure li + li::before {
  content: "\00b7";
  margin-right: 1.2rem;
  color: var(--line-strong);
}
.assure .ph { font-size: 1.05rem; }

/* -------------------------------------------------------------------------
   Package grid. Centre column is wider, taller and raised.
   ------------------------------------------------------------------------- */
.packages {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.75rem;
  margin-top: clamp(2.5rem, 1.5rem + 3.4vw, 4rem);
  max-width: 34rem;
  margin-inline: auto;
}

@media (min-width: 950px) {
  .packages {
    grid-template-columns: 1fr 1.07fr 1fr;
    gap: 1.25rem;
    max-width: none;
    align-items: stretch;
    padding-block: 30px;        /* room for the taller centre card */
  }
  /* Negative block margins make the centre card overhang the row on both
     edges, the way the reference shows it. */
  .card--feature { margin-block: -30px; }
}

/* -------------------------------------------------------------------------
   Card
   ------------------------------------------------------------------------- */
.card {
  --card-pad: clamp(1.25rem, 0.9rem + 1.1vw, 1.75rem);
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  text-align: center;
  padding: var(--card-pad) var(--card-pad) calc(var(--card-pad) + 0.25rem);
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  box-shadow:
    0 1px 2px rgba(42, 34, 18, 0.05),
    0 18px 38px -26px rgba(42, 34, 18, 0.38);
}

.card--feature {
  background: var(--forest);
  border-color: rgba(230, 215, 174, 0.3);
  color: var(--on-forest);
  padding-block: calc(var(--card-pad) + 1.6rem) calc(var(--card-pad) + 1.25rem);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    0 3px 8px rgba(18, 38, 27, 0.2),
    0 40px 70px -32px rgba(18, 38, 27, 0.6);
}

/* Recommended badge, pinned across the top edge of the centre card */
.badge {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.4rem 1.1rem;
  border-radius: var(--r-pill);
  background: var(--tan);
  color: #2a2317;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(18, 38, 27, 0.26);
}
.badge .ph { font-size: 0.9rem; }

/* Laptop mockup, the card's visual anchor */
.device { margin: 0 0 1.15rem; }
.device img {
  display: block;
  width: 100%;
  height: auto;
  /* Matches the device asset. The reference's laptop screens are ~1.28:1,
     not 16:10, so the frame and this slot follow that proportion. */
  aspect-ratio: 2000 / 1540;
  object-fit: contain;
}

.card__step {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  font-variant-numeric: tabular-nums;
  color: var(--ink-faint);
  margin-bottom: 0.5rem;
}
.card--feature .card__step { color: var(--on-forest-faint); }

.card__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.5rem, 1.25rem + 0.8vw, 1.95rem);
  line-height: 1.12;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

/* Short centred rule under the package name, as in the reference */
.rule {
  display: block;
  width: 2.5rem;
  height: 1px;
  margin: 0.85rem auto;
  background: var(--line-strong);
}
.card--feature .rule { background: rgba(230, 215, 174, 0.45); }

.card__desc {
  font-size: 1.0625rem;
  line-height: 1.45;
  color: var(--forest-ink);
  text-wrap: pretty;
}
.card--feature .card__desc { color: var(--on-forest-muted); }

/* -------------------------------------------------------------------------
   Ideal for: still the loudest block after the package name, but open and
   centred in the reference's manner rather than a heavy filled box.
   ------------------------------------------------------------------------- */
.ideal {
  margin-top: 1.35rem;
  padding: 1.05rem 0.5rem 1.1rem;
  border-block: 1px solid var(--line);
}
.card--feature .ideal {
  border-block-color: rgba(230, 215, 174, 0.3);
}

.ideal__label {
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--forest-ink);
  margin-bottom: 0.7rem;
}
.card--feature .ideal__label { color: var(--tan); }

.ideal__list {
  display: grid;
  gap: 0.42rem;
  font-size: 1rem;
  line-height: 1.35;
  color: var(--ink);
}
.card--feature .ideal__list { color: var(--on-forest); }

.ideal__sub {
  display: block;
  margin-top: 0.1rem;
  font-size: 0.8125rem;
  font-style: italic;
  color: var(--ink-muted);
}
.card--feature .ideal__sub { color: var(--on-forest-muted); }

/* Features stay visually secondary */
.feats {
  display: grid;
  gap: 0.3rem;
  margin-top: 1.1rem;
  font-size: 0.875rem;
  line-height: 1.4;
  color: var(--ink-muted);
}
.card--feature .feats { color: var(--on-forest-muted); }

/* -------------------------------------------------------------------------
   Card footer. margin-top auto keeps links and CTAs aligned across cards.
   ------------------------------------------------------------------------- */
.card__foot {
  margin-top: auto;
  padding-top: 1.5rem;
}

.sample {
  display: inline-block;
  margin-bottom: 0.9rem;
  font-size: 0.875rem;
  font-style: italic;
  color: var(--forest-ink);
  text-decoration: none;
  border-bottom: 1px solid rgba(39, 85, 62, 0.35);
  padding-bottom: 1px;
  transition: color 0.22s var(--ease), border-color 0.22s var(--ease);
}
.sample:hover { color: var(--forest-hover); border-bottom-color: var(--forest-hover); }
.card--feature .sample { color: var(--tan); border-bottom-color: rgba(230, 215, 174, 0.45); }
.card--feature .sample:hover { color: #f1e6c6; border-bottom-color: #f1e6c6; }

.sample__arrow { display: inline-block; transition: transform 0.25s var(--ease); }
.sample:hover .sample__arrow { transform: translate(2px, -2px); }

/* -------------------------------------------------------------------------
   Buttons: full pill, serif, with a trailing arrow
   ------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  text-decoration: none;   /* the CTAs are anchors */
  width: 100%;
  min-height: 52px;
  padding: 0.8rem 1.15rem;
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.2s var(--ease), transform 0.18s var(--ease),
              box-shadow 0.22s var(--ease);
}
.btn__arrow { font-size: 1.05em; transition: transform 0.25s var(--ease); }
.btn:hover .btn__arrow { transform: translateX(3px); }

.btn--solid {
  background: var(--forest);
  color: var(--cream);            /* 9.4:1 */
  box-shadow: 0 2px 4px rgba(18, 38, 27, 0.22);
}
.btn--solid:hover { background: var(--forest-hover); box-shadow: 0 8px 18px -8px rgba(18, 38, 27, 0.6); }
.btn--solid:active { transform: scale(0.985); box-shadow: none; }

.btn--cream {
  background: var(--cream);
  color: var(--forest);           /* 9.4:1 */
  box-shadow: 0 3px 6px rgba(10, 26, 18, 0.3), 0 14px 26px -14px rgba(10, 26, 18, 0.7);
}
.btn--cream:hover { background: #fffaf0; box-shadow: 0 4px 8px rgba(10, 26, 18, 0.34), 0 18px 32px -14px rgba(10, 26, 18, 0.8); }
.btn--cream:active { transform: scale(0.985); box-shadow: 0 1px 3px rgba(10, 26, 18, 0.35); }

@media (min-width: 950px) {
  .btn--solid:hover, .btn--cream:hover { transform: translateY(-1px); }
  .btn--solid:active, .btn--cream:active { transform: translateY(0) scale(0.985); }
}

/* -------------------------------------------------------------------------
   Notes
   ------------------------------------------------------------------------- */
.notes {
  margin-top: clamp(2rem, 1.2rem + 2.4vw, 3rem);
  padding-top: 1.4rem;
  border-top: 1px solid var(--line);
  display: grid;
  gap: 0.35rem;
  text-align: center;
  font-size: 0.8125rem;
  font-style: italic;
  line-height: 1.55;
  color: var(--ink-muted);
}
.notes p { max-width: 78ch; margin-inline: auto; }

/* -------------------------------------------------------------------------
   Motion
   ------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  [data-reveal] {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.65s var(--ease), transform 0.65s var(--ease);
    transition-delay: calc(var(--i, 0) * 70ms);
  }
  [data-reveal].is-in { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal] { opacity: 1; transform: none; }
}