/* ---- Info pages (components/info/InfoPage.astro): pricing, support, portfolio, about, contact, updates, legal ----
   Same header and hero grammar as the module pages, on the ground colour; the blocks below follow the page's order.
   Type steps 13 / 15 / 17 / 28 / 34, weights 400 / 600, corners 12 / 18 / 22 / pill (DESIGN.md). */

.field-ground { background: var(--ground); color: var(--ink); --field-2: var(--ink-2); --card-glow: rgba(15,42,48,.45); }
.field-ground .header .logo { color: var(--teal); }

/* ---- Hero ---- */
.ihero { border-radius: 0 0 22px 22px; padding-bottom: 8px; }
.ihero-text { padding: 36px 16px 40px; } /* no colour block to frame the title: it gets more room under the header (Bo) */
.ihero-text h1 { margin-bottom: 12px; }
.ihero .lead { color: var(--field-2); max-width: 34em; }
.ihero .actions, .ihero .chat-actions { margin-top: 24px; }

/* the price beside the hero text */
.iprice { margin: 0 16px 24px; padding: 20px; border-radius: 22px; background: var(--white); box-shadow: inset 0 0 0 1px var(--line); }
.iprice .price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 8px; line-height: 1.15; }
.iprice .price b { font-family: var(--font-display); font-size: 34px; font-weight: 600; letter-spacing: -.01em; color: var(--teal); }
.iprice .price span { font-size: 15px; font-weight: 600; }
.iprice .price .price-tax { color: var(--ink-2); font-weight: 400; }
.iprice ul { list-style: none; padding: 0; margin: 14px 0 0; }
.iprice li { padding: 11px 0; border-top: 1px solid var(--line); font-size: 15px; line-height: 1.5; color: var(--ink-2); }
.iprice li b { color: var(--ink); font-weight: 600; }

/* how to reach us, beside the hero text */
.icontact { margin: 0 16px 24px; padding: 6px 20px; border-radius: 22px; background: var(--white); box-shadow: inset 0 0 0 1px var(--line); }
.icontact div { padding: 13px 0; border-top: 1px solid var(--line); display: grid; gap: 2px; }
.icontact div:first-child { border-top: 0; }
.icontact dt { font-size: 13px; color: var(--ink-3); }
.icontact dd { margin: 0; font-size: 17px; font-weight: 600; overflow-wrap: anywhere; }
.icontact dd a { color: var(--teal); text-decoration: none; }
.icontact dd a:hover { text-decoration: underline; }
.icontact-note { display: block; font-size: 13px; font-weight: 400; color: var(--ink-3); }

/* ---- Blocks ---- */
.iblock { padding: 72px 16px 0; }
.iblock-head { margin-bottom: 24px; }
.iblock-head h2, .ifaq h2, .isites h2 { margin-bottom: 12px; }
.iblock-head p { color: var(--ink-2); max-width: 36em; }
main > .iblock:last-child { padding-bottom: 96px; }
.ihero + .iblock { padding-top: 32px; }
.ihero + .iphoto, .ihero + .icta { margin-top: 32px; }

.icards-grid { list-style: none; padding: 0; display: grid; gap: 0; }
.icards-grid li { padding: 18px 0 20px; border-top: 1px solid var(--line); }
.icards-grid h3 { margin-bottom: 6px; }
.icards-grid p { font-size: 16px; line-height: 1.5; color: var(--ink-2); }
.icards-grid p b { color: var(--ink); font-weight: 600; }
.icards-grid a { color: var(--teal); }

