/* Hallmark · v2.0.0 · redesign: full · theme: locked RoleGymAI · genre: modern-minimal
   hero: Banner (public reference pages), Stage (preparation and assistant)
   signature: an interview workflow presented as an ordered reference index.
   critique: replace repeated small card grids with generous type and ruled rows.
   copy: verbatim · existing palette, Outfit, links and pricing data retained. */
/* Public marketing layer: same aiapply tokens, with a compact responsive layout. */
.marketing-shell{min-height:100dvh;background:var(--background)}
.marketing-nav{max-width:calc(var(--space-64)*24);margin:auto;padding:var(--space-20) var(--space-32);display:flex;align-items:center;justify-content:space-between;gap:var(--space-24)}
.marketing-nav .brand{margin:0}.marketing-links{display:flex;align-items:center;gap:var(--space-20);font-size:var(--text-caption)}
.marketing-links a{text-decoration:none;color:var(--muted-foreground)}.marketing-links a:hover{color:var(--foreground)}
.marketing-actions{display:flex;align-items:center;gap:var(--space-8)}
.marketing-main{max-width:calc(var(--space-64)*24);margin:auto;padding:var(--space-32)}
.hero{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(280px,.8fr);align-items:center;gap:var(--space-48);padding:var(--space-64) 0}
.hero h1{font-size:clamp(var(--text-title),6vw,var(--text-display));line-height:1.05;max-width:720px;margin:var(--space-12) 0 var(--space-20);letter-spacing:-.03em}.hero h1 em{color:inherit;font:inherit}
.hero p{max-width:640px;color:var(--muted-foreground);font-size:var(--text-reading);line-height:var(--line-reading)}
.eyebrow{letter-spacing:normal;text-transform:none}.hero-actions{display:flex;flex-wrap:wrap;gap:var(--space-12);margin-top:var(--space-24)}
.hero-card{background:var(--card);border:var(--stroke) solid var(--border);border-radius:var(--radius);padding:var(--space-24);box-shadow:var(--shadow-dialog);position:relative;overflow:hidden}.hero-card:before{content:"";position:absolute;width:180px;height:180px;border-radius:var(--radius-pill);background:var(--accent);opacity:.15;inset-inline-end:-70px;top:-70px}.hero-card h2{position:relative;font-size:var(--text-title);margin-bottom:var(--space-20)}
.signal-list{display:grid;gap:var(--space-12)}.signal{display:flex;align-items:flex-start;gap:var(--space-12);padding:var(--space-12);background:var(--muted);border-radius:var(--radius-control)}.signal b{display:block;font-size:var(--text-caption)}.signal span{display:block;color:var(--muted-foreground);font-size:var(--text-small);line-height:var(--line-caption)}.signal-mark{width:var(--space-32);height:var(--space-32);border-radius:var(--radius-control);background:var(--accent);color:var(--accent-foreground);display:grid;place-items:center;font-weight:700;flex:none}
.section{padding:var(--space-48) 0}.section-heading{display:flex;justify-content:space-between;gap:var(--space-24);align-items:end;margin-bottom:var(--space-24)}.section-heading h2{margin:0;font-size:var(--text-title)}.section-heading p{margin:0;color:var(--muted-foreground);max-width:560px}
.card-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-16)}.marketing-card{background:var(--card);border:var(--stroke) solid var(--border);border-radius:var(--radius-card);padding:var(--space-24);box-shadow:var(--shadow-soft)}.marketing-card h3{font-size:var(--text-reading);margin:0 0 var(--space-8)}.marketing-card p{font-size:var(--text-caption);color:var(--muted-foreground);margin:0}.marketing-card .icon{font-size:var(--text-title);color:var(--accent);margin-bottom:var(--space-16)}
.referral-create-account{display:inline-flex;margin-top:var(--space-16)}
.marketing-cta{display:flex;justify-content:space-between;align-items:center;gap:var(--space-24);background:var(--primary);color:var(--primary-foreground);border-radius:var(--radius);padding:var(--space-32)}.marketing-cta h2{margin:0;font-size:var(--text-title)}.marketing-cta p{margin:var(--space-8) 0 0;color:var(--primary-foreground);opacity:.75;font-size:var(--text-caption)}
.price-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-16);align-items:stretch}.price-card{display:flex;flex-direction:column;gap:var(--space-16)}.price-card.recommended{border-color:var(--accent);box-shadow:var(--shadow-accent)}.price-card .price{font-size:var(--text-display);line-height:1;font-weight:600}.price-card .price small{font-size:var(--text-caption);font-weight:400;color:var(--muted-foreground)}.price-card ul{padding:0;margin:0;list-style:none;display:grid;gap:var(--space-8);font-size:var(--text-caption);color:var(--muted-foreground);flex:1}.price-card li:before{content:'✓';color:var(--accent);font-weight:700;margin-inline-end:var(--space-8)}
.crypto-highlight{display:flex;align-items:center;justify-content:space-between;gap:var(--space-24);margin-bottom:var(--space-16);padding:var(--space-20) var(--space-24);border:var(--stroke) solid var(--accent);border-radius:var(--radius-card);background:color-mix(in srgb,var(--accent) 10%,var(--card));box-shadow:var(--shadow-soft)}.crypto-highlight .eyebrow{color:var(--accent);font-size:var(--text-small);font-weight:700}.crypto-highlight h3{margin:var(--space-8) 0 0;font-size:var(--text-reading)}.crypto-highlight p{max-width:560px;margin:var(--space-8) 0 0;color:var(--muted-foreground);font-size:var(--text-caption);line-height:var(--line-body)}
.faq{display:grid;gap:var(--space-8);max-width:800px}.faq details{background:var(--card);border:var(--stroke) solid var(--border);border-radius:var(--radius-control);padding:var(--space-16)}.faq summary{cursor:pointer;font-size:var(--text-caption);font-weight:600}.faq p{font-size:var(--text-caption);color:var(--muted-foreground);margin:var(--space-12) 0 0}
.marketing-footer{max-width:calc(var(--space-64)*24);margin:auto;padding:var(--space-32);border-top:var(--stroke) solid var(--border);display:flex;justify-content:space-between;gap:var(--space-16);color:var(--muted-foreground);font-size:var(--text-small)}.marketing-footer nav{display:flex;gap:var(--space-16)}.marketing-footer a{color:inherit}
@media(max-width:800px){.marketing-nav{padding:var(--space-16)}.marketing-links{display:none}.marketing-main{padding:var(--space-20)}.hero{grid-template-columns:1fr;padding:var(--space-32) 0;gap:var(--space-24)}.card-grid,.price-grid{grid-template-columns:1fr}.section{padding:var(--space-32) 0}.marketing-cta,.crypto-highlight{display:block}.marketing-cta .primary,.crypto-highlight .secondary{margin-top:var(--space-16)}.marketing-footer{padding:var(--space-20);display:block}.marketing-footer nav{margin-top:var(--space-12);flex-wrap:wrap}}

