/* guildapp.fi marketing layout — composes on Guild DS tokens */
body{background:var(--gray-0)}
.container{max-width:var(--container-max);margin:0 auto;padding:0 var(--space-lg)}
.narrow{max-width:var(--container-narrow)}
/* header */
.site-header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--border-subtle)}
.site-header .container{display:flex;align-items:center;gap:var(--space-xl);height:64px}
.brand{display:flex;align-items:center;gap:10px;color:var(--text-primary);text-decoration:none;font-family:var(--font-display);font-weight:var(--weight-heavy);font-size:var(--text-xl);letter-spacing:var(--tracking-tight)}
.brand:hover{text-decoration:none;color:var(--text-primary)}
.brand img{width:28px;height:28px;border-radius:8px}
.site-nav{display:flex;gap:var(--space-lg);margin-left:auto;align-items:center}
.site-nav a{color:var(--text-secondary);font-size:var(--text-base);font-weight:var(--weight-medium)}
.site-nav a:hover{color:var(--text-primary);text-decoration:none}
.site-nav a.active{color:var(--brand-primary);font-weight:var(--weight-semibold)}
/* hero */
.hero{padding:var(--space-huge) 0 var(--space-xxxl)}
.hero .container{display:grid;grid-template-columns:1.1fr .9fr;gap:var(--space-xxxl);align-items:center}
.hero h1{font-size:var(--text-display-1);line-height:var(--leading-tight)}
.hero .lead{font-size:var(--text-xl);color:var(--text-secondary);line-height:var(--leading-relaxed);margin-top:var(--space-lg);max-width:34em}
.kicker{font-size:var(--text-sm);font-weight:var(--weight-semibold);letter-spacing:var(--tracking-wider);text-transform:uppercase;color:var(--brand-primary)}
.cta-row{display:flex;gap:var(--space-md);margin-top:var(--space-xl);flex-wrap:wrap;align-items:center}
.cta-note{font-size:var(--text-sm);color:var(--text-muted);margin-top:var(--space-md)}
/* phone frame (screenshots carry their own status bar) */
.phone{width:290px;border-radius:44px;border:10px solid var(--gray-950);background:#000;box-shadow:var(--shadow-lg);overflow:hidden;flex:none}
.phone img{display:block;width:100%;height:auto}
.phone.sm{width:240px;border-radius:38px}
.phone-stage{display:flex;justify-content:center;align-items:center;gap:var(--space-lg)}
/* live demo iframe (402x874 device scaled down) */
.demo-wrap{display:flex;flex-direction:column;align-items:center;gap:var(--space-md)}
.demo-frame{width:322px;height:676px;position:relative;border:10px solid var(--gray-950);border-radius:54px;background:#000;overflow:hidden;box-shadow:var(--shadow-lg)}
.demo-frame .demo-splash{position:absolute;inset:0;background:var(--brand-primary);display:flex;align-items:center;justify-content:center;z-index:2;pointer-events:none;transition:opacity .5s var(--ease-standard)}
.demo-frame .demo-splash img{width:88px;height:88px;border-radius:22px}
.demo-frame.loaded .demo-splash{opacity:0}
.demo-frame iframe{width:402px;height:874px;border:0;transform:scale(.751);transform-origin:top left;display:block}
.demo-hint{display:inline-flex;align-items:center;gap:8px;font-size:var(--text-sm);color:var(--text-muted)}
.demo-hint ion-icon{color:var(--brand-primary)}
/* scroll-reveal for feature-row phones */
.reveal-phones .phone{opacity:0;transform:translateY(48px) rotate(var(--tilt,4deg)) scale(.94);transition:opacity .7s var(--ease-standard),transform .7s var(--ease-standard)}
.reveal-phones .phone:nth-child(2){transition-delay:.15s;--tilt:-5deg}
.reveal-phones.in-view .phone{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal-phones .phone{opacity:1;transform:none;transition:none}}
/* language & region dropdown */
.lang-menu{position:relative}
.lang-btn{display:flex;align-items:center;gap:4px;background:none;border:1px solid var(--border-default);border-radius:var(--radius-full);padding:6px 12px;font:inherit;font-size:var(--text-sm);font-weight:var(--weight-semibold);letter-spacing:var(--tracking-wider);color:var(--text-secondary);cursor:pointer}
.lang-menu:hover .lang-btn,.lang-menu:focus-within .lang-btn{border-color:var(--brand-primary);color:var(--brand-primary)}
.lang-menu .menu{visibility:hidden;opacity:0;transform:translateY(-4px);transition:opacity .15s var(--ease-standard),transform .15s var(--ease-standard);position:absolute;right:0;top:calc(100% + 10px);width:360px;background:var(--surface-card);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);padding:var(--space-lg);z-index:70}
.lang-menu .menu::before{content:"";position:absolute;top:-12px;left:0;right:0;height:12px}
.lang-menu:hover .menu,.lang-menu:focus-within .menu{visibility:visible;opacity:1;transform:none}
.menu-langs{display:flex;gap:var(--space-sm);margin-bottom:var(--space-md)}
.menu-langs a{flex:1;text-align:center;border:1px solid var(--border-default);border-radius:var(--radius-full);padding:6px 0;font-size:var(--text-sm);font-weight:var(--weight-medium);color:var(--text-secondary)}
.menu-langs a:hover{text-decoration:none;border-color:var(--brand-primary);color:var(--brand-primary)}
.menu-langs a.on{background:var(--brand-primary);border-color:var(--brand-primary);color:#fff}
.menu-langs a.on:hover{color:#fff}
.lang-menu .menu h5{margin:0 0 var(--space-sm);font-size:11px;font-weight:var(--weight-semibold);letter-spacing:var(--tracking-wider);text-transform:uppercase;color:var(--text-muted)}
.menu-countries{display:grid;grid-template-columns:1fr 1fr;gap:2px;max-height:240px;overflow-y:auto}
.menu-countries a{padding:5px 8px;border-radius:var(--radius-sm);font-size:var(--text-sm);color:var(--text-secondary)}
.menu-countries a:hover{background:var(--gray-25);text-decoration:none;color:var(--text-primary)}
.menu-all{display:block;margin-top:var(--space-md);font-size:var(--text-sm);font-weight:var(--weight-semibold)}
/* geo banner */
.geo-banner{position:relative;z-index:60;display:flex;gap:var(--space-md);align-items:center;justify-content:center;flex-wrap:wrap;background:var(--gray-950);color:var(--gray-300);padding:10px var(--space-lg);font-size:var(--text-sm)}
.geo-banner a{color:#fff;font-weight:var(--weight-semibold)}
.geo-banner button{background:none;border:0;color:var(--gray-500);cursor:pointer;font-size:14px;padding:4px}
/* store buttons */
.store-btns{display:flex;gap:var(--space-sm);align-items:center;margin-top:var(--space-lg);flex-wrap:wrap}
.store-btn{display:inline-flex;align-items:center;gap:10px;border:1px solid var(--border-default);border-radius:var(--radius-full);padding:8px 18px;color:var(--text-primary);background:var(--surface-card)}
.store-btn:hover{text-decoration:none;border-color:var(--text-primary)}
.store-btn ion-icon{font-size:22px}
.store-btn small{display:block;font-size:10px;color:var(--text-muted);letter-spacing:var(--tracking-wide);text-transform:uppercase;line-height:1}
.store-btn strong{font-size:var(--text-sm);font-weight:var(--weight-semibold);line-height:1.3}
/* pricing tiers + calculator */
.tier-table{width:100%;border-collapse:collapse;background:var(--surface-card);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);overflow:hidden}
.tier-table th,.tier-table td{padding:12px var(--space-lg);text-align:left;font-size:var(--text-base);border-bottom:1px solid var(--border-subtle)}
.tier-table th{font-size:var(--text-sm);font-weight:var(--weight-semibold);color:var(--text-muted);text-transform:uppercase;letter-spacing:var(--tracking-wider);background:var(--gray-25)}
.tier-table tr:last-child td{border-bottom:none}
.tier-table td strong{font-variant-numeric:tabular-nums}
.calc-box{display:grid;grid-template-columns:1fr auto;gap:var(--space-xl);align-items:center;background:var(--surface-card);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);padding:var(--space-xl);margin-top:var(--space-lg)}
.calc-box input[type=range]{width:100%;accent-color:var(--brand-primary)}
.calc-out{text-align:right}
.calc-out .sum{font-family:var(--font-display);font-weight:var(--weight-heavy);font-size:var(--text-display-3);letter-spacing:var(--tracking-tight);color:var(--brand-primary);font-variant-numeric:tabular-nums}
.calc-out span{display:block;color:var(--text-muted);font-size:var(--text-sm)}
/* FAQ */
.faq{max-width:var(--container-narrow);margin:0 auto;display:flex;flex-direction:column}
.faq details{border-bottom:1px solid var(--border-subtle)}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:var(--space-lg);align-items:center;padding:var(--space-lg) 0;font-size:var(--text-lg);font-weight:var(--weight-semibold)}
.faq summary::after{content:"+";font-size:24px;color:var(--brand-primary);flex:none}
.faq details[open] summary::after{content:"−"}
.faq details p{color:var(--text-secondary);line-height:var(--leading-relaxed);padding:0 0 var(--space-lg);max-width:44em}
@media (max-width:960px){.calc-box{grid-template-columns:1fr}.calc-out{text-align:left}}
/* university picker */
.uni-chips{display:flex;flex-wrap:wrap;gap:var(--space-sm);justify-content:center;max-width:900px;margin:0 auto}
.uni-note{max-width:var(--container-narrow);margin:var(--space-xl) auto 0;text-align:center;background:var(--brand-primary-tint);border:1px solid var(--brand-primary-border);border-radius:var(--radius-lg);padding:var(--space-lg) var(--space-xl);color:var(--text-primary);font-size:var(--text-lg);line-height:var(--leading-relaxed)}
.uni-extra{text-align:center;color:var(--text-muted);font-size:var(--text-sm);margin-top:var(--space-md)}
/* sections */
.section{padding:var(--space-huge) 0}
.section.tinted{background:var(--gray-25);border-top:1px solid var(--border-subtle);border-bottom:1px solid var(--border-subtle)}
.section-head{max-width:var(--container-narrow);margin:0 auto var(--space-xxl);text-align:center}
.section-head h2{font-size:var(--text-display-2);line-height:var(--leading-tight)}
.section-head p{color:var(--text-secondary);font-size:var(--text-lg);line-height:var(--leading-relaxed);margin-top:var(--space-md)}
/* feature grid */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-lg)}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-lg)}
.feature-card{background:var(--surface-card);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);padding:var(--space-lg);box-shadow:var(--shadow-card)}
.feature-card .icon{width:44px;height:44px;border-radius:var(--radius-md);background:var(--brand-primary-tint);color:var(--brand-primary);display:flex;align-items:center;justify-content:center;font-size:22px;margin-bottom:var(--space-md)}
.feature-card h3{font-size:var(--text-lg);margin-bottom:var(--space-sm)}
.feature-card p{color:var(--text-secondary);font-size:var(--text-base);line-height:var(--leading-relaxed)}
/* alternating feature rows */
.feature-row{display:grid;grid-template-columns:1fr auto;gap:var(--space-xxxl);align-items:center;padding:var(--space-xxl) 0}
.feature-row.flip{grid-template-columns:auto 1fr}
.feature-row.flip .feature-copy{order:2}
.feature-copy h3{font-size:var(--text-display-3);line-height:var(--leading-tight);margin-bottom:var(--space-md)}
.feature-copy p{color:var(--text-secondary);font-size:var(--text-lg);line-height:var(--leading-relaxed);max-width:32em}
.feature-copy ul{margin:var(--space-lg) 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:var(--space-sm)}
.feature-copy li{display:flex;gap:10px;align-items:baseline;color:var(--text-secondary);font-size:var(--text-base)}
.feature-copy li ion-icon{color:var(--brand-primary);transform:translateY(2px);flex:none}
/* brand band */
.band{background:var(--brand-primary);color:var(--text-on-brand);padding:var(--space-huge) 0}
.band h2{font-size:var(--text-display-2);line-height:var(--leading-tight);color:#fff}
.band p{color:var(--indigo-100);font-size:var(--text-lg);line-height:var(--leading-relaxed)}
.band .container{display:grid;grid-template-columns:1fr;gap:var(--space-xl);text-align:center;justify-items:center}
.band .stats{display:flex;gap:var(--space-xxl);flex-wrap:wrap;justify-content:center}
.band .stat{max-width:220px}
.band .stat strong{display:block;font-family:var(--font-display);font-size:var(--text-xxl);margin-bottom:var(--space-xs);color:#fff}
.band .stat span{color:var(--indigo-100);font-size:var(--text-base)}
/* pricing */
.price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-lg);align-items:stretch}
.price-card{background:var(--surface-card);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);padding:var(--space-xl);display:flex;flex-direction:column;gap:var(--space-md);box-shadow:var(--shadow-card)}
.price-card.featured{border:2px solid var(--brand-primary)}
.price-card .tier{font-size:var(--text-sm);font-weight:var(--weight-semibold);letter-spacing:var(--tracking-wider);text-transform:uppercase;color:var(--text-muted)}
.price-card .price{font-family:var(--font-display);font-weight:var(--weight-heavy);font-size:var(--text-display-3);letter-spacing:var(--tracking-tight)}
.price-card .price small{font-family:var(--font-ui);font-weight:var(--weight-medium);font-size:var(--text-base);color:var(--text-muted);letter-spacing:0}
.price-card .desc{color:var(--text-secondary);font-size:var(--text-base);line-height:var(--leading-relaxed)}
.price-card ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:var(--space-sm);flex:1}
.price-card li{display:flex;gap:10px;align-items:baseline;color:var(--text-secondary);font-size:var(--text-base)}
.price-card li ion-icon{color:var(--brand-primary);transform:translateY(2px);flex:none}
.price-card li.dim{color:var(--text-muted)}
.price-card li.dim ion-icon{color:var(--gray-300)}
/* fine print / example box */
.note-card{background:var(--gray-25);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);padding:var(--space-xl)}
.note-card h3{font-size:var(--text-xl);margin-bottom:var(--space-md)}
.note-card p{color:var(--text-secondary);line-height:var(--leading-relaxed)}
.calc{display:flex;flex-direction:column;gap:var(--space-sm);margin-top:var(--space-lg)}
.calc .row{display:flex;justify-content:space-between;gap:var(--space-lg);font-size:var(--text-base);color:var(--text-secondary);padding-bottom:var(--space-sm);border-bottom:1px solid var(--border-subtle)}
.calc .row strong{color:var(--text-primary);font-variant-numeric:tabular-nums}
.calc .row.total{border-bottom:none}.calc .row.total strong{color:var(--brand-primary)}
/* forms */
.field{display:flex;flex-direction:column;gap:6px}
.field label{font-size:var(--text-sm);font-weight:var(--weight-semibold);color:var(--text-primary)}
.field input,.field select,.field textarea{font:inherit;font-size:var(--text-base);color:var(--text-primary);background:var(--surface-card);border:1px solid var(--border-default);border-radius:var(--radius-md);padding:10px 14px;outline:none;transition:border-color var(--duration-fast) var(--ease-standard),box-shadow var(--duration-fast) var(--ease-standard)}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--brand-primary);box-shadow:0 0 0 3px var(--indigo-100)}
.field textarea{resize:vertical;min-height:120px}
/* footer */
.site-footer{background:var(--gray-950);color:var(--gray-300);padding:var(--space-xxxl) 0 var(--space-xl);margin-top:var(--space-huge)}
.site-footer .cols{display:grid;grid-template-columns:2fr 1fr 1fr;gap:var(--space-xxl);margin-bottom:var(--space-xxl)}
.site-footer h4{color:#fff;font-size:var(--text-base);margin-bottom:var(--space-md)}
.site-footer ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:var(--space-sm)}
.site-footer a{color:var(--gray-300)}
.site-footer a:hover{color:#fff;text-decoration:none}
.site-footer .fine{border-top:1px solid var(--gray-800);padding-top:var(--space-lg);font-size:var(--text-sm);color:var(--gray-500);display:flex;justify-content:space-between;gap:var(--space-lg);flex-wrap:wrap}
.footer-brand{display:flex;align-items:center;gap:10px;font-family:var(--font-display);font-weight:var(--weight-heavy);font-size:var(--text-xl);color:#fff;margin-bottom:var(--space-md)}
.footer-brand img{width:28px;height:28px;border-radius:8px}
.site-footer .cols p{font-size:var(--text-base);color:var(--gray-400);line-height:var(--leading-relaxed);max-width:28em}
@media (max-width:960px){
.hero .container{grid-template-columns:1fr;text-align:center}
.hero .lead{margin-left:auto;margin-right:auto}
.cta-row{justify-content:center}
.hero .phone-stage{margin-top:var(--space-xl)}
.hero h1{font-size:var(--text-display-2)}
.grid-3,.grid-2,.price-grid{grid-template-columns:1fr}
.feature-row,.feature-row.flip{grid-template-columns:1fr;justify-items:center;text-align:center}
.feature-row.flip .feature-copy{order:0}
.feature-copy ul{align-items:center}
.site-footer .cols{grid-template-columns:1fr}
.site-nav{gap:var(--space-md)}
.site-nav a:not(.active):not(:last-child){display:none}
}