/* =========================================================================
   pricing-n12.css — the pricing page, written fresh.

   NOT LAYERED OVER pricing.css. The automation page is the argument for
   that: it loads ideas-section.css and then spends 518 !important
   declarations overriding it, and three separate bugs this week came
   from rules in that file I could not see from the one I was editing.
   She said build this one from scratch, so there is nothing underneath
   and nothing here needs !important.

   WHY THE PAGE IS NOT A THREE-COLUMN TABLE.

   Three equal columns say "pick one of three tiers". These are not
   tiers. They are three unrelated products with three different price
   SHAPES -- a one-off engagement, a per-seat subscription, and a custom
   project -- and nobody weighs a business plan against $5/user software
   on price. The column format asks for a comparison that does not
   exist, and it is why the automation card had to say "custom scope"
   where the other two had a number: it was the only one that would not
   fit the shared shape.

   So: one full-width band per service, in the order of the work -- plan,
   then run, then automate. That is the site's own structure everywhere
   else, it is the order of the nav, and it leaves each price room to be
   the shape it actually is.
   ========================================================================= */

.pr12{
  --pr-ground:#171413;
  --pr-ground-dark:#0F0D0C;
  --pr-cream:#F6F1EA;
  --pr-accent:#B28479;
  --pr-accent-hi:#C99084;
  /* THE PRICE INK, and it is the planning page's, not cream.
     --pl-ink-2 is the pale blue the plan window's figures and the
     quarterly annotation are written in, and /planning already sets its
     ledger's prices in it. This page shows the same prices, so it uses
     the same ink -- otherwise the one number that appears on both pages
     appears in two colours. */
  --pr-ink:#A9B8C6;
  --pr-inset:clamp(44px,8vw,120px);
  /* THIS IS BACK TO BEING THE PAGE GUTTER. It was split off so the hero
     could hold 44px while the cards dropped to 20 -- which matched the
     blog masthead at the time. The blog now runs the shared 32/20
     ladder like everything else, so there is nothing left to differ
     from and one gutter per page is the point of the exercise. */
  --pr-hero-inset:var(--pr-inset);
  --pr-rule:rgba(246,241,234,.10);
  background:var(--pr-ground-dark);
  color:var(--pr-cream);
}
.pr12 *{box-sizing:border-box}
.pr12-wrap{width:100%;padding:0 var(--pr-inset)}

/* THE BAND EYEBROW AND HEADING, matched to planning and software.

   Those two agree byte for byte -- 12px/.17em cream at 70% on the
   eyebrow, 38px/1.04/-0.035em lowercase on the heading -- and that
   agreement is what makes them the standard. This page had the clay
   eyebrow and a looser heading it inherited from the automation page's
   closing band, which had itself drifted to 1.10/-0.020em.

   Measured across every band on all four pages rather than sampled:
   the first pass picked whichever element matched first and caught a
   24px sub-heading on planning, which would have had me aligning to
   the wrong thing. */
.pr12-eyebrow{
  display:block;
  font-family:'Questrial',sans-serif;
  font-size:12px;font-weight:700;letter-spacing:.17em;text-transform:uppercase;
  color:rgba(246,241,234,.7);margin:0;
}
.pr12 h2{
  font-family:'League Spartan',sans-serif;font-weight:700;
  font-size:clamp(30px,3.2vw,38px);line-height:1.04;letter-spacing:-.035em;
  text-transform:lowercase;color:var(--pr-cream);
  margin:14px 0 20px;
}
.pr12-lede{
  font-family:'Questrial',sans-serif;
  font-size:15px;line-height:24px;color:rgba(246,241,234,.68);
  margin:0;max-width:72ch;
}

/* THE SERVICE SWITCH IS A PHONE CONTROL AND DOES NOT EXIST HERE.
   Every other rule for it lives in the 640 block, which meant that
   above 640 it was rendering as three unstyled buttons above the
   cards -- a media query only adds, it does not hide what it does not
   mention. The default has to be `none`. */
.pc-switch{display:none}

/* ------------------------------- the hero -------------------------------
   Same construction as the other four: the masthead lives INSIDE the
   hero so it never moves between pages, the picture takes the site
   grade, and a scrim sits over the copy end of it. */
.pr12-hero{
  position:relative;display:flex;align-items:flex-start;overflow:hidden;
  /* 400, the blog's height, because this hero now does the blog's job:
     it labels a document rather than selling one. 560 was sized for
     copy that floated to the middle of the box; 470 for copy plus two
     CTAs. With the CTAs gone there is an eyebrow, a headline and two
     lines in it. */
  min-height:400px;
  /* 151px, the blog masthead's number, and --pr-hero-inset rather than
     --pr-inset. The page inset tightens to 32 and then 20 as the
     screen narrows so the three cards keep their width; the hero has
     no such constraint, and following it down was what put this
     headline 24px left of every other hero on the site. The two
     variables are the same clamp at full width and only diverge below
     1024. */
  padding:151px var(--pr-hero-inset) 56px;
  background:var(--pr-ground-dark);
}
.pr12-hero::before{
  content:"";position:absolute;inset:0;z-index:0;
  background:url('/assets/images/pricing-hero-gold.jpg') center 54%/cover no-repeat;
  filter:saturate(.58) brightness(.62);
}
/* NO POOL -- see the same change on the blog masthead. The radial was
   aimed at 34% 46% for a crop this hero stopped using, so it read as a
   dark smudge sitting beside the gold rather than as light falling on
   it. The vertical scrim stays: it is what the logo and the menu
   button sit on, and what closes the picture into the band below. */
.pr12-hero::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,
    rgba(15,13,12,.92) 0%, rgba(15,13,12,.34) 26%, rgba(15,13,12,0) 52%);
}
/* CENTRED, like the other three rebuilt heroes. Measured rather than
   assumed: planning, software and automation all set their h1 to
   text-align:center, and only the home page differs because it is not a
   page hero at all. */
/* TOP-ALIGNED, not centred. Measured on all four: planning, software
   and automation put the eyebrow at 128px from the top of the document
   and the h1 at ~152. This hero was putting them at 187 and 218,
   because the copy was align-self:center inside a 560px hero -- so the
   masthead's 104px and the hero's own 128px padding stopped mattering
   and the copy floated to the middle of the box instead.

   flex-start hands the 128px padding back, and the four heroes now
   start their type on the same line. */
/* LEFT, like the blog's masthead, and bottom-aligned in the band. A
   centred hero is what the three service pages do, and it is the right
   shape for a page that is making a case. This page is answering a
   question, so it gets the library's treatment instead: the label sits
   at the foot of the picture and the document starts underneath. */
/* CENTRED, like the blog masthead and the three service pages. */
.pr12-hero-copy{
  position:relative;z-index:2;align-self:flex-start;
  max-width:820px;margin:0 auto;text-align:center;
}
.pr12-hero h1{
  font-family:'League Spartan',sans-serif;font-weight:700;
  /* the blog masthead's scale, because this is the same job. At 62 the
     headline wrapped to two lines and took the compactness back. */
  font-size:var(--n12-h1);line-height:1.0;letter-spacing:-.04em;
  text-transform:lowercase;color:var(--pr-cream);
  /* 12 rather than 18: the eyebrow now starts on the same line as the
     other three, and this is the 6px that was still putting the h1
     below theirs -- 153 on planning, 159 here. */
  margin:12px 0 20px;
}
.pr12-hero p{
  font-family:'Questrial',sans-serif;
  font-size:15px;line-height:24px;color:rgba(246,241,234,.68);
  /* The <br> puts one sentence per line, and 64ch was narrower than the
     second sentence -- so the break made three lines rather than two.
     Uncapped, the hero copy's own 880px is the measure and each
     sentence fits on the line the break gives it. */
  margin:0 auto 30px;max-width:none;
}
.pr12-hero-actions{
  display:flex;align-items:center;gap:26px;flex-wrap:wrap;
  justify-content:center;
}
/* THE SECONDARY CTAs ARE CREAM ON THIS PAGE, not clay.

   Clay is the site's tertiary-link colour and it stays that everywhere
   else. It does not survive this page's hero -- the gold picture is the
   one warm background on the site, and clay type on it is clay on clay,
   the same collision the automation page's numeral had with the lit
   dune -- and this page has already dropped clay from the cards, so a
   clay link in the closing band would be the only one left.

   AND THE UNDERLINE WITH IT. cta-n12.css:234 draws it as a border-bottom
   in rgba(178,132,121,.32), which is clay, and colour does not touch a
   border. Setting the text cream and leaving the rule clay is what was
   on the page: a cream label sitting on a clay line. */
