/* Public landing v2 (docs/design_handoff_landing_v2) — high-fidelity handoff.
   Local token set, scoped under .l2, matching the handoff's README verbatim —
   deliberately not reusing app-wide tokens.css so this page can't drift the
   shared design when either one changes independently. */
.l2 {
  --bg: #f6f3ea;
  --grad: linear-gradient(180deg, #faf0dc 0%, rgba(246, 243, 234, 0) 78%);
  --forest: #1e3d25;
  --forest-hover: #16301d;
  --cream1: #f5f1e4;
  --cream2: #f2efe4;
  --cream-sec: #d5decc;
  --cream-tert: #a6c295;
  --body: #3a4034;
  --strong: #232a20;
  --muted: #6e7566;
  --disabled: #9aa492;
  --white: #fff;
  --border: #e4e0d2;
  --border2: #d8d3c2;
  --border3: #e9e4d6;
  --divider-dark: rgba(245, 241, 228, 0.16);
  --ochre-label: #8a5b10;
  --ochre-hl: #d8a24a;
  --ochre-border: #c08a2e;
  --ochre-tint: #faf0dc;
  --ochre-tint2: #f6e6c8;
  --green-tint: #eaf0e4;
  --leaf: #5f7d52;
  --inset-dark: rgba(0, 0, 0, 0.18);
  --card-dark: rgba(255, 255, 255, 0.06);

  background: var(--bg);
  color: var(--strong);
  font-family: 'Public Sans', system-ui, sans-serif;
}

.l2 .serif {
  font-family: 'Newsreader', serif;
}

.l2-logo {
  display: inline-flex;
  align-items: baseline;
  font-family: 'Newsreader', serif;
  font-style: italic;
  font-weight: 500;
  color: var(--forest);
}

/* ---------- Header + hero ---------- */

.l2-topband {
  background: var(--grad);
}

.l2-header {
  max-width: 1080px;
  margin: 0 auto;
  padding: 20px 20px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.l2-header-nav {
  display: flex;
  align-items: center;
  gap: 20px;
}

/* Privacy/Termini stay wide-only (per README "apply sensible stacking below
   ~900px") — but Accedi (.l2-signin, styled below) must stay reachable on
   mobile too: a returning user shouldn't have to go through "Inizia, è
   gratis" (which lands on the signup tab) just to sign back in. */
.l2-header-nav a:not(.l2-signin) {
  display: none;
  font-weight: 500;
  font-size: 14px;
  color: var(--body);
}

/* t23: the one visible door from "/" to the public knowledge base — shown on
   mobile too, unlike Privacy/Termini. */
.l2-header-nav a.l2-kb-link {
  display: inline;
  font-weight: 650;
  font-size: 14px;
  color: var(--forest);
  text-decoration: underline;
  text-decoration-color: var(--border2);
  text-underline-offset: 3px;
}

.l2-signin {
  font-weight: 650;
  font-size: 14px;
  color: var(--body);
  border: 1px solid var(--border2);
  border-radius: 20px;
  padding: 9px 18px;
}

.l2-hero {
  max-width: 1080px;
  margin: 0 auto;
  padding: 32px 20px 56px;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.l2-hero-title {
  font-style: italic;
  font-weight: 500;
  font-size: 34px;
  line-height: 1.12;
  color: var(--forest);
}

.l2-hero-body {
  font-size: 16px;
  line-height: 1.6;
  color: var(--body);
  margin-top: 16px;
}

.l2-hero-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  margin-top: 24px;
}

.l2-cta {
  background: var(--forest);
  color: var(--cream2);
  border-radius: 16px;
  padding: 16px 30px;
  font-weight: 650;
  font-size: 16px;
}

/* CTAs are <a> (the landing is also rendered to static HTML for /en/ and /it/). */
a.l2-cta,
a.l2-idea-box,
.l2-signin {
  display: inline-block;
  text-decoration: none;
  text-align: center;
}

a.l2-idea-box {
  display: block;
  text-align: left;
}

.l2-cta.full {
  width: 100%;
  padding: 19px;
}

.l2-hero-note {
  font-size: 13px;
  color: var(--muted);
  padding-left: 2px;
}

.l2-hero-teaser {
  font-style: italic;
  font-weight: 500;
  font-size: 24px;
  line-height: 1.24;
  color: var(--forest);
  margin-top: 20px;
  max-width: 600px;
}

.l2-hero-photo-wrap {
  display: flex;
  justify-content: center;
}

.l2-hero-photo {
  width: 260px;
  max-width: 100%;
  aspect-ratio: 4 / 5;
  border-radius: 20px;
  border: 1px solid var(--border);
  object-fit: cover;
  object-position: center 38%;
}

/* ---------- Shared bits ---------- */

.l2-main {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 20px 40px;
}

.l2-section {
  border-top: 1px solid var(--border);
  margin-top: 56px;
  padding-top: 32px;
}

.l2-eyebrow {
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.14em;
  color: var(--ochre-label);
}

.l2-eyebrow.light {
  color: var(--cream-tert);
}

.l2-h1 {
  font-style: italic;
  font-weight: 500;
  font-size: 32px;
  line-height: 1.12;
  color: var(--forest);
}

.l2-h2 {
  font-style: italic;
  font-weight: 500;
  font-size: 28px;
  line-height: 1.18;
  color: var(--forest);
  margin-top: 10px;
  text-wrap: pretty;
}

.l2-h3 {
  font-style: italic;
  font-weight: 500;
  font-size: 22px;
  color: var(--forest);
}

.l2-h3.light {
  color: var(--cream1);
}

.l2-h4 {
  font-weight: 650;
  font-size: 16px;
  color: var(--strong);
}

.l2-section-head-right,
.l2-section-body-narrow {
  font-size: 15px;
  line-height: 1.6;
  color: var(--body);
  margin-top: 14px;
  max-width: 640px;
}

.strong {
  font-weight: 650;
  color: var(--forest);
}

.muted {
  color: var(--muted);
}

/* ---------- Adding a plant ---------- */

.l2-cards4 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-top: 24px;
}

.l2-card4 {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 18px;
}

.l2-card4-n {
  font-weight: 700;
  font-size: 10.5px;
  letter-spacing: 0.1em;
  color: var(--muted);
}

.l2-card4-t {
  font-style: italic;
  font-weight: 500;
  font-size: 19px;
  color: var(--strong);
  margin-top: 8px;
}

.l2-card4-b {
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--body);
  margin-top: 6px;
}