.imodules ul { list-style: none; padding: 0; display: grid; gap: 8px; }
.imodules a {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px; padding: 14px 14px 14px 12px;
  border-radius: 18px; background: var(--white); box-shadow: inset 0 0 0 1px var(--line); text-decoration: none; color: var(--ink);
  transition: box-shadow .24s cubic-bezier(.4, 0, .6, 1);
}
.imodules a:hover { box-shadow: inset 0 0 0 1.5px var(--teal); }
.imodule-text { display: grid; gap: 1px; }
.imodule-text b { font-family: var(--font-display); font-size: 17px; font-weight: 600; }
.imodule-text span { font-size: 15px; color: var(--ink-2); }
.imodule-go { width: 20px; height: 20px; fill: none; stroke: var(--ink-3); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.ifaq-list { display: grid; }
.ifaq details { border-top: 1px solid var(--line); }
.ifaq details:last-child { border-bottom: 1px solid var(--line); }
.ifaq summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 18px 0; font-family: var(--font-display); font-size: 17px; font-weight: 600; line-height: 1.35;
}
.ifaq summary::-webkit-details-marker { display: none; }
.ifaq summary svg { flex: none; width: 20px; height: 20px; fill: none; stroke: var(--ink-3); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform .32s cubic-bezier(.25, .1, .3, 1); }
.ifaq details[open] summary svg { transform: rotate(180deg); }
.ifaq details p { padding: 0 0 20px; font-size: 16px; line-height: 1.55; color: var(--ink-2); max-width: 40em; }
.ifaq details p a { color: var(--teal); }

.ichat .chat { max-width: 560px; }
.ihero-chat { margin: 0 16px 24px; }
.ihero-chat-note { margin-top: 12px; font-size: 15px; line-height: 1.5; color: var(--ink-2); }

/* two ways to make a change: the dashboard card and the conversation, each under its own words */
.iways h2 { margin-bottom: 24px; }
.iways-grid { display: grid; gap: 40px; }
.iway h3 { margin-bottom: 6px; }
.iway p { font-size: 15px; line-height: 1.5; color: var(--ink-2); max-width: 36em; }
.iway-card { margin-top: 20px; }
.iway-card .vg { max-width: 360px; }
.iway-card .chat { max-width: 560px; }

.iphoto { margin: 72px 16px 0; padding: 0; border-radius: 18px; overflow: hidden; background: var(--teal-soft); }
.iphoto img { width: 100%; height: auto; }

.isites ul { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 12px; }
.isites a { display: grid; gap: 4px; text-decoration: none; color: var(--ink); }
.isite-frame {
  display: block; aspect-ratio: 160 / 310; border-radius: 18px; overflow: hidden; background: #fff; margin-bottom: 6px;
  box-shadow: 0 16px 36px -18px rgba(15,42,48,.45), 0 1px 2px rgba(15,42,48,.08), inset 0 0 0 1px rgba(15,42,48,.1);
}
.isite-frame img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
.isite-name { font-family: var(--font-display); font-size: 15px; font-weight: 600; }
.isite-city { font-size: 13px; color: var(--ink-3); }
.isites-note { margin-top: 20px; }

.iupdates { display: grid; gap: 56px; }
.iupdate-date { font-size: 13px; font-weight: 600; color: var(--teal); letter-spacing: .02em; margin-bottom: 6px; }
.iupdate h2 { margin-bottom: 8px; }
.iupdate ul { list-style: none; padding: 0; display: grid; }
.iupdate li { padding: 16px 0 18px; border-top: 1px solid var(--line); }
.iupdate li:first-child { border-top: 0; }
.iupdate h3 { margin-bottom: 4px; }
.iupdate p { font-size: 16px; line-height: 1.5; color: var(--ink-2); max-width: 40em; }
.iupdate-link { display: inline-block; margin-top: 8px; font-size: 15px; font-weight: 600; color: var(--teal); text-decoration: none; }
.iupdate-link:hover { text-decoration: underline; }
/* Earlier updates fold under a disclosure whose summary matches the FAQ's; every entry stays in the HTML */
.iupdates-more { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.iupdates-more summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 18px 0; font-family: var(--font-display); font-size: 17px; font-weight: 600; line-height: 1.35; color: var(--teal);
}
.iupdates-more summary::-webkit-details-marker { display: none; }
.iupdates-more summary .num { font-weight: 400; color: var(--ink-3); margin-left: 6px; margin-right: auto; }
.iupdates-more summary svg { flex: none; width: 20px; height: 20px; fill: none; stroke: var(--ink-3); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform .32s cubic-bezier(.25, .1, .3, 1); }
.iupdates-more[open] summary svg { transform: rotate(180deg); }
.iupdates-more[open] summary { border-bottom: 1px solid var(--line); }
.iupdates-earlier { display: grid; gap: 56px; padding: 40px 0 16px; }