.moment-hero{background:var(--primary);color:var(--primary-foreground);overflow:hidden}
.moment-nav{border-bottom:var(--stroke) solid color-mix(in srgb,var(--primary-foreground) 16%,var(--primary))}
.moment-nav .brand,.moment-nav .marketing-links a{color:var(--primary-foreground)}
.moment-nav .brand-light,.moment-nav .marketing-links a{color:color-mix(in srgb,var(--primary-foreground) 64%,var(--primary))}
.moment-nav .marketing-links a:hover{color:var(--primary-foreground)}
.moment-nav .brand-mark{background:var(--primary-foreground);color:var(--primary)}
.moment-nav .brand-mark::before,.moment-nav .brand-mark::after{background:var(--primary)}
.moment-nav .brand-mark span{background:var(--accent)}
.moment-signin,.moment-start,.moment-secondary{display:inline-flex;align-items:center;justify-content:center;padding:var(--space-12) var(--space-16);border-radius:var(--radius-control);font-size:var(--text-body);line-height:var(--line-body);font-weight:600;text-decoration:none;white-space:nowrap}
.moment-signin,.moment-secondary{color:var(--primary-foreground);border:var(--stroke) solid color-mix(in srgb,var(--primary-foreground) 24%,var(--primary))}
.moment-start{background:var(--accent);color:var(--accent-foreground);border:var(--stroke) solid var(--accent);box-shadow:var(--shadow-accent)}
.moment-signin:hover,.moment-secondary:hover{border-color:var(--accent);color:var(--primary-foreground)}
.moment-grid{width:100%;max-width:calc(var(--space-64)*24);min-height:calc(var(--space-64)*9);margin:auto;padding:var(--space-48) var(--space-32) var(--space-64);display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:var(--space-48);align-items:center}
.moment-grid>*{min-width:0}
.moment-copy .eyebrow{color:color-mix(in srgb,var(--primary-foreground) 64%,var(--primary));font-size:var(--text-small);font-weight:600}
.moment-copy h1{max-width:640px;margin:var(--space-12) 0 var(--space-20);font-size:clamp(var(--text-title),5vw,var(--text-display));line-height:1.05;letter-spacing:-.03em}
.moment-copy h1 em{font:inherit;color:inherit}
.moment-copy p{max-width:640px;margin:0;color:color-mix(in srgb,var(--primary-foreground) 68%,var(--primary));font-size:var(--text-reading);line-height:var(--line-reading)}
.training-track{display:flex;flex-wrap:wrap;gap:var(--space-8);margin-top:var(--space-24)}
.training-track span{display:inline-flex;align-items:center;gap:var(--space-8);padding:var(--space-8) var(--space-12);border:var(--stroke) solid color-mix(in srgb,var(--primary-foreground) 18%,var(--primary));border-radius:var(--radius-pill);color:color-mix(in srgb,var(--primary-foreground) 72%,var(--primary));font-size:var(--text-small);line-height:var(--line-caption)}
.training-track b{color:var(--accent);font-size:var(--text-tiny);letter-spacing:.1em}
.moment-preview{padding:var(--space-24);background:color-mix(in srgb,var(--primary-foreground) 9%,var(--primary));border:var(--stroke) solid color-mix(in srgb,var(--primary-foreground) 16%,var(--primary));border-radius:var(--radius);box-shadow:var(--shadow-dialog)}
.moment-status{display:flex;align-items:center;justify-content:space-between;gap:var(--space-12);color:color-mix(in srgb,var(--primary-foreground) 64%,var(--primary));font-size:var(--text-small);line-height:var(--line-caption);letter-spacing:normal;text-transform:none}
.moment-status i{display:inline-block;width:var(--space-8);height:var(--space-8);margin-inline-end:var(--space-8);border-radius:var(--radius-pill);background:var(--accent)}
.moment-preview blockquote{margin:var(--space-24) 0;padding-inline-start:var(--space-16);border-inline-start:var(--space-4) solid var(--accent);font-size:var(--text-title);line-height:var(--line-reading);font-weight:500;overflow-wrap:anywhere}
.moment-guidance{padding:var(--space-16);background:color-mix(in srgb,var(--primary-foreground) 14%,var(--primary));border:var(--stroke) solid color-mix(in srgb,var(--primary-foreground) 16%,var(--primary));border-radius:var(--radius-card)}
.moment-guidance>span{color:color-mix(in srgb,var(--primary-foreground) 64%,var(--primary));font-size:var(--text-small);letter-spacing:normal;text-transform:none}
.moment-guidance h2{margin:var(--space-8) 0 var(--space-12);font-size:var(--text-reading);line-height:var(--line-reading)}
.moment-guidance ol{margin:0;padding-inline-start:var(--space-20);color:color-mix(in srgb,var(--primary-foreground) 68%,var(--primary));font-size:var(--text-caption);line-height:var(--line-body)}
.moment-guidance li+li{margin-top:var(--space-8)}
.moment-foot{display:flex;justify-content:space-between;gap:var(--space-12);margin-top:var(--space-16);color:color-mix(in srgb,var(--primary-foreground) 64%,var(--primary));font-size:var(--text-small)}
.moment-foot strong{color:var(--accent);font-weight:600}
@media(max-width:800px){.moment-nav{width:100%}.moment-nav .marketing-actions .moment-signin{display:none}.moment-grid{min-height:0;padding:var(--space-32) var(--space-20) var(--space-48);grid-template-columns:minmax(0,1fr);gap:var(--space-32)}.moment-copy,.moment-copy h1,.moment-copy p,.moment-preview{width:100%;max-width:100%;min-width:0}.moment-copy h1{font-size:calc(var(--text-title)*1.8);overflow-wrap:anywhere}.moment-copy p{font-size:var(--text-body);line-height:var(--line-reading)}.moment-copy .hero-actions{display:grid;grid-template-columns:minmax(0,1fr)}.moment-copy .hero-actions a{width:100%}.moment-preview{padding:var(--space-16)}.moment-status{align-items:flex-start;flex-wrap:wrap;font-size:var(--text-tiny)}.moment-preview blockquote{font-size:var(--text-reading);line-height:var(--line-reading)}}

