@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,650;9..144,750&family=Source+Sans+3:wght@400;500;600;700;800;900&display=swap');

:root{
  --brand:#243C7A;
  --brand-hover:#1D3064;
  --brand-strong:#151B3D;
  --brand-soft:#EEF2FF;
  --brand-wash:#F6F7FF;
  --accent:#B4234C;
  --accent-soft:#FFF1F4;
  --bg:#FCFCFD;
  --paper:#FFFFFF;
  --paper-soft:#F7FAFC;
  --text:#111827;
  --muted:#4B5563;
  --muted-2:#64748B;
  --border:#E1E7F0;
  --border-strong:#C7D3E2;
  --success:#166534;
  --danger:#A61B1B;
  --note:#FFF7E6;
  --note-border:#B7791F;
  --shadow-hairline:0 1px 0 rgba(17,24,39,.05);
  --shadow-soft:0 14px 34px rgba(16,42,86,.065);
  --shadow-lift:0 22px 58px rgba(16,42,86,.09);
  --radius-xl:26px;
  --radius-lg:20px;
  --radius-md:14px;
  --max:1160px;
  --content:890px;
  --space-section:72px;
  --space-section-mobile:48px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:"Source Sans 3", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  background:
    radial-gradient(circle at 12% -10%, rgba(36,60,122,.10), transparent 30rem),
    linear-gradient(180deg,#FFFFFF 0,#FBFCFE 28rem);
  color:var(--text);
  line-height:1.72;
  font-size:18px;
  letter-spacing:.003em;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--brand);text-decoration:none;text-underline-offset:4px;text-decoration-thickness:1.5px}
