/* tmp-power-levels.css — TEMPORARY. The "Choose your power level" comparison table, currently
   only on /logo-generator/. Delete this file and the block in that template when the real
   pricing component lands. Logged in .claude/launch-cleanup.md.

   EVERYTHING IS SCOPED TO .power-levels ON PURPOSE. The original was a standalone document, so
   it styled `body` and carried a `* { margin: 0; padding: 0 }` reset. Dropped into a live page
   that reset would strip the spacing off every paragraph, heading and list on it. So the reset
   is confined to the table's own subtree and the body rules moved onto the wrapper.

   THE ALIGNMENT FIX. Each column was an independent flex column, which meant nothing tied row N
   in one column to row N in the next: the tick cells render 59-64px tall (1.6rem glyphs) while
   the labels are 52px, so the two drifted a little further apart on every row — 74px out by the
   last one, labels no longer beside their own ticks.
   The columns now become `display: contents` on desktop, so their cells are placed directly in
   the parent grid and every cell in a row shares one row height automatically. The column
   wrappers stay in the markup, which is what lets the phone layout fold back to a plain stack. */

.power-levels {
    /* Tokens are scoped here rather than :root so they can't collide with the site's own.
       Blue + yellow are the brand's exact corporate values (#0000ff / #ffff00). Green is
       sampled from the dominant mid-green of the FREE header art so the header, the checkmark
       and the FREE button are all the same green. --pl-green-ink is a darkened version of it
       for green text, which needs more contrast on white than the bright fill. */
    --pl-black:     #111111;
    --pl-red:       #e6392b;
    --pl-yellow:    #ffff00;
    --pl-blue:      #0000ff;
    --pl-green:     #30a840;
    --pl-green-ink: #1d6827;
    --pl-amber-ink: #b45309;
    --pl-white:     #ffffff;
    --pl-cream:     #fff8e7;

    /* Rows 1-2 are the header and price; features start at row 3. */
    --pl-rows: 12;

    font-family: 'Comic Neue', 'Archivo', system-ui, sans-serif;
    color: var(--pl-black);
    background: var(--pl-cream);
    background-image: radial-gradient(circle, #00000018 1.5px, transparent 1.5px);
    background-size: 12px 12px;
    padding: clamp(28px, 4vw, 48px) clamp(14px, 2vw, 24px) clamp(40px, 5vw, 64px);
    border: 3px solid var(--pl-black);
    border-radius: 18px;
    margin: 2.5rem 0 1rem;
}

/* The reset, confined to this subtree. */
.power-levels *,
.power-levels *::before,
.power-levels *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

.power-levels__inner {
    max-width: 1200px;
    margin: 0 auto;
}

/* ---------- Titles ---------- */
.pl-title {
    font-family: 'Bangers', cursive;
    font-size: clamp(2.2rem, 5vw, 4rem);
    text-align: center;
    letter-spacing: 3px;
    color: var(--pl-red);
    text-shadow: 4px 4px 0 var(--pl-black), -2px -2px 0 var(--pl-black),
                 2px -2px 0 var(--pl-black), -2px 2px 0 var(--pl-black);
    margin-bottom: 12px;
    line-height: 1.1;
    transform: rotate(-1.5deg);
}
.pl-subtitle {
    font-family: 'Bangers', cursive;
    font-size: 1.3rem;
    text-align: center;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 36px;
}

/* ---------- The grid ---------- */
.pricing-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
    /* Full frame is the MOBILE default (cards need all four sides). Desktop notches out the
       top-left below. */
    border: 5px solid var(--pl-black);
    box-shadow: 8px 8px 0 var(--pl-black);
    /* Transparent, not white: every cell paints its own background, so the only place the grid
       itself shows is the empty top-left corner — and there we WANT the cream page to show
       through so the corner reads as "not a cell". */
    background: transparent;
    position: relative;
}

/* Desktop: the column wrappers dissolve so their cells land in the parent grid, and each cell
   is pinned to its own column and row. That pinning is what makes a row one row: the tallest
   cell sets the height and the other three follow it, however the text wraps. */