/* ---------- Care sheet mock ---------- */

.l2-plantcard {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 20px;
  overflow: hidden;
  margin-top: 24px;
}

.l2-plantcard-photo {
  aspect-ratio: 21 / 10;
}

.l2-plantcard-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.l2-plantcard-body {
  padding: 18px 18px 20px;
}

.l2-plantcard-name {
  font-style: italic;
  font-weight: 500;
  font-size: 22px;
  color: var(--forest);
}

.l2-plantcard-sub {
  font-size: 12px;
  color: var(--muted);
  margin-top: 3px;
}

.l2-chips {
  display: flex;
  gap: 8px;
  margin-top: 16px;
  overflow-x: auto;
  padding-bottom: 2px;
}

.l2-chip {
  background: var(--white);
  border: 1px solid var(--border3);
  border-radius: 12px;
  padding: 10px 13px;
  text-align: center;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
  flex: 1 0 auto;
  white-space: nowrap;
}

.l2-chip-icon {
  font-size: 16px;
}

.l2-chip-label {
  font-weight: 700;
  font-size: 9px;
  letter-spacing: 0.08em;
  color: var(--muted);
  margin-top: 5px;
}

.l2-chip-value {
  font-weight: 650;
  font-size: 13px;
  color: var(--strong);
  margin-top: 2px;
}

.l2-also-lives {
  font-style: italic;
  font-size: 13px;
  color: var(--muted);
  margin-top: 12px;
}

.l2-panel {
  background: var(--white);
  border: 1px solid var(--border3);
  border-radius: 16px;
  padding: 14px 16px;
  margin-top: 10px;
}

.l2-panel-title {
  font-weight: 650;
  font-size: 14px;
  color: var(--strong);
  display: flex;
  align-items: center;
  gap: 8px;
}

.l2-seg2 {
  display: flex;
  border: 1px solid var(--border3);
  border-radius: 999px;
  overflow: hidden;
  margin-top: 10px;
}

.l2-seg2 > div {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 0;
  font-weight: 650;
  font-size: 13px;
  color: var(--body);
  background: var(--white);
}

