/* PRICING — the page is a document open in the editor. body.landing-page
   carries the whole grammar (papyrus sheet, .doc-sec heads, .paper-btn, the
   manuscript type, the closer), so this file owns only what a pricing page
   has that the landing does not: a tier set as a section, and the comparison
   table.
   Scoped to body.pricing-page throughout. */

/* ---- NO RAILS. The landing reserves both of them out of <main> and <footer>
   for panels this page does not have, which would leave the column leaning
   36px left of centre and the footer with it. Hand the width back. ---- */
@media (min-width: 1180px) {
    body.pricing-page main,
    body.pricing-page footer { padding-left: 0; padding-right: 0; }
}
/* --fig-room is the gutter left after BOTH rails; with neither, the figures
   get the real distance to the trim. */
body.pricing-page { --fig-room: calc((100vw - 760px) / 2 - 14px); }

/* Hash targets. landing.css sets html { scroll-padding-top: 72px } to clear
   the fixed nav pill, and this page hides that nav, so a jump spent those
   72px on nothing and then added the section's own 56px of padding: the
   heading landed 152px down with an empty screen above it. The negative
   margin pays the 72 back and the remainder is the gap we actually want.
   Same move landing.css makes for its own nav-target sections. */
body.pricing-page .doc-sec,
body.pricing-page .tier-sheet { scroll-margin-top: calc(var(--space-12) - var(--space-22)); }

/* ---- THE TITLE BLOCK SITS CLOSER TO §1 THAN SECTIONS SIT TO EACH OTHER.
   The whole page is one continuous sheet, so the "hero" is not a band, it is
   this document's title block, and 104px between its last line and the first
   section head is a section-to-section gap doing a title-to-section job.
   Measured, this is also what a pricing page owes the reader: with the old
   gap, the section lead and the hero CTA row, the first screen of a 1280x800
   laptop held one price, $0, and both paid tiers sat 200px under the fold.
   Now $20 and $60 are above it on every viewport from 390 up. ---- */
body.pricing-page .paper-hero { padding-bottom: var(--space-6); }
body.pricing-page #plans { padding-top: var(--space-7); }
/* The abstract's 40px is the gap to the hero CTA row, which this page no
   longer has. Held, it was 40px of paper under the last line of the title
   block separating it from nothing. */
body.pricing-page .paper-hero-abstract { margin-bottom: 0; }


/* ============================================================
   A TIER IS A SHEET — the same object the account panel's Plan tab is built
   from (the "PLAN SHEETS" block in account.css), so a plan reads the same
   whether you are choosing one or already paying for it. The paper's own
   lighter stock on the papyrus, opening on a brick label with the price as
   its headline.

   Free takes the width and reads ACROSS: price and CTA hold a left column,
   the terms take the rest. Stacked, the same content spends 90px of height
   on a headline with the paper empty beside it. The two paid tiers sit
   abreast under it. No tier is singled out: the plate, the brick margin rule
   and the brick title that marked Plus are all gone (owner, 2026-08-09), and
   the comparison's Plus column with them.
   ============================================================ */
.tier-sheet {
    display: flex;
    flex-direction: column;
    background: var(--doc-bg-light);
    border: 1px solid var(--doc-border);
    border-radius: 3px;
    box-shadow: var(--doc-shadow);
    padding: var(--space-10) var(--space-11) var(--space-11);
    min-width: 0;
}
.tier-sheet--split {
    display: grid;
    grid-template-columns: minmax(0, 250px) minmax(0, 1fr);
    gap: 0 var(--space-11);
    margin-bottom: var(--space-5);
}
.tier-sheet--split .tier-body {
    border-left: 1px solid var(--doc-border);
    padding-left: var(--space-11);
}
.tier-row { display: flex; gap: var(--space-7); align-items: stretch; }
.tier-row .tier-sheet { flex: 1; }
.tier-body { display: flex; flex-direction: column; min-width: 0; }
/* Stacked (the two paid sheets), the terms are divided from the price by the
   same hairline the split sheet puts between its columns. */
.tier-sheet:not(.tier-sheet--split) .tier-body {
    border-top: 1px solid var(--doc-border);
    margin-top: var(--space-9);
    padding-top: var(--space-9);
    flex: 1;
}

