/* Pricing and Students pages (pricing.html, students.html), on top of home.css: the same type scale and section
   rhythm as the home page. Light only. Nothing moves until the visitor asks. */

/* ------------------------------------------------------------------------------------------------ hero */
/* Left-aligned as on every page, the board and a Studio frame on the right: the two things priced (S166 taste 8). */
.pr-hero {
  max-width: 1360px; margin: 0 auto; padding: clamp(36px, 5vw, 72px) var(--gutter) clamp(48px, 6vw, 80px);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 64px); align-items: center;
}
.pr-hero h1 { font-size: var(--t-h1); line-height: 1.05; letter-spacing: -.035em; font-weight: 600; margin: 0; text-wrap: balance; }
.pr-hero .hm-lead { max-width: 40ch; }
.pr-hero-pics { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 6fr); gap: clamp(14px, 2vw, 24px); align-items: end; }
.pr-hero-pics figure { margin: 0; }
.pr-hero-pics img { width: 100%; height: auto; display: block; }
.pr-hero-board img { filter: drop-shadow(0 22px 30px rgba(13, 24, 48, .16)); }
.pr-hero-studio img { border-radius: var(--r-media); border: 1px solid var(--line); box-shadow: var(--shadow-2); }
.pr-hero-pics figcaption { margin-top: 10px; font-size: var(--t-small); font-weight: 600; color: var(--ink-2); }
@media (max-width: 900px) { .pr-hero { grid-template-columns: 1fr; } }

/* A tick drawn from one SVG, coloured by the element's colour. */
.pricing, .students { --tick: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E"); }
.pr-ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; color: var(--ink-2); font-size: var(--t-body); line-height: 1.45; }
.pr-ticks li { position: relative; padding-left: 30px; }
.pr-ticks li::before {
  content: ""; position: absolute; left: 0; top: 3px; width: 18px; height: 18px; background: var(--navy);
  -webkit-mask: var(--tick) center / contain no-repeat; mask: var(--tick) center / contain no-repeat;
}
.pr-ticks-lg { gap: 16px; font-size: 18px; }
.pr-ticks-lg li::before { top: 4px; }
.pr-note { margin: 24px 0 0; font-size: var(--t-small); color: var(--ink-3); max-width: 70ch; }

/* ------------------------------------------------------------------------------------------------ Guided Drone Bundle */
.pr-bundle { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(20px, 3vw, 32px); margin-top: 32px; align-items: stretch; }
.pr-card { display: flex; flex-direction: column; border-radius: var(--r-card); overflow: hidden; background: var(--paper); border: 1px solid var(--line); }
.pr-body { flex: 1; display: flex; flex-direction: column; padding: 26px clamp(20px, 2.4vw, 30px) 28px; }
.pr-name { font-size: 28px; font-weight: 600; letter-spacing: -.02em; margin: 0; }
.pr-line { margin: 6px 0 0; color: var(--ink-2); font-size: var(--t-body); line-height: 1.5; }
/* The prices sit in the card itself, no box inside the box; one hairline between Studio's two (S166 taste 8). */
.pr-tiers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; margin-top: 24px; }
.pr-tier { padding: 0; border: 0; background: none; }
.pr-body > .pr-tier { margin-top: 24px; }
.pr-tiers .pr-tier + .pr-tier { border-left: 1px solid var(--line); padding-left: clamp(16px, 2vw, 24px); }
.pr-tiers .pr-tier:first-child { padding-right: clamp(16px, 2vw, 24px); }
.pr-who { display: block; font-size: 15px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--ink-3); }
.pr-amt { margin: 6px 0 0; font-size: clamp(32px, 3vw, 40px); font-weight: 600; letter-spacing: -.025em; line-height: 1.1; font-variant-numeric: tabular-nums; color: var(--ink); }
.pr-amt small { display: block; margin-top: 4px; font-size: 15px; font-weight: 500; letter-spacing: 0; color: var(--ink-3); white-space: nowrap; }
.pr-split { margin: 6px 0 0; font-size: 14px; line-height: 1.45; color: var(--ink-3); }
.pr-card .pr-ticks { margin-top: 22px; font-size: 16px; }
.pr-act { display: flex; align-items: center; flex-wrap: wrap; gap: 14px 24px; margin-top: auto; padding-top: 26px; }
@media (max-width: 860px) { .pr-bundle { grid-template-columns: 1fr; } }
@media (max-width: 480px) {
  .pr-tiers { grid-template-columns: 1fr; }
  .pr-tiers .pr-tier + .pr-tier { border-left: 0; border-top: 1px solid var(--line); padding: 16px 0 0; margin-top: 16px; }
}
.pr-plan { margin: 18px 0 0; }
.pr-plan-note { color: var(--ink-2); }

