/* Referral page (study started 8 October 2026). Loaded only by compare/referral-page-live.html, never by the shop.
   Start every rule from the study's own wrapper class so nothing here can reach the rest of the shop.
   Phone rules first (the designs are made at 390px wide); laptop rules go under one @media(min-width:601px) block. */

/* The shop draws its home page for an address it does not know; while this page shows, the home page's parts are hidden. */
html.rf-on #main>:not(.rf-page){display:none!important}

.rf.page-shell{padding-top:32px;padding-bottom:56px;min-height:0}
.rf .page-heading{margin-bottom:22px}
.rf .page-heading h1{font-size:34px}
.rf .page-heading p{margin-top:10px;font-size:17px;line-height:1.5;text-wrap:pretty}
.rf h1:focus{outline:none}
.rf .rf-join{width:100%;min-height:52px;font-size:17px}
.rf .rf-h2{font-size:24px;margin:34px 0 12px}

/* The three steps: ruled lines, a number, a name and one line. No boxes. */
.rf-steps{list-style:none;margin:0;padding:0;border-top:1px solid var(--line-strong)}
.rf-steps li{display:grid;grid-template-columns:36px 1fr;gap:10px;padding:16px 0;border-bottom:1px solid var(--line)}
.rf-steps b{font:600 22px/1.2 var(--serif);color:var(--green)}
.rf-steps h3{font:600 18px/1.3 var(--sans);letter-spacing:0;color:var(--ink)}
.rf-steps p{margin-top:3px;color:var(--muted);font-size:16px;line-height:1.45}

/* Steps */
.rf-example{margin:18px 0 22px;color:var(--ink);font-size:16px;line-height:1.5}
.rf-example b{color:var(--green);font-weight:650}

