/* /local-seo-toronto. Borrowed format: the map pack and the listing audit sheet. Prefix lt-. */
.lt-page {
  --lt-paper: #f4f0e6;
  --lt-white: #fdfbf6;
  --lt-ink: #1a1a18;
  --lt-muted: #56524b;
  --lt-line: #d8d1c2;
  --lt-accent: #1f5c4f;
  --lt-clay: #8a2417;
  --lt-gold: #c9a24d;
  --lt-night: #13201c;
  background: var(--lt-paper);
  color: var(--lt-ink);
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.62;
}
.lt-page * { box-sizing: border-box; }
.lt-page ::selection { background: var(--lt-gold); color: var(--lt-ink); }
.lt-page :focus-visible { outline: 2px solid var(--lt-accent); outline-offset: 3px; border-radius: 3px; }
.lt-page a:not(.lt-btn) { color: inherit; text-underline-offset: 4px; text-decoration-thickness: 1px; }
:where(.lt-page) :where(h1, h2, h3, p, ol, ul, figure) { margin: 0; }
:where(.lt-page) :where(ol, ul) { padding: 0; list-style: none; }
.lt-page h1, .lt-page h2, .lt-page h3 { font-family: var(--font-serif); font-weight: 500; letter-spacing: -0.02em; text-wrap: balance; }
.lt-wrap { width: min(100%, 1180px); margin-inline: auto; padding-inline: clamp(16px, 4vw, 48px); }
.lt-intro { margin-top: 14px; max-width: 62ch; color: var(--lt-muted); }