/* ------------------------------------------------------------------------------------------------ Always Yours */
.pr-locks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(24px, 4vw, 56px); margin-top: 32px; }
/* Neutral hairlines: green is the ok status colour, not decoration (S166 taste 4). */
.pr-lock { padding-top: 18px; border-top: 1px solid var(--line-2); }
.pr-lock h3 { margin: 0; }
.pr-lock ul { margin: 14px 0 0; padding-left: 20px; display: grid; gap: 8px; color: var(--ink-2); font-size: var(--t-body); line-height: 1.5; }
@media (max-width: 760px) { .pr-locks { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------------------------------------------ Prices in Full, Labs */
.pr-tbl { margin-top: 28px; }
/* On a phone each price is one block: the name and the price, then the days and the GST split below it. */
@media (max-width: 560px) {
  .pr-tbl thead { display: none; }
  .pr-tbl tbody tr { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; padding: 14px 16px; }
  .pr-tbl tbody tr + tr { border-top: 1px solid var(--line); }
  .pr-tbl tbody th, .pr-tbl tbody td { padding: 0; border: 0 !important; }
  .pr-tbl tbody td:nth-of-type(2) { grid-column: 2; grid-row: 1; font-size: 16px; }
  .pr-tbl tbody td:nth-of-type(1), .pr-tbl tbody td:nth-of-type(3), .pr-tbl tbody td:nth-of-type(4) { grid-column: 1 / -1; text-align: left; font-size: 14px; color: var(--ink-3); }
  .pr-tbl tbody td:nth-of-type(n)::before { content: attr(data-l) " "; }
  .pr-tbl tbody td:nth-of-type(1)::before, .pr-tbl tbody td:nth-of-type(2)::before { content: none; }
  .pr-tbl tbody td:nth-of-type(1)::after { content: " days"; }
}
.pr-labs .pr-ticks { margin-top: 24px; max-width: 60ch; }

/* ------------------------------------------------------------------------------------------------ Students */
/* The hero's picture: a lesson frame, the price set large over its corner (S166 taste 5). */
.sd-shot { position: relative; padding: 0 0 48px 8%; }
.sd-frame { width: 100%; height: auto; display: block; border-radius: var(--r-media); border: 1px solid var(--line); box-shadow: 0 30px 70px rgba(20, 51, 107, .14); }
.sd-big {
  position: absolute; left: 0; bottom: 0; margin: 0; padding: 18px 26px 20px; border-radius: var(--r-card); background: var(--surface);
  box-shadow: 0 18px 44px rgba(20, 51, 107, .16); border: 1px solid var(--line);
  font-size: clamp(64px, 7vw, 104px); font-weight: 600; line-height: .95; letter-spacing: -.045em; color: var(--ink); font-variant-numeric: tabular-nums;
}
.sd-big .sd-rs { font-size: .4em; letter-spacing: -.01em; margin-right: .12em; vertical-align: .9em; color: var(--ink-2); }
.sd-big small { display: block; margin-top: 10px; font-size: 15px; font-weight: 500; letter-spacing: 0; color: var(--ink-3); }
@media (max-width: 900px) { .sd-shot { padding: 0 0 40px 10%; } }
.sd-rules { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px clamp(32px, 5vw, 72px); margin-top: 28px; max-width: 1080px; }
@media (max-width: 760px) { .sd-rules { grid-template-columns: 1fr; } }
.sd-stack > * { max-width: 64ch; }
.sd-stack .pr-ticks { margin-top: 24px; max-width: 60ch; }
.sd-stack .hm-actions { margin-top: 22px; }
.sd-price { margin: 16px 0 0; font-size: var(--t-body); color: var(--ink-2); }
.sd-steps { list-style: none; counter-reset: s; margin: 32px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 4vw, 56px); }
.sd-steps li { counter-increment: s; position: relative; padding-top: 52px; }
.sd-steps li[hidden] { display: none; }
.sd-steps li::before {
  content: counter(s); position: absolute; left: 0; top: 0; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center;
  background: var(--navy); color: #fff; font-weight: 600; font-size: 15px;
}
.sd-steps b { display: block; font-size: 19px; font-weight: 600; }
.sd-steps span { display: block; margin-top: 4px; color: var(--ink-2); font-size: var(--t-body); line-height: 1.5; }
@media (max-width: 760px) {
  .sd-steps { grid-template-columns: 1fr; gap: 20px; }
  .sd-steps li { padding: 4px 0 0 52px; }
}
.sd-verify { max-width: 820px; }
.sd-verify #sv { margin-top: 28px; }
.sd-two { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(24px, 5vw, 72px); align-items: start; }
.sd-two .pr-ticks { margin-top: 6px; }
@media (max-width: 860px) { .sd-two { grid-template-columns: 1fr; } }
.sd-board { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(24px, 5vw, 72px); align-items: center; }
.sd-board img { width: 100%; max-width: 380px; height: auto; justify-self: center; display: block; }
.sd-board .hm-actions { margin-top: 26px; }
@media (max-width: 860px) { .sd-board { grid-template-columns: 1fr; } .sd-board img { order: -1; max-width: 300px; } }