/* Code card: one forest surface, the code as its picture. */
.rf-card{background:var(--forest);color:#fff;border-radius:var(--radius);padding:22px 22px 22px}
.rf-card h2{font-size:24px;color:#fff}
.rf-card .rf-ticket{margin-top:14px;border:1.5px dashed #ffffff8c;border-radius:12px;padding:14px 10px;text-align:center}
.rf-card .rf-ticket span{font:650 28px/1.1 var(--sans);letter-spacing:.14em;color:#fff}
.rf-card>.rf-note{margin-top:8px;font-size:14px;color:#c4e8d0}
.rf-pair{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:20px 0 22px}
.rf-pair dt{font:600 30px/1.1 var(--serif);letter-spacing:-.02em;color:#fff}
.rf-pair dd{text-wrap:balance;margin:5px 0 0;font-size:15px;line-height:1.35;color:#e3efe6}
.rf-card .rf-join{background:#fff;color:var(--forest);border-color:#fff}
.rf-k-code .rf-h2{margin-top:30px;margin-bottom:12px}

/* Code card · Light green: the same card on the shop's pale mint (the colour of an owned bundle and the Invite card). */
.rf-card.rf-card-mint{background:var(--mint);color:var(--ink);border:1px solid var(--mint-deep)}
.rf-card-mint h2,.rf-card-mint .rf-pair dt,.rf-card-mint .rf-ticket span{color:var(--forest)}
.rf-card-mint .rf-ticket{border-color:#07824999;background:#fff}
.rf-card-mint>.rf-note{color:var(--muted)}
.rf-card-mint .rf-pair dd{color:var(--ink)}
.rf-card-mint .rf-join{background:var(--green);color:#fff;border-color:var(--green)}

/* The sum: one order added up, on one toned surface. */
.rf-sum{background:var(--soft);border:1px solid var(--line);border-radius:var(--radius);padding:18px 18px 16px;margin-bottom:18px}
.rf-sum h2{font-size:20px;margin-bottom:8px}
.rf-sum dl{margin:0}
.rf-sum dl div{display:flex;justify-content:space-between;align-items:baseline;gap:14px;padding:7px 0;font-size:16px;color:var(--ink)}
.rf-sum dd{margin:0;white-space:nowrap;font-variant-numeric:tabular-nums}
.rf-sum dt{color:var(--muted)}
.rf-sum .rf-earn{margin-top:8px;padding-top:14px;border-top:1px solid var(--line-strong)}
.rf-sum .rf-earn dt{color:var(--forest);font-weight:650;font-size:18px}
.rf-sum .rf-earn dd{font:600 30px/1 var(--serif);color:var(--green)}
.rf-lines{margin:10px 0 0;padding:0;list-style:none;counter-reset:rf}
.rf-lines li{counter-increment:rf;display:grid;grid-template-columns:26px 1fr;padding:11px 0;border-bottom:1px solid var(--line);font-size:16px;line-height:1.45;color:var(--ink)}
.rf-lines li::before{content:counter(rf);font:600 18px/1.3 var(--serif);color:var(--green)}
.rf-lines li:last-child{border-bottom:0}

/* Links inside the steps. */
.rf-steps a,.rf-lines a{color:var(--forest);font-weight:600;text-underline-offset:3px}

/* Round four: the owner's copy. A heading and four paragraphs, then the example as three figures in a row. */
.rf-copy h1{font-size:31px}
.rf-copy p{margin-top:14px;font-size:17px;line-height:1.5;color:var(--ink);text-wrap:pretty}
.rf .rf-wa{flex:none}
.rf-copy.rf-copy-green p:first-of-type{color:var(--green);font-weight:500}
.rf-copy+.rf-card,.rf-copy+.rf-sum{margin-top:26px}
.rf-eg{margin:20px 0 24px}
.rf-eg>p{font-size:15px;color:var(--muted)}
.rf-eg dl{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:8px 0 0}
.rf-eg dt{font-size:14px;color:var(--muted)}
.rf-eg dd{margin:2px 0 0;font:600 24px/1.2 var(--serif);color:var(--ink)}
.rf-eg .rf-gain dd{color:var(--green)}
.rf-card+.rf-h2{margin-top:30px}

@media(max-width:340px){
 .rf-copy h1{font-size:27px}
 .rf-eg dt{font-size:13px}
 .rf-eg dd{font-size:21px}
 .rf .page-heading h1{font-size:27px} /* each sentence of a heading stays on its own line at 320 */
 .rf-card{padding:22px 16px 18px}
 .rf-card .rf-ticket span{font-size:24px;letter-spacing:.1em}
 .rf-pair dt{font-size:26px}
 .rf-pair dd{font-size:14px}
 .rf-sum{padding:16px 14px}
 .rf-sum .rf-earn dd{font-size:26px}
}

/* Laptop: Steps carried across. Two columns from 900px; one column, the phone's order, from 601 to 899px. */
@media(min-width:601px){
 .rf-k-pc-steps.page-shell{padding-top:30px;padding-bottom:64px}
 .rf-two{display:grid;grid-template-columns:1fr;gap:8px;max-width:680px}
 .rf-k-pc-steps .rf-copy h1{font-size:38px}
 .rf-k-pc-steps .rf-copy p{font-size:17px;margin-top:12px}
 .rf-k-pc-steps .rf-join{width:auto;min-width:300px;margin-top:22px}
 .rf-k-pc-steps .rf-eg{margin-bottom:0}
 .rf-k-pc-steps .rf-eg dl{max-width:440px}
}
@media(min-width:900px){
 .rf-two{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:72px;max-width:none;align-items:start}
 .rf-k-pc-steps .rf-h2{margin-top:6px}
 .rf-k-pc-steps .rf-steps li{padding:13px 0}
}

/* Laptop round two, Top to bottom: no split. From 900px the paragraphs sit two by two and the steps three in a row. */
@media(min-width:601px){
 .rf-k-pc-flow.page-shell{padding-top:30px;padding-bottom:64px}
 .rf-k-pc-flow .rf-copy h1{font-size:38px}
 .rf-k-pc-flow .rf-copy{max-width:720px}
 .rf-k-pc-flow .rf-h2{margin-top:16px}
 .rf-k-pc-flow .rf-end{display:flex;flex-wrap:wrap;gap:20px 40px;align-items:flex-end;justify-content:space-between;margin-top:22px}
 .rf-k-pc-flow .rf-eg{margin:0;flex:1 1 380px;max-width:460px}
 .rf-k-pc-flow .rf-join{width:auto;min-width:300px}
}
@media(min-width:900px){
 .rf-k-pc-flow .rf-copy{max-width:none;columns:2;column-gap:56px}
 .rf-k-pc-flow .rf-copy h1{column-span:all;margin-bottom:14px}
 .rf-k-pc-flow .rf-copy p{margin:0 0 12px;break-inside:avoid}
 .rf-k-pc-flow .rf-copy p:nth-of-type(3){break-before:column}
 .rf-k-pc-flow .rf-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:0 48px}
 .rf-k-pc-flow .rf-steps li{display:block;padding:14px 0 14px;border-bottom:0}
 .rf-k-pc-flow .rf-steps b{display:block;margin-bottom:6px}
 .rf-k-pc-flow .rf-end{padding-top:14px;border-top:1px solid var(--line);margin-top:0}
}