@media (min-width: 901px) {
    .col { display: contents; }

    .features  > * { grid-column: 1; }
    .free      > * { grid-column: 2; }
    .standard  > * { grid-column: 3; }
    .ultra     > * { grid-column: 4; }

    .col > *:nth-child(1)  { grid-row: 1; }
    .col > *:nth-child(2)  { grid-row: 2; }
    .col > *:nth-child(3)  { grid-row: 3; }
    .col > *:nth-child(4)  { grid-row: 4; }
    .col > *:nth-child(5)  { grid-row: 5; }
    .col > *:nth-child(6)  { grid-row: 6; }
    .col > *:nth-child(7)  { grid-row: 7; }
    .col > *:nth-child(8)  { grid-row: 8; }
    .col > *:nth-child(9)  { grid-row: 9; }
    .col > *:nth-child(10) { grid-row: 10; }
    .col > *:nth-child(11) { grid-row: 11; }
    .col > *:nth-child(12) { grid-row: 12; }

    /* The wrappers are gone, so the column rule rides on the cells instead. */
    .features > *,
    .free > *,
    .standard > * { border-right: 4px solid var(--pl-black); }
}

/* ---------- Header row ---------- */
.col-header {
    font-family: 'Bangers', cursive;
    font-size: 2.7rem;
    letter-spacing: 2px;
    text-align: center;
    padding: 22px 12px 18px;
    border-bottom: 4px solid var(--pl-black);
    position: relative;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    justify-content: center;
}
/* Painted burst strips, cover-cropped. The art is 1620x160 (10:1) but the desktop cell is only
   ~270x73 (3.7:1), so roughly the middle third is what shows — which is why these are textures
   radiating from the centre rather than compositions. On a phone the cell goes full width and
   nearly the whole strip is revealed.

   All three carry black text with a white halo. The blue strip in particular is very pale, so
   the white-on-red treatment the Ultra column used before would have been unreadable on it. */
.features .col-header { background: var(--pl-black); color: var(--pl-yellow); font-size: 1.5rem; }

/* The corner cell is empty, and it must NOT be black: the price-row label directly beneath it
   is a black bar, and the two would fuse into one slab that reads as a heading for the labels
   column rather than as a band across the table.
   Scoped under .features so it outweighs the black rule above at equal-or-better specificity —
   a bare .col-header--blank loses to .features .col-header and stays black.

   Transparent + no borders at all so it disappears into the page: with the grid background
   also transparent and the frame notched around it (below), the cream dotted page shows
   straight through and the corner reads as outside the table. */
.features .col-header--blank {
    background: transparent;
    border: 0;
}

/* THE NOTCH (desktop only). The grid's single 5px frame would box the transparent corner in
   on its top and left. So on desktop we drop those two grid edges and redraw them starting
   AFTER the corner — top edge across the three plan headers, left edge down the labels column
   from the price row — leaving the top-left corner unframed. Mobile keeps the full grid frame
   (the stacked cards need all four sides), so this lives behind the desktop media query. */
@media (min-width: 901px) {
    .pricing-grid {
        border-top-width: 0;
        border-left-width: 0;
    }
    .free .col-header,
    .standard .col-header,
    .ultra .col-header { border-top: 5px solid var(--pl-black); }

    .features .price--label,
    .features .feature-name,
    .features .cta-wrap { border-left: 5px solid var(--pl-black); }

    /* The FREE header's left neighbour is the notched-out corner, so unlike Standard/Brand it
       gets no divider from a cell to its left. Draw its left edge to close the frame's top-left
       corner. 4px to line up with the labels|plans dividers that continue down below it. */
    .free .col-header { border-left: 4px solid var(--pl-black); }
}