a:hover{text-decoration:underline}
img,svg{max-width:100%;height:auto}
:focus-visible{outline:3px solid rgba(36,60,122,.34);outline-offset:4px;border-radius:9px}
.skip-link{position:absolute;left:-999px;top:12px;background:var(--brand-strong);color:#fff;padding:.75rem 1rem;border-radius:999px;z-index:50;font-weight:900}
.skip-link:focus{left:12px}

.site-header{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.88);backdrop-filter:blur(18px);border-bottom:1px solid rgba(223,231,241,.92)}
.header-inner{max-width:var(--max);margin:0 auto;padding:17px 28px;display:flex;align-items:center;justify-content:space-between;gap:22px}
.brand{display:flex;align-items:center;gap:13px;color:var(--brand-strong);font-weight:900;text-decoration:none;min-width:max-content}
.brand:hover{text-decoration:none}
.brand img{display:block;width:150px;height:auto}
.brand span{font-size:.78rem;color:var(--muted);font-weight:800;border-left:1px solid var(--border);padding-left:13px;letter-spacing:.01em}
.main-nav{display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.main-nav a{color:#1F2937;font-size:.92rem;font-weight:800;padding:9px 11px;border-radius:999px;line-height:1.15}
.main-nav a:hover{background:var(--brand-wash);color:var(--brand-strong);text-decoration:none}
.menu-toggle{display:none;background:var(--paper);border:1px solid var(--border-strong);border-radius:16px;width:48px;height:46px;align-items:center;justify-content:center;flex-direction:column;gap:5px;box-shadow:var(--shadow-hairline);cursor:pointer}
.menu-toggle span{display:block;width:20px;height:2px;background:var(--brand-strong);border-radius:3px;transition:transform .18s ease, opacity .18s ease}
.menu-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.menu-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.menu-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

.site-main{max-width:var(--max);margin:0 auto;padding:34px 28px 86px}
.breadcrumbs{font-size:.9rem;color:var(--muted);display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:2px 0 34px;line-height:1.45}
.breadcrumbs a{color:var(--muted);font-weight:700}.breadcrumbs a:hover{color:var(--brand-strong)}
.breadcrumbs span[aria-current="page"]{color:#334155}

.hero{display:grid;grid-template-columns:minmax(0,1.18fr) minmax(300px,.82fr);gap:48px;align-items:center;padding:64px 0 46px;position:relative}
.hero:before{content:"";position:absolute;right:-28px;top:40px;width:280px;height:280px;background:linear-gradient(135deg,rgba(36,60,122,.08),rgba(180,35,76,.10));border-radius:80px;transform:rotate(8deg);z-index:-1}
.hero-copy h1,.article-header h1,.category-hero h1{
  font-family:"Fraunces", Georgia, serif;
  font-size:clamp(2.45rem,5.2vw,4.8rem);
  line-height:.98;
  letter-spacing:-.05em;
  margin:0 0 24px;
  color:var(--brand-strong);
  max-width:980px;
  text-wrap:balance;
}
.article-header h1,.category-hero h1{font-size:clamp(2.12rem,4.2vw,3.55rem);letter-spacing:-.045em}
.lead{font-size:clamp(1.12rem,1.55vw,1.32rem);color:var(--muted);max-width:770px;margin:0 0 30px;line-height:1.68}
.eyebrow{letter-spacing:.16em;text-transform:uppercase;font-size:.74rem;font-weight:950;color:var(--brand);margin:0 0 18px}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap}
.button,button{font:inherit}
.button,.site-search button{display:inline-flex;align-items:center;justify-content:center;min-height:50px;padding:12px 20px;border-radius:999px;font-weight:900;border:1px solid transparent;text-decoration:none;cursor:pointer;transition:transform .18s ease, box-shadow .18s ease, background .18s ease,color .18s ease,border-color .18s ease}
.button.primary,.site-search button{background:var(--brand);color:white;box-shadow:0 10px 22px rgba(36,60,122,.15)}
.button.secondary{background:transparent;color:var(--brand-strong);border-color:var(--border-strong)}
.button:hover,.site-search button:hover{text-decoration:none;transform:translateY(-1px)}
.button.primary:hover,.site-search button:hover{background:var(--brand-hover)}
.button.secondary:hover{background:var(--brand-wash);border-color:#AFC2DC}
.hero-note{background:rgba(255,255,255,.92);border:1px solid var(--border);border-radius:var(--radius-xl);padding:30px 32px;box-shadow:var(--shadow-soft);position:relative;overflow:hidden}
.hero-note:before{content:"";position:absolute;left:0;top:24px;bottom:24px;width:5px;background:linear-gradient(180deg,var(--brand),var(--accent));border-radius:0 999px 999px 0}
.hero-note span{font-size:.74rem;text-transform:uppercase;letter-spacing:.15em;color:var(--brand);font-weight:950}
.hero-note strong{display:block;font-size:1.42rem;line-height:1.2;margin:14px 0 12px;color:var(--brand-strong)}
.hero-note p{margin-bottom:0;color:var(--muted);line-height:1.6}

section{margin:var(--space-section) 0}
section > h2:first-child{margin-bottom:24px}
.search-panel{background:var(--paper);border:1px solid var(--border);border-radius:28px;padding:30px 32px;display:grid;grid-template-columns:minmax(0,.9fr) minmax(300px,1.1fr);gap:28px;align-items:center;box-shadow:var(--shadow-soft);position:relative;overflow:visible}
.search-panel:before{content:"";position:absolute;left:32px;right:32px;top:0;height:4px;border-radius:0 0 999px 999px;background:linear-gradient(90deg,var(--brand),var(--accent));opacity:.92}
.search-panel h2{margin:0 0 10px;color:var(--brand-strong)}
.search-panel p{margin:0;color:var(--muted)}.search-panel strong{color:var(--brand-strong)}
.site-search{display:grid;grid-template-columns:1fr auto;gap:12px;position:relative}
.site-search input{width:100%;min-height:54px;border:1px solid var(--border-strong);border-radius:999px;padding:0 19px;font:inherit;background:#fff;color:var(--text);box-shadow:inset 0 1px 0 rgba(17,24,39,.03)}
.site-search input::placeholder{color:#64748B}
.search-results{position:absolute;top:64px;left:0;right:0;list-style:none;margin:0;padding:8px;background:white;border:1px solid var(--border);border-radius:18px;box-shadow:var(--shadow-lift);z-index:9;max-height:320px;overflow:auto}
.search-results:empty{display:none}.search-results li a{display:block;padding:12px 13px;border-radius:12px;color:var(--text);font-weight:760}.search-results li a:hover{background:var(--brand-wash);text-decoration:none}

.content-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;border-top:1px solid var(--border);border-left:1px solid var(--border);background:rgba(255,255,255,.65);border-radius:22px;overflow:hidden;box-shadow:var(--shadow-hairline)}
.category-card{background:transparent;border-right:1px solid var(--border);border-bottom:1px solid var(--border);border-radius:0;padding:22px 20px 23px;min-height:124px;display:flex;flex-direction:column;justify-content:space-between;color:var(--text);box-shadow:none;position:relative}
.category-card:after{content:"→";position:absolute;right:20px;bottom:18px;color:var(--brand);font-weight:950;opacity:.72}
.category-card span{font-weight:950;color:var(--brand-strong);font-size:1.12rem;line-height:1.22;max-width:82%}
.category-card small{color:var(--muted);font-weight:780;margin-top:18px}
.category-card:hover{background:var(--paper);text-decoration:none;box-shadow:inset 0 0 0 999px rgba(234,242,255,.52)}

.split-section{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,.86fr);gap:42px;align-items:start;border-top:1px solid var(--border);padding-top:42px}
.usage-note,.quick-answer{background:linear-gradient(180deg,#FFFFFF,#F6FAFF);border:1px solid #C9D9EF;border-radius:var(--radius-lg);padding:25px 27px;color:var(--brand-strong);box-shadow:var(--shadow-hairline)}
.usage-note{border-left:5px solid var(--accent)}
.usage-note h2{margin-top:0}.usage-note p:last-child,.quick-answer p:last-child{margin-bottom:0}
.quick-answer{font-size:1.09rem;line-height:1.72;border-left:5px solid var(--brand)}

.resource-list{display:grid;gap:0;border-top:1px solid var(--border)}
.resource-row{margin:0}
.resource-row a{display:grid;grid-template-columns:minmax(230px,.42fr) 1fr;gap:28px;align-items:start;background:transparent;border:0;border-bottom:1px solid var(--border);border-radius:0;padding:25px 4px;color:var(--text);transition:background .18s ease,padding .18s ease,border-color .18s ease}
.resource-row a:hover{background:rgba(243,247,255,.72);padding-left:18px;padding-right:18px;text-decoration:none;border-color:#CFDBEA}
.resource-row strong{display:block;color:var(--brand-strong);font-size:1.13rem;line-height:1.32;margin-bottom:0;letter-spacing:-.012em}
.resource-row span{display:block;color:var(--muted);font-size:1rem;line-height:1.62;max-width:720px}

.final-cta{background:linear-gradient(180deg,#FFFFFF,#F7FAFF);border:1px solid var(--border);border-radius:30px;padding:46px 42px;box-shadow:var(--shadow-soft);text-align:center}
.final-cta p{max-width:660px;margin:0 auto 24px;color:var(--muted);font-size:1.04rem}

h2{font-size:clamp(1.55rem,2.45vw,2.18rem);letter-spacing:-.038em;line-height:1.12;margin:0 0 20px;color:var(--brand-strong);text-wrap:balance}
h3{color:var(--brand-strong);line-height:1.22;margin-top:1.55em;margin-bottom:.72em;font-size:1.25rem;letter-spacing:-.018em}
p{margin-top:0}p + p{margin-top:1em}p:last-child{margin-bottom:0}
.article-header{margin:30px 0 44px}.content-page{max-width:var(--content)}.content-page section{margin:52px 0}
.content-page > section:not(:first-of-type){padding-top:8px}

.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--border);border-radius:20px;background:white;box-shadow:var(--shadow-hairline);max-width:100%}
.table-wrap:focus-within{box-shadow:0 0 0 3px rgba(36,60,122,.12)}
table{width:100%;border-collapse:collapse;min-width:720px;background:#fff}
th,td{text-align:left;vertical-align:top;padding:17px 18px;border-bottom:1px solid var(--border);font-size:1rem;line-height:1.58}
th{font-size:.78rem;text-transform:uppercase;letter-spacing:.09em;color:var(--brand-strong);background:#F3F7FB;font-weight:950}
tr:last-child td{border-bottom:0}td:first-child{font-weight:900;color:var(--brand-strong)}
td .listen-wrap{display:flex;align-items:flex-start;gap:8px;flex-wrap:wrap}
.listen-btn{display:inline-flex;align-items:center;gap:5px;min-height:31px;padding:5px 9px;border:1px solid #BFD0E8;background:#FFFFFF;color:var(--brand-strong);border-radius:999px;font-size:.78rem;font-weight:900;line-height:1.1;cursor:pointer;white-space:nowrap;box-shadow:none}
.listen-btn:hover{background:var(--brand-wash);border-color:#9DB8DE}.listen-btn[aria-pressed="true"]{background:var(--brand);color:#fff;border-color:var(--brand)}
.audio-hint{display:flex;align-items:flex-start;gap:11px;background:#FFFFFF;border:1px solid var(--border);border-left:4px solid var(--accent);border-radius:16px;padding:13px 15px;color:var(--muted);font-size:.96rem;margin:26px 0 0;box-shadow:var(--shadow-hairline)}
.audio-hint strong{color:var(--brand-strong)}
.error-list{display:grid;gap:16px}.common-error{background:#fff;border:1px solid var(--border);border-left:5px solid var(--danger);border-radius:18px;padding:20px 22px;box-shadow:var(--shadow-hairline)}
.common-error p{margin:.3rem 0}.common-error del{color:var(--danger);text-decoration-thickness:2px}.common-error ins{color:var(--success);text-decoration:none;font-weight:900}
.example-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.example-block{background:#fff;border:1px solid var(--border);border-radius:18px;padding:22px;box-shadow:var(--shadow-hairline)}
.example-block p{margin:.28rem 0}.practice{background:#fff;border:1px solid var(--border);border-radius:var(--radius-lg);padding:27px;box-shadow:var(--shadow-hairline)}
.practice ol{padding-left:1.45rem}.practice li{margin:14px 0}.answer-toggle{margin-left:10px;border:1px solid #BFD0E8;background:var(--brand-wash);color:var(--brand-strong);border-radius:999px;padding:6px 10px;font-size:.88rem;font-weight:900;cursor:pointer}.practice strong{margin-left:8px;color:var(--success)}
.faq details{background:#fff;border:1px solid var(--border);border-radius:16px;padding:18px 19px;margin:12px 0;box-shadow:var(--shadow-hairline)}
.faq summary{font-weight:950;color:var(--brand-strong);cursor:pointer}.faq p{color:var(--muted);padding-top:10px}
.related-links{max-width:var(--content);border-top:1px solid var(--border);padding-top:30px}.related-links ul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;padding:0;list-style:none}.related-links a{display:block;background:white;border:1px solid var(--border);border-radius:14px;padding:15px 16px;font-weight:900;color:var(--brand-strong);box-shadow:var(--shadow-hairline)}.related-links a:hover{background:var(--brand-wash);text-decoration:none}

.site-footer{border-top:1px solid var(--border);max-width:var(--max);margin:0 auto;padding:36px 28px 50px;display:flex;justify-content:space-between;gap:28px;color:var(--muted)}.site-footer strong{color:var(--brand-strong)}.site-footer p{margin:.35rem 0 0;max-width:560px}.site-footer nav{display:flex;gap:16px;flex-wrap:wrap}.site-footer a{font-weight:760}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

@media (max-width:980px){
  .main-nav{display:none;position:absolute;left:18px;right:18px;top:74px;background:white;border:1px solid var(--border);border-radius:24px;padding:12px;box-shadow:var(--shadow-lift)}
  .main-nav.is-open{display:grid;grid-template-columns:1fr 1fr}
  .menu-toggle{display:flex}
  .hero,.search-panel,.split-section{grid-template-columns:1fr}
  .content-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .resource-row a{grid-template-columns:1fr;gap:8px}
  .site-footer{flex-direction:column}
  .brand span{display:none}
  .hero:before{right:0;top:46px;width:200px;height:200px}
}

@media (max-width:620px){
  body{font-size:17px;line-height:1.72;background:linear-gradient(180deg,#FFFFFF 0,#FBFCFE 22rem)}
  .header-inner{padding:12px 16px}.brand img{width:137px}.menu-toggle{width:46px;height:44px;border-radius:15px}
  .site-main{padding:22px 17px 60px}.breadcrumbs{font-size:.84rem;margin-bottom:24px;gap:6px}
  .hero{padding:36px 0 24px;gap:24px}.hero:before{display:none}
  .hero-copy h1,.article-header h1,.category-hero h1{letter-spacing:-.04em}
  .lead{font-size:1.08rem;line-height:1.66;margin-bottom:26px}
  .hero-actions{display:grid;gap:11px}.button{width:100%;min-height:50px}
  .hero-note{padding:23px 23px 23px 25px;border-radius:22px;box-shadow:var(--shadow-hairline)}
  .hero-note:before{top:20px;bottom:20px}.hero-note strong{font-size:1.26rem}
  section{margin:var(--space-section-mobile) 0}section > h2:first-child{margin-bottom:18px}
  .search-panel{border-radius:22px;padding:24px 20px 21px;gap:19px;box-shadow:var(--shadow-hairline)}
  .search-panel:before{left:20px;right:20px}.site-search{grid-template-columns:1fr;gap:10px}.site-search input{min-height:52px;border-radius:16px}.site-search button{width:100%;min-height:50px}.search-results{top:114px;border-radius:16px}
  .content-grid{grid-template-columns:1fr;border-left:0;border-top:1px solid var(--border);border-radius:0;background:transparent;box-shadow:none}
  .category-card{min-height:0;background:transparent;border-right:0;border-bottom:1px solid var(--border);padding:18px 2px 18px 0}.category-card:after{right:2px;bottom:17px}.category-card span{font-size:1.08rem}.category-card small{margin-top:8px}
  .category-card:hover{box-shadow:none;background:transparent;padding-left:8px}
  .split-section{gap:22px;padding-top:30px}.resource-list{border-top:1px solid var(--border)}
  .resource-row a{background:transparent;border:0;border-bottom:1px solid var(--border);border-radius:0;padding:20px 1px}.resource-row a:hover{padding:20px 1px;background:transparent}.resource-row strong{font-size:1.08rem}.resource-row span{font-size:.98rem}
  .quick-answer,.usage-note,.practice,.final-cta{padding:21px;border-radius:18px}.content-page section{margin:44px 0}.content-page > section:not(:first-of-type){padding-top:0}
  .final-cta{text-align:left;padding:28px 22px;box-shadow:var(--shadow-hairline)}.final-cta p{margin-left:0;margin-right:0}
  h2{font-size:1.62rem;line-height:1.14}h3{font-size:1.18rem}
  .article-header{margin-top:20px;margin-bottom:36px}.table-wrap{border-radius:16px;margin-left:-1px;margin-right:-1px}table{min-width:650px}th,td{padding:14px 13px;font-size:.95rem}.listen-btn{min-height:30px;padding:5px 8px;font-size:.76rem}.audio-hint{font-size:.92rem;margin-top:18px}
  .example-grid,.related-links ul{grid-template-columns:1fr}.common-error,.example-block{padding:18px}.faq details{padding:16px}.related-links{padding-top:24px}.related-links a{padding:14px 15px}
  .main-nav.is-open{grid-template-columns:1fr}.main-nav{top:66px;left:12px;right:12px}.main-nav a{padding:13px 12px;border-radius:14px}
  .site-footer{padding:30px 17px 42px}.site-footer nav{gap:10px 14px}
}

@media (max-width:380px){
  .site-main{padding-left:14px;padding-right:14px}.header-inner{padding-left:14px;padding-right:14px}.brand img{width:130px}
  .hero-copy h1,.article-header h1,.category-hero h1{font-size:2.08rem}.quick-answer,.usage-note,.practice,.final-cta,.hero-note,.search-panel{padding:18px}.button,.site-search button{padding-left:14px;padding-right:14px}.search-results{top:112px}
}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}.button:hover,.site-search button:hover{transform:none}}

/* === Frances30 mobile spacing/table polish patch === */
.home-main{padding-top:22px}
.home-main > .hero:first-child{padding-top:28px;margin-top:0}
.home-page .breadcrumbs{display:none}
.table-wrap{margin-top:18px;margin-bottom:8px}
.table-wrap table{table-layout:auto}
.table-wrap td,.table-wrap th{overflow-wrap:anywhere;word-break:normal}
.listen-wrap{min-width:0}.speakable-text{min-width:0}

@media (max-width:980px){
  .home-main{padding-top:18px}
  .home-main > .hero:first-child{padding-top:18px}
}

@media (max-width:700px){
  .table-wrap{
    overflow:visible;
    -webkit-overflow-scrolling:auto;
    border:0;
    border-radius:0;
    background:transparent;
    box-shadow:none;
    margin:16px 0 4px;
  }
  .table-wrap table{
    width:100%;
    min-width:0;
    border-collapse:separate;
    border-spacing:0 12px;
    background:transparent;
  }
  .table-wrap thead{display:none}
  .table-wrap tbody,.table-wrap tr,.table-wrap td{display:block;width:100%}
  .table-wrap tr{
    background:#fff;
    border:1px solid var(--border);
    border-radius:18px;
    padding:12px 15px;
    box-shadow:0 1px 0 rgba(17,24,39,.04);
  }
  .table-wrap td{
    display:grid;
    grid-template-columns:minmax(82px,34%) minmax(0,1fr);
    align-items:start;
    gap:10px 13px;
    border-bottom:1px solid #E8EEF6;
    padding:11px 0;
    font-size:.965rem;
    line-height:1.5;
    color:var(--text);
  }
  .table-wrap td:last-child{border-bottom:0}
  .table-wrap td::before{
    content:attr(data-label);
    color:#52627A;
    font-size:.73rem;
    font-weight:950;
    letter-spacing:.07em;
    line-height:1.25;
    text-transform:uppercase;
    padding-top:.16rem;
  }
  .table-wrap td:first-child{font-weight:700;color:var(--text)}
  .table-wrap td .speakable-text{font-weight:950;color:var(--brand-strong)}
  .table-wrap .listen-wrap{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:7px;
  }
  .table-wrap .listen-btn{margin:0;min-height:32px;padding:6px 10px;font-size:.76rem}
}

@media (max-width:620px){
  body{font-size:17px;line-height:1.68}
  .site-header{box-shadow:0 1px 0 rgba(17,24,39,.03)}
  .header-inner{padding:11px 16px;min-height:64px}
  .brand img{width:134px}
  .site-main{padding-top:16px;padding-left:18px;padding-right:18px}
  .home-main{padding-top:10px}
  .home-main > .hero:first-child{padding-top:8px;padding-bottom:22px}
  .breadcrumbs{margin-bottom:16px}
  .hero{gap:20px}
  .eyebrow{margin-bottom:12px;font-size:.7rem;letter-spacing:.14em}
  .hero-copy h1,.article-header h1,.category-hero h1{
    font-size:clamp(2.08rem,8.8vw,2.58rem);
    line-height:1.02;
    letter-spacing:-.042em;
    margin-bottom:18px;
  }
  .lead{font-size:1.05rem;line-height:1.62;margin-bottom:22px}
  .hero-actions{gap:10px}.button,.site-search button{min-height:52px}
  section{margin:42px 0}
  .content-page section{margin:40px 0}
  section > h2:first-child{margin-bottom:15px}
  h2{font-size:1.5rem;line-height:1.16;letter-spacing:-.032em}
  h3{font-size:1.13rem;line-height:1.24;margin-top:1.35em}
  .search-panel{
    margin-top:34px;
    padding:21px 18px 19px;
    border-radius:19px;
    gap:16px;
  }
  .search-panel h2{font-size:1.32rem}.search-panel p{font-size:.98rem;line-height:1.55}
  .quick-answer,.usage-note,.practice,.final-cta,.hero-note,.common-error,.example-block{
    padding:18px;
    border-radius:16px;
  }
  .quick-answer,.usage-note{border-left-width:4px}
  .quick-answer{font-size:1rem;line-height:1.62}
  .example-grid{gap:13px}
  .common-error{line-height:1.55}
  .faq details{border-radius:14px;padding:15px 16px;margin:10px 0}
  .related-links a{border-radius:13px;padding:13px 14px;line-height:1.35}
  .resource-row a{padding:18px 0}.resource-row strong{font-size:1.04rem}.resource-row span{font-size:.96rem;line-height:1.55}
  .category-card{padding-top:16px;padding-bottom:16px}.category-card span{font-size:1.04rem}
  .audio-hint{padding:12px 13px;border-radius:14px;font-size:.9rem;line-height:1.45;margin-top:16px}
  .main-nav{top:66px;max-height:calc(100vh - 84px);overflow:auto}
}

@media (max-width:380px){
  .site-main{padding-left:15px;padding-right:15px}
  .home-main{padding-top:8px}
  .home-main > .hero:first-child{padding-top:6px}
  .hero-copy h1,.article-header h1,.category-hero h1{font-size:2rem;line-height:1.03}
  .lead{font-size:1.01rem}
  .table-wrap tr{padding:11px 13px;border-radius:16px}
  .table-wrap td{grid-template-columns:1fr;gap:4px;padding:10px 0}
  .table-wrap td::before{font-size:.71rem;padding-top:0}
}


.section-intro{max-width:760px;margin:-.35rem 0 1.1rem;color:var(--muted);font-size:1.02rem;line-height:1.7}.legacy-grammar-page .article-header{border-bottom:1px solid var(--border);padding-bottom:1.4rem}.legacy-grammar-page section{scroll-margin-top:92px}@media(max-width:640px){.section-intro{font-size:.98rem;margin-bottom:.9rem}.legacy-grammar-page .article-header{padding-bottom:1.15rem}}

/* === Frances30 identity polish === */
.hero-note:before{background:linear-gradient(180deg,var(--brand),var(--accent));}
.category-card:after{color:var(--accent);}
.audio-hint{background:var(--accent-soft);border:1px solid rgba(180,35,76,.18);}
.listen-btn{border-color:rgba(36,60,122,.22);}
.listen-btn.is-speaking{background:var(--brand);color:#fff;}

/* === Frances30 premium mobile/logo polish v2 === */
:root{
  --shadow-hairline:0 1px 2px rgba(17,24,39,.045);
  --shadow-soft:0 18px 44px rgba(21,27,61,.07);
  --shadow-lift:0 26px 70px rgba(21,27,61,.11);
  --radius-xl:28px;
  --radius-lg:22px;
  --radius-md:16px;
  --space-section:76px;
  --space-section-mobile:44px;
}

body{
  background:
    radial-gradient(circle at 9% -12%, rgba(36,60,122,.09), transparent 31rem),
    radial-gradient(circle at 98% 4%, rgba(180,35,76,.055), transparent 26rem),
    linear-gradient(180deg,#FFFFFF 0,#FBFCFE 25rem,#FCFCFD 100%);
}

.site-header{
  background:rgba(255,255,255,.91);
  border-bottom:1px solid rgba(225,231,240,.86);
  box-shadow:0 1px 0 rgba(17,24,39,.025);
}

.header-inner{
  min-height:72px;
  padding:14px 28px;
  gap:18px;
}

.brand{
  gap:12px;
  min-width:0;
  flex:0 1 auto;
}

.brand img{
  width:168px;
  max-width:42vw;
  height:auto;
  flex:0 0 auto;
}

.brand span{
  white-space:nowrap;
  color:#5F6F86;
  border-left-color:#D7E0EC;
}

.main-nav{gap:6px;justify-content:flex-end}
.main-nav a{padding:10px 12px;border-radius:999px}
.menu-toggle{flex:0 0 auto}

.site-main{padding-top:38px;padding-bottom:92px}
.home-main{padding-top:28px}
.breadcrumbs{margin-bottom:32px}

.hero{
  gap:54px;
  padding:58px 0 48px;
}
.hero-copy h1,.article-header h1,.category-hero h1{margin-bottom:22px}
.lead{margin-bottom:28px}
.hero-note{
  padding:32px 34px;
  border-color:#D8E2EF;
  box-shadow:0 20px 50px rgba(21,27,61,.075);
}

section{margin:var(--space-section) 0}
.content-page section{margin:56px 0}
section > h2:first-child{margin-bottom:22px}
.section-intro{margin-bottom:1.25rem}

.search-panel{
  padding:32px 34px;
  border-color:#D8E2EF;
  box-shadow:0 18px 46px rgba(21,27,61,.065);
}
.site-search input{
  border-color:#CBD7E7;
  box-shadow:inset 0 1px 2px rgba(17,24,39,.035),0 1px 0 rgba(255,255,255,.72);
}

.content-grid{
  border-color:#DCE5F0;
  box-shadow:0 10px 32px rgba(21,27,61,.045);
}
.category-card{
  padding:24px 22px 25px;
  border-color:#DCE5F0;
}
.category-card:hover{background:linear-gradient(180deg,#FFFFFF,#F7FAFF)}

.split-section{
  gap:46px;
  padding-top:46px;
  border-top-color:#DCE5F0;
}
.usage-note,.quick-answer,.practice,.final-cta,.example-block,.common-error,.faq details,.related-links a{
  border-color:#DCE5F0;
  box-shadow:0 8px 24px rgba(21,27,61,.045);
}
.quick-answer,.usage-note{padding:27px 29px}
.practice{padding:29px}

.resource-list{border-top-color:#DCE5F0}
.resource-row a{
  padding:27px 6px;
  border-bottom-color:#DCE5F0;
}
.resource-row a:hover{
  background:linear-gradient(90deg,rgba(238,242,255,.78),rgba(255,241,244,.42));
  border-color:#CBD8EA;
}

.article-header{margin:32px 0 46px}
.article-header .lead{max-width:800px}
.table-wrap{
  border-color:#DCE5F0;
  box-shadow:0 10px 28px rgba(21,27,61,.045);
}
th,td{border-bottom-color:#E4EAF3}
th{background:#F5F8FC}
.related-links{padding-top:32px}
.final-cta{padding:46px 36px}
.site-footer{padding-top:38px}

@media (max-width:980px){
  .header-inner{min-height:68px;padding:12px 22px}
  .brand img{width:154px;max-width:calc(100vw - 112px)}
  .main-nav{
    top:72px;
    left:20px;
    right:20px;
    padding:14px;
    border-radius:22px;
    border-color:#D8E2EF;
  }
  .main-nav a{padding:13px 14px}
  .hero,.search-panel,.split-section{gap:28px}
}

@media (max-width:700px){
  .table-wrap tr{
    border-color:#DCE5F0;
    box-shadow:0 7px 20px rgba(21,27,61,.045);
  }
}

@media (max-width:620px){
  body{font-size:17px;line-height:1.67}
  .header-inner{
    min-height:60px;
    padding:9px 16px;
  }
  .brand img{
    width:132px;
    max-width:calc(100vw - 94px);
  }
  .menu-toggle{
    width:42px;
    height:40px;
    border-radius:14px;
    box-shadow:0 1px 2px rgba(17,24,39,.05);
  }
  .menu-toggle span{width:18px}
  .main-nav{
    top:62px;
    left:12px;
    right:12px;
    padding:10px;
    border-radius:18px;
  }
  .main-nav a{
    padding:12px 12px;
    border-radius:13px;
    font-size:.96rem;
  }
  .site-main{
    padding:18px 18px 64px;
  }
  .home-main{padding-top:12px}
  .breadcrumbs{
    margin:0 0 18px;
    line-height:1.45;
  }
  .hero{
    padding:30px 0 24px;
    gap:22px;
  }
  .home-main > .hero:first-child{padding-top:14px;padding-bottom:24px}
  .hero-copy h1,.article-header h1,.category-hero h1{
    font-size:clamp(2.05rem,8.7vw,2.5rem);
    line-height:1.03;
    margin-bottom:17px;
  }
  .lead{
    font-size:1.045rem;
    line-height:1.62;
    margin-bottom:21px;
  }
  .eyebrow{margin-bottom:11px}
  .hero-actions{gap:10px}
  .button,.site-search button{min-height:50px}
  .hero-note{
    padding:20px 21px 20px 23px;
    border-radius:19px;
    box-shadow:0 8px 24px rgba(21,27,61,.05);
  }
  .hero-note strong{font-size:1.18rem;margin:11px 0 8px}
  section{margin:var(--space-section-mobile) 0}
  .content-page section{margin:40px 0}
  section > h2:first-child{margin-bottom:14px}
  h2{font-size:1.48rem;line-height:1.16;margin-bottom:16px}
  h3{font-size:1.12rem;margin-top:1.3em;margin-bottom:.62em}
  .search-panel{
    margin-top:30px;
    padding:20px 18px 18px;
    border-radius:18px;
    gap:15px;
    box-shadow:0 8px 24px rgba(21,27,61,.05);
  }
  .search-panel:before{left:18px;right:18px;height:3px}
  .site-search input{border-radius:15px;padding:0 16px}
  .content-grid{border-radius:0;box-shadow:none}
  .category-card{padding:15px 2px 15px 0}
  .category-card small{margin-top:7px}
  .split-section{padding-top:28px;gap:20px}
  .quick-answer,.usage-note,.practice,.final-cta,.common-error,.example-block{
    padding:18px;
    border-radius:16px;
    box-shadow:0 6px 18px rgba(21,27,61,.04);
  }
  .resource-row a{padding:18px 0}
  .resource-row strong{line-height:1.28}
  .article-header{margin:18px 0 34px}
  .table-wrap{margin-top:16px}
  .table-wrap tr{border-radius:17px;padding:12px 14px}
  .faq details{padding:15px 16px;border-radius:14px}
  .related-links{padding-top:22px}
  .related-links a{border-radius:13px;padding:13px 14px}
  .final-cta{padding:26px 21px}
  .site-footer{padding:30px 18px 42px}
}

@media (max-width:380px){
  .header-inner{padding-left:14px;padding-right:14px}
  .brand img{width:124px;max-width:calc(100vw - 88px)}
  .menu-toggle{width:40px;height:38px}
  .site-main{padding-left:15px;padding-right:15px}
  .hero-copy h1,.article-header h1,.category-hero h1{font-size:1.96rem}
  .lead{font-size:1rem}
  .search-panel,.hero-note,.quick-answer,.usage-note,.practice,.final-cta,.common-error,.example-block{padding:17px}
}

.phrase-table[data-audio-column="2"] td:nth-child(2) .listen-wrap{justify-content:space-between}