.l2-seg2 > div.on {
  background: var(--forest);
  color: var(--cream2);
}

.l2-panel-hint {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--muted);
  margin-top: 10px;
}

.l2-month-task {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  margin-top: 10px;
  font-size: 14px;
  line-height: 1.45;
  color: var(--strong);
}

.l2-task-box {
  width: 18px;
  height: 18px;
  border-radius: 6px;
  border: 1.5px solid var(--forest);
  flex: none;
  margin-top: 1px;
}

.l2-task-box.done {
  border-color: #c3cbbb;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  color: var(--disabled);
}

/* ---------- Weather alerts ---------- */

.l2-section-head-row {
  display: flex;
  flex-direction: column;
}

.l2-alerts3 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-top: 24px;
}

.l2-alert {
  border-radius: 18px;
  padding: 16px 18px;
}

.l2-alert.honey {
  background: var(--ochre-tint);
}
.l2-alert.purple {
  background: #f0ebf5;
}
.l2-alert.green {
  background: var(--green-tint);
}

.l2-alert-head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 650;
  font-size: 14px;
  color: var(--ochre-label);
}

.l2-alert.purple .l2-alert-head {
  color: #5a4a73;
}
.l2-alert.green .l2-alert-head {
  color: #3f5c35;
}

.l2-alert-body {
  font-size: 14px;
  line-height: 1.55;
  color: var(--body);
  margin-top: 8px;
}

/* ---------- The advice ---------- */

.l2-tips-head {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 24px;
}

.l2-tips-label {
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.12em;
  color: var(--muted);
}

.l2-tips-progress {
  font-size: 13px;
  color: var(--muted);
}

.l2-tips-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  margin-top: 12px;
  max-height: 190px;
  overflow-y: auto;
  padding-right: 4px;
}

.l2-tip {
  background: var(--white);
  border: 1px solid var(--border3);
  border-radius: 12px;
  padding: 10px 13px;
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 13.5px;
  line-height: 1.4;
  color: var(--strong);
}

.l2-calendar {
  margin-top: 32px;
}

.l2-calendar-title {
  font-style: italic;
  font-weight: 500;
  font-size: 24px;
  color: var(--forest);
}

.l2-calendar-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 12px;
  flex-wrap: wrap;
}

.l2-calendar-toolbar .l2-seg2 {
  flex: none;
  width: auto;
  background: var(--white);
}

.l2-calendar-toolbar .l2-seg2 > div {
  padding: 9px 16px;
  white-space: nowrap;
}

.l2-add-entry {
  border: 1px solid var(--border);
  border-radius: 14px;
  background: #fbfaf5;
  padding: 10px 16px;
  font-weight: 650;
  font-size: 13px;
  color: var(--strong);
}

.l2-groups {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 12px;
  max-height: 260px;
  overflow-y: auto;
  padding-right: 4px;
}

.l2-group {
  background: var(--white);
  border: 1px solid var(--border3);
  border-radius: 16px;
  padding: 14px 16px;
}

.l2-group-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.l2-group-headtx {
  min-width: 0;
  flex: 1;
}

.l2-group-title {
  display: flex;
  align-items: center;
  gap: 9px;
  font-weight: 650;
  font-size: 15.5px;
  color: var(--strong);
}

.l2-group-bar {
  height: 5px;
  border-radius: 3px;
  background: #e8ebe0;
  margin-top: 9px;
  max-width: 440px;
  overflow: hidden;
}

.l2-group-bar-fill {
  height: 100%;
  background: var(--leaf);
}

.l2-group-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  flex: none;
}

.l2-how-pill {
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 5px 12px;
  font-weight: 650;
  font-size: 12px;
  color: var(--body);
  background: var(--white);
  white-space: nowrap;
}

.l2-group-count {
  font-size: 12.5px;
  color: var(--muted);
  white-space: nowrap;
}

.l2-task-list {
  margin-top: 8px;
}

.l2-task-row {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  padding: 7px 0;
}

.l2-task-tx {
  min-width: 0;
}

.l2-task-text {
  font-size: 13.5px;
  line-height: 1.4;
  color: var(--strong);
}

.l2-task-text.done {
  color: var(--disabled);
  text-decoration: line-through;
}

.l2-task-plant {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
}

