/* ========================================================================== Indore — pricing.css Loads after base.css. Nothing here belongs to any other page. The page is four grounds stacked: .phead plum the title and the two plans — the homepage's own pricing section, given a whole page to breathe in .credits white the three kinds of credit, as three .panel cards .earn surface the earned credit, the one that can only be given .fine white buying, one account, refunds ========================================================================== */ /* --- sticky nav ---------------------------------------------------------- This page has no hero, so .snav carries .is-visible in the markup. Four links is one more than the homepage carries, so the run tightens on a phone and Help steps out below 600 — it is in the footer either way. */ @media (max-width:599px){ .snav ul{gap:16px} .snav a{font-size:15px} .snav__opt{display:none} } /* ========================================================================== 01 — THE PLANS The homepage's pricing section, same plum ground, same row shape, with the heading promoted to the page's h1. ========================================================================== */ .phead{background:var(--plum);color:var(--white);padding:104px 0 72px} .phead__top{display:flex;flex-direction:column;gap:24px} .phead__top h1{font-size:clamp(52px,8.889vw,139px);color:var(--white)} .phead__top p{font-size:18px;color:var(--white70);max-width:52ch} .plans{margin-top:40px;border-top:1px solid var(--hair-light)} .plan{display:grid;grid-template-columns:1fr;gap:16px;padding:28px 0; border-bottom:1px solid var(--hair-light)} .plan__name{font-size:clamp(34px,3.333vw,52px);color:var(--white)} .plan__desc{font-size:18px;color:var(--white70)} .plan__price{font-size:18px;color:var(--white70)} .phead__foot{margin-top:40px;font-size:16px;color:var(--white70);max-width:56ch} @media (min-width:900px){ .phead{padding:160px 0 128px} .phead__top{gap:36px} .plans{margin-top:56px} .plan{grid-template-columns:minmax(0,340fr) minmax(0,520fr) auto auto; align-items:center;gap:40px;padding:32px 0} .phead__foot{margin-top:56px} } @media (max-width:899px){ .plan .btn{justify-self:stretch;width:100%} } /* ========================================================================== 02 — THREE KINDS OF CREDIT The page's one real explaining job. Three .panel cards, because the panel already reads as a label/value table and, unlike a table, it restacks on a phone instead of overflowing. Same four rows in the same order in all three, so the two Yes/No columns can be read straight down the set. ========================================================================== */ .credits{background:var(--white);padding:72px 0} .credits__head{display:flex;flex-direction:column;gap:20px;max-width:var(--measure)} .credits__head h2{font-size:clamp(30px,3.2vw,46px)} .credits__head p{font-size:18px;color:var(--plum70)} .cgrid{margin-top:40px;display:grid;grid-template-columns:1fr;gap:20px} /* the panel is capped at 440px by base.css; here each one fills its column. The grid stretches all three to the same height, and the rows are pushed to the foot of the card, so the four Yes/No lines sit on the same baselines across the set however many lines each note runs to. */ .cgrid .panel{max-width:none;display:flex;flex-direction:column} .cgrid .panel__rows{margin-top:auto;padding-top:14px} .credits__rule{margin-top:36px;font-size:18px;color:var(--plum70);max-width:var(--measure)} @media (min-width:700px){ .cgrid{grid-template-columns:repeat(2,minmax(0,1fr))} } @media (min-width:1000px){ .credits{padding:128px 0} .cgrid{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:56px} .credits__rule{margin-top:48px} } /* ========================================================================== 03 — THE EARNED CREDIT The most interesting thing in the model, so it gets a ground of its own and a set of metric cards doing the arithmetic in the app's own register. ========================================================================== */ .earn{background:var(--surface);padding:72px 0} .earn__in{display:flex;flex-direction:column;gap:36px} .earn__copy{max-width:var(--measure)} .earn__copy h2{font-size:clamp(30px,3.2vw,46px)} .earn__copy p{margin-top:20px;font-size:18px;color:var(--plum70)} .earn__cards{display:flex;flex-wrap:wrap;gap:12px} .earn__cards .mc{flex:1 1 150px;min-width:0} @media (min-width:1000px){ .earn{padding:128px 0} .earn__in{flex-direction:row;align-items:flex-start;justify-content:space-between;gap:80px} .earn__copy{flex:1 1 auto} .earn__cards{flex:0 0 232px;flex-direction:column;flex-wrap:nowrap;gap:16px} .earn__cards .mc{flex:0 0 auto} } /* ========================================================================== 04 — THE SMALL PRINT Three short columns: where the money changes hands, what one account buys you, and the refunds line that points at its own page. ========================================================================== */ .fine{background:var(--white);padding:72px 0} .fgrid{display:grid;grid-template-columns:1fr;gap:40px} .fcol h2{font-size:22px} .fcol p{margin-top:14px;font-size:18px;color:var(--plum70)} .fcol a{color:var(--primary);text-decoration:underline;text-underline-offset:3px; text-decoration-thickness:1px;text-decoration-color:rgba(38,103,200,.4); display:inline-flex;align-items:center;min-height:44px} .fcol a:hover{color:#1d55ab;text-decoration-color:currentColor} .fine__note{margin-top:48px;padding-top:24px;border-top:1px solid var(--border); max-width:var(--measure)} @media (min-width:900px){ .fine{padding:112px 0 128px} .fgrid{grid-template-columns:repeat(3,minmax(0,1fr));gap:56px} .fine__note{margin-top:72px} } /* --- focus --------------------------------------------------------------- base.css rings in white, which is right over the plum ground but invisible on this page's white sections. Turn it primary everywhere that is white. */ .credits :focus-visible, .fine :focus-visible, .snav :focus-visible, .footer :focus-visible{outline-color:var(--primary)} .earn :focus-visible{outline-color:var(--primary)}