.pr12-hero-actions .n12-cta-3,
.pr12-close-actions .n12-cta-3{
  color:var(--pr-cream);
  border-bottom-color:rgba(246,241,234,.32);
}
.pr12-hero-actions .n12-cta-3 svg,
.pr12-close-actions .n12-cta-3 svg{stroke:var(--pr-cream)}
.pr12-hero-actions .n12-cta-3:hover,
.pr12-close-actions .n12-cta-3:hover{
  color:#fff;border-bottom-color:rgba(255,255,255,.6);
}
.pr12-hero-actions .n12-cta-3:hover svg,
.pr12-close-actions .n12-cta-3:hover svg{stroke:#fff}

/* =========================================================================
   THE PRICING CARDS.

   The version before this repeated itself: the headline price on the
   left and the same number again in the row on the right, a description
   on both sides, and billing paragraphs that made the section read like
   a contract rather than a page. Three identical dark rectangles in a
   column is also a wall -- nothing tells you where one card ends and
   why you would care about the next.

   So: one structure, said once. A numeral, a service, one sentence
   about what it is FOR, one dominant price, at most two secondary rows,
   a compact included line, one CTA, and the billing detail folded away
   behind a disclosure for the people who actually want it.

   The rhythm comes from three things that cost nothing to read: a large
   ghost numeral behind each card, one muted accent per service, and a
   pill naming the price's SHAPE -- one-time, monthly, per project --
   which is the thing that makes three unlike numbers comparable.
   ========================================================================= */
.pc-intro{
  display:flex;align-items:baseline;gap:18px;flex-wrap:wrap;
  margin:0 0 6px;
}
.pc-intro span{
  font-family:'Questrial',sans-serif;
  font-size:12px;font-weight:700;letter-spacing:.17em;text-transform:uppercase;
  color:rgba(246,241,234,.7);
}
/* the currency note rides on the section label rather than floating
   above the first card on a line of its own */
.pc-intro em{
  font-style:normal;
  font-family:'Questrial',sans-serif;
  font-size:13px;line-height:1.5;color:rgba(246,241,234,.68);
}
/* .pc-head is gone from the markup -- the hero labels the page now.
   The currency line keeps the air the heading used to provide. */
.pc-intro{margin-bottom:34px}

.pc-cards{display:grid;gap:18px}

.pc-card{
  --pc-accent:#A9B8C6;
  position:relative;overflow:hidden;
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,340px);
  gap:0 clamp(32px,4vw,72px);
  padding:38px 40px 34px;
  border:1px solid rgba(246,241,234,.12);
  background:rgba(246,241,234,.022);
  transition:border-color .22s ease, background-color .22s ease, transform .22s ease;
}
.pc-card:hover{
  border-color:color-mix(in srgb, var(--pc-accent) 52%, transparent);
  background:rgba(246,241,234,.038);
  transform:translateY(-2px);
}
/* THE GHOST NUMERAL. Behind everything, clipped by the card, and large
   enough to be a texture rather than a label -- the small numeral in
   the corner is the one doing the counting. */
/* THE GHOST NUMERAL IS A REAL ELEMENT NOW, not content:attr(data-n) on
   a pseudo-element. Generated content is announced, so every card read
   "01, 01, business planning" -- and a pseudo-element cannot be given
   aria-hidden. A span can. */
/* WHOLE, AND ON ONE GRID. Two separate faults here:

   1. bottom:-56 against a card with overflow:hidden meant every numeral
      lost its last 55px to the card's edge -- they were not bleeding
      off, they were cut off.
   2. right:-14 with proportional figures anchored three different
      widths (155 / 201 / 194px for 01 / 02 / 03, because "1" is a
      narrow glyph) to the same right edge, so no two started in the
      same place down the column. tabular-nums gives every digit the
      same advance, so all three boxes are identical and both edges
      line up card to card. */
.pc-ghost{
  position:absolute;right:26px;bottom:18px;z-index:0;pointer-events:none;
  font-family:'League Spartan',sans-serif;font-weight:800;
  font-size:190px;line-height:.8;letter-spacing:-.06em;
  font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;
  color:var(--pc-accent);opacity:.05;
}
/* EXCLUDING THE GHOST, which is the whole reason the numeral used to be
   a pseudo-element. This rule lifts the card's real content above it --
   and it is (0,1,0), the same weight as .pc-ghost and later in the file,
   so it was setting the numeral to position:relative. That made it an
   in-flow grid ITEM: it took the first column, the service block moved
   to the second and the price wrapped underneath. */
.pc-card > *:not(.pc-ghost){position:relative;z-index:1}

.pc-n{
  display:block;
  font-family:'League Spartan',sans-serif;font-weight:700;
  font-size:12px;letter-spacing:.16em;color:var(--pc-accent);
  margin:0 0 12px;
}
.pc-card h2{
  margin:0 0 10px;
  font-family:'League Spartan',sans-serif;font-weight:700;
  font-size:clamp(23px,2vw,27px);line-height:1.04;letter-spacing:-.035em;
  text-transform:lowercase;color:var(--pr-cream);
}
/* the one sentence: what it is FOR, not what it contains */
/* THE SECONDARY COPY COMES UP ONE STEP, ALL OF IT.
   The hierarchy on this page is carried by size and weight -- a 46px
   price against 13.5px terms is not in any danger of being confused --
   so the small copy was also fading out for no work. .58 cream on
   #171413 is 4.8:1, which is AA by about a hair and reads faint at
   13.5px. Everything secondary is now .74 or better. */
/* 52ch, not 38. The longest of the three runs to 48 characters, so at
   38 it broke to two lines in a column 730px wide -- 334px of text and
   396px of nothing beside it. */