.l2-task-plant img {
  width: 20px;
  height: 20px;
  border-radius: 6px;
  object-fit: cover;
  flex: none;
}

.l2-task-plant span {
  font-size: 12px;
  color: var(--muted);
}

.l2-task-plant span.done {
  color: var(--disabled);
  text-decoration: line-through;
}

.l2-mark-all {
  font-weight: 650;
  font-size: 13px;
  color: var(--leaf);
  padding-top: 8px;
}

/* ---------- Keep an eye on ---------- */

.l2-pests2 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin-top: 24px;
}

.l2-pest {
  background: #fbefd6;
  border: 1.5px dashed #dfbe84;
  border-radius: 14px;
  padding: 12px 15px;
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

.l2-pest-t {
  font-weight: 650;
  font-size: 14.5px;
  color: var(--ochre-label);
}

.l2-pest-b {
  font-size: 13px;
  line-height: 1.45;
  color: var(--body);
  margin-top: 3px;
}

.l2-almanac-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-top: 32px;
  flex-wrap: wrap;
}

.l2-almanac-sub {
  font-style: italic;
  font-size: 14px;
  color: var(--ochre-label);
}

.l2-almanac-detail {
  background: var(--white);
  border: 1px solid var(--border3);
  border-radius: 18px;
  padding: 18px 18px;
  margin-top: 12px;
  max-height: 340px;
  overflow-y: auto;
}

.l2-almanac-top {
  display: flex;
  align-items: center;
  gap: 12px;
}

.l2-almanac-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: #fbfaf5;
  border: 1px solid var(--border3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 21px;
  flex: none;
}

.l2-almanac-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-top: 13px;
}

.tag-pest {
  background: #fbefd6;
  border-radius: 999px;
  padding: 6px 13px;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--ochre-label);
}

.tag {
  border: 1px solid var(--border3);
  border-radius: 999px;
  background: var(--white);
  padding: 7px 14px;
  font-weight: 650;
  font-size: 12.5px;
  color: var(--body);
  white-space: nowrap;
}

.l2-almanac-facts {
  border-top: 1px solid #f0ebdc;
  margin-top: 16px;
  padding-top: 4px;
}

.l2-almanac-facts > div {
  margin-top: 12px;
}

.l2-almanac-label {
  font-weight: 700;
  font-size: 10.5px;
  letter-spacing: 0.12em;
  color: var(--muted);
}

.l2-almanac-fact-body {
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--strong);
  margin-top: 4px;
}

.l2-almanac-months {
  background: #fbfaf5;
  border: 1px solid #f0ebdc;
  border-radius: 14px;
  padding: 12px 14px;
  margin-top: 14px;
}

.l2-months {
  display: flex;
  gap: 2px;
  margin-top: 8px;
}

.l2-month {
  flex: 1;
  text-align: center;
  padding: 6px 0;
  border-radius: 9px;
  font-size: 12px;
  font-weight: 500;
  color: var(--muted);
}

.l2-month.on {
  background: var(--forest);
  font-weight: 650;
  color: var(--cream2);
}

.l2-almanac-treat {
  margin-top: 16px;
}

.l2-almanac-treat-sub {
  font-size: 13.5px;
  color: var(--muted);
  margin-top: 4px;
}

.l2-treat-box {
  border: 1px solid var(--border3);
  border-radius: 14px;
  padding: 12px 14px;
  margin-top: 8px;
}

.l2-treat-box.organic {
  border: none;
  background: #e7f0e5;
}

.l2-treat-label {
  display: flex;
  align-items: center;
  gap: 7px;
  font-weight: 700;
  font-size: 10.5px;
  letter-spacing: 0.1em;
  color: var(--muted);
}

.l2-treat-box.organic .l2-treat-label {
  color: #3f5c35;
}

.l2-treat-body {
  font-size: 13px;
  line-height: 1.45;
  color: var(--strong);
  margin-top: 5px;
}

/* ---------- In bloom ---------- */

.l2-bloom-row {
  display: flex;
  gap: 12px;
  margin-top: 12px;
  overflow-x: auto;
  padding-bottom: 6px;
}

.l2-bloom-item {
  width: 128px;
  flex: none;
  text-align: center;
}

.l2-bloom-item img {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 14px;
  object-fit: cover;
}