.free .col-header,
.standard .col-header,
.ultra .col-header {
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    color: var(--pl-black);
    /* No text-shadow: the white halo muddied the letters; plain black reads cleaner on the strips. */
}
.free     .col-header { background-image: url('/images/logo-generator/table-header-green.png'); }
.standard .col-header { background-image: url('/images/logo-generator/table-header-yellow.png'); }
.ultra    .col-header { background-image: url('/images/logo-generator/table-header-blue.png'); }

/* "Brand-in-a-Box" is nearly three times the length of the other two labels, so it stays a
   notch smaller than the others to hold one line — a wrap here would grow the shared row. */
.ultra .col-header { font-size: 2.5rem; letter-spacing: 1px; }

/* ---------- Price row ---------- */
.price {
    font-family: 'Bangers', cursive;
    font-size: 2.1rem;
    text-align: center;
    padding: 16px 8px 12px;
    border-bottom: 3px dashed var(--pl-black);
    background: #fafafa;
}
/* The one-line benefit under each price. Archivo, not Bangers — it's a plain reassurance
   meant to be read, sitting quietly under the big number. Inherits its column's accent
   colour from .free/.standard/.ultra .price above. */
.price small {
    display: block;
    margin-top: 5px;
    font-family: 'Archivo', system-ui, sans-serif;
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .2px;
    line-height: 1.15;
    text-transform: none;
}
/* The price-row label: a black bar with the yellow ONE-TIME PRICE banner sitting inside it at
   the left, its chevron pointing across the table toward the prices. The banner is an inline
   SVG (see the markup) so its lettering renders in Bangers. */
.price--label {
    background: var(--pl-black);
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 8px 20px;
}
/* Sized by height so it always fits the price row cleanly; width follows the 520:150 art. The
   min keeps it from shrinking to nothing where the labels column is narrow on a small laptop. */
.price-banner {
    height: clamp(2.4rem, 3.4vw, 3rem);
    width: auto;
    display: block;
}

/* Each column's accent follows its header strip: green / amber / blue. */
.free .price     { color: var(--pl-green-ink); }
.standard .price { color: var(--pl-amber-ink); }
.ultra .price    { color: var(--pl-blue); }

/* ---------- Values ----------
   The comp set every value in one green, which flattens the comparison — the eye can't tell
   which column it's reading without tracking back to the header. Values now take their own
   column's accent, so colour carries the tier.

   Each value is a headline plus an optional quiet qualifier underneath, rather than one long
   line with the qualifier in brackets. That keeps the scannable part ("All vector", "18") big
   and the detail available without competing with it. */
.val {
    /* Archivo, not Bangers. Bangers is reserved for the display type — the plan names and the
       prices. The cell values are information you read, not a headline, so they get the body
       face. Archivo is a real weighted family, so the emphasis comes from weight rather than
       from the display font, and the numerals line up in a comparison column. */
    font-family: 'Archivo', system-ui, sans-serif;
    font-weight: 800;
    font-size: 1.5rem;
    letter-spacing: .2px;
    line-height: 1.12;
}
.free .val     { color: var(--pl-green-ink); }
.standard .val { color: var(--pl-amber-ink); }
.ultra .val    { color: var(--pl-blue); }

.cell small {
    display: block;
    margin-top: 4px;
    font-family: 'Archivo', system-ui, sans-serif;
    font-size: .95rem;
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: .2px;
    color: #4a5568;
}

/* The weakest option in a row. Greyed rather than coloured, so "Legacy AI" and a $0 credit
   read as the floor at a glance instead of looking like just another accent. Declared after
   the per-column colours so it wins at equal specificity. */