/* Hero: the statement beside the pack it is about. */
.lt-hero { padding: calc(104px + clamp(20px, 3vw, 44px)) 0 clamp(48px, 6vw, 88px); }
.lt-hero-grid { display: grid; gap: 40px clamp(32px, 6vw, 88px); align-items: center; }
@media (min-width: 960px) { .lt-hero-grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); } }
.lt-hero h1 { max-width: 14ch; font-size: clamp(2.7rem, 6.4vw, 5.4rem); line-height: 0.98; }
.lt-lead { margin-top: 22px; max-width: 58ch; font-size: clamp(1.02rem, 1.5vw, 1.18rem); color: var(--lt-muted); }
.lt-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin-top: 20px; }
.lt-price strong { font-family: var(--font-serif); font-size: 2.2rem; font-weight: 500; }
.lt-price s { color: var(--lt-muted); }
.lt-price span { flex-basis: 100%; font-size: 15px; color: var(--lt-muted); }
.lt-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
.lt-btn { min-height: 52px; display: inline-flex; align-items: center; padding: 0 22px; font-weight: 800; font-size: 15.5px; color: var(--lt-ink); text-decoration: none !important; border: 1.5px solid var(--lt-ink); border-radius: 6px; background: transparent; }
.lt-btn:hover { background: var(--lt-ink); color: var(--lt-paper); }
.lt-btn-main { background: var(--lt-accent); border-color: var(--lt-accent); color: #fff; }
.lt-btn-main:hover { background: #174a3f; border-color: #174a3f; }
.lt-btn-gold { background: var(--lt-gold); border-color: var(--lt-gold); color: var(--lt-ink); }
.lt-btn-gold:hover { background: #dbb965; border-color: #dbb965; color: var(--lt-ink); }
.lt-btn-line { color: #f4f0e6; border-color: #f4f0e6; }
.lt-btn-line:hover { background: #f4f0e6; color: var(--lt-ink); }
.lt-hero .ns-trustline { margin-top: 18px !important; color: var(--lt-ink); }

/* The pack: three listings, one with missing details. */
.lt-pack { margin: 0; padding: 18px; background: var(--lt-night); border-radius: 12px; box-shadow: 0 24px 34px -22px rgba(0, 0, 0, 0.65); }
.lt-pack-bar { padding: 12px 16px; font-size: 15px; color: #cfd8d4; background: #22332d; border-radius: 999px; }
.lt-pack ol { display: grid; gap: 10px; margin-top: 14px; }
.lt-pack li { padding: 14px 16px; background: var(--lt-white); border-radius: 8px; }
.lt-pack-name { font-family: var(--font-serif); font-size: 1.25rem; line-height: 1.15; }
.lt-pack-line { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; margin-top: 6px; font-size: 14px; color: var(--lt-muted); }
.lt-pack-line i { display: inline-block; width: 16px; height: 16px; margin-right: 5px; vertical-align: -3px; border-radius: 50%; position: relative; }
.lt-pack-line i.ok { background: var(--lt-accent); }
.lt-pack-line i.no { background: var(--lt-clay); }
.lt-pack-line i.ok::after { content: ""; position: absolute; left: 5px; top: 2px; width: 4px; height: 8px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(40deg); }
.lt-pack-line i.no::before, .lt-pack-line i.no::after { content: ""; position: absolute; left: 3px; top: 7px; width: 10px; height: 2px; background: #fff; transform: rotate(45deg); }
.lt-pack-line i.no::after { transform: rotate(-45deg); }
.lt-pack-you { outline: 2px solid var(--lt-gold); outline-offset: -2px; }
.lt-pack figcaption { margin-top: 14px; font-size: 14px; line-height: 1.5; color: #cfd8d4; }

/* Section rhythm. */
.lt-factors, .lt-areas, .lt-audit, .lt-faqs { padding: clamp(52px, 7vw, 96px) 0; border-top: 1px solid var(--lt-line); }
.lt-page h2 { font-size: clamp(2rem, 3.8vw, 3.1rem); line-height: 1.04; max-width: 22ch; }

/* Factors: three words, set as a ruled row. */
.lt-triad { display: grid; margin-top: clamp(28px, 4vw, 44px); border-top: 2px solid var(--lt-ink); }
@media (min-width: 900px) { .lt-triad { grid-template-columns: repeat(3, minmax(0, 1fr)); } .lt-triad > div + div { border-left: 1px solid var(--lt-line); padding-left: clamp(20px, 3vw, 40px); } .lt-triad > div { padding-right: clamp(12px, 2vw, 28px); } }
.lt-triad > div { padding-block: 24px; }
@media (max-width: 899px) { .lt-triad > div + div { border-top: 1px solid var(--lt-line); } }
.lt-triad h3 { font-size: clamp(2rem, 3vw, 2.6rem); line-height: 1; }
.lt-meaning { margin-top: 8px; color: var(--lt-muted); }
.lt-control { margin-top: 14px; font-size: 16px; }

/* Areas: the copy beside a schematic of six former cities. */
.lt-areas { background: #ece6d6; }
.lt-areas-grid { display: grid; gap: 36px clamp(32px, 6vw, 80px); align-items: center; }
@media (min-width: 900px) { .lt-areas-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.lt-areas-copy p { margin-top: 16px; max-width: 54ch; color: var(--lt-muted); }
.lt-areas-copy h2 + p { color: var(--lt-ink); }
.lt-schematic { margin: 0; }
.lt-tiles {
  display: grid;
  gap: 6px;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: repeat(3, minmax(64px, 1fr)) 44px;
  grid-template-areas: "etob nyork nyork scarb" "etob york eyork scarb" "etob oldt oldt scarb" "lake lake lake lake";
  min-height: 330px;
}
.lt-tile { display: grid; place-items: center; padding: 8px; text-align: center; font-family: var(--font-serif); font-size: clamp(1.05rem, 1.7vw, 1.4rem); background: var(--lt-white); border: 1px solid #b8b0a0; border-radius: 4px; }
.lt-etobicoke { grid-area: etob; }
.lt-northyork { grid-area: nyork; }
.lt-scarborough { grid-area: scarb; }
.lt-york { grid-area: york; }
.lt-eastyork { grid-area: eyork; }
.lt-oldtoronto { grid-area: oldt; }
.lt-lake { grid-area: lake; display: grid; place-items: center; font-size: 13px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: #355a56; background: #cfe0dc; border-radius: 4px; }
.lt-schematic figcaption { margin-top: 10px; font-size: 14px; color: var(--lt-muted); }

/* Audit: a sheet with a checkbox on every line. */
.lt-sheet { width: 100%; margin-top: clamp(24px, 4vw, 40px); border-collapse: collapse; background: var(--lt-white); border: 1px solid #b8b0a0; }
.lt-sheet thead th { padding: 12px 16px; text-align: left; font-size: 13px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; background: var(--lt-ink); color: #f4f0e6; }
.lt-sheet tbody th, .lt-sheet tbody td { padding: 16px; vertical-align: top; text-align: left; border-top: 1px solid var(--lt-line); }
.lt-sheet tbody th { display: flex; align-items: flex-start; gap: 12px; font-family: var(--font-serif); font-size: 1.25rem; font-weight: 500; }
.lt-sheet tbody th i { flex: none; width: 18px; height: 18px; margin-top: 5px; border: 2px solid var(--lt-ink); border-radius: 3px; }
.lt-sheet tbody td:last-child { color: var(--lt-muted); }
.lt-publishers { margin-top: 24px; max-width: 70ch; color: var(--lt-muted); }
@media (max-width: 759px) {
  .lt-sheet thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .lt-sheet, .lt-sheet tbody, .lt-sheet tr, .lt-sheet th, .lt-sheet td { display: block; width: 100%; }
  .lt-sheet tbody tr { padding: 14px 0; border-top: 1px solid var(--lt-line); }
  .lt-sheet tbody tr:first-child { border-top: 0; }
  .lt-sheet tbody th, .lt-sheet tbody td { padding: 4px 16px; border: 0; }
  .lt-sheet td::before { content: attr(data-label) ": "; font-weight: 800; color: var(--lt-ink); }
}

/* Offer: a dark band with a till slip for the price. */
.lt-offer { padding: clamp(60px, 8vw, 110px) 0; background: var(--lt-night); color: #f4f0e6; }
.lt-offer-grid { display: grid; gap: 36px clamp(32px, 6vw, 88px); align-items: start; }
@media (min-width: 900px) { .lt-offer-grid { grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); } }
.lt-offer h2 { max-width: 20ch; }
.lt-offer p { margin-top: 16px; max-width: 58ch; color: #d6dfdb; }
.lt-ticket { padding: 24px; background: var(--lt-white); color: var(--lt-ink); border-radius: 6px; box-shadow: 0 22px 28px -18px rgba(0, 0, 0, 0.7); }
.lt-ticket .lt-ticket-line { display: flex; justify-content: space-between; align-items: baseline; margin: 0; padding: 12px 0; border-bottom: 1px dashed #b8b0a0; color: var(--lt-ink); max-width: none; }
.lt-ticket .lt-ticket-line span { font-size: 15px; font-weight: 700; color: var(--lt-muted); }
.lt-ticket .lt-ticket-line strong { font-family: var(--font-serif); font-size: 2rem; font-weight: 500; }
.lt-ticket .lt-ticket-note { margin: 14px 0 20px; font-size: 14.5px; color: var(--lt-muted); }
.lt-ticket .lt-btn { width: 100%; justify-content: center; }
.lt-link { display: flex; align-items: center; justify-content: center; min-height: 48px; margin-top: 6px; font-weight: 700; }

/* Questions. */
.lt-faqs { background: #ece6d6; }
.lt-faq-grid { display: grid; gap: 28px clamp(32px, 6vw, 80px); }
@media (min-width: 900px) { .lt-faq-grid { grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr); align-items: start; } }
.lt-faq details { border-bottom: 1px solid #b8b0a0; }
.lt-faq details:first-child { border-top: 2px solid var(--lt-ink); }
.lt-faq summary { min-height: 64px; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 0; cursor: pointer; list-style: none; font-family: var(--font-serif); font-size: clamp(1.2rem, 2vw, 1.45rem); line-height: 1.2; }
.lt-faq summary::-webkit-details-marker { display: none; }
.lt-faq summary i { position: relative; flex: none; width: 20px; height: 20px; }
.lt-faq summary i::before, .lt-faq summary i::after { content: ""; position: absolute; left: 0; right: 0; top: 9px; height: 2px; background: var(--lt-ink); }
.lt-faq summary i::after { transform: rotate(90deg); }
.lt-faq details[open] summary i::after { transform: rotate(0deg); }
.lt-faq details p { padding: 0 0 22px; max-width: 62ch; color: var(--lt-muted); }

/* Close. */
.lt-close { padding: clamp(60px, 8vw, 104px) 0; background: var(--lt-white); border-top: 1px solid var(--lt-line); }
.lt-close h2 { max-width: 20ch; }
.lt-close > .lt-wrap > p:not(.lt-actions):not(.lt-more) { margin-top: 16px; max-width: 58ch; color: var(--lt-muted); }
.lt-close .lt-btn-line { color: var(--lt-ink); border-color: var(--lt-ink); }
.lt-close .lt-btn-line:hover { background: var(--lt-ink); color: var(--lt-paper); }
.lt-more { margin-top: 28px; font-size: 15px; color: var(--lt-muted); }

@media (prefers-reduced-motion: no-preference) {
  .lt-btn { transition: background-color 160ms cubic-bezier(0.22, 1, 0.36, 1), color 160ms cubic-bezier(0.22, 1, 0.36, 1); }
}