.l2-bloom-item > div:not(.l2-bloom-more) {
  font-style: italic;
  font-size: 13px;
  color: var(--strong);
  margin-top: 8px;
}

.l2-bloom-more {
  aspect-ratio: 1;
  border-radius: 14px;
  background: var(--white);
  border: 1px solid var(--border3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 650;
  font-size: 14px;
  color: var(--strong);
}

.l2-coming-next {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--muted);
  margin-top: 16px;
}

.l2-coming-next em {
  font-style: italic;
  font-size: 14.5px;
  color: var(--strong);
}

/* ---------- Community (dark band) ---------- */

.l2-community {
  background: var(--forest);
  color: var(--cream2);
  margin-top: 40px;
}

.l2-community-inner {
  max-width: 1080px;
  margin: 0 auto;
  padding: 56px 20px 64px;
}

.l2-community-title {
  font-style: italic;
  font-weight: 500;
  font-size: 30px;
  line-height: 1.16;
  color: var(--cream1);
  margin-top: 12px;
  max-width: 740px;
}

.l2-community-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-top: 32px;
}

.l2-dark-card {
  background: var(--card-dark);
  border: 1px solid var(--divider-dark);
  border-radius: 20px;
  padding: 22px 22px;
}

.l2-cuttings-card {
  display: flex;
  flex-direction: column;
}

.l2-dark-body {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--cream-sec);
  margin-top: 10px;
}

.l2-dark-body.narrow {
  max-width: 520px;
}

.l2-inset {
  background: var(--inset-dark);
  border-radius: 14px;
  padding: 13px 15px;
  margin-top: 14px;
}

.l2-inset-label {
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--cream-tert);
}

.l2-circle-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
}

.l2-leaf-avatar {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  flex: none;
  background: var(--green-tint);
  border: 1px solid rgba(245, 241, 228, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
}

.l2-circle-name {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
}

.l2-circle-name .serif {
  font-style: italic;
  font-weight: 500;
  font-size: 17px;
  color: var(--cream1);
}

.l2-pill {
  font-size: 11px;
  color: var(--cream-sec);
  background: rgba(245, 241, 228, 0.14);
  border-radius: 999px;
  padding: 3px 9px;
}

.l2-circle-sub {
  font-size: 12px;
  color: var(--cream-tert);
  margin-top: 3px;
}

.l2-screenshot-card {
  background: var(--cream1);
  border-radius: 14px;
  padding: 8px;
  margin-top: 16px;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.26);
}

.l2-screenshot-card img {
  display: block;
  width: 100%;
  border-radius: 8px;
}

.l2-cuttings-card .l2-screenshot-card {
  flex: 1;
  min-height: 200px;
  display: flex;
}

.l2-screenshot-fade img {
  height: 100%;
  object-fit: cover;
  object-position: left top;
  -webkit-mask-image: linear-gradient(to right, #000 78%, transparent 100%);
  mask-image: linear-gradient(to right, #000 78%, transparent 100%);
}

.l2-passport {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  background: var(--inset-dark);
  border-radius: 14px;
  padding: 11px 13px;
  font-size: 12.5px;
  color: var(--cream-sec);
}

.l2-passport .strong {
  color: var(--cream1);
  font-weight: 650;
}

.l2-passport .arrow {
  color: var(--cream-tert);
}

.l2-angel-card,
.l2-cards-card {
  background: var(--card-dark);
  border: 1px solid var(--divider-dark);
  border-radius: 20px;
  margin-top: 16px;
  display: flex;
  flex-direction: column;
}

.l2-angel-text,
.l2-cards-text {
  padding: 24px 22px;
}

.l2-angel-photo {
  aspect-ratio: 16 / 9;
}

.l2-angel-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.l2-round-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--green-tint);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-style: italic;
  font-size: 15px;
  color: var(--forest);
  flex: none;
  float: left;
  margin-right: 11px;
}

.l2-angel-named {
  font-weight: 650;
  font-size: 13px;
  color: var(--cream1);
}

.l2-angel-since {
  font-size: 12px;
  color: var(--cream-tert);
  margin-top: 2px;
}

.l2-angel-away-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.l2-ochre-label {
  font-weight: 700;
  font-size: 10.5px;
  letter-spacing: 0.14em;
  color: var(--ochre-hl);
}