.tier-label {
    font: var(--font-eyebrow);
    text-transform: uppercase;
    letter-spacing: var(--track-eyebrow);
    color: var(--doc-accent);
    margin-bottom: var(--space-4);
}
.tier-price {
    /* The sheet's headline, one step under the section title above it
       (clamp(23px, .95vw + 19px, 34px) in landing.css). Set lighter than the
       heading, because a price at the same weight reads as a second title. */
    font: 300 clamp(34px, 1.6vw + 26px, 46px)/1.1 var(--serif);
    letter-spacing: -0.022em;
    color: var(--td1);
    font-variant-numeric: tabular-nums;
    /* A price has to be readable as one token: held on one line, the column
       claims its min-content and the terms absorb the pressure by wrapping,
       which is the right way round. */
    white-space: nowrap;
}
.tier-price span {
    font: 400 13px var(--sans);
    color: var(--td3);
    margin-left: 3px;
    letter-spacing: 0;
}
/* "Everything in Free, and": the same rule the panel states, so a term is
   introduced exactly once on the way up. */
.tier-sub {
    font: 400 15px var(--sans);
    color: var(--td3);
    margin-bottom: var(--space-6);
}

/* The list is the whole of a tier's body, and it is the PAPER'S PROSE: it
   used to be 15.5px sans, the app's own canvas type, which under a big price
   reads as a caption of the tier rather than as the tier. One column: a list
   in a document runs down the page. It sits a notch under the page's own
   paragraph, the call §5 makes on the landing, because a list of
   capabilities is scanned in a grid and not read as prose. */
.tier-grid {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    margin: 0;
    padding: 0;
    list-style: none;
    font: 400 clamp(16px, 0.3vw + 14px, 18px)/1.5 var(--serif);
    color: var(--td2);
}
.tier-sheet--split .tier-grid { gap: var(--space-4); }
/* The tick is §5's, drawn rather than set: two borders on a 11x6 box turned
   -45deg (#anywhere .facts li::before), the same mark the account panel's
   sheets carry. Only the vertical offset is retuned per line box. */
.tier-grid li { position: relative; padding-left: var(--space-11); }
.tier-grid li::before {
    content: '';
    position: absolute;
    left: 0; top: 0.55em;
    width: 11px; height: 6px;
    border-left: 1.8px solid var(--doc-accent);
    border-bottom: 1.8px solid var(--doc-accent);
    transform: rotate(-45deg);
}
/* The paid sheets put their pill at their own foot, so the two sit on one
   line whatever each list wraps to. Free's rides in the left column. */
.tier-cta { display: flex; align-items: center; gap: var(--space-9); flex-wrap: wrap; }
.tier-body > .tier-cta { margin-top: auto; padding-top: var(--space-11); }
.tier-cta--span { grid-column: 1 / -1; margin-top: var(--space-9); }

/* The one aside on the page, in the citation family's own pen: the looped
   curl from the auth pages, mirrored so its head comes back at the button,
   with the same italic serif note under it. Only Free carries one, because
   only Free has something to say that the price does not. */
.tier-aside {
    display: inline-flex;
    align-items: center;
    color: var(--doc-accent);
    pointer-events: none;
}
/* The auth page draws this at 130px and it reads as a pen stroke; at 66 the
   loop closed up into a squiggle. Mirrored so the head comes back at the
   button, and pulled left so the stroke starts at the pill's own edge rather
   than a gap away from it. */
.tier-curl {
    width: 104px; height: 61px;
    flex: none;
    opacity: 0.85;
    /* scaleX(-1) negates the rotation, so the head's visual bearing is
       119deg + this value; 48 puts it at ~167, coming back at the pill almost
       level rather than sailing over it. */
    transform: scaleX(-1) rotate(48deg);
    margin: 0 0 0 calc(-1 * var(--space-6));
}
.tier-curl-note {
    font: italic 400 15.5px var(--serif);
    color: var(--doc-accent);
    transform: rotate(-3deg);
    white-space: nowrap;
}


/* ============================================================
   THE COMPARISON — a table in a manuscript, so the feature column is PROSE
   (the document's serif) and only the plan cells are data.
   ============================================================ */