.col .val--dim  { color: #94a3b8; }
.col .val--dim + small { color: #b6c0cc; }

/* ---------- Feature rows ---------- */
.feature-name,
.cell {
    padding: 14px 16px;
    border-bottom: 2px solid #e5e5e5;
    font-size: 1.30rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    min-height: 52px;
}
.features .feature-name {
    justify-content: flex-start;
    text-align: left;
    color: var(--pl-black);
    letter-spacing: .3px;
    flex-wrap: wrap;
    gap: 2px 8px;
}
/* Column rather than row, so a value can stack its qualifier underneath and stay centred.
   position:relative anchors the corner value-tag. */
.cell {
    position: relative;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    line-height: 1;
}

/* The money-value tags ("$249 value"). A pill beside the label rather than more words in it,
   so the saving reads as a number and the label stays a label. */
.tag {
    font-family: 'Archivo', system-ui, sans-serif;
    font-size: .66rem;
    font-weight: 800;
    letter-spacing: .4px;
    text-transform: uppercase;
    white-space: nowrap;
    background: var(--pl-yellow);
    color: #000;
    border: 2px solid #000;
    border-radius: 999px;
    padding: 1px 8px;
}

/* The value tag now lives in the Brand-in-a-Box cell (moved off the label), pinned to the
   cell's top-right corner beside the tick. On desktop it's absolute so it never pushes the
   tick off-centre; on the phone layout it drops back into flow (see the media query). */
.tag--corner {
    position: absolute;
    top: 8px;
    right: 8px;
}
.feature-name small {
    display: block;
    width: 100%;
    font-size: .76rem;
    font-weight: 600;
    color: #64748b;
    letter-spacing: .2px;
}

/* Column emphasis. Brand-in-a-Box is the target sale (Best Value, everything included), so it
   gets the strongest tint and the eye lands there; Standard keeps a lighter warm tint under
   its "Most Popular" flag; FREE stays plain white and reads as the quiet entry option.

   Applied as an INSET box-shadow, not a background: the cells set their backgrounds with the
   `background` shorthand (the row stripes, the price/cta fills), which resets background-image,
   so a background-image wash lands only on some cells and the tint comes out patchy. An inset
   shadow paints over whatever background a cell has, uniformly, and sits below the text. The
   header is excluded so its painted strip art stays untinted. */
@media (min-width: 901px) {
    .standard > *:not(.col-header) { box-shadow: inset 0 0 0 999px rgba(250, 204, 21, .10); }
    .ultra    > *:not(.col-header) { box-shadow: inset 0 0 0 999px rgba(0, 0, 255, .07); }
}

/* Stripes. Children 3-11 are the feature rows in every column, so the same nth-child test
   lands on the same visual row in all four.

   The selector names .feature-name / .cell deliberately rather than matching any child.
   A bare `.col > *:nth-child(odd)` carries the same specificity as `.features .col-header` and
   is declared later, so it won and painted the header and price cells white — the black
   INCLUSIONS header turned into yellow text on white. Restricting it to the row cells keeps
   the striping off the two cells that own their own colour. */
.col > .feature-name:nth-child(odd),
.col > .cell:nth-child(odd)  { background: #ffffff; }
.col > .feature-name:nth-child(even),
.col > .cell:nth-child(even) { background: #f1f5f9; }

.yes { color: var(--pl-green); text-shadow: 1px 1px 0 #00000030; }
/* Not-included. The dash is decorative — the meaning is carried by the visually-hidden text
   beside it in the markup, because a screen reader announces a bare em-dash as "em dash". */
.no  { color: #cbd5e1; font-size: 1.5rem; line-height: 1; }

/* The tick is the drawn SVG rather than a font glyph, so it is the same mark on every device
   instead of whatever each platform's ✓ happens to look like. It stays an <img> with real alt
   text rather than a CSS background, because a background image is invisible to a screen
   reader and the tick is the only thing in the cell carrying meaning. */
.cell .tick {
    display: block;
    width: 2.15rem;          /* bumped up per request */
    height: auto;
    flex: none;              /* on the phone layout the label takes the slack, not the tick */
}

/* ---------- CTA row ---------- */
.cta-wrap {
    padding: 20px 12px 24px;
    border-top: 3px solid var(--pl-black);
    background: #fafafa;
    text-align: center;
}
/* The features column's cell in the CTA row. Without it the grid's last row has a hole and the
   left column's rule and background stop short of the bottom. */
.cta-wrap--spacer { background: #f8fafc; }

.cta-btn {
    font-family: 'Bangers', cursive;
    font-size: 1.35rem;
    letter-spacing: 1px;
    line-height: 1.05;
    padding: 10px 16px;
    border: 3px solid var(--pl-black);
    cursor: pointer;
    text-transform: uppercase;
    transition: transform .15s ease, box-shadow .15s ease;
    box-shadow: 4px 4px 0 var(--pl-black);
    width: 100%;
    /* The labels wrap to different line counts ("Get free" = 1, "Get your Brand-in-a-Box" = 2).
       Flex-centre inside a fixed min-height so all three buttons are the same block regardless,
       and the CTA row lines up. */
    max-width: 240px;
    min-height: 4.5rem;      /* tall enough for the 2-line label, so 1-line buttons match it */
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    margin: 0 auto;
}
.cta-btn:hover  { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--pl-black); }
.cta-btn:active { transform: translate(4px, 4px); box-shadow: none; }

/* Buttons match their column's strip too — a cyan button under a green header, or a red one
   under a blue header, reads as a mistake rather than as a scheme. */
.free .cta-btn     { background: var(--pl-green);  color: var(--pl-black); }
.standard .cta-btn { background: var(--pl-yellow); color: var(--pl-black); }
.ultra .cta-btn    { background: var(--pl-blue);   color: var(--pl-white); }

/* ---------- Badges ----------
   Archivo 800, not Bangers: at this size condensed Bangers all-caps was unreadable. Archivo
   bold uppercase stays crisp small. Both sit ABOVE their header, tilted, like a sticker. */
.badge,
.popular-badge {
    position: absolute;
    z-index: 10;
    font-family: 'Archivo', system-ui, sans-serif;
    font-weight: 800;
    font-size: .92rem;
    letter-spacing: .6px;
    text-transform: uppercase;
    white-space: nowrap;
    padding: 5px 14px;
    box-shadow: 2px 2px 0 #00000045;
}
.badge {
    top: -16px; right: 10px;
    transform: rotate(6deg);
    background: var(--pl-black);
    color: var(--pl-yellow);
    border: 2px solid var(--pl-yellow);
}
.popular-badge {
    top: -15px; left: 50%;
    transform: translateX(-50%) rotate(-3deg);
    background: var(--pl-blue);
    color: #fff;
    border: 2px solid var(--pl-black);
}
/* Badges hang off the top of their column. With display:contents the wrapper has no box to
   anchor to, so they anchor to the header cell instead. */
@media (min-width: 901px) {
    .badge, .popular-badge { position: absolute; }
    .standard .col-header, .ultra .col-header { overflow: visible; }
}

/* ---------- Phone ----------
   The grid folds to one column and the wrappers come back as flex stacks, so each plan reads
   as its own card. The features column is dropped and each tick re-labels itself from
   data-feature, which is why every check cell carries that attribute in the markup. */
@media (max-width: 900px) {
    .pricing-grid {
        grid-template-columns: 1fr;
        box-shadow: 5px 5px 0 var(--pl-black);
    }
    .col {
        display: flex;
        flex-direction: column;
        border-bottom: 5px solid var(--pl-black);
    }
    .col:last-child { border-bottom: none; }
    .features { display: none; }

    .cta-wrap { margin-top: auto; }

    .cell {
        justify-content: space-between;
        gap: 12px;
        padding-left: 20px;
    }
    .cell::before {
        content: attr(data-feature);
        font-size: .9rem;
        font-weight: 700;
        flex: 1;
        text-align: left;
        color: var(--pl-black);
        font-family: 'Comic Neue', 'Archivo', sans-serif;
    }
    /* On the phone stack the cell is a vertical column (label on top, value below), so the
       desktop top-right absolute tag would land on the data-feature label. Drop it back into
       flow beneath the tick instead. */
    .tag--corner {
        position: static;
        margin-top: 8px;
        align-self: center;
    }
    .price      { font-size: 2.4rem; }
    .col-header { font-size: 2rem; }
}

@media (prefers-reduced-motion: reduce) {
    .cta-btn { transition: none; }
}