.l2-angel-dates {
  font-style: italic;
  font-weight: 500;
  font-size: 18px;
  color: var(--cream1);
  margin-top: 3px;
}

.l2-angel-counts {
  font-size: 12px;
  color: var(--cream-tert);
  flex: none;
}

.l2-divider {
  height: 1px;
  background: var(--divider-dark);
  margin: 12px 0 10px;
}

.l2-work-rows {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 8px;
}

.l2-work-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  font-size: 12.5px;
  color: var(--cream1);
}

.l2-work-row .ochre {
  font-style: italic;
  font-size: 12px;
  color: var(--ochre-hl);
  flex: none;
}

.l2-angel-note {
  font-style: italic;
  font-size: 12px;
  line-height: 1.5;
  color: var(--cream-tert);
  margin-top: 14px;
}

.l2-cards-note {
  font-style: italic;
  font-size: 12.5px;
  color: var(--cream-tert);
  margin-top: 12px;
}

.l2-pills-dark {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}

.l2-pills-dark span {
  font-size: 13px;
  color: var(--cream1);
  border: 1px solid rgba(245, 241, 228, 0.28);
  border-radius: 999px;
  padding: 8px 15px;
}

.l2-card-photo {
  padding: 0 22px 22px;
}

.l2-card-photo img {
  width: 100%;
  border-radius: 14px;
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.34);
}

/* ---------- Photos / Backup ---------- */

.l2-photos-section {
  max-width: 1080px;
  margin: 0 auto;
  padding: 56px 20px 0;
}

.l2-backup-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 20px 20px;
  margin-top: 24px;
}

.l2-backup-meta {
  font-size: 12.5px;
  color: var(--muted);
  margin-top: 3px;
}

.l2-backup-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  margin-top: 14px;
}

.l2-backup-grid img {
  aspect-ratio: 1;
  border-radius: 8px;
  object-fit: cover;
  width: 100%;
}

.l2-backup-body {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--body);
  margin-top: 14px;
}

.l2-backup-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}

.l2-btn-dark {
  display: inline-block;
  background: var(--forest);
  color: var(--cream1);
  border-radius: 999px;
  padding: 11px 20px;
  font-weight: 650;
  font-size: 14px;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
}

.l2-btn-dark.full {
  width: 100%;
}

.l2-btn-outline {
  display: inline-block;
  background: var(--white);
  color: var(--strong);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 10px 20px;
  font-weight: 650;
  font-size: 13.5px;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
}

.l2-backup-note {
  background: var(--green-tint);
  border-radius: 12px;
  padding: 12px 14px;
  margin-top: 14px;
  font-size: 13.5px;
  line-height: 1.5;
  color: #3f5c35;
}

/* ---------- FREE ---------- */

.l2-free-section {
  max-width: 1080px;
  margin: 0 auto;
  padding: 56px 20px 0;
  border-top: 1px solid var(--border);
  margin-top: 56px;
  padding-top: 32px;
}

.l2-free-body {
  font-size: 15px;
  line-height: 1.6;
  color: var(--body);
  margin-top: 14px;
  max-width: 640px;
}

.l2-free-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-top: 20px;
}

.l2-free-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
}

.l2-free-card-body {
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--body);
  margin-top: 6px;
}

.l2-free-counter {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #edeae0;
}

.l2-leaf-chip {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  flex: none;
  background: #eae5d4;
  border: 1px solid #ded8c6;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
}

.l2-spacer {
  flex: 1;
}

.l2-idea-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 18px 20px;
  margin-top: 12px;
}

.l2-idea-box {
  display: block;
  width: 100%;
  text-align: left;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: #fbfaf6;
  padding: 13px 15px;
  margin-top: 12px;
  font-size: 13.5px;
  color: var(--disabled);
  min-height: 52px;
}

.l2-idea-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 10px;
}

/* ---------- Final CTA + footer ---------- */