.iprose > * { max-width: 44em; }
.iprose-updated { font-size: 13px; color: var(--ink-3); margin-bottom: 8px; }
.iprose section { padding-top: 32px; }
.iprose h2 { font-size: 22px; margin-bottom: 10px; }
.iprose p, .iprose li { font-size: 16px; line-height: 1.6; color: var(--ink-2); }
.iprose p + p, .iprose p + ul, .iprose ul + p { margin-top: 10px; }
.iprose ul { padding-left: 1.2em; display: grid; gap: 6px; }
.iprose a { color: var(--teal); overflow-wrap: anywhere; }
.iprose b { color: var(--ink); font-weight: 600; }

.icta { margin: 72px 16px 0; padding: 32px 20px; border-radius: 22px; background: var(--teal-soft); }
.icta h2 { margin-bottom: 10px; }
.icta p { color: var(--ink-2); margin-bottom: 24px; max-width: 34em; }
.icta-email { display: inline-flex; align-items: center; min-height: 44px; margin-top: 16px; font-size: 15px; color: var(--teal); }
main > .icta:last-child { margin-bottom: 96px; padding-bottom: 32px; }
.iphoto.iblock { padding: 0; }

@media (min-width: 900px) {
  .ihero {
    margin: 12px 12px 0; border-radius: 22px; padding: 0 max(28px, calc((100% - var(--wrap)) / 2 - 12px)) 88px;
    display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "header" "text";
  }
  .ihero-aside { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); grid-template-areas: "header header" "text aside"; column-gap: 80px; align-items: start; }
  .ihero .header { grid-area: header; height: 96px; padding: 0; }
  .ihero .header .logo .mark { width: 92px; }
  .ihero .header .nav-inline { margin-left: auto; }
  .ihero .header-actions { display: none; }
  /* The same room above every title on the ground colour, and the price, contact card or conversation aligned
     with the top of the title rather than centred against it (Bo, 2026-09-28: the title sat right under the header) */
  .ihero-text { grid-area: text; padding: 80px 0 0; max-width: 46em; }
  .ihero-text h1 { margin-bottom: 20px; }
  .ihero .lead { font-size: 21px; line-height: 1.43; }
  .iprice, .icontact { grid-area: aside; margin: 80px 0 0; padding-inline: 28px; }
  .ihero-chat { grid-area: aside; margin: 80px 0 0; }
  .iprice { padding-block: 28px; }

  .iblock, .iphoto, .icta { width: min(var(--wrap), calc(100% - 80px)); margin-inline: auto; }
  .iblock { padding: 120px 0 0; }
  main > .iblock:last-child { padding-bottom: 136px; }
  .ihero + .iblock { padding-top: 96px; }
  .iblock-head { margin-bottom: 36px; }
  .iblock-head p { font-size: 19px; line-height: 1.47; }
  .icards-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 64px; }
  .icards-grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 48px; }
  .imodules ul { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .ifaq { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); column-gap: 88px; align-items: start; }
  .ichat { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); column-gap: 88px; align-items: start; }
  .ichat .chat { max-width: none; }
  .iways h2 { margin-bottom: 36px; }
  .iways-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 48px; align-items: start; }
  /* the two columns share their rows, so the two cards start on the same line whatever the length of the text above */
  .iway { display: grid; grid-row: span 3; grid-template-rows: subgrid; }
  .iway-card .chat { max-width: none; }
  .iphoto { margin-top: 120px; }
  .isites ul { grid-template-columns: repeat(3, minmax(0, 260px)); gap: 40px; }
  .iupdates { gap: 88px; }
  .iupdates-earlier { gap: 88px; padding-top: 56px; }
  .iupdates > * { max-width: 52em; }
  .iprose > * { max-width: 46em; }
  .icta { margin-top: 120px; padding: 56px 64px; }
  main > .icta:last-child { margin-bottom: 136px; padding-bottom: 56px; }
  .iphoto { padding: 0; }
}