/* SITE FIXES, Oct 31, 2026, night (Kelly's sign-off list, due 10am Nov 1). One file, on both pages, after everything else. */

/* 3. THE HERO: the whole laptop shows. The phone stands beside it on the same baseline and overlaps only the laptop's base, never
   its screen (the screen ends at 87.6% of the frame: 6.154% + 81.47%). Laptop 80% of the pair, so the screen ends at 70.1%. */
@media (min-width: 768px) {
  .lgfig .pair > .lapv33, .pair > .lapv33, .pair.heropair > .lapv33 { width: 80% !important; margin: 0 !important; }
  .pair .pphone, .pair.heropair .pphone { width: 17.3%; left: 71.2%; }
}

/* 4. TOP BARS, NOT SIDE EDGES, ON THE SITE TOO (Kelly, Oct 31, 2026: "the old 'marketing cards use a left edge' rule is retired").
   Every card that wore a coloured left edge wears its colour as a bar across the top instead; the left side is the ordinary hairline.
   Gold stays gold (needs you, a link card), green stays green. */
.goldnote, .kwcall, .empcard, .owcard, a.more.linkcard, .credit, .agency .offercard, .bag, .lby, .convo .r, .vboxes .vbox a.seecard,
.posts.blog-grid > li.pc-type > a > .pc-panel {
  border-left: 1.5px solid var(--line) !important; box-shadow: inset 0 5px 0 0 #c9a24a !important;
}
a.gcard { border-left: 1.5px solid var(--line) !important; box-shadow: inset 0 5px 0 0 #c9a24a, var(--shadow) !important; }
.vbox, .pastebox, .price.f, .faq[open], .post-signoff, .vrow {
  border-left: 1.5px solid var(--line) !important; box-shadow: inset 0 5px 0 0 #01a263 !important;
}
.card { border-left: 1.5px solid var(--line) !important; box-shadow: inset 0 5px 0 0 #01a263, var(--shadow) !important; }
.pastebox.gold, .vrow.miss { box-shadow: inset 0 5px 0 0 #c9a24a !important; }
.posts.blog-grid > li { --edge: inset 0 5px 0 #01a263; }

/* 3 (Nov 1). YOUR COUPLES ARE EVERYWHERE, the first version exactly (v33.css: 96 by 84 tiles, three over two, the top row leaning out
   28px), each group moved 36px further out (Kelly: "a quarter to half inch on each side so the text has room"). Side by side only
   where every icon is whole and clear of the words; narrower, the first version's own stacked layout (words, then each group). */
@media (min-width: 1100px) and (max-width: 1359.98px) {
  #everywhere .pgrid { grid-template-columns: 1fr; grid-template-areas: "m" "l" "r"; justify-items: center; row-gap: 40px; }
  #everywhere .ptiles.pl, #everywhere .ptiles.pr { justify-self: center; }
  #everywhere .ptiles.pl li:nth-child(-n+3), #everywhere .ptiles.pr li:nth-child(-n+3) { transform: none; }
}
@media (min-width: 1360px) {
  #everywhere .ptiles.pl { transform: translateX(-36px); }
  #everywhere .ptiles.pr { transform: translateX(36px); }
}

/* 4 (cont.). The nine feature cards and the cost strip's cards wear their bar too: green for The Wedding CMO's own, the hairline grey
   for the two others it is compared with (still a bar across the top, never a side edge). */
#different .diffpopgrid li.dfi { box-shadow: inset 0 5px 0 0 #01a263; padding-top: 24px; }
.coststrip .costcells > div { box-shadow: inset 0 5px 0 0 #cbd0d6; }
.coststrip .costcells > div.us { box-shadow: inset 0 5px 0 0 #01a263; }

/* C1 (Nov 1). EVERY LAPTOP IS KELLY'S LAPTOP: the frame is the laptop from devices-artwork.png, cut out at its own proportions
   (1741 x 1015; its screen 202,58 1337x838), our screens behind its see-through screen. */
.lapv33 { aspect-ratio: 1741 / 1015 !important; }
.lapv33 .lfscreen { left: 11.603% !important; top: 5.714% !important; width: 76.795% !important; height: 82.562% !important; }

/* D1 (Nov 1). ABOUT: less room above the founder; the three numbers left-aligned, each over its label, evenly spaced. */
@media (min-width: 1024px) { #about.founderbig { padding: 112px 0 120px; } }
#about .stats { display: grid !important; grid-template-columns: repeat(3, max-content); justify-content: start; column-gap: 56px; }
#about .stats > div { display: grid; justify-items: start; text-align: left; }
@media (max-width: 599px) { #about .stats { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 16px; } #about .stats span { white-space: normal !important; } }

/* D3 (Nov 1). FAQ: the open question wears a green top bar, never a side edge. */
.faq[open] summary { padding-left: 18px; }

/* 20-22 (Nov 1). WHEREVER YOU ARE, now on the homepage before the closing: Kelly's artwork, the app-icon circle to the right of the
   phone with a short gold dotted line to its tile. */
.devs2 { position: relative; width: 100%; max-width: 1080px; margin: 56px auto 0; aspect-ratio: 3599 / 1453; }
.devs2 .ds { position: absolute; display: block; object-fit: cover; object-position: top left; }
.devs2 .ds-lap { left: 5.613%; top: 34.205%; width: 37.149%; height: 57.674%; }
.devs2 .ds-desk { left: 37.788%; top: 4.749%; width: 45.929%; height: 64.625%; }
.devs2 .ds-pad { left: 76.438%; top: 36.270%; width: 18.533%; height: 61.390%; object-position: top; }
.devs2 .ds-ph { left: 92.109%; top: 59.807%; width: 7.558%; height: 39.367%; object-position: top; }
.devs2 .dart { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; }
.devs2 .dcall { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 3; overflow: visible; }
#devices .devlede { max-width: 1160px; }
#devices .devlede br { display: none; }
@media (min-width: 900px) { #devices .devlede br { display: inline; } }
#devices .devs2 { max-width: 1040px; margin-right: auto; margin-left: auto; transform: translateX(-40px); }
@media (max-width: 899px) { #devices .devs2 { width: 88%; transform: translateX(-5%); } }

/* 24 (Nov 1). CLOSING: every line centred; the headline on one line from 900px up. */
.closer .wrap { text-align: center; }
.closer h2 { text-align: center; margin-left: auto; margin-right: auto; }
@media (min-width: 900px) { .closer h2 { white-space: nowrap; } }
.closer .beforebtn b { color: #fff; font-weight: 700; }
/* 27. FOOTER: the whole logo, "THE" included, never clipped at the left. */
footer .logo { flex: none; overflow: visible; }
footer .logo img { height: 18px; width: auto; max-width: none; display: block; }
#devices .devlede { max-width: none !important; }
@media (min-width: 1200px) { #devices .devlede .dl1 { white-space: nowrap; font-size: 17px; } }

/* FINAL REVIEW 1 (Kelly, Nov 1, 2026, 12:30). Rule 1: use the full width. From 1200px the page's side margins shrink and the content
   area grows, so every laptop is about half again as big; text keeps its size (the text column keeps its own measure). */
@media (min-width: 1200px) {
  :root { --gutter: 56px; --wrap: 1680px; }
  .wlgrid { grid-template-columns: minmax(380px, 1fr) minmax(0, 1.75fr) !important; column-gap: 72px !important; align-items: center !important; }
  .wlgrid.flip { grid-template-columns: minmax(0, 1.75fr) minmax(380px, 1fr) !important; }
  .wlgrid .lgwords { max-width: 560px; }
  .wlgrid.flip .lgwords { justify-self: end; }
  .wlgrid .lgfig .lapv33 { width: 100% !important; max-width: none !important; }
}

/* VOICE, THREE COLUMNS (Kelly, Nov 1, 2026, final review 1). */
#example-brand-guide .v3col { display: grid; gap: 32px; }
#example-brand-guide .v3pts { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 18px; }
#example-brand-guide .v3pts li { border-left: 3px solid #01a263; padding: 2px 0 2px 16px; }
#example-brand-guide .v3pts b { display: block; font: 700 16px/1.3 Montserrat, sans-serif; color: var(--navy); margin-bottom: 4px; }
#example-brand-guide .v3pts span { display: block; font: 500 14.5px/1.55 Montserrat, sans-serif; color: var(--body, #454a52); }
#example-brand-guide .v3cap { margin: 14px 0 0; text-align: center; font: 500 13px/1.5 Montserrat, sans-serif; color: var(--slate); }
#example-brand-guide .v3cap a { color: var(--green-text, #0a7a4f); font-weight: 700; text-decoration: none; margin-left: 8px; white-space: nowrap; }
#example-brand-guide .v3cap a:hover { text-decoration: underline; }
#example-brand-guide .v3cap .vtag { letter-spacing: .12em; text-transform: uppercase; font-size: 11px; }
#example-brand-guide .vqcard { max-width: 420px; margin: 0 auto; }
#example-brand-guide .varrow { display: none; }
@media (min-width: 1100px) {
  #example-brand-guide .v3col { grid-template-columns: minmax(300px, 1fr) 270px 44px minmax(0, 1.9fr); column-gap: 28px; align-items: center; }
  #example-brand-guide .vqcard { max-width: none; margin: 0; }
  #example-brand-guide .varrow { display: grid; place-items: center; }
  #example-brand-guide .varrow svg { width: 36px; height: 36px; fill: none; stroke: #c9a24a; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
  #example-brand-guide .vlaptop .lapv33 { width: 100% !important; max-width: none !important; margin: 0 !important; }
  #example-brand-guide { padding-top: 96px; padding-bottom: 96px; }
}
@media (min-width: 1100px) {
  #example-brand-guide .v3col { grid-template-columns: minmax(260px, 0.9fr) 236px 36px minmax(0, 2.35fr); column-gap: 22px; }
  #example-brand-guide .vqcard .baq, #example-brand-guide .vqcard .baa { font-size: 13px; line-height: 1.45; }
  #example-brand-guide .v3words .lede { font-size: 17px; }
}
@media (min-width: 1600px) { #example-brand-guide .v3col { grid-template-columns: minmax(320px, 0.9fr) 280px 44px minmax(0, 2.2fr); column-gap: 32px; } }

/* FINAL REVIEW 1, rule 3: every circle-O divider exactly halfway: the same room above and below every section boundary. */
@media (min-width: 1024px) {
  #main > section, #main > section.hero, #main > section.hband, #main > section.hband.hpart, #main > section.agency { padding-top: 112px !important; padding-bottom: 112px !important; }
  #main > section > .wrap:first-of-type > :first-child, #main > section > .wrap:first-child > :first-child { margin-top: 0 !important; }
  #main > section > .wrap:last-child > :last-child { margin-bottom: 0 !important; }
}
/* Rule 2: a device's caption hangs below it, so the words centre on the device itself, not on device plus caption. */
@media (min-width: 1024px) {
  .wlgrid > .lgfig { position: relative; }
  .wlgrid > .lgfig > .srcnote2, .wlgrid > .lgfig > .owlink { position: absolute; left: 0; right: 0; top: calc(100% + 4px); margin: 0; }
  .wlgrid > .lgfig > .owlink { top: calc(100% + 30px); }
  .wlgrid > .lgfig > .srcnote2 + .owlink { top: calc(100% + 30px); }
}
@media (min-width: 1024px) {
  #main > section:has(.wlgrid > .lgfig > .srcnote2) { padding-bottom: 136px !important; }
  #main > section#how { padding-bottom: 168px !important; }
  #example-brand-guide .v3pts { gap: 12px; margin-top: 24px; }
}
@media (min-width: 1100px) {
  #example-brand-guide .vlaptop { position: relative; }
  #example-brand-guide .v3cap { position: absolute; left: 0; right: 0; top: calc(100% + 2px); }
}
@media (min-width: 1024px) { #main > section#example-brand-guide { padding-bottom: 140px !important; } }
/* Everywhere with the wider page: the tiles stay inside the page; no outward push (they had run off the edge). */
@media (min-width: 1200px) {
  #everywhere .ptiles.pl, #everywhere .ptiles.pr { transform: none !important; }
  #everywhere .ptiles.pl li:nth-child(-n+3), #everywhere .ptiles.pr li:nth-child(-n+3) { transform: none !important; }
  #everywhere .pgrid { grid-template-columns: minmax(0, 1fr) minmax(0, 620px) minmax(0, 1fr); column-gap: 40px; }
}

/* 9 (final review 1). YOUR COUPLES ARE EVERYWHERE, brick rows (everywhere-brick-mock-v3.png): three rows a side, the middle row offset
   like bricks, running off both outer edges; tiles 124 by 108; rows start 134px from the copy (a quarter inch farther than the mock);
   the rows a little taller than the copy, top row level with the eyebrow, bottom row just below the button. */
#everywhere { background: var(--soft, #f5f6f7); overflow-x: clip; }
#everywhere .pgrid { position: relative; display: block !important; }
#everywhere .pmid { position: relative; z-index: 1; max-width: 620px; margin: 0 auto; text-align: center; }
#everywhere .ebrick { display: none; }
#everywhere .ebrow { list-style: none; margin: 0; padding: 0; display: flex; gap: 22px; }
#everywhere .ebrow li { flex: none; width: 124px; height: 108px; display: grid; place-items: center; background: #fff; border: 1.5px solid #dcdbd5; border-radius: 18px; }
#everywhere .ebrow li svg, #everywhere .ebrow li img { width: 40px; height: 40px; display: block; }
#everywhere .ebrow li img { border-radius: 50%; }
@media (min-width: 1100px) {
  #everywhere .ebrick { display: grid; row-gap: 22px; position: absolute; top: 50%; transform: translateY(-50%); }
  #everywhere .ebl { right: calc(50% + 310px + 134px); justify-items: end; }
  #everywhere .ebr { left: calc(50% + 310px + 134px); justify-items: start; }
  #everywhere .ebl .ebrow { flex-direction: row-reverse; }
  #everywhere .ebl .ebrow:nth-child(2) { margin-right: 73px; }
  #everywhere .ebr .ebrow:nth-child(2) { margin-left: 73px; }
  #everywhere .lede .lbr { display: inline; }
}
@media (max-width: 1099px) {
  #everywhere .ebl { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 32px auto 0; max-width: 520px; }
  #everywhere .ebl .ebrow { display: contents; }
  #everywhere .ebl .ebrow li[aria-hidden] { display: none; }
  #everywhere .ebl .ebrow li { width: 64px; height: 58px; border-radius: 12px; }
  #everywhere .ebl .ebrow li svg, #everywhere .ebl .ebrow li img { width: 26px; height: 26px; }
  #everywhere .ebr { display: none; }
  #everywhere .lede .lbr { display: none; }
}

/* 6 (final review 1). The homepage alternates too: hero white, everywhere gray, voice white, One wedding gray, and on down. */
#main > section.hero, #example-brand-guide, #employee, #pricing, .agency { background: #fff !important; }
#everywhere, #how, #different, #devices { background: var(--soft) !important; }
/* 10. The three points with their lines (as the mock), compact. */
@media (min-width: 1100px) {
  #example-brand-guide .v3pts { gap: 14px; margin-top: 22px; }
  #example-brand-guide .v3pts b { font-size: 15.5px; margin-bottom: 2px; }
  #example-brand-guide .v3pts span { font-size: 13.5px; line-height: 1.45; }
  #example-brand-guide h2 { font-size: clamp(32px, 2.9vw, 46px); }
  #example-brand-guide .v3cap a { margin-left: 10px; }
  #example-brand-guide .v3cap { white-space: nowrap; }
}

/* PRICING add-on (Nov 1): a clean navy founding card; "What it costs you" under it as one row with thin dividers, ours in green. */
.price.f { box-shadow: none !important; border-top: 0 !important; }
.costrow { max-width: 1080px; margin: 64px auto 0; text-align: center; }
.costline { display: grid; grid-template-columns: 1fr; margin: 14px 0 0; padding: 0; }
.costline > div { padding: 14px 20px; border-top: 1px solid #dcdbd5; }
.costline > div:first-child { border-top: 0; }
.costline dt { font: 600 13px/1.4 Montserrat, sans-serif; color: var(--slate); margin: 0 0 4px; }
.costline dd { margin: 0; font: 700 18px/1.35 Montserrat, sans-serif; color: var(--navy); }
.costline dd .cs { font: 500 14px/1.4 Montserrat, sans-serif; color: #6b7280; }
.costline .us dt, .costline .us dd { color: var(--green-text, #0a7a4f); }
.costrow .costnote { margin-top: 10px; font-size: 13px; color: var(--slate); }
@media (min-width: 900px) {
  .costline { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .costline > div { border-top: 0; border-left: 1px solid #dcdbd5; }
  .costline > div:first-child { border-left: 0; }
}
@media (min-width: 1100px) and (max-width: 1599px) { #example-brand-guide .v3cap { white-space: normal; } #example-brand-guide .v3cap a { display: inline-block; } }

/* 4 (batch 3). ONE WEDDING in three columns: words, the real Add a wedding screen, a gold arrow, the results laptop. The words, card
   and arrow centre on the laptop itself (its caption hangs below). */
#how .ow3col { display: grid; gap: 32px; }
#how .owadd { display: block; width: 100%; max-width: 360px; height: auto; margin: 0 auto; border-radius: 18px; box-shadow: 0 22px 50px rgba(1, 34, 61, .14); }
#how .ow3col .varrow { display: none; }
#how .owlap .lapv33 { width: 100% !important; max-width: none !important; margin: 0 !important; }
#how .owlap .srcnote2, #how .owlap .owlink { text-align: center; }
@media (min-width: 1100px) {
  #how .ow3col { grid-template-columns: minmax(260px, 0.9fr) 250px 36px minmax(0, 2.35fr); column-gap: 22px; align-items: center; }
  #how .owadd { max-width: none; }
  #how .ow3col .varrow { display: grid; place-items: center; }
  #how .ow3col .varrow svg { width: 36px; height: 36px; fill: none; stroke: #c9a24a; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
  #how .owlap { position: relative; }
  #how .owlap .srcnote2 { position: absolute; left: 0; right: 0; top: calc(100% + 4px); margin: 0; }
  #how .owlap .owlink { position: absolute; left: 0; right: 0; top: calc(100% + 30px); margin: 0; }
  #how .owchecks { grid-template-columns: 1fr !important; }
}
@media (min-width: 1600px) { #how .ow3col { grid-template-columns: minmax(320px, 0.9fr) 290px 44px minmax(0, 2.2fr); column-gap: 32px; } }
@media (min-width: 1100px) {
  #how .owchecks { grid-template-columns: repeat(2, minmax(0, max-content)) !important; gap: 8px 18px !important; font-size: 13.5px !important; margin-top: 18px !important; }
  #how .owchecks .owck { width: 20px; height: 20px; }
  #how .owwords .lede { font-size: 16px; }
  #how .owwords h2 { font-size: clamp(30px, 2.6vw, 44px); }
  #how .owadd { box-shadow: 0 22px 50px rgba(1, 34, 61, .14) !important; border-top: 0 !important; }
}
@media (min-width: 1100px) {
  #how .owline1 { white-space: normal !important; }
  #how .ow3col > .owchecks { grid-column: 1 / -1; display: flex !important; flex-wrap: wrap; justify-content: center; gap: 10px 28px !important; margin: 72px 0 0 !important; font-size: 15px !important; }
  #main > section#how { padding-bottom: 112px !important; }
}
@media (min-width: 1100px) {
  #how .ow3col > .owchecks { gap: 10px 22px !important; font-size: 14px !important; flex-wrap: nowrap; }
  #how .owwords h2 .owline1 { white-space: nowrap !important; }
  #how .owwords h2 { font-size: clamp(28px, 2.3vw, 42px) !important; }
}

/* FAQ batch (Nov 1): links inside answers in the green link colour, underlined; the free-trial button inside its answer. */
.faq .faqa a:not(.btn) { color: var(--green-text, #0a7a4f); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.faq .faqa .faqbtn { margin-top: 14px; }
.faq .faqa .faqbtn .btn { display: inline-block; }
.faq .faqa b { font-weight: 700; color: var(--navy); }
@media (min-width: 1100px) {
  #how .owwords h2 .owline1 { white-space: normal !important; }
  #how .owwords { position: relative; z-index: 2; }
}

/* B2 (Kelly, Nov 1 evening): One wedding. Card to arrow equals arrow to laptop, both tight; the paragraph wider (about 5 lines at 1440).
   The laptop frame's lid starts 9.1% in from its own edge, so the laptop is drawn 10% wider and pulled left by 10%:
   its lid then starts exactly at its column's edge, one gap from the arrow. */
@media (min-width: 1200px) {
  #how .ow3col { grid-template-columns: 330px 250px 36px minmax(0, 1fr); column-gap: 16px; }
  #how .ow3col > .owwords { padding-right: 16px; }
  #how .owlap .lapv33 { width: 110% !important; margin-left: -10% !important; }
}
@media (min-width: 1600px) {
  #how .ow3col { grid-template-columns: 400px 290px 44px minmax(0, 1fr); column-gap: 20px; }
  #how .ow3col > .owwords { padding-right: 20px; }
}
/* Kelly, Nov 1, 2026: the manager cards' dotted line is navy and the cards sit further apart; the line still runs icon centre to icon centre. */
@media (min-width: 900px) {
  #employee .emp3 { column-gap: 56px; }
  #employee .emp3::before { border-top-color: var(--navy); left: calc((100% - 112px) / 6); right: calc((100% - 112px) / 6); }
}
@media (min-width: 1024px) {
  #employee .emp3 { column-gap: 72px; }
  #employee .emp3::before { left: calc((100% - 144px) / 6); right: calc((100% - 144px) / 6); }
}
/* Kelly, Nov 1, 2026: thin gold dividers between the three "What it costs you" columns. */
@media (min-width: 900px) { .costline > div { border-left-color: var(--gold, #c9a24a); } }
@media (max-width: 899px) { .costline > div { border-top-color: var(--gold, #c9a24a); } }
/* Kelly, Nov 1, 2026: "What it costs you" sits once, on the homepage, just above the founding pricing card. */
#pricing .costrow.costtop { margin: 0 auto 72px; }

@media (max-width: 430px) { h2.h2decades { font-size: min(34px, 7.3vw) !important; } }