/* Public reference pages share the product's material, with their own composition. */
html,body{overflow-x:clip}
body:not(.landing-page) .marketing-nav,
body:not(.landing-page) .marketing-main,
body:not(.landing-page) .marketing-footer{max-width:1200px}
body:not(.landing-page) .marketing-nav{min-height:88px;border-bottom:var(--stroke) solid var(--border)}
body:not(.landing-page) .marketing-links{gap:var(--space-24);font-size:var(--text-body)}
body:not(.landing-page) .marketing-actions a{display:inline-flex;align-items:center;justify-content:center;min-height:44px;text-decoration:none}
body:not(.landing-page) .marketing-actions .secondary{background:var(--background);border-color:var(--background)}
body:not(.landing-page) .marketing-main{padding-block:var(--space-48) var(--space-64)}
body:not(.landing-page) .marketing-main h1{max-width:22ch;min-width:0;overflow-wrap:break-word;font-size:clamp(36px,4.5vw,64px);line-height:1.08;letter-spacing:-.035em;font-weight:600;margin-block:0 var(--space-24);text-wrap:balance}
body:not(.landing-page) .marketing-main h1 em{font:inherit;color:inherit}
body:not(.landing-page) .marketing-main .section>.eyebrow,
body:not(.landing-page) .hero>div>.eyebrow{display:none}
body:not(.landing-page) .marketing-main p{font-size:var(--text-reading);line-height:var(--line-reading);text-wrap:pretty}
body:not(.landing-page) .marketing-main .section>p{max-width:66ch;color:var(--muted-foreground);margin-bottom:var(--space-48)}
body:not(.landing-page) .marketing-main p.hero{display:block;padding:0;margin-block:0 var(--space-48)}
body:not(.landing-page) .section{padding-block:var(--space-32) var(--space-48)}
body:not(.landing-page) .section-heading{align-items:start;margin-bottom:var(--space-32)}
body:not(.landing-page) .section-heading h2{max-width:22ch;font-size:32px;line-height:1.2;letter-spacing:-.025em}
body:not(.landing-page) .section-heading p{max-width:48ch}
body:not(.landing-page) .card-grid{display:block;border-top:var(--stroke) solid var(--border);counter-reset:reference}
body:not(.landing-page) .card-grid>.marketing-card{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.5fr);gap:var(--space-24);padding:var(--space-32) 0;padding-inline-start:var(--space-48);border:0;border-bottom:var(--stroke) solid var(--border);border-radius:0;background:var(--background);box-shadow:none;counter-increment:reference}
body:not(.landing-page) .card-grid>.marketing-card::before{content:counter(reference,decimal-leading-zero);position:absolute;inset-inline-start:0;top:var(--space-32);font-size:var(--text-caption);color:var(--muted-foreground);font-variant-numeric:tabular-nums}
body:not(.landing-page) .card-grid>.marketing-card>.icon{display:none}
body:not(.landing-page) .card-grid>.marketing-card h3{font-size:var(--text-title);line-height:var(--line-reading);font-weight:500;margin:0;overflow-wrap:anywhere}
body:not(.landing-page) .card-grid>.marketing-card p{font-size:var(--text-reading);line-height:var(--line-reading);margin:0}
body:not(.landing-page) .hero{gap:var(--space-48);padding-block:var(--space-32) var(--space-64)}
body:not(.landing-page) .hero-card{padding:var(--space-32);box-shadow:none;border-radius:var(--radius-card)}
body:not(.landing-page) .hero-card::before{content:none}
body:not(.landing-page) .signal{background:var(--card);border-radius:0;padding:var(--space-16) 0;border-top:var(--stroke) solid var(--border)}
body:not(.landing-page) .signal b{font-size:var(--text-body);margin-bottom:var(--space-4)}
body:not(.landing-page) .signal span{font-size:var(--text-caption);line-height:var(--line-body)}
body:not(.landing-page) .signal-mark{background:var(--muted);color:var(--foreground);border-radius:var(--radius-control)}
body:not(.landing-page) .price-grid{gap:0;border:var(--stroke) solid var(--border);border-radius:var(--radius-card);overflow:hidden}
body:not(.landing-page) .price-card{border:0;border-inline-end:var(--stroke) solid var(--border);border-radius:0;padding:var(--space-32);gap:var(--space-24);box-shadow:none}
body:not(.landing-page) .price-card:last-child{border-inline-end:0}
body:not(.landing-page) .price-card.recommended{box-shadow:inset 0 var(--space-4) 0 var(--accent)}
body:not(.landing-page) .price-card h3{font-size:var(--text-title)}
body:not(.landing-page) .price-card .price{font-variant-numeric:tabular-nums;letter-spacing:-.04em}
body:not(.landing-page) .price-card ul{font-size:var(--text-body);line-height:var(--line-reading);gap:var(--space-12)}
body:not(.landing-page) .price-card a{display:flex;justify-content:center;text-decoration:none;white-space:normal;text-align:center}
body:not(.landing-page) .faq{max-width:none;gap:0;border-top:var(--stroke) solid var(--border)}
body:not(.landing-page) .faq details{border:0;border-bottom:var(--stroke) solid var(--border);border-radius:0;background:var(--background);padding:var(--space-24) 0}
body:not(.landing-page) .faq summary{font-size:var(--text-reading);font-weight:500;line-height:var(--line-reading);padding-inline-end:var(--space-24)}
body:not(.landing-page) .faq p{max-width:75ch;margin-top:var(--space-16)}
body:not(.landing-page) .marketing-cta{background:var(--card);color:var(--foreground);border:var(--stroke) solid var(--border);border-radius:var(--radius-card);padding:var(--space-48);align-items:start}
body:not(.landing-page) .marketing-cta h2{max-width:26ch;font-size:32px;line-height:1.2;letter-spacing:-.025em}
body:not(.landing-page) .marketing-cta p{max-width:60ch;color:var(--muted-foreground);opacity:1}
body:not(.landing-page) .marketing-cta a{flex-shrink:0;display:inline-flex;justify-content:center;text-decoration:none}
body:not(.landing-page) .marketing-footer{padding-block:var(--space-32);font-size:var(--text-caption)}
body:not(.landing-page) .marketing-footer nav{flex-wrap:wrap}
.marketing-shell :is(a,button,summary,input,select,textarea):focus-visible{outline:2px solid var(--accent);outline-offset:4px;transition:none}
.marketing-shell :is(a,button):active{transform:translateY(1px)}
@media(max-width:1000px){
 body:not(.landing-page) .marketing-links{gap:var(--space-12);font-size:var(--text-caption)}
 body:not(.landing-page) .marketing-nav{gap:var(--space-16)}
 body:not(.landing-page) .hero{grid-template-columns:minmax(0,1fr)}
}
@media(max-width:800px){
 body:not(.landing-page) .marketing-nav{min-height:76px}
 body:not(.landing-page) .marketing-main{padding-block:var(--space-24) var(--space-32)}
 body:not(.landing-page) .marketing-main h1{font-size:36px;max-width:24ch}
 body:not(.landing-page) .section{padding-block:var(--space-24) var(--space-32)}
 body:not(.landing-page) .section-heading{display:block}
 body:not(.landing-page) .section-heading p{margin-top:var(--space-16)}
 body:not(.landing-page) .card-grid>.marketing-card{grid-template-columns:minmax(0,1fr);gap:var(--space-8);padding-block:var(--space-24);padding-inline-start:var(--space-32)}
 body:not(.landing-page) .card-grid>.marketing-card::before{top:var(--space-24)}
 body:not(.landing-page) .price-card{border-inline-end:0;border-bottom:var(--stroke) solid var(--border)}
 body:not(.landing-page) .price-card:last-child{border-bottom:0}
 body:not(.landing-page) .marketing-cta{padding:var(--space-24)}
 body:not(.landing-page) .marketing-cta h2{font-size:28px}
 body:not(.landing-page) .hero-card{padding:var(--space-24)}
}
@media(max-width:420px){
 body:not(.landing-page) .marketing-nav .brand-mark{width:var(--space-32);height:var(--space-32)}
 body:not(.landing-page) .marketing-nav .brand-light{display:none}
 body:not(.landing-page) .marketing-actions .secondary{padding-inline:var(--space-8)}
 body:not(.landing-page) .marketing-actions .primary{padding-inline:var(--space-12)}
 body:not(.landing-page) .marketing-actions{gap:var(--space-4)}
}