.ctable {
    width: 100%;
    border-collapse: collapse;
    margin-top: var(--space-15);
}
/* .doc-fig-wide is a plain 0-1-0 rule in landing.css and this file loads
   after it, so a bare `width: 100%` above would silently eat the bleed and
   slide the table left instead of growing it. */
.ctable.doc-fig-wide { width: calc(100% + 2 * var(--fig-bleed)); }
.ctable th,
.ctable td {
    padding: var(--space-7) var(--space-9);
    text-align: center;
    border-bottom: 1px solid var(--doc-border);
}
/* Cell padding is right between columns and wrong on the outer edges. */
.ctable th:first-child,
.ctable td:first-child { padding-left: 0; text-align: left; }
.ctable th:last-child,
.ctable td:last-child { padding-right: 0; }
.ctable thead th {
    padding-top: 0;
    vertical-align: bottom;
    border-bottom: 1px solid var(--doc-border-strong);
}
.c-feat {
    /* The SAME cut the tiers above are set in (landing.css's
       .doc-sec > .section-block .section-body): these are the same sentences,
       and "Research the web and academic papers" was 21px in 1.1 and 16px
       here, a 31% gap on identical strings. It stops a notch UNDER the
       paragraph rather than matching it, which is the same call §5's fact
       list makes on the landing (19 on a laptop): a list of capabilities is
       scanned in a grid, not read as prose. Leading tighter for the same
       reason, a table row is one line and not a paragraph. */
    font: 400 clamp(17px, 0.4vw + 15px, 19px)/1.45 var(--serif);
    color: var(--td2);
    /* The plan columns carry an 11px tick and at most "3x Plus", so 43% was
       width handed to columns that need almost none of it. 55% is what lets
       the feature column hold its longest row on ONE line at this size.
       Measured cost against the old 43%, 71px of table height. */
    width: 55%;
}
/* The column head carries the NAME only, and the price stays in §1: the
   sheets state it two hundred pixels above at 46px, and a third statement of
   the same three numbers on one screen is repetition, not emphasis.
   It ties to the sheets by TYPE instead, wearing their headline cut (the
   manuscript serif at 300), which is also the reason it is not the brick
   label the price sat over: `.c-group` is already brick uppercase tracked, so
   a labelled head and a row-group head would be the same object in the same
   clothes, and the head is the shorter of the two. Rhyming by type is also
   why the table is not itself drawn on a sheet: the stock means "a plan", one
   per plan, and a second kind of content wearing it turns the tier sheets
   from objects into wallpaper. */
.c-plan {
    /* 400, the weight the whole page is set in. A 300 was tried to echo the
       sheets' price and at 26px it reads as a different typeface: the light
       cut is a display weight, and it only holds up at the price's own size. */
    font: 400 26px/1.15 var(--serif);
    letter-spacing: var(--track-heading);
    color: var(--td1);
}
.c-group td {
    text-align: left;
    font: 600 11px var(--sans);
    letter-spacing: var(--track-eyebrow);
    text-transform: uppercase;
    color: var(--doc-accent);
    padding-top: var(--space-14);
    padding-bottom: var(--space-6);
    border-bottom: 1px solid var(--doc-border-strong);
}
.c-val {
    /* The row's answer, in the page's own face. Sans was defensible while the
       feature column was 16px and this was 15px; beside the manuscript's 21px
       serif it reads as a foreign object dropped into the row. Same cut as the
       column it answers, and the emphasis comes from ink rather than weight. */
    font: 400 clamp(17px, 0.4vw + 15px, 19px)/1.45 var(--serif);
    color: var(--td1);
    font-variant-numeric: tabular-nums;
    /* A value is the row's answer and has to be readable as one token: on a
       phone "3x Plus" and "10 GB" broke at their space into a 30px column.
       Held on one line, the value columns claim their min-content and the
       feature column absorbs the pressure by wrapping, which is the right way
       round. Checked: the table's min-content still clears a 390px screen. */
    white-space: nowrap;
}
/* Included is the SAME drawn tick the tiers use, so the page has one
   checkmark rather than a drawn one above and a font glyph below. Not-included
   is a drawn line, never a dash glyph (house style avoids em and en dashes). */