.l2-final {
  margin-top: 64px;
  background: linear-gradient(180deg, rgba(246, 243, 234, 0) 0%, #faf0dc 72%);
}

.l2-final-inner {
  max-width: 640px;
  margin: 0 auto;
  padding: 32px 20px 72px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.l2-final-teaser {
  font-style: italic;
  font-weight: 500;
  font-size: 24px;
  line-height: 1.28;
  color: var(--leaf);
  margin-bottom: 24px;
}

.l2-final .l2-h1 {
  margin-top: 20px;
}

.l2-final .l2-cta {
  margin-top: 28px;
}

.l2-final .l2-hero-note {
  margin-top: 10px;
  padding-left: 0;
}

.l2-footer {
  background: #f1ede0;
  border-top: 1px solid var(--border);
}

.l2-footer-inner {
  max-width: 1080px;
  margin: 0 auto;
  padding: 22px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.l2-footer-inner .muted {
  font-size: 13px;
}

.l2-footer-links {
  display: flex;
  gap: 18px;
}

.l2-footer-links a {
  font-weight: 500;
  font-size: 13px;
  color: var(--body);
}

/* ---------- Wide (>=900px), per README ("apply sensible stacking below ~900px") ---------- */

@media (min-width: 900px) {
  .l2-header-nav a:not(.l2-signin) {
    display: inline;
  }

  .l2-hero {
    flex-direction: row;
    align-items: center;
    gap: 48px;
    padding: 48px 32px 72px;
  }

  .l2-hero-text {
    width: 480px;
    flex: none;
  }

  .l2-hero-title {
    font-size: 46px;
  }

  .l2-hero-body {
    font-size: 17.5px;
  }

  .l2-hero-teaser {
    font-size: 30px;
    max-width: 500px;
  }

  .l2-hero-photo-wrap {
    flex: 1;
  }

  .l2-hero-photo {
    width: 300px;
  }

  .l2-main {
    padding: 0 32px 40px;
  }

  .l2-section {
    margin-top: 72px;
    padding-top: 40px;
  }

  .l2-h2 {
    font-size: 34px;
  }

  .l2-cards4 {
    grid-template-columns: repeat(4, 1fr);
  }

  .l2-section-head {
    max-width: 640px;
  }

  .l2-plantcard {
    display: flex;
  }

  .l2-plantcard-photo {
    width: 320px;
    aspect-ratio: auto;
    flex: none;
  }

  .l2-plantcard-body {
    flex: 1;
    padding: 22px 24px;
  }

  .l2-section-head-row {
    flex-direction: row;
    gap: 48px;
    align-items: flex-start;
  }

  .l2-section-head-left {
    flex: 1;
  }

  .l2-section-head-right {
    width: 380px;
    flex: none;
    margin-top: 6px;
  }

  .l2-alerts3 {
    grid-template-columns: repeat(3, 1fr);
  }

  .l2-tips-head {
    flex-direction: row;
    align-items: baseline;
    justify-content: space-between;
  }

  .l2-tips-grid {
    grid-template-columns: 1fr 1fr;
  }

  .l2-pests2 {
    grid-template-columns: 1fr 1fr;
  }

  .l2-bloom-item {
    width: 148px;
  }

  .l2-community-inner {
    padding: 80px 32px 88px;
  }

  .l2-community-title {
    font-size: 40px;
  }

  .l2-community-grid {
    grid-template-columns: 1fr 1fr;
  }

  .l2-angel-card {
    flex-direction: row;
  }

  .l2-angel-text {
    flex: 1;
    padding: 30px 32px;
  }

  .l2-angel-photo {
    width: 300px;
    aspect-ratio: auto;
    flex: none;
  }

  .l2-cards-card {
    flex-direction: row;
    align-items: center;
    gap: 24px;
    padding: 28px 30px;
  }

  .l2-cards-text {
    flex: 1;
    padding: 0;
  }

  .l2-card-photo {
    width: 220px;
    flex: none;
    padding: 0;
  }

  .l2-photos-section {
    padding: 80px 32px 0;
    display: flex;
    gap: 48px;
    align-items: flex-start;
  }

  .l2-photos-text {
    flex: 1;
  }

  .l2-backup-card {
    width: 400px;
    flex: none;
    margin-top: 0;
  }

  .l2-free-section {
    padding: 0 32px 0;
  }

  .l2-free-head {
    display: flex;
    align-items: baseline;
    gap: 20px;
  }

  .l2-free-cards {
    grid-template-columns: 1fr 1fr;
  }

  .l2-final-inner {
    padding: 52px 32px 96px;
  }

  .l2-h1 {
    font-size: 42px;
  }

  .l2-footer-inner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}