.pc-outcome{
  margin:0 0 26px;max-width:52ch;
  font-family:'Questrial',sans-serif;
  font-size:16px;line-height:1.55;color:rgba(246,241,234,.84);
}
.pc-included{
  margin:0 0 22px;
  font-family:'Questrial',sans-serif;
  font-size:13.5px;line-height:1.6;color:rgba(246,241,234,.74);
}
.pc-cta{
  display:inline-flex;align-items:center;gap:9px;
  font-family:'Questrial',sans-serif;font-size:14px;font-weight:700;
  letter-spacing:.03em;color:var(--pc-accent);text-decoration:none;
  border-bottom:1px solid color-mix(in srgb, var(--pc-accent) 34%, transparent);
  padding-bottom:3px;
  transition:color .18s ease,border-color .18s ease;
}
.pc-cta svg{width:17px;height:17px;transition:transform .18s ease}
.pc-cta:hover{color:#fff;border-bottom-color:rgba(255,255,255,.55)}
.pc-cta:hover svg{transform:translateX(4px)}

/* ---- the price side ---- */
.pc-price{padding-top:2px}
.pc-pill{
  display:inline-block;margin:0 0 14px;
  padding:4px 11px;border-radius:999px;
  border:1px solid color-mix(in srgb, var(--pc-accent) 42%, transparent);
  font-family:'Questrial',sans-serif;font-weight:700;
  font-size:10.5px;letter-spacing:.15em;text-transform:uppercase;
  color:var(--pc-accent);
}
/* ------------------------------- the tiers -------------------------------
   Each price is a block of three: a tracked label, the figure, and one
   line saying what the figure buys. Two of them on planning and
   software, one on automation.

   ON DESKTOP THEY STACK, which is what the column did before: the lead
   tier keeps the 46px figure and the second sits under it, smaller and
   quieter. The phone sets the same two side by side -- see the block at
   the foot of this file -- and both are built from one set of elements
   rather than from the price written out twice. */
.pc-tiers{display:block}
.pc-tier{display:block}
.pc-tier + .pc-tier{margin-top:16px}
.pc-tier-k{
  display:block;margin:0 0 7px;
  font-family:'Questrial',sans-serif;font-weight:700;
  font-size:10.5px;letter-spacing:.15em;text-transform:uppercase;
  color:var(--pc-accent);
}
.pc-tier-v{
  display:block;margin:0;
  font-family:'League Spartan',sans-serif;font-weight:700;
  font-size:clamp(34px,3.6vw,46px);line-height:.98;letter-spacing:-.035em;
  text-transform:lowercase;color:var(--pc-accent);
}
.pc-tier-n{
  display:block;margin-top:9px;
  font-family:'Questrial',sans-serif;font-weight:400;
  font-size:14.5px;line-height:1.5;letter-spacing:0;
  color:rgba(246,241,234,.84);
}
/* THE SECOND TIER IS NOT THE HEADLINE. On the stacked desktop column a
   second 46px figure would compete with the first; 26 keeps it a price
   while leaving the lead tier the loudest thing in the column. */
.pc-tier:not(.pc-tier--lead) .pc-tier-v{
  font-size:26px;line-height:1.05;color:rgba(246,241,234,.92);
}
.pc-tier:not(.pc-tier--lead) .pc-tier-k{color:rgba(246,241,234,.6)}
.pc-tier:not(.pc-tier--lead) .pc-tier-n{font-size:13.5px;color:rgba(246,241,234,.7)}

/* THE SAVING, as the planning page tags it: a pill on the one-time
   figure. It belongs to that number and not to the monthly line under
   it -- $336 x 12 is $4,032, so paying once is $672 back, and on the
   monthly line the same tag would read as the monthly option's perk.

   width:max-content because it is display:block inside a 46px heading:
   without it the pill stretches the full column and the border draws a
   rounded box round half the card. */
.pc-save{
  display:block;width:max-content;
  margin:12px 0 0;padding:4px 11px;border-radius:999px;
  border:1px solid color-mix(in srgb, var(--pc-accent) 46%, transparent);
  font-family:'Questrial',sans-serif;font-style:normal;font-weight:700;
  font-size:11.5px;line-height:1.3;letter-spacing:.04em;
  color:var(--pc-accent);
}
/* at most two of these, and they are rows rather than sentences */
.pc-alt{
  display:block;margin:16px 0 0;padding:13px 0 0;
  border-top:1px solid rgba(246,241,234,.10);
  font-family:'Questrial',sans-serif;
  font-size:14px;line-height:1.5;color:rgba(246,241,234,.82);
}
.pc-alt b{color:var(--pr-cream);font-weight:400}

/* ---- billing, folded away ----
   Native <details>, so it works with no script and the browser gives
   the button its own semantics. The long payment schedules, exclusions
   and support terms are all true and almost nobody reads them before
   they have decided -- they were what made the section contractual. */
.pc-details{
  grid-column:1 / -1;margin:26px 0 0;padding:16px 0 0;
  border-top:1px solid rgba(246,241,234,.09);
}
/* THE WHOLE ROW IS THE BUTTON. inline-flex made the summary only as
   wide as its own words, so the row looked clickable across the card
   and was not -- everything right of "BILLING & DETAILS" did nothing.
   flex + space-between puts the +/- at the far end and makes the full
   width the target, and the padding gives it a 40px hit area. */
.pc-details summary{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  cursor:pointer;list-style:none;
  padding:10px 0;margin:-10px 0;
  font-family:'Questrial',sans-serif;font-size:13px;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;
  color:rgba(246,241,234,.72);
  transition:color .18s ease;
}
.pc-details summary::-webkit-details-marker{display:none}
.pc-details summary::after{
  content:"+";font-size:17px;line-height:1;color:var(--pc-accent);
  transition:transform .2s ease;
}
.pc-details[open] summary::after{content:"\2013"}
.pc-details summary:hover{color:var(--pr-cream)}
/* a visible ring, because this is a keyboard control */
.pc-details summary:focus-visible{
  outline:2px solid var(--pc-accent);outline-offset:3px;
  color:var(--pr-cream);
}
.pc-details p{
  margin:14px 0 0;max-width:92ch;
  font-family:'Questrial',sans-serif;
  font-size:13.5px;line-height:1.65;color:rgba(246,241,234,.76);
}
.pc-details p b{color:rgba(246,241,234,.94);font-weight:400}

/* =========================================================================
   NOT SURE? — the finder, on the page rather than behind a text link.
   ========================================================================= */
.pc-finder{
  display:flex;align-items:center;justify-content:space-between;
  gap:28px;flex-wrap:wrap;
  margin:18px 0 0;padding:32px 40px;
  border:1px solid rgba(246,241,234,.14);
  background:rgba(246,241,234,.03);
}
.pc-finder b{
  display:block;
  font-family:'League Spartan',sans-serif;font-weight:700;
  font-size:clamp(22px,2vw,26px);line-height:1.05;letter-spacing:-.03em;
  text-transform:lowercase;color:var(--pr-cream);margin:0 0 8px;
}
.pc-finder p{
  margin:0;max-width:52ch;
  font-family:'Questrial',sans-serif;
  font-size:15px;line-height:1.55;color:rgba(246,241,234,.84);
}
.pc-finder button{
  flex:0 0 auto;
  display:inline-flex;align-items:center;gap:10px;cursor:pointer;
  padding:14px 24px;
  background:none;border:1px solid rgba(246,241,234,.34);
  font-family:'Questrial',sans-serif;font-size:14.5px;font-weight:700;
  letter-spacing:.03em;color:var(--pr-cream);
  transition:background-color .2s ease,border-color .2s ease;
}
.pc-finder button svg{width:18px;height:18px;transition:transform .2s ease}
.pc-finder button:hover{background:rgba(246,241,234,.08);border-color:var(--pr-cream)}
.pc-finder button:hover svg{transform:translateX(5px)}

/* TWO ACTIONS, ONE DOMINANT. This panel closes the page now, so it
   carries the same pair the hero does -- but inverted: the tool is the
   outlined button here because the reader has just read three prices
   and the panel's whole sentence is about not knowing which, and the
   call is a plain cream link beside it rather than a second box.

   align-items:center rather than baseline: the button is a 48px box and
   the link a single line, and aligning their text baselines would sit
   the link low against the button's optical middle. */
.pc-finder-actions{
  flex:0 0 auto;
  display:flex;align-items:center;gap:22px;flex-wrap:wrap;
}
.pc-finder-call{
  font-family:'Questrial',sans-serif;font-size:14.5px;font-weight:700;
  letter-spacing:.03em;color:var(--pr-cream);text-decoration:none;
  border-bottom:1px solid rgba(246,241,234,.32);
  padding-bottom:3px;
  transition:color .2s ease,border-color .2s ease;
}
.pc-finder-call:hover{color:#fff;border-bottom-color:rgba(255,255,255,.6)}

@media(max-width:1024px){
  .pc-card{grid-template-columns:1fr;gap:28px 0;padding:32px 26px 28px}
  .pc-ghost{font-size:150px;right:22px;bottom:16px}
  .pc-finder{padding:26px 24px}
  /* the pair stacks and centres, so the link reads as a second option
     rather than as a caption hanging off the button's left edge */
  .pc-finder-actions{width:100%;flex-direction:column;align-items:stretch;gap:16px}
  .pc-finder button{width:100%;justify-content:center}
  .pc-finder-call{align-self:center;border-bottom-width:1px}
}

/* ------------------------------ the bands ------------------------------ */
.pr12-band{padding:118px 0;position:relative}
/* The 470px hero stays -- it carries two CTAs and needs the room. Only
   the gap under it comes in. */
.pr12-hero + .pr12-band{padding-top:80px}
.pr12-band--dark{background:var(--pr-ground-dark)}
.pr12-band--lift{background:var(--pr-ground)}

/* --------------------------- a service band ---------------------------
   Left: the number, the name and what the service is for.
   Right: what you get.
   Under both: the ledger, carrying the price options.

   The numeral and the rule are the same device as the automation
   page's timeline -- this is the same idea, three beats instead of
   five, stacked rather than strung out. */
.pr12-service{
  display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);
  gap:0 clamp(40px,6vw,96px);
  padding-top:44px;
  border-top:1px solid var(--pr-rule);
}
.pr12-service-n{
  display:block;
  font-family:'League Spartan',sans-serif;font-weight:700;
  font-size:13px;letter-spacing:.14em;color:var(--pr-accent);
  margin:0 0 14px;
}
.pr12-service h2{margin:0 0 6px}
.pr12-service-for{
  font-family:'Questrial',sans-serif;
  font-size:14.5px;line-height:1.55;color:rgba(246,241,234,.58);
  margin:0 0 30px;max-width:40ch;
}

/* ------------------------------ the ledger ------------------------------
   THE PLANNING PAGE'S OWN PRICING DEVICE, brought here.

   She asked for it and it is the right call for a reason worth writing
   down: a service can have more than one way to buy it, and the old
   three-column table had nowhere to put a second. Planning has annual
   AND quarterly. Software has a subscription AND an optional setup.
   Each becomes a row: what it is on the left, what it costs hard right,
   hairlines between.

   Same numbers as .pl-ledger on /planning -- a fixed 230px figure
   column so every price in the band right-aligns to one edge rather
   than each row finding its own, 80px of alley, and both sides centred
   on the row so a two-line figure and a four-line description share a
   middle instead of hanging off a shared top. */
.pr12-ledger{
  display:block;margin-top:38px;
  border-top:1px solid var(--pr-rule);
}
.pr12-ledger-row{
  display:grid;grid-template-columns:minmax(0,1fr) 230px;
  align-items:center;gap:0 80px;
  padding:30px 0;margin:0;
  border-bottom:1px solid var(--pr-rule);
  transition:background-color .2s ease;
}
.pr12-ledger-row:hover{background:rgba(246,241,234,.028)}
.pr12-ledger-body h3{
  margin:0 0 9px;
  font-family:'League Spartan',sans-serif;font-weight:700;
  font-size:clamp(20px,1.65vw,24px);line-height:1.06;letter-spacing:-.03em;
  text-transform:lowercase;color:var(--pr-cream);
}
.pr12-ledger-body p{
  margin:0;max-width:86ch;
  font-family:'Questrial',sans-serif;
  font-size:15px;line-height:1.6;color:rgba(246,241,234,.68);
}
.pr12-ledger-fig{text-align:right}
.pr12-ledger-fig strong{
  display:block;white-space:nowrap;
  font-family:'League Spartan',sans-serif;font-weight:700;
  font-size:46px;line-height:1;letter-spacing:-.035em;
  color:var(--pr-ink);
}
/* "custom scope" is words where the others are a number, so it cannot
   take the same 46px without wrapping the column */
.pr12-ledger-fig strong.is-words{font-size:30px;letter-spacing:-.02em;white-space:normal}
.pr12-ledger-fig > span{
  display:block;margin-top:8px;
  font-family:'Questrial',sans-serif;font-weight:700;
  font-size:12px;letter-spacing:.17em;text-transform:uppercase;
  color:rgba(246,241,234,.56);
}
.pr12-ledger-tag{
  display:inline-block;margin-top:11px;padding:4px 11px;
  border:1px solid rgba(178,132,121,.46);border-radius:999px;
  font-style:normal;font-size:11.5px;letter-spacing:.04em;
  color:var(--pr-accent);white-space:nowrap;
}
/* .pr12-ledger-fig > span, NOT .pr12-ledger-alt on its own. The alt line
   IS one of those spans, and two selectors with a child combinator beat
   one class -- so the reset lost and "or $336/month for 12 months" came
   out uppercase and tracked at .17em, set like a label. Specificity
   again, not a missing declaration. */
.pr12-ledger-fig > span.pr12-ledger-alt{
  display:block;margin-top:11px;
  font-family:'Questrial',sans-serif;
  font-size:13.5px;line-height:1.5;color:rgba(246,241,234,.58);
  text-transform:none;letter-spacing:0;font-weight:400;
}

/* what moves the number on a custom-scoped job. Sits above the ledger,
   because a reader who sees "custom scope" needs to know what it
   depends on before the figure, not after. */
.pr12-drivers{
  margin:30px 0 0;padding:22px 26px;
  border-left:2px solid rgba(178,132,121,.45);
  background:rgba(246,241,234,.025);
  font-family:'Questrial',sans-serif;
  font-size:15px;line-height:1.65;color:rgba(246,241,234,.74);
  max-width:78ch;
}
.pr12-drivers b{color:var(--pr-cream);font-weight:400}

/* the currency note. One line, once, under the three bands -- after
   every price has been read and before anything is decided. */
.pr12-currency{
  padding:26px 0 0;margin:0;
  border-top:1px solid var(--pr-rule);
  font-family:'Questrial',sans-serif;
  font-size:13.5px;line-height:1.6;color:rgba(246,241,234,.52);
}

/* what you get: hairline rows, not ticks. The green checkmarks were the
   last off-palette thing on the page. */
.pr12-gets{list-style:none;margin:0;padding:0}
.pr12-gets li{
  padding:15px 0 15px 26px;position:relative;
  border-bottom:1px solid rgba(246,241,234,.07);
  font-family:'Questrial',sans-serif;
  font-size:15px;line-height:1.55;color:rgba(246,241,234,.76);
}
.pr12-gets li:first-child{padding-top:0}
.pr12-gets li:last-child{border-bottom:0}
.pr12-gets li::before{
  content:"";position:absolute;left:0;top:23px;
  width:9px;height:1px;background:var(--pr-accent);
}
.pr12-gets li:first-child::before{top:8px}
.pr12-gets-head{
  display:block;
  font-family:'Questrial',sans-serif;
  font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(246,241,234,.44);margin:0 0 18px;
}
.pr12-service-link{
  display:inline-flex;align-items:center;gap:9px;
  margin:26px 0 0;
  font-family:'Questrial',sans-serif;font-size:14px;font-weight:700;
  letter-spacing:.04em;color:var(--pr-accent);text-decoration:none;
  transition:color .18s ease;
}
.pr12-service-link svg{width:18px;height:18px;transition:transform .18s ease}
.pr12-service-link:hover{color:var(--pr-accent-hi)}
.pr12-service-link:hover svg{transform:translateX(4px)}

/* ----------------------------- they stack -----------------------------
   Nothing on the old page said whether these are alternatives or a
   sequence. They are a sequence, and saying so is the difference
   between three products and one offer. */
.pr12-stack{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:0;margin:48px 0 0;
  border-top:1px solid var(--pr-rule);
}
.pr12-stack > div{
  padding:30px 34px 0 0;position:relative;
}
.pr12-stack > div + div{padding-left:34px;border-left:1px solid var(--pr-rule)}
.pr12-stack b{
  display:block;
  font-family:'League Spartan',sans-serif;font-weight:700;
  font-size:17px;letter-spacing:-.01em;text-transform:lowercase;
  color:var(--pr-cream);margin:0 0 9px;
}
.pr12-stack p{
  font-family:'Questrial',sans-serif;
  font-size:14.5px;line-height:1.55;color:rgba(246,241,234,.62);margin:0;
}

/* ---------------------------- the small print ----------------------------
   A price table raises two questions and the old page answered neither:
   what is NOT in the number, and when do I actually pay. */
.pr12-terms{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:0 clamp(40px,6vw,88px);margin:50px 0 0;
}
.pr12-terms h3{
  font-family:'Questrial',sans-serif;
  font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(246,241,234,.44);margin:0 0 18px;
}
.pr12-terms ul{list-style:none;margin:0;padding:0}
.pr12-terms li{
  padding:0 0 14px 0;
  font-family:'Questrial',sans-serif;
  font-size:14.5px;line-height:1.6;color:rgba(246,241,234,.7);
}
.pr12-terms li b{color:var(--pr-cream);font-weight:400}

/* ------------------------------ the close ------------------------------ */
.pr12-close{
  padding:118px 0;background:var(--pr-ground);
  border-top:1px solid rgba(246,241,234,.07);
}
.pr12-close h2{max-width:none;font-size:clamp(30px,3.4vw,40px)}
.pr12-close-actions{
  display:flex;align-items:center;gap:26px;flex-wrap:wrap;margin:38px 0 0;
}

/* =========================================================================
   OPTION A — ONE LEDGER.

   The long version is 4,981px and reads drawn out for a reason: it
   spends a full band per service saying what the service IS, which the
   service pages already do better and at length, and then a ledger
   saying what it costs. The second half is the pricing page's job.

   So: one ledger, every way to buy anything, grouped by service. Five
   rows rather than three bands. What each one includes is the row's own
   description, which is where a reader looks for it anyway.
   ========================================================================= */
   THREE LAYERS OF "WHAT YOU GET" BECAME ONE.

   The first pass had a service description, then an option
   description, then a bulleted list -- three goes at the same job, and
   the annual row's description was a thirty-word run-on trying to be a
   list anyway. That is what made it busy: prose where the eye wanted
   to scan.

   So each option is exactly two things. A short list of what is in it,
   and what it costs. The service name above them is the only other
   text, and the link beside it is the way to the long version. Nothing
   on this page explains the service; the service pages do that. */
.pr12-master{margin:46px 0 0}

.pr12-svc{border-top:1px solid rgba(246,241,234,.16)}
.pr12-svc + .pr12-svc{margin-top:64px}
/* the service name and its way out, on one line */
.pr12-svc-head{
  display:flex;align-items:baseline;justify-content:space-between;
  gap:20px;flex-wrap:wrap;padding:24px 0 6px;
}
.pr12-svc-head h3{
  margin:0;
  font-family:'League Spartan',sans-serif;font-weight:700;
  font-size:clamp(24px,2.2vw,30px);line-height:1;letter-spacing:-.03em;
  text-transform:lowercase;color:var(--pr-cream);
}
.pr12-svc-head a{
  display:inline-flex;align-items:center;gap:8px;
  font-family:'Questrial',sans-serif;font-size:13.5px;font-weight:700;
  letter-spacing:.04em;color:var(--pr-accent);text-decoration:none;
  transition:color .18s ease;white-space:nowrap;
}
.pr12-svc-head a svg{width:16px;height:16px;transition:transform .18s ease}
.pr12-svc-head a:hover{color:var(--pr-accent-hi)}
.pr12-svc-head a:hover svg{transform:translateX(4px)}

/* ONE OPTION: what is in it, and what it costs. Start-aligned rather
   than centred, because the left side is now a list -- a list and a
   price both read from their first line down, so they should begin
   together. */
.pr12-opt{
  display:grid;grid-template-columns:minmax(0,1fr) 250px;
  gap:0 clamp(40px,5vw,76px);align-items:start;
  padding:24px 0 26px;
  border-bottom:1px solid var(--pr-rule);
  transition:background-color .2s ease;
}
.pr12-opt:hover{background:rgba(246,241,234,.028)}
.pr12-opt h4{
  margin:0 0 14px;
  font-family:'League Spartan',sans-serif;font-weight:700;
  font-size:20px;line-height:1.1;letter-spacing:-.02em;
  text-transform:lowercase;color:var(--pr-cream);
}
.pr12-opt ul{
  list-style:none;margin:0;padding:0;
  /* two up, because four short lines stacked make a column of text and
     the point of a list is that it is not one */
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:9px clamp(24px,3vw,44px);
}
.pr12-opt li{
  position:relative;padding-left:20px;
  font-family:'Questrial',sans-serif;
  font-size:14.5px;line-height:1.5;color:rgba(246,241,234,.72);
}
.pr12-opt li::before{
  content:"";position:absolute;left:0;top:10px;
  width:9px;height:1px;background:var(--pr-accent);
}
/* the price side, right-aligned to one shared edge */
.pr12-opt-fig{text-align:right;padding-top:2px}
.pr12-opt-fig strong{
  display:block;white-space:nowrap;
  font-family:'League Spartan',sans-serif;font-weight:700;
  font-size:42px;line-height:1;letter-spacing:-.035em;
  color:var(--pr-ink);
}
.pr12-opt-fig strong.is-words{font-size:26px;letter-spacing:-.02em;white-space:normal}
.pr12-opt-fig > span{
  display:block;margin-top:7px;
  font-family:'Questrial',sans-serif;font-weight:700;
  font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(246,241,234,.56);
}
.pr12-opt-fig > span.pr12-opt-alt{
  text-transform:none;letter-spacing:0;font-weight:400;
  font-size:13px;color:rgba(246,241,234,.58);margin-top:10px;line-height:1.45;
}
.pr12-opt-fig em{
  display:inline-block;margin-top:10px;padding:4px 11px;
  border:1px solid rgba(178,132,121,.46);border-radius:999px;
  font-style:normal;font-size:11.5px;letter-spacing:.04em;
  color:var(--pr-accent);white-space:nowrap;
}

/* THE TERMS, ATTACHED TO THE SERVICE THEY BELONG TO.

   They were a "before you ask" band of their own at the bottom of the
   page, which put the answer three services away from the question.
   A reader wondering when they pay for planning is looking at the
   planning price, not scrolling past two other services to find a
   two-column list where every line starts with the name of a service
   -- a list that only needed those names because it had been moved
   away from them.

   Under each service's options instead, quiet, in the same column as
   the list above it. */
.pr12-svc-terms{
  margin:0;padding:18px 0 0;
  font-family:'Questrial',sans-serif;
  font-size:13.5px;line-height:1.65;color:rgba(246,241,234,.52);
  max-width:86ch;
}
.pr12-svc-terms b{color:rgba(246,241,234,.72);font-weight:400}

/* =========================================================================
   OPTION B — THREE CARDS, REBUILT.

   Keeps the comparison, which is the one thing the column format was
   good for, and fixes what it was bad at: a card can hold more than one
   price now, so quarterly planning and the software setup have
   somewhere to live.

   Equal heights come from the grid; the list takes the slack with
   margin-top:auto so three cards of different copy lengths still put
   their links on one line.
   ========================================================================= */
.pr12-cards{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:0;margin:50px 0 0;
  border-top:1px solid var(--pr-rule);
  border-left:1px solid var(--pr-rule);
}
.pr12-card{
  display:flex;flex-direction:column;
  padding:34px 30px 32px;
  border-right:1px solid var(--pr-rule);
  border-bottom:1px solid var(--pr-rule);
  background:rgba(246,241,234,.022);
  transition:background-color .2s ease;
}
.pr12-card:hover{background:rgba(246,241,234,.045)}
.pr12-card-n{
  display:block;
  font-family:'League Spartan',sans-serif;font-weight:700;
  font-size:12px;letter-spacing:.14em;color:var(--pr-accent);margin:0 0 12px;
}
.pr12-card h3{
  margin:0 0 10px;
  font-family:'League Spartan',sans-serif;font-weight:700;
  font-size:clamp(21px,1.7vw,25px);line-height:1.05;letter-spacing:-.03em;
  text-transform:lowercase;color:var(--pr-cream);
}
.pr12-card-for{
  margin:0 0 24px;
  font-family:'Questrial',sans-serif;
  font-size:14.5px;line-height:1.55;color:rgba(246,241,234,.62);
}
.pr12-card-prices{margin:0 0 24px;padding:22px 0 0;border-top:1px solid var(--pr-rule)}
.pr12-card-price + .pr12-card-price{
  margin-top:18px;padding-top:18px;border-top:1px solid rgba(246,241,234,.06);
}
.pr12-card-price b{
  display:block;
  font-family:'League Spartan',sans-serif;font-weight:700;
  font-size:38px;line-height:1;letter-spacing:-.035em;color:var(--pr-ink);
}
.pr12-card-price b.is-words{font-size:26px;letter-spacing:-.02em}
.pr12-card-price > span{
  display:block;margin-top:7px;
  font-family:'Questrial',sans-serif;font-weight:700;
  font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(246,241,234,.56);
}
.pr12-card-price > span.pr12-card-note{
  text-transform:none;letter-spacing:0;font-weight:400;
  font-size:13px;color:rgba(246,241,234,.58);margin-top:9px;
}
.pr12-card .pr12-gets li{font-size:14px;padding:12px 0 12px 22px}
.pr12-card .pr12-gets li::before{top:19px;width:8px}
.pr12-card .pr12-gets li:first-child::before{top:7px}
/* THE SLACK GOES UNDER THE LIST, NOT OVER IT. margin-top:auto on the
   list looked right until the automation card, which carries one price
   where the other two carry two -- the list was then pushed down to
   meet the tallest card's list and left a hole in the middle of its own.
   On the link instead, so the gap lands at the bottom of the card where
   it reads as air rather than as something missing.

   Worth saying plainly: this is the column format's own problem showing
   through. Equal columns want equal content, and these three do not
   have it. */
.pr12-card .pr12-service-link{margin:24px 0 0;align-self:flex-start}
.pr12-card .pr12-gets{margin-bottom:auto}
.pr12-card .pr12-service-link{font-size:13.5px}

@media(max-width:1024px){
  .pr12-cards{grid-template-columns:1fr;border-left:0}
  .pr12-card{border-right:0}
  /* the price drops under the list rather than into a 250px column */
  .pr12-opt{grid-template-columns:1fr;gap:20px 0}
  .pr12-opt-fig{text-align:left}
  .pr12-opt-fig strong{font-size:36px}
}
@media(max-width:620px){
  /* one column of list items: two of them at 260px each is not a list,
     it is two columns of broken sentences */
  .pr12-opt ul{grid-template-columns:1fr;gap:8px 0}
  .pr12-svc-head{gap:10px}
}

/* -------------------------------- phone --------------------------------
   Written at the same time as the desktop rules rather than bolted on
   after. The automation page's hero is the argument for that: its stat
   bar was pinned to the hero's bottom edge on desktop and grew straight
   over the headline on a phone. */
@media(max-width:1024px){
  .pr12-service{grid-template-columns:1fr;gap:34px 0}
  /* the figure drops under its description rather than being squeezed
     into a 230px column beside it */
  .pr12-ledger-row{grid-template-columns:1fr;gap:18px 0;align-items:start}
  .pr12-ledger-fig{text-align:left}
  .pr12-ledger-fig strong{font-size:38px}
  .pr12-stack{grid-template-columns:1fr}
  .pr12-stack > div,
  .pr12-stack > div + div{padding:26px 0 0;border-left:0}
  .pr12-stack > div + div{border-top:1px solid var(--pr-rule)}
}
@media(max-width:760px){
  .pr12-hero{min-height:0;padding:118px var(--pr-inset) 56px}
  .pr12-hero h1{max-width:none}
  .pr12-band,.pr12-close{padding:76px 0}
  .pr12-terms{grid-template-columns:1fr;gap:34px 0}
  .pr12-ledger-fig strong{font-size:34px}
  .pr12-drivers{padding:18px 20px}
}

/* =========================================================================
   /pricing ON A PHONE.

   Her block, with three changes noted where they are made. The gutter
   is the big one: 44px of inset either side of a 390px screen left the
   cards 302px wide, which is what was breaking every price range and
   every included line onto an extra row.
   ========================================================================= */
@media(max-width:1024px){
  .pr12{--pr-inset:32px}
}

@media(max-width:640px){
  .pr12{--pr-inset:20px}

  /* ------------------------------- the hero -------------------------------
     112px, the blog masthead's phone number, and the hero keeps the
     44px gutter while the cards below drop to 20. */
  /* 80 at the foot, not 48, and the band above THE NUMBERS comes down
     from 80 to 24. The gap between the headline and the first line of
     the section was 128px of which only 48 was picture -- the rest was
     flat ground. It is 104 now and 80 of it is the photograph, so the
     hero is taller and the empty margin is most of what went.

     padding-top is untouched, so the eyebrow still starts at 110. */
  .pr12-hero{padding:128px var(--pr-hero-inset) 80px}
  .pr12-hero + .pr12-band{padding-top:24px}
  /* the blog masthead's phone scale too. At 11vw the headline needed
     350px of line and the hero now gives it 302. */
  .pr12-hero h1{margin-bottom:16px}
  .pr12-hero p{font-size:16px;line-height:1.5;margin-bottom:24px}

  /* THE GOLD BARS, NOT THE SAND -- and a picture cut for this screen.

     The source is 1942x809, a wide desert with the bars right of
     centre. A 390px-wide `cover` crop of that lands on empty ground,
     which is why the hero read as a beach. Nudging background-position
     got one bar clipping the right edge; the bars are simply not in a
     390x470 window of a 2.4:1 frame wherever you put it.

     So the phone gets its own file, cut at build time around the bars.
     It is also 18KB in AVIF against 223KB for the desktop JPEG the
     phone was downloading and mostly discarding.

     image-set rather than a picture element, because this is a
     background: AVIF, then WebP, then JPEG for anything that supports
     neither, and a plain url() first for anything that does not know
     image-set at all. */
  .pr12-hero::before{
    background-image:url('/assets/images/pricing-hero-gold-mobile-880.jpg');
    background-image:image-set(
      url('/assets/images/pricing-hero-gold-mobile-880.avif') type("image/avif"),
      url('/assets/images/pricing-hero-gold-mobile-880.webp') type("image/webp"),
      url('/assets/images/pricing-hero-gold-mobile-880.jpg')  type("image/jpeg"));
    /* THE BARS STAND ON THE HERO'S BOTTOM EDGE.

       `center bottom` was the wrong end of the travel. The plate is
       880x1061 -- PORTRAIT -- against a 440x332 hero, so cover fits it
       by WIDTH and renders 440x531 with 199px of vertical slack. At
       100% the window shows the bottom of the plate, where the bars sit
       near the TOP of what is left: measured, they ended at y175 of 332
       with 157px of empty sand under them.

       26% moved the window up the plate instead, which brings the bars
       DOWN the screen to stand on the line where the next section
       begins. 14% now the hero is 364 tall rather than 332: a taller
       box leaves less slack (167px against 199), so the same landing
       point needs a smaller share of it. */
    background-position:50% 14%;
    background-size:cover;
  }

  /* NO POOL HERE EITHER. Centring it under the words was an attempt to
     rescue a device that does not work on this picture: on a 390px
     frame the ellipse covers most of the hero, so the gold it exists
     to sit beside is the thing it dims. Vertical scrim only, with the
     bottom stop kept because the phone hero closes straight into the
     dark band. */
  /* A POOL BEHIND THE COPY. The vertical scrim alone is transparent from
     about 55% down, which is exactly where the headline and the two
     lines under it sit -- so on a phone the type was set straight onto
     the lit face of the gold with nothing behind it. The ellipse is
     shaped to the copy block, not the hero, so the bars are still lit
     either side of it. */
  .pr12-hero::after{
    background:
      radial-gradient(ellipse 92% 42% at 50% 58%,
        rgba(15,13,12,.74) 0%, rgba(15,13,12,.56) 52%,
        rgba(15,13,12,.2) 84%, rgba(15,13,12,0) 100%),
      linear-gradient(180deg,
        rgba(15,13,12,.92) 0%, rgba(15,13,12,.34) 26%,
        rgba(15,13,12,0) 62%, rgba(23,20,19,.9) 100%);
  }

  /* ------------------------------ the bands ------------------------------ */
  .pr12-band{padding:48px 0 56px}
  /* the label and the currency note stack rather than sitting on one
     line where the note wrapped under its own label */
  .pc-intro{
    display:flex;flex-direction:column;gap:6px;
    margin-bottom:20px;
  }

  /* ======================= A PRICE LIST, NOT THREE CARDS =======================

     The desktop page is three bordered panels side by side, and stacking
     them put three boxes in a column on a screen 350px wide -- 40px of
     that is card padding, and the border, the background and the gap
     between them are all doing work that only makes sense when things
     sit BESIDE each other. Down a phone they read as three separate
     documents.

     One list instead: no boxes, no backgrounds, no side borders, one
     rule between services, and the services themselves 32px apart.

     AND THE ORDER CHANGES. The desktop card is two columns -- the
     description on the left, the price on the right -- so stacked it
     came out as name, outcome, inclusions, link, and THEN the price.
     A pricing page that makes you read the whole product description
     before it tells you the number is a brochure.

     display:contents on the two wrapper divs is what makes that
     possible without touching the markup: their children become flex
     items of the card, and `order` puts them in the sequence a phone
     should read them in. */
  /* ONE AT A TIME. The list made the chrome disappear and left the
     information: three services, eleven pieces each, thirty-three down
     one column. They are not three tiers of one product to be weighed
     against each other -- they are three unrelated things with three
     different price shapes -- so the page shows one and switches.

     The service that is not on screen is display:none, which takes it
     out of the accessibility tree as well: the switch is a real
     tablist and a screen reader gets the same one-at-a-time view. */
  .pc-switch{
    display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
    gap:6px;margin:0 0 26px;
  }
  .pc-switch button{
    padding:12px 4px;cursor:pointer;
    background:none;border:1px solid rgba(246,241,234,.16);
    font-family:'Questrial',sans-serif;font-size:12.5px;font-weight:700;
    letter-spacing:.02em;color:rgba(246,241,234,.62);
    transition:color .18s ease,background-color .18s ease,border-color .18s ease;
  }
  .pc-switch button[aria-selected="true"]{
    background:var(--pr-cream);border-color:var(--pr-cream);color:var(--pr-ground-dark);
  }
  .pc-switch button:focus-visible{outline:2px solid var(--pr-accent);outline-offset:3px}

  .pc-cards{gap:0;border-top:0}
  .pc-card{display:none}
  .pc-card.is-on{
    display:flex;flex-wrap:wrap;align-items:baseline;
    column-gap:12px;row-gap:0;
    padding:0;
    border:0;
    background:transparent;
    transform:none;
  }
  /* no hover movement on a touch screen -- it fires on tap and stays */
  .pc-card:hover{transform:none;background:transparent;border-color:transparent}
  .pc-card > div{display:contents}

  /* 1. NO NUMBER AT ALL. It indexed a list of three; with the switch
     above naming all three and one of them on screen, "01" is a label
     for a list that is no longer there. The mock-up did not have it and
     the shipped page read busier than the mock for exactly this kind of
     leftover. The tab that is lit says which service you are looking
     at. */
  .pc-n{display:none}
  .pc-card h2{
    flex:0 0 auto;order:2;margin:0;
    font-size:28px;line-height:1.05;
  }
  /* 2. THE OUTCOME AND WHAT IS INCLUDED, AS ONE BLOCK. The inclusions
     line used to sit below the prices, five items down the card, which
     put a sentence about what you get a long way from the sentence
     about what it is for. They are the same thought -- what this
     service is -- so they run together under the heading and the price
     block starts after both of them. */
  .pc-outcome{
    flex:0 0 100%;order:3;margin:10px 0 0;
    font-size:15.5px;line-height:1.5;
  }
  .pc-included{
    flex:0 0 100%;order:4;margin:6px 0 0;
    font-size:13.5px;line-height:1.55;color:rgba(246,241,234,.6);
  }
  /* 3. TWO TIERS, SIDE BY SIDE. The decision this card is actually
     asking is pay-once or pay-monthly, so the two prices get equal
     billing in a pair of boxes and everything else falls away. Stacked
     under one another as six rows of near-identical weight, that
     question was not being asked at all -- it was being listed.

     A grid, not flex: two equal columns whatever the figures are, so
     "$3,360" and "$336" occupy the same width and the pair reads as one
     control rather than as a big thing and a small thing. */
  .pc-tiers{
    flex:0 0 100%;order:5;margin:22px 0 0;
    display:grid;grid-template-columns:1fr 1fr;gap:10px;
  }
  /* automation has no second price -- one tier takes the row rather
     than leaving an empty box beside it */
  .pc-tiers--one{grid-template-columns:1fr}
  .pc-tier,
  .pc-tier + .pc-tier{
    margin:0;padding:16px 14px;
    border:1px solid rgba(246,241,234,.10);
    background:rgba(246,241,234,.022);
  }
  /* the lead tier is the one being recommended, and its border says so
     without a badge */
  .pc-tier--lead{border-color:color-mix(in srgb, var(--pc-accent) 45%, transparent)}
  .pc-tier-k,
  .pc-tier:not(.pc-tier--lead) .pc-tier-k{
    margin:0 0 8px;font-size:10.5px;letter-spacing:.16em;
    color:rgba(246,241,234,.55);
  }
  .pc-tier-v,
  .pc-tier:not(.pc-tier--lead) .pc-tier-v{
    font-size:27px;line-height:1;letter-spacing:-.03em;
    color:var(--pr-cream);
  }
  .pc-tier--lead .pc-tier-v{color:var(--pc-accent)}
  .pc-tier-n,
  .pc-tier:not(.pc-tier--lead) .pc-tier-n{
    margin-top:7px;font-size:12.5px;line-height:1.4;
    color:rgba(246,241,234,.6);
  }
  /* the saving sits under the figure it belongs to, inside its box --
     no pill, no border, just the accent */
  .pc-save{
    display:block;width:auto;
    margin:8px 0 0;padding:0;border:0;border-radius:0;
    font-size:12px;line-height:1.3;
  }
  /* 4. THE THIRD PRICE, AND NO RULE ABOVE IT. The border was separating
     the headline figure from four rows of near-identical weight
     underneath it -- with the two tiers now in boxes of their own and
     the inclusions line moved up to the heading, there is one quiet
     line left down here and nothing to separate it from. The card is
     down to a single rule, above the footer, which is the one doing
     work. */
  .pc-alt{
    flex:0 0 100%;order:7;margin:18px 0 0;
    padding-top:0;border-top:0;
    font-size:13.5px;color:rgba(246,241,234,.7);
  }

  /* 7. ONE FOOTER ROW. The service link takes the slack so the
     disclosure is pushed to the right edge:

         how planning works ->                    billing details +

     Both carry the same top rule, which meets in the middle and reads
     as one line. [open] drops the disclosure to its own full-width row
     so its paragraph is not trying to set in a 130px column. */
  /* align-self:flex-start ON BOTH. The card is align-items:baseline,
     which shifts each item vertically until its TEXT baselines line up
     -- and these two have different text sizes, so their boxes landed
     at different heights and the rule above them broke into two
     stripes at two levels. Aligning the boxes rather than the baselines
     is what makes the line continuous. */
  .pc-cta{
    flex:1 1 auto;order:8;align-self:flex-start;
    margin:22px 0 0;padding-top:16px;
    border-top:1px solid rgba(246,241,234,.12);
    /* AND NO UNDERLINE. The link stretches to fill the row, so its
       bottom border drew a second full-width rule 20px under the first
       one -- two hairlines bracketing one line of text. The arrow marks
       it as a link. */
    border-bottom:0;
    min-height:44px;align-items:center;
  }
  .pc-details{
    flex:0 0 auto;order:9;align-self:flex-start;
    /* -12 left margin with 12 of padding back: the row's column-gap
       would otherwise leave a 12px break in the middle of the rule, so
       the box reaches across it while the text stays put. */
    margin:22px 0 0 -12px;padding-top:16px;padding-left:12px;
    border-top:1px solid rgba(246,241,234,.12);
    /* 44 TALL, BUT NOT display:flex. The 44 used to live on the summary,
       which stacked on top of this box's 16px of padding and dropped
       the label 8px below the link beside it -- so the height moved
       here. It moved here as `display:flex`, which was the wrong way to
       do it: flex on a <details> defeats the hiding of its closed
       content, and the billing paragraph laid out inside the 109px
       closed box and spilled 36px past the right edge of the screen.

       The height stays here and the CENTRING goes on the summary
       instead: 16px of padding plus a 28px summary is the same 44, and
       28 centred matches .pc-cta's own 44-minus-16 content box. */
    min-height:44px;
  }
  .pc-details[open]{flex:0 0 100%;border-top-color:transparent;padding-top:0;margin-top:0}
  .pc-details summary{
    display:flex;align-items:center;
    min-height:28px;margin:0;padding:0;
    font-size:12.5px;letter-spacing:.04em;text-transform:none;
  }
  /* open, the summary carries the full tap target again -- the box below
     it is a paragraph now, not a 28px strip */
  .pc-details[open] summary{min-height:44px}

  /* ---------------------- FEWER THINGS ON THE CARD ----------------------
     Three cards stacked on a 390px screen, each carrying a numeral, a
     small numeral, a heading, an outcome, an inclusions line, a link, a
     pill, a price, a saving pill, a monthly alternative, a second
     alternative and a disclosure row. Nothing here is wrong; there is
     just too much of it in one column, and on the third card the giant
     ghost numeral was sitting on top of BILLING & DETAILS.

     Three things go, none of them words:

     1. THE GHOST NUMERAL. It is a 112px figure at 4% opacity behind
        live text -- legible enough to be noise, faint enough to be
        nothing. .pc-n already numbers the card in the corner where a
        reader looks for it.
     2. THE SECOND PILL. .pc-save under .pc-pill put two rounded
        outlines within 60px of each other and neither read as special.
        The saving becomes a line of accent text; the ONE-TIME pill
        stays the only pill on the card.
     3. HALF THE GAPS. The vertical rhythm was built for a three-across
        row where each card is short. Stacked, the same spacing is what
        makes the page feel like it never ends. */
  .pc-ghost{display:none}

  .pc-finder-call{min-height:44px;align-items:center}

  /* ---------------------- THE CLOSE, ON ITS OWN GROUND ----------------------
     No box around it -- every other box on this page has come off, and
     one here would read as a fourth service. But on a phone it sat on
     the same colour as the prices above it with only white space
     between, so the page ran from THE NUMBERS to the button as one
     undifferentiated column.

     A full-bleed band of the darker ground does the separating instead
     of a border: it is the same move the hero and the footer already
     make, so the page ends on a colour it has used twice before. */
  .pc-finder{
    display:block;
    /* -56 at the foot is the band's own bottom padding, pulled back so
       this ground runs to the section edge rather than stopping short
       of it with a strip of the lighter colour underneath */
    margin:56px calc(-1 * var(--pr-inset)) -56px;
    padding:44px var(--pr-inset) 52px;
    gap:0;border:0;
    background:var(--pr-ground-dark);
    border-top:1px solid rgba(246,241,234,.07);
  }
  .pc-finder > div:first-child{margin-bottom:22px}
  /* The pair's layout is mobile-n12.css's job now -- it carries the
     site-wide standard for a primary and a secondary on a phone, keyed
     to what the home page does, and it uses !important so a local
     column rule here would only be noise. */
  .pc-finder-actions{justify-content:flex-start}

  /* --------------------------- the finder sheet ---------------------------
     A desktop-style floating dialog holding seven checkboxes and three
     recommendation cards, on a phone. Full screen, with its own scroll. */
  .sf{
    width:100vw;max-width:none;
    height:100dvh;max-height:100dvh;
    margin:0;border:0;border-radius:0;
    overflow-y:auto;
  }
  .sf-shell{padding:64px 20px 32px}
  .sf-close{
    position:sticky;top:10px;
    margin-left:auto;
    width:44px;height:44px;
    z-index:2;
  }
  .sf-layout{gap:32px}
  .sf-struggles input{width:20px;height:20px}
}


/* =========================================================================
   THE PHONE'S VERSION OF THE PAGE'S TWO ENDS

   Two changes, both about a 440px screen having no room for anything
   that is not load-bearing.

   THE LABEL GOES. "the numbers" sat above the first card as a section
   heading, on a page whose hero already says what the page is and whose
   cards already label themselves. On a phone it is a line of tracked
   uppercase between the hero and the first price, and the only thing
   under it is the currency note -- which is the part worth keeping.

   THE CLOSE BECOMES ONE BUTTON. The finder panel closed the page with a
   heading, a sentence and two actions. On a phone that is four stacked
   blocks of chrome after a reader has already been through three
   prices, and the choice it offers -- "work it out yourself" or "ask
   us" -- is a choice for someone still deciding, not someone at the
   bottom. What is left is the ask, as the site's primary CTA: solid
   cream, League Spartan 14.5/700, the same face the home and planning
   pages use, full width and 48 tall.

   The finder itself is untouched on desktop, and the tool is still
   reachable from the hero on every width.
   ========================================================================= */
@media(max-width:700px){
  /* "Planning is per engagement. Software per user. Automation per
     project." -- three more lines under the headline saying what the
     three cards below say with their own numbers. The first sentence
     stays, because it is the one that tells a reader they do not have
     to buy all three. */
  .pr12-hero-detail{display:none}

  .pc-intro > span{display:none}
  /* the currency note is the whole line now, so it stops being a
     trailing clause and starts at the gutter */
  .pc-intro{margin-bottom:26px}

  /* the heading, the sentence and the outlined tool button */
  .pc-finder > div:not(.pc-finder-actions){display:none}
  /* !important, and not by preference: mobile-n12.css sets
     display:inline-flex !important on .pc-finder-actions button as part
     of standardising every CTA row on the site, and a plain display:none
     loses to it -- the button was still on the page. */
  .pc-finder button[data-open-finder]{display:none !important}

  /* the panel stops being a panel: no border, no ground, no padding --
     a bordered box around a single button is a box for nothing */
  .pc-finder{
    display:block;
    margin:26px 0 0;padding:0;
    border:0;background:none;
  }
  /* The BUTTON's own face is not set here. mobile-n12.css owns the CTA
     faces for the whole site at this width and sets them !important, so
     anything written here would either lose to it or have to shout over
     it -- and then pricing's close would drift from every other page's
     the next time that block changed. .pc-finder-call has been moved in
     that file from the secondary list to the primary one, which is what
     makes it the solid cream button. All that is left here is where the
     row sits. */
  .pc-finder-actions{width:100%;justify-content:center}
}