.c-yes {
    display: inline-block;
    width: 11px; height: 6px;
    border-left: 1.8px solid var(--doc-accent);
    border-bottom: 1.8px solid var(--doc-accent);
    transform: rotate(-45deg) translate(1px, -2px);
}
.c-no {
    display: inline-block;
    /* Height carries the visibility, hue carries the telling-apart: at --td3
       this sat in the brick tick's own value range, so absent and included
       read as two shades of one mark. Neutral border ink recedes to the paper. */
    width: 14px; height: 2px;
    border-radius: 1px;
    background: var(--doc-border-strong);
    vertical-align: middle;
}


/* ============================================================
   THE FAQ takes the column and sets left, like every other head here.
   The accordion itself is landing.css's.
   ============================================================ */
body.pricing-page .doc-sec .faq-list { max-width: none; width: 100%; }
body.pricing-page .doc-sec .faq-item { border-bottom-color: var(--doc-border); }
body.pricing-page .doc-sec .faq-item:first-child { border-top: 1px solid var(--doc-border); }
body.pricing-page .doc-sec .faq-item:hover { border-bottom-color: var(--doc-accent-border); }
body.pricing-page .doc-sec .faq-q { color: var(--td1); }
body.pricing-page .doc-sec .faq-q:hover { color: var(--doc-accent); }
body.pricing-page .doc-sec .faq-chev { color: var(--doc-accent); }
body.pricing-page .doc-sec .faq-a { color: var(--td2); }
body.pricing-page .doc-sec .faq-a a { color: var(--doc-accent); }


/* ============================================================
   ENTRANCE. Pure CSS, because this page does not load landing.js and the
   reveal system's .show would never arrive. A fade with no travel: the
   title block is at the top of the page, so nothing should slide into it.
   ============================================================ */
@keyframes pricing-in { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: no-preference) {
    /* Every block down to the first tier, in DOCUMENT ORDER and with no gaps.
       §1's head used to be left out, so the heading it belongs to snapped in
       while the hero above it and the tiers below it faded, which reads as the
       page skipping a beat rather than as a cascade. The run stops at the last
       tier: with no scroll observer on this page, anything below the fold
       would finish its animation long before it was ever on screen. */
    body.pricing-page .paper-hero-doc > *,
    body.pricing-page #plans .doc-sec-head,
    body.pricing-page .tier-sheet {
        opacity: 0;
        animation: pricing-in 620ms var(--ease) both;
    }
    body.pricing-page .doc-masthead        { animation-delay: 40ms; }
    body.pricing-page .paper-hero h1       { animation-delay: 110ms; }
    body.pricing-page .paper-hero-abstract { animation-delay: 180ms; }
    body.pricing-page #plans .doc-sec-head { animation-delay: 250ms; }
    body.pricing-page #tier-free { animation-delay: 320ms; }
    body.pricing-page #tier-plus { animation-delay: 390ms; }
    body.pricing-page #tier-pro  { animation-delay: 460ms; }
}


/* ============================================================
   NARROW.
   ============================================================ */
/* The pill, the 104px curl and the note come to ~382px, so on a phone the
   aside wraps to its own line and the arrow ends up pointing at nothing. The
   drawn mark is the part that needs the room, so it goes and the note stays:
   the auth pages retire their curl below 1150 for the same reason. */
@media (max-width: 720px) {
    .tier-curl { display: none; }
    .tier-curl-note { transform: none; }
    /* A 250px price column would leave the terms ~150px, and two sheets
       abreast ~160px each. Both go back to stacking, the same call the
       account panel's phone query makes. */
    .tier-sheet--split { display: flex; }
    .tier-sheet--split .tier-body {
        border-left: none;
        border-top: 1px solid var(--doc-border);
        padding-left: 0; padding-top: var(--space-9); margin-top: var(--space-9);
    }
    .tier-row { flex-direction: column; }
}
@media (max-width: 900px) {
    .ctable th, .ctable td { padding: var(--space-6) var(--space-4); }
    .c-feat { width: 52%; }
    /* "Limited" is the longest single word in a value cell and at 17px it
       needs the whole 61px the cell has, so it wrapped. One step down keeps
       it on its line, and the face stays the same, which is what matters. */
    .c-val { font-size: 15px; }
    .c-plan { font-size: 20px; }
}