:root{
      --primary:#075fff;
      --primary-2:#004fe8;
      --primary-soft:#edf5ff;
      --navy:#06133d;
      --text:#1f315f;
      --muted:#52648f;
      --line:#dbe5f6;
      --line-2:#e7eef9;
      --bg:#fbfdff;
      --card:#ffffff;
      --green:#12b76a;
      --purple:#6d42f5;
      --orange:#ff8a00;
      --red:#ff2734;
      --shadow:0 24px 65px rgba(20,45,90,.10);
      --shadow-soft:0 12px 34px rgba(15,42,86,.075);
      --radius-xl:28px;
      --radius-lg:22px;
      --radius-md:16px;
      --max:1600px;
    }

    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0;
      font-family:"Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
      color:var(--navy);
      background:
        radial-gradient(circle at 15% 10%, rgba(7,95,255,.04), transparent 26%),
        radial-gradient(circle at 85% 18%, rgba(7,95,255,.05), transparent 27%),
        linear-gradient(180deg,#fff 0%,#fbfdff 48%,#fff 100%);
      line-height:1.55;
      letter-spacing:-.01em;
    }
    .page-shell,
    .page-shell *{
      font-family:"Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
    }

    a{text-decoration:none;color:inherit}
    button,input,select,textarea{font:inherit}
    button{cursor:pointer}
    .container{
      width:min(var(--max), calc(100% - 80px));
      margin-inline:auto;
    }

    .page-shell{
      padding:56px 0 0;
      overflow:hidden;
    }

    .icon{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      flex:0 0 auto;
    }
    .icon svg{width:1em;height:1em;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
    .logo-icon{
      width:66px;height:66px;border:5px solid var(--primary);border-radius:50%;
      color:var(--primary);display:grid;place-items:center;background:white;
      box-shadow:0 14px 28px rgba(7,95,255,.10);
    }
    .logo-icon svg{width:36px;height:36px;stroke-width:2.8}

    /* Header */
    .site-header{
      margin-bottom:54px;
    }
    .nav-card{
      min-height:132px;
      padding:20px 30px;
      border:1px solid var(--line);
      border-radius:30px;
      background:rgba(255,255,255,.92);
      box-shadow:0 18px 45px rgba(10,34,82,.08);
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:24px;
    }
    .brand-block{
      display:flex;
      align-items:center;
      gap:18px;
      min-width:370px;
    }
    .brand-text{
      display:flex;
      flex-direction:column;
      min-width:0;
    }
    .brand-title{
      display:block;
      font-size:27px;
      font-weight:900;
      line-height:1.05;
      letter-spacing:-.04em;
      white-space:nowrap;
    }
    .brand-subtitle{
      display:block;
      margin-top:5px;
      color:#627197;
      font-size:21px;
      font-weight:500;
      white-space:nowrap;
      letter-spacing:-.03em;
    }
    .divider{
      width:1px;height:48px;background:var(--line);
      flex:0 0 auto;
    }
    .country{
      display:flex;
      align-items:center;
      gap:14px;
      font-size:21px;
      color:#52648f;
      font-weight:600;
      min-width:150px;
    }
    .germany-flag{
      width:36px;height:24px;border-radius:4px;overflow:hidden;box-shadow:0 2px 5px rgba(0,0,0,.12);display:block;
      background:linear-gradient(#000 0 33.3%,#dd0000 33.3% 66.6%,#ffce00 66.6%);
    }
    .nav-links{
      display:flex;
      align-items:stretch;
      gap:42px;
      height:86px;
      margin-left:auto;
    }
    .nav-link{
      position:relative;
      display:flex;
      align-items:center;
      justify-content:center;
      font-size:20px;
      font-weight:800;
      color:#06133d;
      white-space:nowrap;
    }
    .nav-link.active{color:var(--primary)}
    .nav-link.active::after{
      content:"";
      position:absolute;
      height:6px;
      width:112px;
      border-radius:999px;
      left:50%;
      transform:translateX(-50%);
      bottom:-23px;
      background:var(--primary);
      box-shadow:0 4px 10px rgba(7,95,255,.22);
    }
    .nav-actions{
      display:flex;
      align-items:center;
      gap:16px;
      margin-left:18px;
    }
    .square-btn,.lang-btn{
      height:64px;
      border:1px solid var(--line);
      border-radius:17px;
      background:white;
      display:flex;
      align-items:center;
      justify-content:center;
      color:#06133d;
      box-shadow:0 7px 18px rgba(10,34,82,.04);
    }
    .square-btn{width:64px;font-size:30px}
    .lang-btn{
      padding:0 24px;
      min-width:112px;
      gap:12px;
      font-size:22px;
      font-weight:800;
    }

    /* Shared sections */
    section{
      margin-top:68px;
    }
    .section-head{
      margin-bottom:30px;
    }
    .section-eyebrow{
      display:inline-flex;
      align-items:center;
      gap:10px;
      padding:8px 16px;
      border-radius:999px;
      background:#edf5ff;
      color:#075fff;
      font-weight:900;
      font-size:18px;
      margin-bottom:24px;
    }
    .section-eyebrow .mini-badge-icon{
      width:24px;height:24px;border-radius:50%;background:#dcecff;display:grid;place-items:center;color:#075fff;
    }
    h1,h2,h3,p{margin-top:0}
    h1,h2,h3{
      color:var(--navy);
      line-height:1.06;
      letter-spacing:-.055em;
    }
    h1{
      font-size:clamp(46px,4.6vw,76px);
      max-width:1120px;
      margin-bottom:28px;
    }
    h2{
      font-size:clamp(42px,3.6vw,64px);
      margin-bottom:16px;
    }
    h3{
      font-size:28px;
      margin-bottom:12px;
    }
    .section-copy{
      color:#344977;
      font-size:23px;
      line-height:1.65;
      margin:0;
    }

    /* Hero */
    .hero{
      margin-top:0;
      height:395px;
      display:flex;
      align-items:center;
      position:relative;
      overflow:visible;
    }
    .hero::before{
      content:"";
      position:absolute;
      inset:-70px -110px -35px auto;
      width:600px;
      background:
        radial-gradient(circle at 69% 28%, rgba(7,95,255,.10), transparent 33%),
        radial-gradient(circle at 66% 40%, rgba(7,95,255,.10), transparent 29%);
      opacity:.92;
      pointer-events:none;
    }
    .clock-art{
      position:absolute;
      right:-74px;
      top:-46px;
      width:640px;
      height:440px;
      opacity:.58;
      pointer-events:none;
    }
    .clock-face{
      position:absolute;
      right:110px;
      top:0;
      width:352px;
      height:352px;
      border-radius:50%;
      border:24px solid rgba(7,95,255,.12);
      background:rgba(255,255,255,.32);
    }
    .clock-face::before{
      content:"";
      position:absolute;
      width:14px;height:14px;border-radius:50%;
      background:rgba(7,95,255,.42);
      left:50%;top:50%;transform:translate(-50%,-50%);
      box-shadow:0 0 0 15px rgba(7,95,255,.10);
    }
    .hand{position:absolute;background:rgba(7,95,255,.33);height:15px;border-radius:999px;transform-origin:100% 50%;left:50%;top:50%}
    .hand.one{width:138px;transform:translate(-100%,-50%) rotate(42deg)}
    .hand.two{width:108px;transform:translate(-100%,-50%) rotate(132deg)}
    .tick{position:absolute;width:9px;height:32px;border-radius:99px;background:rgba(7,95,255,.13);left:50%;top:20px;transform:translateX(-50%)}
    .tick.t2{top:auto;bottom:20px}
    .tick.t3{left:20px;top:50%;transform:translateY(-50%) rotate(90deg)}
    .tick.t4{left:auto;right:20px;top:50%;transform:translateY(-50%) rotate(90deg)}
    .wave-art{
      position:absolute;
      right:-140px;
      bottom:-102px;
      width:950px;
      height:300px;
      opacity:.55;
      background:
        repeating-radial-gradient(ellipse at 72% 100%, transparent 0 19px, rgba(7,95,255,.12) 20px 22px, transparent 23px 41px);
      transform:rotate(-10deg);
      border-radius:50%;
    }
    .dots{
      position:absolute;
      width:92px;height:92px;
      background-image:radial-gradient(rgba(7,95,255,.23) 2.2px, transparent 2.2px);
      background-size:16px 16px;
      right:455px;top:22px;opacity:.7;
    }
    .dots.bottom{right:104px;top:auto;bottom:2px;background-image:radial-gradient(rgba(255,255,255,.95) 2.5px, transparent 2.5px);opacity:.95}
    .hero-content{
      position:relative;
      z-index:1;
      width:100%;
      max-width:1100px;
    }
    .hero h1{
      font-size:clamp(48px,4.2vw,72px);
      max-width:1120px;
      margin-bottom:24px;
    }
    .hero .section-copy{
      max-width:930px;
      font-size:30px;
      line-height:1.45;
    }
    .hero-actions{
      display:flex;
      gap:34px;
      margin-top:50px;
      align-items:center;
    }
    .btn{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:18px;
      height:88px;
      padding:0 46px;
      border-radius:13px;
      border:1.5px solid transparent;
      font-weight:600;
      font-size:26px;
      transition:.2s ease;
      letter-spacing:-.02em;
    }
    .btn-primary{
      background:linear-gradient(180deg,#0b6cff 0%,#0055ee 100%);
      color:#fff;
      box-shadow:0 18px 32px rgba(7,95,255,.22);
    }
    .btn-outline{
      color:var(--primary);
      border-color:var(--primary);
      background:rgba(255,255,255,.74);
      box-shadow:0 10px 24px rgba(7,95,255,.05);
    }
    .btn svg{width:34px;height:34px}

    /* Calculator */
    .calculator-section{
      margin-top:72px;
    }
    .calculator-wrap{
      background:#fff;
      border:1px solid var(--line-2);
      border-radius:26px;
      box-shadow:var(--shadow);
      padding:32px;
    }
    .calculator-section .section-head{
      margin-bottom:26px;
    }
    .calculator-section h2{
      font-size:45px;
      margin-bottom:6px;
    }
    .calculator-section .section-copy{
      font-size:20px;
    }
    .calc-grid{
      display:grid;
      grid-template-columns:minmax(0,1fr) 390px;
      gap:26px;
      align-items:stretch;
    }
    .calc-main,.rule-card{
      border:1px solid var(--line);
      border-radius:19px;
      background:white;
    }
    .calc-tabs{
      display:grid;
      grid-template-columns:repeat(3,1fr);
      gap:0;
      padding:0;
      border-bottom:1px solid var(--line-2);
      margin:0;
      background:white;
    }
    .calc-tab{
      height:58px;
      border:1px solid var(--line-2);
      border-left:0;
      border-top:0;
      background:white;
      color:var(--navy);
      font-size:17px;
      font-weight:600;
      display:flex;
      align-items:center;
      justify-content:center;
      gap:10px;
    }
    .calc-tab:first-child{border-left:0}
    .calc-tab.active{
      color:#fff;
      background:linear-gradient(180deg,#0b6cff,#0055ee);
      border-color:var(--primary);
      box-shadow:0 8px 18px rgba(7,95,255,.20);
    }
    .calc-body{
      display:grid;
      grid-template-columns:1.5fr .9fr;
      gap:0;
    }
    .calc-left,.break-panel,.multi-panel{
      padding:22px 26px;
    }
    .break-panel{
      border-left:1px solid var(--line-2);
      border-bottom:1px solid var(--line-2);
      border-bottom-left-radius:18px;
    }
    .form-row{
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:30px;
      margin-bottom:22px;
    }
    label{
      display:block;
      font-size:15px;
      color:var(--navy);
      font-weight:600;
      margin-bottom:8px;
    }
    .field{
      height:46px;
      border:1px solid #cdd9ed;
      border-radius:8px;
      background:#fff;
      display:flex;
      align-items:center;
      gap:12px;
      padding:0 15px;
      color:var(--navy);
      font-size:16px;
      font-weight:650;
    }
    .field input,.field select{
      width:100%;
      border:0;
      outline:0;
      background:transparent;
      color:inherit;
      font:inherit;
      appearance:none;
    }
    .field .chev{font-weight:900;color:#304574}
    .preset-field{width:100%;max-width:450px}
    .legal-row{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:22px;
      margin-top:28px;
      padding-bottom:0;
    }
    .legal-row p{
      margin:6px 0 0;
      color:#3f527e;
      font-size:16px;
      line-height:1.45;
    }
    .info-dot{
      display:inline-grid;
      place-items:center;
      width:18px;height:18px;border-radius:50%;
      border:2px solid #536998;
      color:#536998;
      font-size:12px;
      vertical-align:middle;
      margin-left:6px;
      font-weight:900;
      position:relative;
      cursor:help;
    }
    .info-dot[data-info]::after{
      content:attr(data-info);
      position:absolute;
      left:50%;
      bottom:calc(100% + 10px);
      transform:translateX(-50%) translateY(4px);
      width:min(280px,calc(100vw - 48px));
      padding:11px 12px;
      border:1px solid #cbd9ee;
      border-radius:10px;
      background:#fff;
      box-shadow:0 14px 34px rgba(16,44,86,.16);
      color:#243a6c;
      font-size:13px;
      line-height:1.45;
      font-weight:700;
      text-align:left;
      opacity:0;
      visibility:hidden;
      pointer-events:none;
      z-index:30;
    }
    .info-dot[data-info]::before{
      content:"";
      position:absolute;
      left:50%;
      bottom:calc(100% + 4px);
      transform:translateX(-50%);
      border:6px solid transparent;
      border-top-color:#fff;
      opacity:0;
      visibility:hidden;
      z-index:31;
    }
    .info-dot[data-info]:hover::after,
    .info-dot[data-info]:hover::before,
    .info-dot[data-info]:focus::after,
    .info-dot[data-info]:focus::before,
    .info-dot[data-info].info-open::after,
    .info-dot[data-info].info-open::before{
      opacity:1;
      visibility:visible;
      transform:translateX(-50%) translateY(0);
    }
    .switch{
      width:58px;height:30px;border-radius:99px;background:linear-gradient(180deg,#0b6cff,#0055ee);position:relative;flex:0 0 auto;
      box-shadow:inset 0 0 0 1px rgba(0,0,0,.04);
    }
    .switch::after{
      content:"";
      position:absolute;
      top:3px;right:3px;
      width:24px;height:24px;background:#fff;border-radius:50%;
      box-shadow:0 3px 8px rgba(0,0,0,.14);
    }
    .break-panel h3,.multi-panel h3{
      font-size:21px;
      letter-spacing:-.04em;
      margin-bottom:12px;
    }
    .segmented{
      display:grid;
      grid-template-columns:repeat(3, 1fr);
      border:1px solid #cdd9ed;
      border-radius:8px;
      overflow:hidden;
      margin-bottom:16px;
      height:42px;
    }
    .segmented button{
      border:0;background:white;color:var(--navy);font-size:13px;font-weight:600;padding:0 4px;
    }
    .segmented button.active{
      background:linear-gradient(180deg,#0b6cff,#0055ee);
      color:#fff;
    }
    .break-count{
      color:var(--primary);
      font-weight:600;
      font-size:16px;
      margin-bottom:10px;
    }
    .break-list{
      display:grid;
      gap:9px;
      margin-bottom:13px;
    }
    .break-item{
      height:44px;
      border:1px solid #d5dfef;
      border-radius:8px;
      display:grid;
      grid-template-columns:30px 1fr 16px 1fr 74px 18px;
      align-items:center;
      gap:8px;
      padding:0 12px;
      font-size:15px;
      color:var(--navy);
      background:white;
    }
    .break-item .duration{text-align:right;color:#344977;font-size:14px}
    .break-item .x{font-size:20px;color:#263c70}
    .small-outline{
      height:43px;width:100%;
      border:1.5px solid var(--primary);
      background:white;
      color:var(--primary);
      border-radius:8px;
      font-size:17px;
      font-weight:600;
      display:flex;
      align-items:center;
      justify-content:center;
      gap:12px;
    }
    .multi-panel{
      grid-column:1 / -1;
      border-top:1px solid var(--line-2);
    }
    .optional{
      background:#eaf3ff;
      color:#075fff;
      font-size:14px;
      font-weight:600;
      border-radius:999px;
      padding:3px 10px;
      vertical-align:middle;
      margin-left:8px;
    }
    .multi-panel p{
      color:#344977;
      margin:0 0 14px;
      font-size:16px;
    }
    .break-entry-grid{
      display:grid;
      grid-template-columns:1.2fr 1.2fr 1fr 40px;
      gap:18px;
      align-items:end;
      margin-bottom:8px;
    }
    .trash{
      height:40px;
      border:0;
      background:transparent;
      color:var(--red);
      font-size:22px;
      display:grid;
      place-items:center;
    }
    .add-another{
      height:42px;
      width:100%;
      border:1px dashed #add0ff;
      color:var(--primary);
      background:#fff;
      border-radius:8px;
      font-weight:600;
      font-size:16px;
      display:flex;
      align-items:center;
      justify-content:center;
      gap:10px;
      margin:10px 0 14px;
    }
    .calculate-btn{
      width:100%;
      height:46px;
      border:0;
      border-radius:8px;
      background:linear-gradient(180deg,#0b6cff,#0055ee);
      color:#fff;
      font-size:17px;
      font-weight:600;
      display:flex;
      justify-content:center;
      align-items:center;
      gap:12px;
      box-shadow:0 10px 20px rgba(7,95,255,.18);
    }
    .formula-note{
      margin-top:13px;
      color:#495d89;
      font-size:14px;
      display:flex;
      gap:9px;
      align-items:center;
    }
    .rule-card{
      padding:30px 28px;
    }
    .rule-title{
      display:flex;
      align-items:center;
      gap:18px;
      font-size:25px;
      font-weight:900;
      margin-bottom:32px;
    }
    .shield{
      width:44px;height:44px;border-radius:14px;
      display:grid;place-items:center;
      background:linear-gradient(180deg,#0b6cff,#0055ee);
      color:#fff;
    }
    .rule-list{display:grid;gap:34px}
    .rule-item{
      display:grid;
      grid-template-columns:34px 1fr;
      gap:18px;
      align-items:start;
    }
    .check-circle{
      width:27px;height:27px;border-radius:50%;
      background:var(--green);
      color:#fff;
      display:grid;
      place-items:center;
      justify-content:center;
      align-content:center;
      font-size:16px;
      font-weight:900;
      line-height:1;
      flex:0 0 auto;
    }
    .check-circle .ui-svg{
      display:grid;
      place-items:center;
      line-height:1;
    }
    .rule-item strong{
      display:block;
      font-size:18px;
      margin-bottom:5px;
    }
    .rule-item span{
      font-size:16px;
      line-height:1.5;
    }
    .note-box{
      margin-top:36px;
      border-top:1px solid var(--line-2);
      padding-top:22px;
    }
    .note-inner{
      display:grid;
      grid-template-columns:38px 1fr;
      gap:16px;
      background:#f4f9ff;
      border:1px solid #cfe0f8;
      border-radius:9px;
      padding:20px;
      align-items:start;
    }
    .info-circle{
      width:34px;height:34px;border-radius:50%;
      background:var(--primary);
      color:#fff;
      display:grid;
      place-items:center;
      font-weight:900;
    }
    .note-inner strong{font-size:18px;display:block;margin-bottom:8px}
    .note-inner span{font-size:15px}
    .result-cards{
      display:grid;
      grid-template-columns:repeat(4,1fr);
      gap:22px;
      margin-top:24px;
    }
    .result-card{
      border:1px solid var(--line-2);
      border-radius:15px;
      background:white;
      box-shadow:0 9px 24px rgba(10,34,82,.04);
      padding:22px 24px;
      display:grid;
      grid-template-columns:68px 1fr;
      gap:18px;
      align-items:start;
      min-height:144px;
    }
    .metric-icon{
      width:58px;height:58px;border-radius:50%;display:grid;place-items:center;font-size:27px;
      background:#eafbf2;color:var(--green);
    }
    .metric-icon.blue{background:#edf5ff;color:var(--primary)}
    .metric-icon.purple{background:#f2eaff;color:#842fff}
    .result-card strong{font-size:15px;display:block;margin-bottom:8px}
    .result-card .number{
      font-size:27px;font-weight:950;letter-spacing:-.055em;line-height:1;color:var(--green);margin-bottom:8px;
    }
    .result-card .number.blue{color:var(--primary)}
    .result-card .number.purple{color:#842fff}
    .result-card p{font-size:14px;line-height:1.38;color:#344977;margin:0}

    /* Benefits */
    .benefits-panel{
      border:1px solid var(--line-2);
      border-radius:28px;
      background:white;
      box-shadow:var(--shadow-soft);
      padding:48px 52px;
    }
    .benefits-panel h2{
      font-size:62px;
      margin-bottom:18px;
    }
    .benefits-panel .section-copy{
      font-size:25px;
    }
    .benefit-grid{
      display:grid;
      grid-template-columns:repeat(3,1fr);
      gap:24px 28px;
      margin-top:40px;
    }
    .benefit-card{
      min-height:216px;
      border:1px solid var(--line-2);
      border-radius:18px;
      background:white;
      box-shadow:0 12px 30px rgba(16,44,86,.06);
      padding:34px 36px;
    }
    .benefit-icon{
      width:74px;height:74px;border-radius:50%;
      display:grid;place-items:center;
      color:var(--primary);
      background:#edf5ff;
      font-size:40px;
      margin-bottom:25px;
    }
    .benefit-icon.orange{background:#fff3e8;color:var(--orange)}
    .benefit-icon.green{background:#ecfbf2;color:var(--green)}
    .benefit-icon.purple{background:#f1edff;color:var(--purple)}
    .benefit-card h3{
      font-size:26px;
      margin-bottom:12px;
    }
    .benefit-card p{
      font-size:20px;
      line-height:1.55;
      color:#344977;
      margin:0;
    }

    /* How */
    .how-section h2{
      font-size:64px;
      margin-bottom:18px;
    }
    .how-grid{
      display:grid;
      grid-template-columns:repeat(3,1fr);
      gap:34px;
      margin-top:34px;
    }
    .how-card{
      border:1.5px solid #a7c7ff;
      border-radius:18px;
      background:linear-gradient(180deg,#fff,#fafdff);
      box-shadow:0 18px 42px rgba(16,44,86,.08);
      padding:36px;
      min-height:900px;
    }
    .how-card:nth-child(2){
      border-color:#c6c0ff;
      background:linear-gradient(180deg,#fff,#fbfbff);
    }
    .how-card:nth-child(3){
      border-color:#99e5bd;
      background:linear-gradient(180deg,#fff,#f9fffc);
    }
    .step-badge{
      display:inline-flex;
      align-items:center;
      gap:10px;
      height:58px;
      padding:0 22px;
      border-radius:13px;
      color:var(--primary);
      background:#edf5ff;
      border:1px solid #c9dcff;
      font-size:23px;
      font-weight:900;
      margin-bottom:26px;
    }
    .how-card:nth-child(2) .step-badge{color:#5142e8;border-color:#ccc5ff;background:#f1efff}
    .how-card:nth-child(3) .step-badge{color:#079a53;border-color:#b5ebce;background:#effcf5}
    .how-card h3{
      font-size:27px;
      line-height:1.22;
      margin-bottom:22px;
    }
    .mini-ui{
      border:1px solid #cfdcf1;
      border-radius:13px;
      background:white;
      padding:20px;
      margin-bottom:34px;
      min-height:345px;
    }
    .mini-ui-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:19px}
    .mini-label{font-size:13px;font-weight:900;margin-bottom:8px;color:var(--navy)}
    .mini-field{height:42px;border:1px solid #d2dced;border-radius:7px;display:flex;align-items:center;gap:10px;padding:0 13px;font-size:15px;font-weight:600}
    .mini-seg{display:grid;grid-template-columns:1fr 1fr;height:36px;border:1px solid #d2dced;border-radius:7px;overflow:hidden}
    .mini-seg span{display:grid;place-items:center;font-size:12px;font-weight:800}
    .mini-seg .active{background:var(--primary);color:white}
    .mini-break{
      height:52px;border:1px solid #d2dced;border-radius:7px;
      display:grid;grid-template-columns:24px 1fr 18px 1fr 72px 14px;align-items:center;gap:7px;
      padding:0 12px;margin-top:14px;font-size:15px;font-weight:600;
    }
    .mini-btn{
      height:52px;border:0;border-radius:7px;background:linear-gradient(180deg,#0b6cff,#0055ee);color:#fff;
      display:flex;align-items:center;justify-content:center;gap:12px;font-size:18px;font-weight:600;margin-top:17px;width:100%;
    }
    .mini-legal{
      border:1px solid #cfdcf1;border-radius:13px;padding:18px;background:white;margin-bottom:24px;
    }
    .mini-legal-title{display:flex;align-items:center;justify-content:space-between;font-weight:900;font-size:16px;margin-bottom:12px}
    .mini-rule{border:1px solid #dbe5f6;border-bottom:0;padding:11px 14px;font-size:13px;color:#344977}
    .mini-rule:last-child{border-bottom:1px solid #dbe5f6;border-radius:0 0 8px 8px}
    .mini-rule:first-of-type{border-radius:8px 8px 0 0}
    .mini-good{font-size:14px;color:#079a53;font-weight:600;margin-bottom:10px}
    .step-list{
      display:grid;
      gap:22px;
      margin:0;
      padding:0;
      list-style:none;
    }
    .step-list li{
      display:grid;
      grid-template-columns:24px 1fr;
      gap:18px;
      color:#10265a;
      font-size:18px;
      line-height:1.5;
    }
    .small-check{
      width:22px;height:22px;border-radius:50%;
      background:var(--primary);
      color:#fff;
      display:grid;place-items:center;font-size:12px;font-weight:900;margin-top:2px;
    }
    .how-card:nth-child(2) .small-check{background:#5744f2}
    .how-card:nth-child(3) .small-check{background:#08a65a}
    .how-grid-4{grid-template-columns:repeat(2,1fr)}
    #how .how-card:nth-child(3){border-color:#ffd9ad;background:linear-gradient(180deg,#fff,#fffaf3)}
    #how .how-card:nth-child(3) .step-badge{color:#c2650a;border-color:#ffd9ad;background:#fff6ec}
    #how .how-card:nth-child(3) .small-check{background:#e2860f}
    #how .how-card:nth-child(4){border-color:#99e5bd;background:linear-gradient(180deg,#fff,#f9fffc)}
    #how .how-card:nth-child(4) .step-badge{color:#079a53;border-color:#b5ebce;background:#effcf5}
    #how .how-card:nth-child(4) .small-check{background:#08a65a}

    /* Rules */
    .rules-section .section-head{
      display:grid;
      grid-template-columns:1fr 600px;
      gap:48px;
      align-items:center;
    }
    .rules-section h2{
      font-size:60px;
      max-width:930px;
    }
    .rules-section .section-copy{
      max-width:600px;
      font-size:22px;
    }
    .info-banner{
      display:grid;
      grid-template-columns:48px 1fr;
      gap:22px;
      align-items:center;
      border:1px solid #b9d4ff;
      border-radius:15px;
      background:#fbfdff;
      padding:26px 32px;
      font-size:20px;
      line-height:1.55;
      color:#344977;
    }
    .rule-accordion-grid{
      display:grid;
      grid-template-columns:repeat(2,1fr);
      gap:24px 30px;
    }
    .rules-sources{
      margin-top:28px;
      font-size:16px;
    }
    .rules-sources a{
      color:#1d4ed8;
      text-decoration:underline;
      font-weight:600;
    }
    .rules-sources a:hover{
      color:#173fb0;
    }
    .rule-accordion{
      min-height:126px;
      border:1px solid var(--line-2);
      border-radius:16px;
      background:#fff;
      box-shadow:0 9px 24px rgba(16,44,86,.05);
      display:grid;
      grid-template-columns:96px 1fr 24px;
      gap:16px;
      align-items:center;
      padding:22px 28px;
    }
    .rule-accordion .round-icon{
      width:72px;height:72px;border-radius:50%;
      background:#edf5ff;color:var(--primary);
      display:grid;place-items:center;font-size:38px;
    }
    .rule-accordion h3{
      font-size:20px;
      margin-bottom:6px;
      letter-spacing:-.035em;
    }
    .rule-accordion p{
      color:#344977;
      font-size:18px;
      margin:0;
      line-height:1.42;
    }
    .chevron{font-size:26px;color:#203866}

    /* FAQ */
    .faq-section h2{
      font-size:64px;
      margin-bottom:18px;
    }
    .faq-section .section-copy{
      max-width:770px;
      font-size:23px;
    }
    .faq-grid{
      display:grid;
      grid-template-columns:repeat(2,1fr);
      gap:0 44px;
      margin-top:40px;
    }
    .faq-column{
      display:grid;
      gap:20px;
      align-content:start;
    }
    .faq-item{
      border:1px solid var(--line-2);
      border-radius:13px;
      background:#fff;
      box-shadow:0 8px 22px rgba(16,44,86,.045);
      min-height:94px;
      display:grid;
      grid-template-columns:60px 1fr 20px;
      gap:18px;
      align-items:center;
      padding:18px 28px;
    }
    .faq-item.open{
      min-height:220px;
      align-items:start;
      border-color:#a7c7ff;
      box-shadow:0 12px 32px rgba(7,95,255,.06);
      padding-top:30px;
    }
    .faq-icon{
      width:38px;height:38px;border-radius:50%;
      border:1px solid #cfe0ff;
      background:#edf5ff;
      color:var(--primary);
      display:grid;place-items:center;
      font-weight:900;
      font-size:22px;
    }
    .faq-item.open .faq-icon{
      background:var(--primary);
      color:#fff;
      border-color:var(--primary);
      font-size:20px;
    }
    .faq-item h3{
      font-size:23px;
      letter-spacing:-.035em;
      margin:0;
      line-height:1.25;
    }
    .faq-item p{
      color:#344977;
      font-size:20px;
      line-height:1.55;
      margin:28px 0 0;
      max-width:640px;
    }

    /* CTA */
    .cta-section{
      margin-top:76px;
    }
    .cta-card{
      position:relative;
      min-height:520px;
      border:1px solid #c8dcfb;
      border-radius:26px;
      background:
        radial-gradient(circle at 75% 50%, rgba(7,95,255,.10), transparent 33%),
        linear-gradient(180deg,#f9fcff,#ffffff);
      box-shadow:0 20px 52px rgba(16,44,86,.07);
      overflow:hidden;
      display:grid;
      grid-template-columns:1fr 760px;
      align-items:center;
      gap:30px;
      padding:64px 80px;
    }
    .cta-card h2{
      font-size:74px;
      max-width:720px;
      margin-bottom:28px;
    }
    .cta-card .section-copy{
      max-width:790px;
      font-size:26px;
      line-height:1.55;
    }
    .cta-card .section-eyebrow{
      margin-bottom:32px;
    }
    .cta-card .btn{
      margin-top:42px;
      min-width:460px;
    }
    .cta-points{
      display:flex;
      align-items:center;
      gap:28px;
      margin-top:48px;
      color:#344977;
      font-size:20px;
    }
    /* Direct children only - a bare `span` also matched the .check-circle
       inside each point and turned it into a flex box, which dropped the
       icon against the left edge of the green circle. */
    .cta-points > span{
      display:flex;align-items:center;gap:11px;
    }
    .cta-points .sep{width:1px;height:34px;background:var(--line)}
    .cta-visual{
      position:relative;
      height:430px;
    }
    .big-clock{
      position:absolute;
      left:70px;
      top:100px;
      width:255px;height:255px;border-radius:50%;
      border:26px solid rgba(7,95,255,.70);
      background:white;
      box-shadow:0 18px 42px rgba(7,95,255,.16);
    }
    .big-clock .hand.one{background:#06133d;width:120px;height:13px}
    .big-clock .hand.two{background:#06133d;width:85px;height:13px}
    .big-clock::after{content:"";position:absolute;width:22px;height:22px;background:var(--primary);border-radius:50%;left:50%;top:50%;transform:translate(-50%,-50%)}
    .floating-icon{
      position:absolute;
      width:94px;height:94px;border-radius:18px;background:#fff;border:1px solid var(--line-2);
      box-shadow:0 15px 30px rgba(16,44,86,.12);
      display:grid;place-items:center;color:var(--primary);font-size:42px;
    }
    .floating-icon.top{left:310px;top:10px}
    .floating-icon.bottom{left:140px;bottom:5px}
    .summary-card{
      position:absolute;
      right:0;
      top:132px;
      width:380px;
      background:#fff;
      border:1px solid var(--line-2);
      border-radius:18px;
      box-shadow:0 18px 38px rgba(16,44,86,.12);
      padding:34px;
    }
    .summary-card h3{
      font-size:20px;margin-bottom:22px;
    }
    .summary-row{
      display:flex;justify-content:space-between;gap:22px;
      border-top:1px solid var(--line-2);
      padding:18px 0;
      color:#223966;
      font-size:18px;
    }
    .summary-row.highlight{
      background:#edf5ff;
      border-radius:10px;
      border:0;
      padding:15px 18px;
      color:var(--primary);
      font-weight:600;
    }

    /* Footer */
    .footer{
      margin-top:72px;
      padding:0 0 46px;
      background:
        radial-gradient(circle at 15% 20%, rgba(7,95,255,.035), transparent 25%),
        linear-gradient(180deg,#fff,#f8fbff);
    }
    .footer-grid{
      display:grid;
      grid-template-columns:360px repeat(4,1fr);
      gap:84px;
      align-items:start;
      padding-top:34px;
    }
    .footer-brand{
      display:flex;align-items:center;gap:28px;margin-bottom:34px;
    }
    .footer-logo{
      width:88px;height:88px;border-radius:24px;border:1px solid #cfe0ff;background:#edf5ff;color:var(--primary);
      display:grid;place-items:center;font-size:48px;
    }
    .footer-brand h3{font-size:32px;margin:0;line-height:1.05}
    .footer-brand h3 span{display:block;color:var(--primary)}
    .footer-desc{
      color:#344977;
      font-size:20px;
      line-height:1.58;
      margin-bottom:42px;
    }
    .footer-trust{
      display:flex;
      align-items:center;
      gap:22px;
      color:#344977;
      font-size:19px;
      margin-bottom:42px;
    }
    .footer-trust span{
      display:flex;align-items:center;gap:12px;
    }
    .footer-social{
      display:flex;gap:18px;
    }
    .footer-social a{
      width:58px;height:58px;border-radius:50%;
      border:1px solid #cfe0ff;
      background:white;
      display:grid;place-items:center;
      color:#344977;
      font-size:30px;
      font-weight:600;
    }
    .footer-col h4{
      font-size:28px;
      margin:10px 0 30px;
      letter-spacing:-.035em;
      position:relative;
    }
    .footer-col h4::after{
      content:"";
      position:absolute;
      left:0;bottom:-15px;
      width:49px;height:4px;background:var(--primary);
      border-radius:999px;
    }
    .footer-col a{
      display:block;
      color:#344977;
      font-size:22px;
      margin:0 0 24px;
    }
    .footer-bottom{
      border-top:1px solid #d3e0f4;
      margin-top:56px;
      padding-top:38px;
      display:grid;
      grid-template-columns:1fr auto;
      align-items:center;
      gap:30px;
      color:#344977;
      font-size:18px;
    }
    .footer-disclaimer-icon{
      display:inline-flex;
      align-items:center;
      font-size:42px;
      flex:0 0 auto;
    }
    /* Sits in the right-hand corner opposite the copyright line. */
    .footer-disclaimer{
      display:flex;
      align-items:center;
      justify-content:flex-end;
      justify-self:end;
      gap:22px;
      text-align:left;
      line-height:1.45;
    }
    .footer-country{
      justify-self:end;
      display:flex;align-items:center;gap:15px;
    }

    /* Responsive */
    @media (max-width: 1300px){
      .container{width:min(100% - 48px, var(--max))}
      .nav-card{padding:22px 24px;gap:18px}
      .brand-block{min-width:auto}
      .brand-title{font-size:25px}
      .brand-subtitle{font-size:20px}
      .nav-links{gap:32px}
      .nav-link{font-size:19px}
      .country{font-size:20px;min-width:160px}
      .hero .section-copy{font-size:24px}
      .calc-grid{grid-template-columns:1fr}
      .calc-body{grid-template-columns:1fr}
      .break-panel{border-left:0;border-top:1px solid var(--line-2)}
      .rules-section .section-head{grid-template-columns:1fr}
      .cta-card{grid-template-columns:1fr;padding:48px}
      .cta-visual{display:none}
      .footer-grid{grid-template-columns:repeat(2,1fr)}
    }
    @media (max-width: 900px){
      .page-shell{padding-top:24px}
      .container{width:min(100% - 28px, var(--max))}
      .nav-card{min-height:auto;align-items:flex-start;flex-wrap:wrap}
      .brand-block{width:100%;gap:14px}
      .logo-icon{width:56px;height:56px;border-width:5px}
      .brand-title{font-size:22px}
      .brand-subtitle{font-size:16px}
      .divider,.country,.nav-actions{display:none}
      .nav-links{width:100%;height:auto;gap:12px;overflow:auto;margin-left:0}
      .nav-link{font-size:15px;padding:8px 2px}
      .nav-link.active::after{display:none}
      .hero{height:auto;padding:30px 0 45px}
      .clock-art{opacity:.18;right:-300px}
      .hero h1{font-size:42px}
      .hero .section-copy{font-size:20px}
      .hero-actions{flex-direction:column;align-items:stretch;gap:14px}
      .btn{width:100%;height:64px;font-size:18px}
      section{margin-top:52px}
      h2,.how-section h2,.faq-section h2,.benefits-panel h2,.rules-section h2{font-size:38px}
      .benefits-panel{padding:28px 20px}
      .benefit-grid,.how-grid,.rule-accordion-grid,.faq-grid,.result-cards{grid-template-columns:1fr}
      .calc-tabs{grid-template-columns:1fr}
      .form-row,.break-entry-grid{grid-template-columns:1fr}
      .calculator-wrap{padding:16px}
      .result-card{grid-template-columns:58px 1fr}
      .how-card{min-height:auto;padding:24px}
      .rules-section .section-head{gap:22px}
      .info-banner{grid-template-columns:1fr;font-size:16px}
      .rule-accordion{height:auto;grid-template-columns:56px 1fr 20px}
      .rule-accordion .round-icon{width:52px;height:52px;font-size:26px}
      .faq-item,.faq-item.open{grid-template-columns:44px 1fr 16px;padding:18px}
      .faq-item p{font-size:16px}
      .cta-card{padding:28px 20px;min-height:auto}
      .cta-card h2{font-size:40px}
      .cta-card .section-copy{font-size:18px}
      .cta-points{flex-wrap:wrap;font-size:16px}
      .footer-grid{grid-template-columns:1fr;gap:30px}
      .footer-desc{font-size:18px}
      .footer-bottom{grid-template-columns:1fr;text-align:center}
      .footer-disclaimer,.footer-country{justify-self:center}
    }
  

/* ===== 100% desktop viewport refinement + reliable SVG icons ===== */
.ui-svg{display:inline-flex;align-items:center;justify-content:center;color:inherit;line-height:1;vertical-align:-.12em;flex:0 0 auto}
.ui-svg svg{width:1em;height:1em;stroke:currentColor;fill:none;stroke-width:2.15;stroke-linecap:round;stroke-linejoin:round}
:root{--max:1320px;--shadow:0 18px 46px rgba(20,45,90,.085);--shadow-soft:0 10px 28px rgba(15,42,86,.06)}
body{font-size:16px;letter-spacing:-.006em}.page-shell{padding:34px 0 0}.container{width:min(var(--max),calc(100% - 56px))}.site-header{margin-bottom:46px}.nav-card{min-height:96px;padding:16px 28px;border-radius:22px;gap:18px}.logo-icon{width:56px;height:56px;border-width:4px}.logo-icon svg{width:31px;height:31px}.brand-block{min-width:310px;gap:16px}.brand-title{font-size:22px}.brand-subtitle{font-size:16px}.divider{height:42px}.country{font-size:17px;min-width:132px;gap:10px}.germany-flag{width:29px;height:18px}.nav-links{height:62px;gap:38px}.nav-link{font-size:16px}.nav-link.active::after{height:4px;width:78px;bottom:-17px}.nav-actions{gap:14px;margin-left:12px}.square-btn,.lang-btn{height:52px;border-radius:12px}.square-btn{width:52px;font-size:22px}.lang-btn{min-width:88px;font-size:16px;padding:0 16px}.lang-btn .ui-svg{font-size:16px}
section{margin-top:74px}.section-head{margin-bottom:28px}.section-eyebrow{font-size:14px;padding:7px 13px;margin-bottom:18px}.section-eyebrow .mini-badge-icon{width:20px;height:20px}h1{font-size:clamp(38px,3.5vw,54px);margin-bottom:18px}h2{font-size:clamp(34px,3.1vw,46px);margin-bottom:12px}h3{font-size:22px}.section-copy{font-size:18px;line-height:1.58}.hero{height:360px}.hero h1{font-size:clamp(40px,3.5vw,54px);max-width:900px;margin-bottom:18px}.hero .section-copy{max-width:760px;font-size:21px;line-height:1.48}.hero-actions{gap:24px;margin-top:34px}.btn{height:60px;padding:0 30px;border-radius:10px;font-size:18px;gap:12px}.btn svg{width:24px;height:24px}.clock-art{right:-70px;top:-18px;width:520px;height:360px}.clock-face{right:72px;top:0;width:286px;height:286px;border-width:18px}.clock-face::before{width:11px;height:11px;box-shadow:0 0 0 12px rgba(7,95,255,.10)}.hand{height:11px}.hand.one{width:110px}.hand.two{width:92px}.tick{height:24px;width:6px}.wave-art{right:-130px;bottom:-105px;width:720px;height:235px}.dots{right:340px;top:26px;width:76px;height:76px;background-size:14px 14px}.dots.bottom{right:90px;bottom:12px}
.calculator-section{margin-top:78px}.calculator-wrap{padding:26px;border-radius:22px}.calculator-section .section-head{margin-bottom:22px}.calculator-section h2{font-size:32px;margin-bottom:4px}.calculator-section .section-copy{font-size:16px}.calc-grid{grid-template-columns:minmax(0,1fr) 330px;gap:22px}.calc-main,.rule-card{border-radius:16px}.calc-tab{height:52px;font-size:15px}.calc-body{grid-template-columns:1.45fr .95fr}.calc-left,.break-panel,.multi-panel{padding:20px}.form-row{gap:26px;margin-bottom:20px}label{font-size:13px;margin-bottom:7px}.field{height:42px;border-radius:8px;font-size:14px;padding:0 13px}.legal-row{margin-top:24px}.legal-row p{font-size:14px}.info-dot{width:16px;height:16px;font-size:10px}.switch{width:52px;height:28px}.switch::after{width:22px;height:22px}.break-panel h3,.multi-panel h3{font-size:18px}.segmented{height:39px}.segmented button{font-size:14px}.break-count{font-size:14px}.break-item{height:40px;font-size:13px;grid-template-columns:24px 1fr 12px 1fr 58px 16px;padding:0 10px}.small-outline{height:40px;font-size:15px}.optional{font-size:12px}.multi-panel p{font-size:14px}.break-entry-grid{gap:16px}.add-another{height:39px;font-size:14px}.calculate-btn{height:42px;font-size:15px}.formula-note{font-size:12px}.rule-card{padding:26px 24px}.rule-title{font-size:20px;gap:14px;margin-bottom:28px}.shield{width:38px;height:38px}.rule-list{gap:28px}.rule-item{grid-template-columns:28px 1fr;gap:14px}.check-circle{width:24px;height:24px;font-size:13px}.rule-item strong{font-size:16px}.rule-item span{font-size:14px}.note-box{margin-top:30px;padding-top:18px}.note-inner{grid-template-columns:32px 1fr;gap:13px;padding:18px}.info-circle{width:30px;height:30px}.note-inner strong{font-size:16px}.note-inner span{font-size:14px}.result-cards{gap:18px;margin-top:22px}.result-card{min-height:124px;padding:18px;grid-template-columns:52px 1fr;gap:16px}.metric-icon{width:50px;height:50px;font-size:28px}.result-card strong{font-size:13px}.result-card .number{font-size:26px}.result-card p{font-size:12.5px}.metric-icon .ui-svg{font-size:27px}
.benefits-panel{padding:42px 48px;border-radius:24px}.benefits-panel h2{font-size:44px}.benefits-panel .section-copy{font-size:18px}.benefit-grid{gap:22px 26px;margin-top:36px}.benefit-card{min-height:170px;padding:26px 28px;border-radius:16px}.benefit-icon{width:58px;height:58px;font-size:31px;margin-bottom:20px}.benefit-card h3{font-size:20px}.benefit-card p{font-size:15px}.benefit-icon .ui-svg{font-size:30px}
.how-section h2{font-size:46px}.how-grid{gap:28px;margin-top:32px}.how-card{min-height:790px;padding:28px;border-radius:16px}.step-badge{height:43px;padding:0 16px;font-size:15px;border-radius:10px;margin-bottom:20px}.step-badge .ui-svg{font-size:20px}.how-card h3{font-size:22px;margin-bottom:18px}.mini-ui{min-height:295px;padding:16px;margin-bottom:28px}.mini-ui-row{gap:14px;margin-bottom:16px}.mini-label{font-size:11px}.mini-field{height:36px;font-size:13px}.mini-seg{height:32px}.mini-break{height:43px;font-size:13px;grid-template-columns:21px 1fr 12px 1fr 55px 12px}.mini-btn{height:42px;font-size:15px}.mini-legal{padding:16px}.mini-legal-title{font-size:14px}.mini-rule{font-size:12px;padding:9px 12px}.step-list{gap:16px}.step-list li{font-size:15px;gap:14px}.small-check{width:19px;height:19px;font-size:10px}.mini-field .ui-svg,.mini-break .ui-svg,.mini-btn .ui-svg{font-size:16px}
.rules-section .section-head{grid-template-columns:1fr 480px;gap:38px}.rules-section h2{font-size:44px;max-width:720px}.rules-section .section-copy{font-size:18px}.info-banner{grid-template-columns:38px 1fr;gap:18px;padding:20px 24px;font-size:16px}.rule-accordion-grid{gap:20px 24px}.rule-accordion{min-height:100px;grid-template-columns:68px 1fr 18px;padding:18px 22px;border-radius:14px}.rule-accordion .round-icon{width:54px;height:54px;font-size:30px}.rule-accordion h3{font-size:18px}.rule-accordion p{font-size:14px}.chevron{font-size:22px}.round-icon .ui-svg{font-size:29px}
.faq-section h2{font-size:46px}.faq-section .section-copy{font-size:18px;max-width:640px}.faq-grid{gap:0 34px;margin-top:34px}.faq-column{gap:16px}.faq-item{min-height:78px;grid-template-columns:46px 1fr 18px;gap:14px;padding:16px 22px;border-radius:12px}.faq-item.open{min-height:176px;padding-top:24px}.faq-icon{width:34px;height:34px;font-size:18px}.faq-item h3{font-size:17px}.faq-item p{font-size:15px;margin-top:22px}.cta-section{margin-top:86px}.cta-card{min-height:430px;padding:52px 64px;grid-template-columns:1fr 560px;border-radius:22px}.cta-card h2{font-size:50px;max-width:600px;margin-bottom:20px}.cta-card .section-copy{font-size:19px;max-width:650px}.cta-card .btn{margin-top:34px;min-width:360px}.cta-points{font-size:18px;gap:20px;margin-top:34px}.cta-visual{height:340px}.big-clock{width:210px;height:210px;left:45px;top:84px;border-width:20px}.floating-icon{width:72px;height:72px;font-size:34px}.floating-icon.top{left:250px}.floating-icon.bottom{left:100px}.summary-card{width:320px;top:110px;padding:26px}.summary-card h3{font-size:19px}.summary-row{font-size:15px;padding:14px 0}.floating-icon .ui-svg{font-size:34px}
.footer{margin-top:78px;padding-bottom:42px}.footer-grid{grid-template-columns:310px repeat(4,1fr);gap:56px;padding-top:36px}.footer-brand{gap:18px;margin-bottom:26px}.footer-logo{width:66px;height:66px;border-radius:18px;font-size:38px}.footer-logo .ui-svg{font-size:38px}.footer-brand h3{font-size:25px}.footer-desc{font-size:17px;line-height:1.55;margin-bottom:30px}.footer-trust{font-size:14px;gap:16px;margin-bottom:30px}.footer-trust .ui-svg{font-size:18px}.footer-social{gap:14px}.footer-social a{width:44px;height:44px;font-size:22px}.footer-social .ui-svg{font-size:21px}.footer-col h4{font-size:22px;margin:8px 0 26px}.footer-col h4::after{width:38px;height:3px;bottom:-12px}.footer-col a{font-size:16px;margin-bottom:18px}.footer-bottom{margin-top:52px;padding-top:34px;font-size:14px}.footer-disclaimer{gap:16px}.footer-disclaimer .ui-svg{font-size:36px}.footer-country .germany-flag{width:27px;height:18px}
@media (max-width:1300px){.container{width:min(100% - 44px,var(--max))}.brand-block{min-width:auto}.nav-links{gap:24px}.nav-link{font-size:15px}.calc-grid{grid-template-columns:1fr}.calc-body{grid-template-columns:1.3fr .9fr}.rules-section .section-head{grid-template-columns:1fr}.cta-card{grid-template-columns:1fr}.cta-visual{display:none}.footer-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:900px){.container{width:min(100% - 28px,var(--max))}.page-shell{padding-top:18px}.site-header{margin-bottom:28px}.nav-card{padding:16px;align-items:flex-start;flex-wrap:wrap}.brand-block{width:100%}.logo-icon{width:50px;height:50px}.brand-title{font-size:20px}.brand-subtitle{font-size:15px}.divider,.country,.nav-actions{display:none}.nav-links{width:100%;height:auto;gap:14px;overflow:auto}.nav-link.active::after{display:none}.hero{height:auto;padding:28px 0}.hero h1{font-size:34px}.hero .section-copy{font-size:17px}.hero-actions{flex-direction:column;align-items:stretch}.btn{width:100%;height:54px;font-size:16px}section{margin-top:48px}.calculator-wrap{padding:16px}.calc-tabs,.calc-body,.form-row,.break-entry-grid,.benefit-grid,.how-grid,.rule-accordion-grid,.faq-grid,.result-cards,.footer-grid{grid-template-columns:1fr}.break-panel{border-left:0;border-top:1px solid var(--line-2)}.benefits-panel{padding:28px 20px}.how-card{min-height:auto}.cta-card{padding:28px 20px;min-height:auto}.cta-card h2{font-size:34px}.footer-bottom{grid-template-columns:1fr;text-align:center}.footer-disclaimer,.footer-country{justify-self:center}}

/* WordPress integration helpers */
.wp-content{padding:70px 0;}
.wp-content h1,.wp-content h2,.wp-content h3{color:var(--navy);}
.screen-reader-text{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}
.site-header .custom-logo{max-width:80px;height:auto;}
.nav-links .current-menu-item > a,
.nav-links a[aria-current="page"]{color:var(--primary);}
@media print{.site-header,.footer,.cta-section,.hero-actions,.action-row{display:none!important}.calculator-wrap{box-shadow:none;border:0}.page-shell{padding:0}.container{width:100%}}
/* CPT theme dynamic WordPress menu fixes */
.nav-links li{list-style:none;display:flex;align-items:center;margin:0;padding:0;}
.nav-links .current-menu-item > .nav-link,
.nav-links .current_page_item > .nav-link{color:var(--primary);}
.nav-links .current-menu-item > .nav-link::after,
.nav-links .current_page_item > .nav-link::after{content:"";position:absolute;height:6px;width:110px;border-radius:999px;left:50%;transform:translateX(-50%);bottom:-24px;background:var(--primary);box-shadow:0 4px 10px rgba(7,95,255,.22);}
.footer-col li{list-style:none;margin:0;padding:0;}
.logo-icon .custom-logo-link{display:grid;place-items:center;width:100%;height:100%;}
.logo-icon img.custom-logo{max-width:52px;max-height:52px;width:auto;height:auto;border-radius:50%;}
.wp-content .entry-content > .hero:first-child,.wp-content .entry-content > .calculator-section:first-child,.wp-content .entry-content > .benefits-section:first-child{margin-top:0;}

/* Dynamic calculator and expanded how-to sections */
.calc-panel{display:none;padding:22px 26px;}
.calc-panel.active{display:block}
.daily-layout{display:grid;grid-template-columns:1.45fr .95fr;margin:-22px -26px 0}
.daily-layout .calc-left,.daily-layout .break-panel{padding:22px 26px}
.daily-layout .break-panel{border-left:1px solid var(--line-2);border-top:0;border-bottom:0;border-radius:0}
.calc-main > .calculate-btn{width:calc(100% - 52px);margin:22px 26px 24px}
.calc-tab .ui-svg,.calculate-btn .ui-svg,.small-outline .ui-svg,.calc-actions .ui-svg{font-size:1.1em}
.calculator-wrap{background:#fff;border-color:#dbe4f1}
.calc-grid{align-items:start}
.calc-left-stack{display:grid;gap:0;min-width:0}
.calculator-section .calc-grid{grid-template-columns:minmax(0,1fr) 330px}
.calc-main{box-shadow:0 10px 26px rgba(16,44,86,.045)}
.rule-card{min-height:100%;box-shadow:0 10px 26px rgba(16,44,86,.045)}
.calc-tabs{
  gap:24px;padding:0 0 18px;border:0!important;border-bottom:0!important;background:transparent!important;
}
.calc-tab{
  height:66px;border:1px solid #cfdcf1;border-radius:11px;background:#fff;cursor:pointer;
  transition:background .18s ease,color .18s ease,box-shadow .18s ease,border-color .18s ease;
  box-shadow:0 8px 18px rgba(16,44,86,.035);
}
.calc-tab:first-child{border-left:1px solid #cfdcf1}
.calc-tab.active{
  border-color:#075fff;background:linear-gradient(180deg,#0b6cff,#0055ee);
  box-shadow:0 14px 24px rgba(7,95,255,.22);
}
.calc-tab:not(.active):hover{background:#f6f9ff;color:var(--primary)}
.calc-main > .calculate-btn{height:54px;font-size:18px;border-radius:10px}
.calc-main > .calculate-btn[disabled]{cursor:wait;opacity:.88}
.calc-main > .calculate-btn:active{transform:translateY(1px)}
.calc-status{
  width:calc(100% - 52px);margin:0 26px 8px;padding:10px 12px;border-radius:9px;background:#f8fbff;border:1px solid #dbe8fb;
  display:grid;grid-template-columns:18px 1fr 26px;align-items:center;
}
.calc-status.status-hidden{display:none}
.is-calculated .calc-status{border-color:#a9d8bd;background:#f4fff8;color:#0b7f45}
.status-clear{
  width:24px;height:24px;border:0;border-radius:50%;background:transparent;color:#536998;
  display:grid;place-items:center;font-weight:900;cursor:pointer;
}
.status-clear:hover{background:#eaf2ff;color:var(--primary)}
.is-loading .result-card .number,.is-loading .result-card p,.is-loading .result-card strong{
  color:transparent!important;border-radius:6px;background:linear-gradient(90deg,#eef4fb 0%,#f8fbff 45%,#e8f0fb 100%);
  background-size:220% 100%;animation:calcSkeleton 1s linear infinite;
}
.is-loading .result-card .number{min-height:30px;width:82%;display:block}
.is-loading .result-card strong{min-height:14px;width:72%;display:block}
.is-loading .result-card p{min-height:30px;width:92%;display:block}
@keyframes calcSkeleton{0%{background-position:100% 0}100%{background-position:-100% 0}}
.calc-main .result-cards{grid-template-columns:repeat(4,minmax(0,1fr));padding:0 26px;margin:18px 0 0}
.calc-main .result-card{padding:18px 16px;grid-template-columns:46px 1fr;gap:13px;min-height:126px;border-color:#dbe4f1}
.calc-main .metric-icon{width:44px;height:44px;font-size:23px}
.calc-main .result-card .number{font-size:24px;letter-spacing:0}
.calc-actions{
  display:flex;flex-wrap:wrap;gap:10px;padding:18px 26px 24px;align-items:center;
}
.calc-actions button{
  height:40px;border:1px solid #d7e2f2;background:#fff;color:#243a6c;border-radius:9px;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:0 14px;
  font-size:14px;font-weight:600;box-shadow:0 6px 16px rgba(16,44,86,.045);cursor:pointer;
}
.calc-actions button:hover{border-color:#9fc0f6;background:#f7fbff;color:var(--primary)}
.calc-actions #exportPdf{color:#b33131}
.calc-actions #exportCsv{color:#087a43}
.calc-actions #resetCalc{margin-left:auto}
.switch.off{background:#c8d2e3}
.switch.off::after{right:25px}
.break-item input,.work-table input{
  min-width:0;width:100%;border:0;outline:0;background:transparent;color:var(--navy);font:inherit;
}
.break-item .x,.table-remove{
  width:20px;height:20px;border:0;background:transparent;color:#263c70;font-size:22px;line-height:1;cursor:pointer;
  display:grid;place-items:center;border-radius:50%;
}
.break-item .x:hover,.table-remove:hover{background:transparent;color:var(--primary)}
.calc-row-icon{font-size:17px}
.calc-table-wrap{overflow:auto;border:1px solid #d5dfef;border-radius:10px;background:white}
.work-table{width:100%;border-collapse:collapse;min-width:560px;color:var(--navy)}
.work-table th,.work-table td{padding:14px 16px;border-bottom:1px solid #e1e8f3;text-align:left;font-size:15px;white-space:nowrap}
.work-table th{font-weight:800;background:#fbfdff}
.work-table tr:last-child td{border-bottom:0}
.work-table input[type="time"],.work-table input[type="number"]{
  border:1px solid #d5dfef;border-radius:8px;height:36px;padding:0 10px;background:white;font-weight:600;
}
.work-table input[type="number"]{max-width:100px}
.row-check{display:flex;align-items:center;gap:9px;margin:0;font-size:15px}
.row-check input{width:16px;height:16px;accent-color:var(--primary)}
.calc-add-row{margin-top:14px}
.how-section + .how-section{margin-top:58px}
.how-section .section-head{text-align:center}
.how-section .section-copy{max-width:920px;margin:0 auto}
.mini-table,.mini-summary{
  border:1px solid #cfdcf1;border-radius:13px;background:white;padding:14px;margin-bottom:28px;min-height:295px;overflow: hidden;
}
.mini-table-row{
  display:grid;grid-template-columns:1fr 1fr 1fr 1fr;align-items:center;gap:8px;
  min-height:39px;border-bottom:1px solid #e1e8f3;font-size:13px;font-weight:600;color:var(--navy);
}
.mini-table-row.head{font-weight:900;background:#fbfdff;margin:-14px -14px 0;padding:0 14px}
.mini-table-row span{min-width:0}
.mini-check{display:inline-grid;place-items:center;width:15px;height:15px;border-radius:4px;background:var(--primary);color:white;font-size:10px;margin-right:7px}
.mini-table .small-outline{margin-top:14px}
.mini-seg button{border:0;background:white;color:var(--navy);font:inherit;font-size:12px;font-weight:600;cursor:pointer}
.mini-seg button.active{background:var(--primary);color:white}
.mini-seg span.active{background:var(--primary);color:white}
.how-section .mini-legal .switch{cursor:default}
.mini-summary{display:grid;align-content:start;gap:0}
.mini-summary > div{
  display:flex;align-items:center;justify-content:space-between;gap:14px;min-height:45px;
  border-bottom:1px solid #e1e8f3;color:var(--navy);font-size:14px;font-weight:600;
}
.mini-summary strong{color:var(--primary);font-weight:950}
.mini-summary .mini-btn{margin-top:18px}
.how-support{
  display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:24px;padding:18px 24px;
  border:1px solid #cfe8da;border-radius:12px;background:#f9fffc;
}
.how-support > div{display:grid;grid-template-columns:48px 1fr;column-gap:14px;align-items:center;color:var(--navy)}
.how-support .benefit-icon{grid-row:span 2;width:48px;height:48px;font-size:24px;margin:0}
.how-support strong{font-size:16px}
.how-support span:last-child{font-size:14px;color:#344977}

@media (max-width:1300px){
  .calculator-section .calc-grid{grid-template-columns:minmax(0,1fr) 330px}
  .daily-layout{grid-template-columns:1fr}
  .daily-layout .break-panel{border-left:0;border-top:1px solid var(--line-2)}
}
@media (max-width:1050px){
  .calculator-section .calc-grid{grid-template-columns:1fr}
}
@media (max-width:900px){
  .calc-panel{padding:18px}
  .daily-layout{margin:-18px -18px 0}
  .daily-layout .calc-left,.daily-layout .break-panel{padding:18px}
  .calc-main > .calculate-btn{width:calc(100% - 36px);margin:18px}
  .calc-status{width:calc(100% - 36px);margin:0 18px 8px}
  .calc-main .result-cards{grid-template-columns:repeat(2,minmax(0,1fr));padding:0 18px}
  .calc-actions{padding:16px 18px 20px}
  .calc-actions #resetCalc{margin-left:0}
  .break-item{grid-template-columns:24px minmax(74px,1fr) 10px minmax(74px,1fr) 54px 18px;gap:6px}
  .work-table{min-width:520px}
  .how-section .section-head{text-align:left}
  .how-support{grid-template-columns:1fr;padding:16px}
}
@media (max-width:560px){
  .calculator-wrap{padding:12px}
  .calc-tabs{grid-template-columns:1fr;gap:10px;padding-bottom:14px}
  .calc-tab{justify-content:flex-start;padding:0 18px}
  .field{padding:0 10px}
  .break-item{height:auto;min-height:44px;font-size:12px;padding:8px;grid-template-columns:20px 1fr 8px 1fr 44px 16px}
  .calc-main .result-cards{grid-template-columns:1fr}
  .calc-actions{display:grid;grid-template-columns:1fr 1fr}
  .calc-actions button{width:100%;padding:0 10px}
  .work-table th,.work-table td{padding:11px 10px;font-size:13px}
  .how-card{padding:18px}
  .step-badge{height:auto;min-height:40px;padding:8px 12px}
  .mini-ui-row,.mini-table-row{grid-template-columns:1fr 1fr}
  .mini-table-row.head{display:none}
  .mini-table-row{padding:8px 0}
  .mini-summary > div{align-items:flex-start;flex-direction:column;gap:4px;padding:9px 0}
}

/* Reference typography tuning */
body,
.page-shell,
.page-shell *{
  font-family:"Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  letter-spacing:0;
}
body{
  font-size:16px;
  font-weight:400;
  line-height:1.55;
}
h1,h2,h3,
.brand-title,
.rule-title,
.result-card .number{
  letter-spacing:0;
}
h1,
.hero h1{
  font-weight:600;
  line-height:1.05;
}
h2,
.calculator-section h2,
.how-section h2,
.benefits-panel h2,
.rules-section h2,
.faq-section h2,
.cta-card h2{
  font-weight:600;
  line-height:1.08;
}
h3,
.how-card h3,
.benefit-card h3,
.faq-item h3,
.rule-accordion h3{
  font-weight:600;
  line-height:1.24;
}
.section-copy,
.hero .section-copy,
.calculator-section .section-copy,
.benefits-panel .section-copy,
.rules-section .section-copy,
.faq-section .section-copy,
.cta-card .section-copy{
  font-weight:400;
  line-height:1.5;
  color:#344977;
}
.brand-title{font-weight:600;line-height:1.08}
.brand-subtitle{font-weight:450;line-height:1.25}
.nav-link,
.btn,
.calc-tab,
label,
.field,
.segmented button,
.small-outline,
.calculate-btn,
.calc-actions button,
.step-badge{
  font-weight:600;
}
.calculator-section h2{font-size:34px}
.calculator-section .section-copy{font-size:17px}
.calc-tab{
  font-size:17px;
  line-height:1;
}
label{font-size:14px;line-height:1.25}
.field{font-size:15px;line-height:1}
.break-count{font-weight:600}
.rule-title{
  font-size:22px;
  font-weight:600;
  line-height:1.15;
}
.rule-item strong{
  font-size:16px;
  font-weight:600;
  line-height:1.3;
}
.rule-item span,
.note-inner span{
  font-size:14px;
  font-weight:400;
  line-height:1.55;
}
.result-card strong{
  font-size:13px;
  font-weight:600;
  line-height:1.25;
}
.result-card .number,
.calc-main .result-card .number{
  font-size:27px;
  font-weight:600;
  line-height:1.05;
}
.result-card p{
  font-size:13px;
  font-weight:400;
  line-height:1.45;
}
.how-section h2{font-size:48px}
.how-card h3{font-size:22px;font-weight:600}
.step-badge{font-size:16px;line-height:1}
.step-list li{font-size:15px;font-weight:400;line-height:1.48}
.mini-label{font-weight:600}
.mini-field,
.mini-break,
.mini-table-row,
.mini-summary > div{
  font-weight:600;
}
.mini-summary strong{font-weight:600}
.benefit-card h3{font-size:20px}
.benefit-card p{font-size:15px;font-weight:400;line-height:1.55}
.faq-item h3{font-size:17px}
.faq-item p{font-size:15px;font-weight:400;line-height:1.55}
.footer-col h4{font-weight:600}
.footer-col a,
.footer-desc,
.footer-bottom{font-weight:400}
.rules-section .rule-accordion{
  grid-template-columns:68px 1fr;
}
.faq-item{
  width:100%;
  text-align:left;
  border:1px solid var(--line-2);
  font:inherit;
  cursor:pointer;
}
.faq-item p{
  display:none;
}
.faq-item.open p{
  display:block;
}
.faq-item:focus-visible{
  outline:3px solid rgba(7,95,255,.22);
  outline-offset:2px;
}

/* Mobile reference layouts */
.calc-options{
  padding:0 26px 22px;
  grid-column:1 / 2;
}
.daily-layout{
  grid-template-rows:auto auto;
}
.daily-layout .break-panel{
  grid-column:2;
  grid-row:1 / 3;
}

/* ------------------------------ Burger menu ------------------------------ */
.nav-toggle{
  display:none;
  width:46px;
  height:46px;
  margin-left:auto;
  border:1px solid var(--line);
  border-radius:12px;
  background:#fff;
  color:var(--navy);
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  box-shadow:0 6px 16px rgba(10,34,82,.05);
}
.nav-toggle:hover{border-color:#9fc0f6;color:var(--primary)}
.nav-toggle:focus-visible{outline:3px solid rgba(7,95,255,.22);outline-offset:2px}
.nav-toggle-bars,
.nav-toggle-bars::before,
.nav-toggle-bars::after{
  display:block;
  width:20px;
  height:2px;
  border-radius:2px;
  background:currentColor;
  transition:transform .2s ease,opacity .2s ease;
}
.nav-toggle-bars{position:relative}
.nav-toggle-bars::before,
.nav-toggle-bars::after{content:"";position:absolute;left:0}
.nav-toggle-bars::before{top:-6px}
.nav-toggle-bars::after{top:6px}
.nav-open .nav-toggle-bars{background:transparent}
.nav-open .nav-toggle-bars::before{transform:translateY(6px) rotate(45deg)}
.nav-open .nav-toggle-bars::after{transform:translateY(-6px) rotate(-45deg)}

/* ---------------------------------------------------------------------------
   Responsive layer
   Fluid type + spacing so every section reads well from 320px up to desktop.
   Ordered small-last so the narrow-phone overrides always win.
--------------------------------------------------------------------------- */

/* Never let a fixed-width decoration or control push the page sideways */
.page-shell{max-width:100vw}
.cta-card,.calc-main,.calc-left-stack,.rule-card,.how-card,.faq-item,.rule-accordion{min-width:0}
input[type="time"]::-webkit-calendar-picker-indicator,
input[type="number"]::-webkit-calendar-picker-indicator{display:none}

@media (max-width:1300px){
  .nav-card{flex-wrap:wrap;row-gap:16px}
  .nav-actions{margin-left:auto}
  .cta-card .btn{min-width:0}
}

@media (max-width:1024px){
  .cta-card h2{font-size:clamp(34px,5vw,54px)}
  .cta-card .section-copy{font-size:20px}
  .cta-points{flex-wrap:wrap;gap:14px 22px;font-size:17px}
}

/* ------------------------------- Tablet ---------------------------------- */
@media (max-width:900px){
  h1{font-size:clamp(32px,5.4vw,44px)}
  h2{font-size:clamp(28px,4.8vw,40px)}
  .cta-card .btn{min-width:0;width:100%}
  .cta-points .sep{display:none}
  .rules-section .rule-accordion{grid-template-columns:64px minmax(0,1fr)}

  /* The blanket "one column" rule above this point is too aggressive for
     tablets: keep the segmented control, the time pair and the card grids
     two/three-up until the phone breakpoint takes over. */
  .calc-tabs{grid-template-columns:repeat(3,minmax(0,1fr))}
  .form-row{grid-template-columns:1fr 1fr;gap:20px}
  .calc-main .result-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .benefit-grid,
  .rule-accordion-grid,
  .faq-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .faq-grid{gap:0 20px}
  .how-grid{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px}

  /* Collapse the menu behind the burger */
  .nav-card{flex-wrap:wrap;row-gap:0;align-items:center}
  .brand-block{width:auto;flex:1 1 auto;min-width:0}
  .nav-toggle{display:flex}
  .divider{display:none}
  .nav-links{
    display:none;
    width:100%;
    height:auto;
    margin:0;
    flex-direction:column;
    align-items:stretch;
    gap:0;
    overflow:visible;
  }
  .nav-card.nav-open .nav-links{
    display:flex;
    margin-top:14px;
    padding-top:12px;
    border-top:1px solid var(--line-2);
  }
  .nav-links li{display:block}
  .nav-link{
    justify-content:flex-start;
    padding:11px 2px;
    font-size:16px;
  }
  .nav-links li + li .nav-link,
  .nav-link + .nav-link{border-top:1px solid var(--line-2)}
  .nav-link.active::after,
  .nav-links .current-menu-item > .nav-link::after,
  .nav-links .current_page_item > .nav-link::after{display:none}

  /* Stacked footer bottom: keep the badge in scale with the text */
  .footer-disclaimer{gap:12px;justify-content:center;justify-self:center}
  .footer-disclaimer-icon,
  .footer-disclaimer .ui-svg{font-size:22px}
}

/* -------------------------- Phones and small tablets --------------------- */
@media (max-width:700px){
  body{
    font-size:16px;
    background:linear-gradient(180deg,#fff 0%,#fbfdff 100%);
  }
  .container{
    width:min(100% - 32px, var(--max));
  }
  .page-shell{
    padding-top:14px;
  }
  section{
    margin-top:40px;
  }

  /* Shared type scale ---------------------------------------------------- */
  h1,
  .hero h1{
    font-size:clamp(28px,7.6vw,40px);
    line-height:1.14;
    margin-bottom:14px;
  }
  h2,
  .calculator-section h2,
  .how-section h2,
  .benefits-panel h2,
  .rules-section h2,
  .faq-section h2,
  .cta-card h2{
    font-size:clamp(24px,6.2vw,32px);
    line-height:1.18;
    margin-bottom:10px;
    max-width:none;
  }
  h3{
    font-size:clamp(17px,4.6vw,20px);
    line-height:1.3;
  }
  .section-copy,
  .hero .section-copy,
  .calculator-section .section-copy,
  .rules-section .section-copy,
  .faq-section .section-copy,
  .cta-card .section-copy,
  .how-section .section-copy{
    font-size:clamp(15px,4vw,17px);
    line-height:1.5;
    max-width:none;
  }
  .section-head{
    margin-bottom:18px;
  }
  .section-eyebrow{
    font-size:13px;
    padding:6px 12px;
    margin-bottom:14px;
  }

  /* Header --------------------------------------------------------------- */
  .site-header{
    margin-bottom:22px;
  }
  .nav-card{
    min-height:0;
    padding:14px 16px;
    border-radius:16px;
    gap:12px;
    align-items:center;
    flex-wrap:wrap;
  }
  .brand-block{
    min-width:0;
    gap:12px;
  }
  .logo-icon{width:42px;height:42px;border-width:3px}
  .logo-icon svg{width:22px;height:22px}
  .brand-title{font-size:17px;white-space:normal}
  .brand-subtitle{font-size:13px;white-space:normal;margin-top:2px}
  .divider{display:none}
  .nav-toggle{width:42px;height:42px;border-radius:11px}
  .nav-link{font-size:15px;white-space:normal}

  /* Hero ----------------------------------------------------------------- */
  .hero{
    height:auto;
    min-height:0;
    margin-top:0;
    padding:26px 0 34px;
    overflow:hidden;
  }
  .hero .container{
    width:min(100% - 32px, var(--max));
  }
  .hero-content{
    max-width:none;
  }
  .hero-actions{
    flex-direction:column;
    align-items:stretch;
    gap:12px;
    margin-top:26px;
  }
  .hero .btn,
  .btn{
    width:100%;
    min-width:0;
    height:54px;
    border-radius:11px;
    font-size:16px;
    justify-content:center;
    padding:0 18px;
    gap:10px;
  }
  .hero .btn .ui-svg,
  .btn svg{
    font-size:20px;
    width:20px;
    height:20px;
  }
  .clock-art{
    display:block;
    right:-110px;
    top:-10px;
    width:320px;
    height:320px;
    opacity:.55;
  }
  .clock-face{
    width:230px;
    height:230px;
    right:0;
    top:0;
    border-width:12px;
    opacity:.5;
  }
  .wave-art{
    display:block;
    right:-120px;
    bottom:-40px;
    width:420px;
    opacity:.45;
  }
  .dots{
    display:block;
    width:56px;
    height:56px;
    background-size:11px 11px;
    left:auto;
    right:16px;
    top:6px;
  }
  .dots.bottom{display:none}

  /* Calculator ----------------------------------------------------------- */
  .calculator-section{
    margin-top:34px;
  }
  .calculator-wrap{
    padding:16px;
    border-radius:16px;
  }
  .calculator-section .section-head{
    text-align:left;
  }
  .calculator-section .calc-grid{
    grid-template-columns:1fr;
    gap:14px;
  }
  .calc-tabs{
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:0;
    padding:0 0 14px;
  }
  .calc-tab{
    height:48px;
    border-radius:0;
    box-shadow:none;
    font-size:14px;
    gap:6px;
    justify-content:center;
    padding:0 6px;
    min-width:0;
  }
  .calc-tab .ui-svg{font-size:15px}
  .calc-tab:first-child{border-radius:10px 0 0 10px}
  .calc-tab:last-child{border-radius:0 10px 10px 0}
  .calc-main{
    border-radius:12px;
    overflow:hidden;
  }
  .calc-panel{
    padding:16px;
  }
  .daily-layout{
    display:flex;
    flex-direction:column;
    gap:18px;
    margin:0;
  }
  .daily-layout .calc-left,
  .daily-layout .break-panel,
  .daily-layout .calc-options{
    padding:0;
    border:0;
    grid-column:auto;
    grid-row:auto;
  }
  .daily-layout .calc-left{order:1}
  .daily-layout .break-panel{order:2}
  .daily-layout .calc-options{order:3}
  .form-row{
    grid-template-columns:1fr 1fr;
    gap:14px;
    margin-bottom:0;
  }
  label,
  .break-panel h3,
  .multi-panel h3{
    font-size:14px;
    margin-bottom:7px;
  }
  .break-panel h3{font-size:16px}
  .field{
    height:46px;
    font-size:15px;
    border-radius:9px;
    padding:0 12px;
    gap:8px;
  }
  .segmented{
    height:42px;
    margin-bottom:12px;
  }
  .segmented button{font-size:14px}
  .break-count{
    font-size:14px;
    margin-bottom:8px;
  }
  .break-list{gap:8px}
  .break-item{
    grid-template-columns:22px minmax(0,1fr) 8px minmax(0,1fr) auto 22px;
    height:46px;
    padding:0 10px;
    font-size:14px;
    gap:7px;
  }
  .break-item .duration{font-size:13px;white-space:nowrap}
  .calc-row-icon{font-size:15px}
  .small-outline{
    height:46px;
    font-size:15px;
    border-radius:9px;
  }
  .preset-field{
    max-width:none;
    margin-bottom:14px;
  }
  .legal-row{
    margin-top:0;
    gap:14px;
    align-items:center;
  }
  .legal-row p{font-size:14px;line-height:1.45}
  .switch{width:48px;height:26px}
  .switch::after{width:20px;height:20px}
  .switch.off::after{right:23px}
  .calc-main > .calculate-btn{
    width:calc(100% - 32px);
    margin:16px 16px 12px;
    height:50px;
    font-size:16px;
  }
  .calc-status{
    width:calc(100% - 32px);
    margin:0 16px 10px;
    font-size:12px;
  }
  .calc-main .result-cards{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;
    padding:0 16px;
    margin-top:12px;
  }
  .calc-main .result-card{
    min-height:0;
    grid-template-columns:38px minmax(0,1fr);
    gap:10px;
    padding:14px 12px;
    border-radius:11px;
  }
  .calc-main .metric-icon{
    width:36px;
    height:36px;
    font-size:19px;
  }
  .calc-main .metric-icon .ui-svg{font-size:19px}
  .result-card strong{font-size:12px}
  .calc-main .result-card .number{font-size:22px}
  .result-card p{font-size:12px}
  .calc-actions{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px;
    padding:14px 16px 16px;
  }
  .calc-actions button{
    width:100%;
    height:42px;
    padding:0 10px;
    font-size:13px;
  }
  .calc-actions #resetCalc{margin-left:0}
  .calc-table-wrap{
    -webkit-overflow-scrolling:touch;
  }
  .work-table{min-width:480px}
  .work-table th,.work-table td{padding:10px 12px;font-size:13px}
  .formula-note{font-size:12px}

  /* Rule check card ------------------------------------------------------ */
  .rule-card{
    padding:18px;
    border-radius:12px;
  }
  .rule-title{
    font-size:19px;
    gap:11px;
    margin-bottom:16px;
  }
  .shield{width:32px;height:32px}
  .rule-list{gap:14px}
  .rule-item{
    grid-template-columns:24px minmax(0,1fr);
    gap:11px;
  }
  .check-circle{width:21px;height:21px;font-size:11px}
  .rule-item strong{font-size:15px}
  .rule-item span{font-size:14px}
  .note-box{margin-top:16px;padding-top:14px}
  .note-inner{
    grid-template-columns:26px minmax(0,1fr);
    gap:11px;
    padding:14px;
  }
  .info-circle{width:25px;height:25px;font-size:13px}
  .note-inner strong{font-size:15px}
  .note-inner span{font-size:14px}

  /* Benefits ------------------------------------------------------------- */
  .benefits-panel{
    padding:24px 18px;
    border-radius:16px;
  }
  .benefit-grid{
    grid-template-columns:1fr;
    gap:12px;
    margin-top:20px;
  }
  .benefit-card{
    min-height:0;
    padding:18px;
    border-radius:13px;
  }
  .benefit-icon{
    width:46px;
    height:46px;
    font-size:24px;
    margin-bottom:14px;
  }
  .benefit-icon .ui-svg{font-size:24px}
  .benefit-card h3{font-size:18px}
  .benefit-card p{font-size:15px}

  /* How-to sections ------------------------------------------------------ */
  .how-section{margin-top:40px}
  .how-section + .how-section{margin-top:40px}
  .how-section .section-head{text-align:left}
  .how-section .section-copy{margin:0}
  .how-grid{
    grid-template-columns:1fr;
    gap:14px;
    margin-top:18px;
  }
  .how-card{
    min-height:0;
    padding:16px;
    border-radius:13px;
  }
  .step-badge{
    height:auto;
    min-height:36px;
    font-size:14px;
    padding:7px 12px;
    border-radius:9px;
    margin-bottom:14px;
  }
  .step-badge .ui-svg{font-size:17px}
  .how-card h3{
    font-size:18px;
    margin-bottom:14px;
  }
  .mini-ui,
  .mini-legal,
  .mini-table,
  .mini-summary{
    min-height:0;
    padding:12px;
    margin-bottom:14px;
  }
  .mini-ui-row{grid-template-columns:1fr 1fr;gap:10px;margin-bottom:12px}
  .mini-label{font-size:11px}
  .mini-field{height:34px;font-size:12px}
  .mini-seg{height:30px}
  .mini-seg button{font-size:12px}
  .mini-break{
    grid-template-columns:18px minmax(0,1fr) 8px minmax(0,1fr) auto 10px;
    height:38px;
    font-size:12px;
    gap:6px;
  }
  .mini-btn{height:38px;font-size:14px}
  .mini-legal-title{font-size:13px}
  .mini-rule{font-size:11.5px;padding:8px 10px}
  .mini-good{font-size:12px}
  .mini-table-row{font-size:12px;min-height:34px}
  .mini-summary > div{font-size:13px;min-height:40px}
  .step-list{gap:9px}
  .step-list li{font-size:14px;gap:10px}
  .small-check{width:17px;height:17px;font-size:9px}
  .how-support{
    display:grid;
    grid-template-columns:1fr;
    gap:0;
    padding:0;
    background:#f8fffb;
    overflow:hidden;
  }
  .how-support > div{
    grid-template-columns:40px minmax(0,1fr);
    column-gap:12px;
    padding:12px 14px;
    border-bottom:1px solid #dcece4;
  }
  .how-support > div:last-child{border-bottom:0}
  .how-support .benefit-icon{width:38px;height:38px;font-size:19px}
  .how-support .benefit-icon .ui-svg{font-size:19px}
  .how-support strong{font-size:15px}
  .how-support span:last-child{font-size:13px}

  /* Rules / guidelines --------------------------------------------------- */
  .rules-section .section-head{
    display:block;
    text-align:left;
  }
  .info-banner{
    grid-template-columns:34px minmax(0,1fr);
    align-items:start;
    gap:12px;
    padding:14px 16px;
    font-size:14px;
    line-height:1.5;
    border-radius:12px;
    margin-top:16px;
  }
  .info-banner .info-circle{
    width:30px;
    height:30px;
    font-size:15px;
    margin-top:1px;
  }
  .rule-accordion-grid{
    grid-template-columns:1fr;
    gap:10px;
  }
  .rules-section .rule-accordion,
  .rule-accordion{
    grid-template-columns:48px minmax(0,1fr);
    min-height:0;
    height:auto;
    align-items:start;
    gap:12px;
    padding:14px 16px;
    border-radius:12px;
  }
  .rule-accordion .round-icon{
    width:42px;
    height:42px;
    font-size:21px;
  }
  .rule-accordion .round-icon .ui-svg{font-size:21px}
  .rule-accordion h3{
    font-size:16px;
    line-height:1.3;
    margin-bottom:5px;
  }
  .rule-accordion p{
    font-size:14px;
    line-height:1.45;
  }
  .rule-accordion .chevron{display:none}

  /* FAQ ------------------------------------------------------------------ */
  .faq-section .section-head{text-align:left}
  .faq-grid{
    grid-template-columns:1fr;
    gap:10px;
    margin-top:18px;
  }
  .faq-column{gap:10px}
  .faq-item,
  .faq-item.open{
    grid-template-columns:36px minmax(0,1fr) 16px;
    min-height:0;
    align-items:start;
    gap:12px;
    padding:14px 16px;
    border-radius:12px;
  }
  .faq-item.open{
    padding-top:14px;
    border-color:var(--primary);
  }
  .faq-icon{
    width:30px;
    height:30px;
    font-size:15px;
    margin-top:1px;
  }
  .faq-item h3{
    font-size:clamp(15px,4.1vw,17px);
    line-height:1.35;
  }
  .faq-item p{
    font-size:clamp(14px,3.7vw,15.5px);
    line-height:1.5;
    margin-top:10px;
    max-width:none;
  }
  .faq-item .chevron{font-size:18px;margin-top:4px}

  /* CTA ------------------------------------------------------------------ */
  .cta-section{margin-top:40px}
  .cta-card{
    grid-template-columns:1fr;
    min-height:0;
    padding:22px 18px;
    border-radius:16px;
    gap:0;
  }
  .cta-card .section-eyebrow{margin-bottom:14px}
  .cta-card .btn{
    margin-top:20px;
    min-width:0;
    width:100%;
  }
  .cta-visual{display:none}
  .cta-points{
    display:flex;
    flex-wrap:wrap;
    gap:10px 18px;
    margin-top:18px;
    font-size:14px;
  }
  .cta-points .sep{display:none}
  .cta-points .check-circle{width:20px;height:20px;font-size:11px}

  /* Footer --------------------------------------------------------------- */
  .footer{
    margin-top:40px;
    padding:8px 0 20px;
  }
  .footer .container{
    width:min(100% - 32px, var(--max));
  }
  .footer-grid{
    grid-template-columns:1fr;
    gap:12px;
    padding-top:0;
  }
  .footer-grid > div:first-child{
    text-align:center;
    padding:22px 8px 12px;
  }
  .footer-brand{
    display:grid;
    justify-items:center;
    gap:12px;
    margin-bottom:0;
  }
  .footer-logo{
    width:58px;
    height:58px;
    border-radius:14px;
    font-size:30px;
  }
  .footer-logo .ui-svg{font-size:30px}
  .footer-brand h3{font-size:21px}
  .footer-desc{
    font-size:15px;
    line-height:1.5;
    max-width:420px;
    margin:14px auto;
  }
  .footer-trust{
    justify-content:center;
    font-size:14px;
    gap:12px;
    margin-bottom:18px;
  }
  .footer-social{
    justify-content:center;
    gap:10px;
  }
  .footer-social a{
    width:42px;
    height:42px;
    font-size:19px;
  }
  .footer-social .ui-svg{font-size:19px}
  .footer-col{
    border:0;
    border-radius:0;
    padding:0;
    background:none;
  }
  .footer-col h4{
    margin:0 0 4px;
    padding:0;
    font-size:17px;
    background:none;
    border:0;
  }
  .footer-col h4::after{display:none}
  .footer-col a{
    display:block;
    margin:0;
    padding:9px 0;
    font-size:15px;
    border:0;
  }
  .footer-bottom{
    grid-template-columns:1fr;
    gap:12px;
    margin-top:16px;
    padding:16px 0 0;
    border:0;
    border-top:1px solid var(--line-2);
    border-radius:0;
    text-align:center;
    justify-items:center;
    font-size:13px;
  }
  .footer-bottom > div{
    justify-self:center;
  }
  .footer-disclaimer{
    gap:8px;
    justify-self:center;
    justify-content:center;
    align-items:flex-start;
    text-align:center;
    max-width:340px;
  }
  .footer-disclaimer-icon,
  .footer-disclaimer .ui-svg{font-size:17px}
  /* Sit the badge on the first line of the wrapped text rather than
     floating between the two lines. */
  .footer-disclaimer-icon{align-self:flex-start;margin-top:1px}
}

/* ----------------------------- Narrow phones ----------------------------- */
@media (max-width:430px){
  .container,
  .hero .container,
  .footer .container{
    width:min(100% - 24px, var(--max));
  }
  section{margin-top:34px}
  .calculator-wrap{padding:14px}
  .calc-panel{padding:14px}
  .calc-tab{font-size:12.5px;gap:5px;padding:0 4px}
  .calc-tab .ui-svg{font-size:14px}
  .calc-main > .calculate-btn{width:calc(100% - 28px);margin:14px 14px 10px}
  .calc-status{width:calc(100% - 28px);margin:0 14px 10px}
  .calc-main .result-cards{padding:0 14px;gap:8px}
  .calc-main .result-card{
    grid-template-columns:1fr;
    gap:8px;
    padding:12px;
  }
  .calc-main .result-card .number{font-size:20px}
  .calc-actions{padding:12px 14px 14px}
  .break-item{
    grid-template-columns:18px minmax(0,1fr) 6px minmax(0,1fr) auto 18px;
    gap:5px;
    font-size:13px;
    padding:0 8px;
  }
  .break-item .duration{font-size:12px}
  .form-row{gap:10px}
  .field{padding:0 10px;font-size:14px}
  .footer-col a{margin:0 14px;font-size:14px}
  .cta-points{font-size:13px;gap:8px 14px}
}

/* --------------------------- Very small phones --------------------------- */
@media (max-width:360px){
  .calc-tab{font-size:11.5px}
  .calc-tab .ui-svg{display:none}
  .calc-main .result-cards{grid-template-columns:1fr}
  .calc-actions{grid-template-columns:1fr}
  .form-row{grid-template-columns:1fr;gap:12px}
}

/* Calculator audit improvements ------------------------------------------ */
.direct-break-field{
  margin-bottom:14px;
}
.direct-break-field label{
  margin-bottom:7px;
}
.break-minutes-field input{
  min-width:0;
}
.break-minutes-field > span:last-child{
  color:#536998;
  font-size:13px;
  font-weight:800;
}
.break-minutes-field input.legal-adjusted{
  color:#087a43;
  font-weight:900;
}
.field-help{
  margin:7px 0 0;
  color:#536998;
  font-size:12px;
  line-height:1.4;
}
.daily-layout .transfer-row{
  grid-column:1;
  padding:0 26px 22px;
}
.panel-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
}
.panel-actions .small-outline{
  width:auto;
  min-width:180px;
  padding:0 16px;
}
.panel-actions .calc-add-row{
  margin-top:14px;
}
.work-table input[type="text"]{
  border:1px solid #d5dfef;
  border-radius:8px;
  height:36px;
  padding:0 10px;
  background:white;
  font-weight:600;
  min-width:92px;
  max-width:118px;
}
.hm-input{
  display:inline-flex;
  align-items:center;
  gap:7px;
  color:#536998;
  font-size:12px;
  font-weight:800;
}
.work-table input.input-error{
  border-color:#d92d20;
  background:#fff5f4;
  color:#b42318;
}
.work-table tr.row-invalid{
  background:#fff8f7;
}
.net-cell{
  font-weight:700;
  color:#10265a;
  white-space:nowrap;
}
.work-table tr.row-invalid .net-cell{
  color:#b42318;
}
.calc-error-banner{
  margin:14px 0 0;
  padding:12px 16px;
  border:1px solid #d92d20;
  border-radius:10px;
  background:#fff5f4;
  color:#b42318;
  font-size:14px;
  font-weight:600;
  line-height:1.5;
}
.break-item.range-error{
  border-color:#d92d20;
  background:#fff5f4;
}
.break-item.range-error .duration{
  color:#b42318;
}
.result-primary-badge{
  display:block;
  color:#075fff;
  font-size:11px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.04em;
  margin-bottom:4px;
}
.calc-main .result-card.net-result-card{
  border-color:#9dc2ff;
  background:linear-gradient(180deg,#f7fbff 0%,#edf5ff 100%);
  box-shadow:0 12px 25px rgba(7,95,255,.11);
}
.calc-main .result-card.net-result-card strong,
.calc-main .result-card.net-result-card .number{
  color:#075fff;
}
.calc-main .result-card.net-decimal-card{
  border-color:#c9b8ff;
  background:linear-gradient(180deg,#fbf9ff 0%,#f2edff 100%);
}
.calc-main .result-card.net-decimal-card strong,
.calc-main .result-card.net-decimal-card .number{
  color:#6d42f5;
}
.rule-item.is-pass .check-circle{background:#12b76a}
.rule-item.is-warning .check-circle{background:#f79009}
.rule-item.is-error .check-circle{background:#d92d20}
.rule-item.is-neutral .check-circle{background:#667085}
.rule-item.is-warning strong{color:#b54708}
.rule-item.is-error strong{color:#b42318}
.rule-item.is-neutral strong{color:#475467}

/* Spacing pass from the recorded desktop review. Keep the two calculator
   columns independent so a longer break list does not stretch the controls
   in the left column, and avoid stretching the Rule card into empty space. */
.daily-primary{
  min-width:0;
}
.rule-card{
  min-height:0;
  align-self:start;
}
.break-list{
  max-height:106px;
  overflow-y:auto;
  overscroll-behavior:contain;
  scrollbar-gutter:stable;
  padding-right:3px;
}

/* Loom review: keep result labels and supporting copy on one line without
   shrinking the text. Two columns provide enough width at every desktop and
   tablet breakpoint; narrow screens fall back to a single column. */
.calc-main .result-cards{
  grid-template-columns:repeat(2,minmax(0,1fr));
}
.calc-main .result-card{
  align-items:center;
  min-height:122px;
}
.calc-main .result-card > div{min-width:0}

/* The how-to calculator examples are illustrations, not live controls. */
.how-demo{
  pointer-events:none;
  user-select:none;
  -webkit-user-select:none;
}
.how-demo .mini-static-control,
.how-demo .mini-seg span,
.how-demo .switch{
  cursor:default;
}
.how-demo .mini-btn{
  background:linear-gradient(180deg,#0b6cff,#0055ee);
}
.how-demo .mini-summary strong{color:var(--primary)}

@media (min-width:1301px){
  .daily-primary{
    display:grid;
    align-content:start;
  }
  .daily-primary .calc-left{padding:22px 26px 0}
  .daily-primary .form-row{margin-bottom:18px}
  .daily-primary .calc-options{padding:0 26px 18px}
  .daily-primary .legal-row{margin-top:18px}
  .daily-primary .transfer-row{padding:0 26px 22px}
  .daily-layout .break-panel{
    grid-column:auto;
    grid-row:auto;
    align-self:start;
  }
}

@media (min-width:901px){
  .page-shell section{margin-top:48px}
  .page-shell .calculator-section{margin-top:52px}
  .page-shell .how-section + .how-section{margin-top:44px}
  .page-shell .cta-section{margin-top:48px}
  .footer{margin-top:48px}
  .footer-grid{padding-top:24px}
}

@media (max-width:1300px){
  .daily-primary{display:contents}
}

/* Results-only print/PDF sheet */
.print-results{display:none}
@media print{
  @page{size:A4 portrait;margin:16mm}
  html,
  body{
    width:auto!important;
    min-width:0!important;
    min-height:0!important;
    height:auto!important;
    margin:0!important;
    padding:0!important;
    overflow:visible!important;
    background:#fff!important;
  }
  body.atr-printing > :not(.print-results-portal){display:none!important}
  body.atr-printing > .print-results-portal{
    display:block!important;
    position:static!important;
    width:100%;
    max-width:none;
    min-height:0;
    padding:0;
    color:#101828;
    background:#fff;
    font-family:Arial,sans-serif;
    break-after:avoid-page;
    page-break-after:avoid;
  }
  .print-results-portal .print-brand{
    margin:0 0 28px;
    color:#075fff;
    font-size:16px;
    font-weight:800;
  }
  .print-results-portal .print-brand span{color:#667085;font-weight:600}
  .print-results-portal h2{
    margin:0 0 8px;
    color:#101828;
    font-size:30px;
    letter-spacing:-.02em;
  }
  .print-results-portal .print-meta{
    margin:0 0 26px;
    color:#667085;
    font-size:12px;
  }
  .print-results-portal .print-entries{
    margin:0 0 20px;
    font-size:12px;
    color:#344054;
  }
  .print-results-portal .print-entries table{
    width:100%;
    border-collapse:collapse;
  }
  .print-results-portal .print-entries th,
  .print-results-portal .print-entries td{
    border:1px solid #d0d5dd;
    padding:6px 8px;
    text-align:left;
    font-size:11px;
  }
  .print-results-portal .print-entries th{
    background:#f5f9ff;
    color:#475467;
    font-weight:700;
    text-transform:uppercase;
    font-size:10px;
  }
  .print-results-portal .print-metrics{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px;
    margin:0 0 24px;
  }
  .print-results-portal .print-metrics > div{
    break-inside:avoid;
    border:1px solid #d0d5dd;
    border-radius:8px;
    padding:16px;
  }
  .print-results-portal .print-metrics > .print-net{
    border:2px solid #075fff;
    background:#f5f9ff;
  }
  .print-results-portal dt{
    margin-bottom:8px;
    color:#475467;
    font-size:11px;
    font-weight:700;
    text-transform:uppercase;
  }
  .print-results-portal dd{
    margin:0;
    color:#101828;
    font-size:24px;
    font-weight:800;
  }
  .print-results-portal .print-net dd{color:#075fff}
  .print-results-portal .print-rule{
    border-left:4px solid #075fff;
    padding:12px 14px;
    background:#f5f9ff;
    color:#344054;
    font-size:12px;
    line-height:1.5;
  }
  .print-results-portal .print-disclaimer{
    margin-top:24px;
    color:#667085;
    font-size:10px;
  }
}

@media (max-width:1300px){
  .daily-layout{grid-template-columns:1fr;grid-template-rows:auto}
  .daily-layout .calc-left,
  .daily-layout .break-panel,
  .daily-layout .calc-options,
  .daily-layout .transfer-row{grid-column:1;grid-row:auto}
  .daily-layout .transfer-row{padding:0 26px 22px}
}
@media (max-width:900px){
  .daily-layout .transfer-row{order:4;padding:0}
  .panel-actions{align-items:stretch}
  .panel-actions .small-outline{width:100%}
  .break-list{max-height:154px}
}
@media (min-width:681px){
  .calc-main .result-card strong,
  .calc-main .result-card p{white-space:nowrap}
}
@media (max-width:680px){
  .calc-main .result-cards{grid-template-columns:1fr}
}
@media (max-width:560px){
  .direct-break-field{margin-bottom:12px}
  .panel-actions{display:grid;grid-template-columns:1fr}
  .work-table input[type="text"]{min-width:84px;max-width:100px}
}

/* v3.0.0: dynamic menus, accessible controls and document-led content. */
.primary-menu,
.primary-menu .sub-menu,
.footer-menu,
.footer-menu .sub-menu{
  margin:0;
  padding:0;
  list-style:none;
}
.primary-menu{
  display:flex;
  align-items:stretch;
  gap:30px;
  height:100%;
}
.nav-links .primary-menu > li{position:relative;display:flex;align-items:stretch}
.nav-links a{
  position:relative;
  display:flex;
  align-items:center;
  color:var(--navy);
  font-size:15px;
  font-weight:650;
  line-height:1.25;
  white-space:nowrap;
}
.nav-links a:hover,
.nav-links a:focus-visible,
.nav-links .current-menu-item > a,
.nav-links .current-menu-ancestor > a,
.nav-links a[aria-current="page"]{color:var(--primary)}
.nav-links .current-menu-item > a::after,
.nav-links .current_page_item > a::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:-17px;
  width:72px;
  height:4px;
  border-radius:999px;
  background:var(--primary);
  transform:translateX(-50%);
}
.primary-menu .sub-menu{
  position:absolute;
  z-index:20;
  top:calc(100% - 4px);
  left:-16px;
  display:none;
  min-width:210px;
  padding:9px;
  border:1px solid var(--line);
  border-radius:12px;
  background:#fff;
  box-shadow:var(--shadow-soft);
}
.primary-menu li:hover > .sub-menu,
.primary-menu li:focus-within > .sub-menu{display:grid}
.primary-menu .sub-menu a{padding:10px 12px;border-radius:8px;white-space:normal}
.primary-menu .sub-menu a:hover,
.primary-menu .sub-menu a:focus-visible{background:var(--primary-soft)}
.footer-menu{display:grid;gap:13px}
.footer-menu li{margin:0!important}
.footer-menu a{display:inline-flex;margin:0!important;line-height:1.45}
.footer-menu .sub-menu{display:grid;gap:9px;margin:9px 0 0 14px}
.footer-logo .custom-logo-link{display:grid;place-items:center;width:100%;height:100%}
.footer-logo img.custom-logo{max-width:54px;max-height:54px;width:auto;height:auto}

.time-format-control{margin-bottom:20px}
.control-label{display:block;margin-bottom:7px;color:var(--navy);font-size:14px;font-weight:600}
.time-format-segmented{width:min(100%,310px);margin-bottom:0}
.time-format-segmented button{cursor:pointer}
.clock-input.input-error,
.field input[aria-invalid="true"]{color:#b42318!important;background:#fff5f4!important}
.calc-panel[hidden]{display:none!important}
.guidance-card .rule-item.is-neutral .check-circle{background:#667085}
.guidance-card .rule-item.is-notice .check-circle{background:#f79009}
.guidance-card .rule-item.is-notice strong{color:#b54708}
.guidance-card .check-circle{font-family:Arial,sans-serif;font-weight:800}
.row-error-message{
  display:block;
  margin-top:5px;
  color:#b42318;
  font-size:11px;
  font-weight:600;
  line-height:1.35;
  white-space:normal;
}
.break-item.range-error{height:auto;min-height:48px;padding-top:7px;padding-bottom:7px}
.break-item .row-error-message{grid-column:2 / -1;margin:0}
.calc-error-banner:focus{outline:3px solid rgba(217,45,32,.2);outline-offset:2px}

.guide-section .section-head{text-align:center}
.guide-section .section-copy{max-width:820px;margin:0 auto}
.guide-workflows{display:grid;gap:30px;max-width:1120px;margin:34px auto 0}
.guide-workflow{
  min-width:0;
  padding:38px;
  border:1px solid #d6e2f3;
  border-radius:20px;
  background:linear-gradient(180deg,#fff 0%,#fbfdff 100%);
  box-shadow:0 18px 44px rgba(16,44,86,.07);
}
.guide-workflow-head{display:grid;grid-template-columns:62px minmax(0,1fr);gap:20px;align-items:start}
.guide-step-number{width:58px;height:58px;border-radius:16px;display:grid;place-items:center;background:#eaf3ff;color:var(--primary);font-size:18px;font-weight:800}
.guide-label{margin:1px 0 7px;color:var(--primary);font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.guide-workflow h3{margin:0 0 9px;font-size:28px;line-height:1.2}
.guide-workflow-head p{max-width:760px;margin:0;color:#344977;font-size:16px;line-height:1.58}
.guide-steps{counter-reset:guide-step;display:grid;gap:14px;margin:28px 0 0;padding:0;list-style:none}
.guide-steps li{counter-increment:guide-step;display:grid;grid-template-columns:34px minmax(0,1fr);gap:13px;align-items:start;color:#203866;font-size:16px;line-height:1.58}
.guide-steps li::before{content:counter(guide-step);width:30px;height:30px;border-radius:50%;display:grid;place-items:center;margin-top:1px;background:var(--primary);color:#fff;font-size:13px;font-weight:800}
.guide-screenshots{display:grid;gap:22px;margin-top:30px}
.guide-screenshot{margin:0;overflow:hidden;border:1px solid #cfdcf1;border-radius:16px;background:#f5f8fc;box-shadow:0 12px 32px rgba(16,44,86,.08)}
.guide-screenshot img{display:block;width:100%;height:auto;background:#fff}
.guide-screenshot picture{display:block}
.guide-screenshot figcaption{padding:12px 16px;border-top:1px solid #dbe4f1;color:#536998;background:#fbfdff;font-size:14px;line-height:1.45}
.guide-section .how-support{max-width:1120px;margin:28px auto 0}

.legal-content-list{display:grid;gap:22px;max-width:1120px;margin:32px auto 0}
.legal-content-card{padding:30px 32px;border:1px solid #d6e2f3;border-radius:18px;background:#fff;box-shadow:0 12px 34px rgba(16,44,86,.055)}
.legal-content-heading{display:grid;grid-template-columns:62px minmax(0,1fr);gap:18px;align-items:center;margin-bottom:20px}
.legal-content-heading .round-icon{width:58px;height:58px;border-radius:50%;display:grid;place-items:center;background:#edf5ff;color:var(--primary)}
.legal-content-heading .round-icon .ui-svg{font-size:28px}
.legal-section-number{display:block;margin-bottom:3px;color:var(--primary);font-size:12px;font-weight:800;letter-spacing:.1em}
.legal-content-heading h3{margin:0;font-size:25px;line-height:1.24}
.legal-content-body{color:#344977;font-size:16px;line-height:1.72}
.legal-content-body p{margin:0 0 14px}
.legal-content-body p:last-child{margin-bottom:0}
.legal-content-body a,
.rules-sources a{color:var(--primary);font-weight:650;text-decoration:underline;text-underline-offset:3px}
.legal-disclaimer{display:grid;grid-template-columns:38px minmax(0,1fr);gap:14px;align-items:start;max-width:1120px;margin:24px auto 0;padding:18px 20px;border:1px solid #fedf89;border-radius:14px;background:#fffaeb;color:#7a4d05}
.legal-disclaimer .info-circle{background:#f79009}
.legal-disclaimer p{margin:1px 0 0;font-size:14px;line-height:1.58}

:where(a,button,input,select,textarea,[role="button"],[role="switch"]):focus-visible{
  outline:3px solid rgba(7,95,255,.24)!important;
  outline-offset:2px!important;
}
.skip-link:focus{
  position:fixed!important;
  z-index:99999;
  top:12px;
  left:12px;
  width:auto;
  height:auto;
  margin:0;
  padding:12px 16px;
  overflow:visible;
  clip:auto;
  white-space:normal;
  border-radius:8px;
  background:#fff;
  color:var(--primary);
  box-shadow:var(--shadow-soft);
  font-weight:700;
}

@media (max-width:1100px){
  .primary-menu{gap:20px}
  .nav-links a{font-size:14px}
}
@media (max-width:900px){
  .nav-links .primary-menu{display:flex;width:100%;height:auto;flex-direction:column;align-items:stretch;gap:0}
  .nav-links .primary-menu > li{display:block}
  .nav-links a{padding:11px 2px;white-space:normal}
  .nav-links .current-menu-item > a::after,
  .nav-links .current_page_item > a::after{display:none}
  .primary-menu .sub-menu{position:static;display:grid;min-width:0;margin:0 0 6px 14px;padding:0 0 0 12px;border:0;border-left:2px solid var(--line);border-radius:0;box-shadow:none}
  .guide-section .section-head{text-align:left}
  .guide-section .section-copy{margin:0}
  .guide-workflow{padding:28px}
  .legal-content-card{padding:26px}
}
@media (max-width:600px){
  .time-format-control{margin-bottom:18px}
  .work-table input.clock-input{min-width:102px;max-width:116px}
  .guide-workflows{gap:20px;margin-top:24px}
  .guide-workflow{padding:20px;border-radius:15px}
  .guide-workflow-head{grid-template-columns:46px minmax(0,1fr);gap:13px}
  .guide-step-number{width:44px;height:44px;border-radius:12px;font-size:15px}
  .guide-workflow h3{font-size:22px}
  .guide-workflow-head p,.guide-steps li{font-size:14px}
  .guide-steps{margin-top:22px;gap:12px}
  .guide-steps li{grid-template-columns:29px minmax(0,1fr);gap:10px}
  .guide-steps li::before{width:26px;height:26px;font-size:12px}
  .guide-screenshot{border-radius:10px}
  .guide-screenshot figcaption{padding:10px 12px;font-size:12px}
  .legal-content-card{padding:20px;border-radius:14px}
  .legal-content-heading{grid-template-columns:48px minmax(0,1fr);gap:13px;margin-bottom:16px}
  .legal-content-heading .round-icon{width:46px;height:46px}
  .legal-content-heading h3{font-size:21px}
  .legal-content-body{font-size:14px;line-height:1.65}
  .legal-disclaimer{grid-template-columns:30px minmax(0,1fr);padding:15px}
}

/* v3.10: unified break entry, live guidance and compact mobile results ----- */
.break-panel .direct-break-field{margin:0 0 14px}
.break-panel .direct-break-field[hidden]{display:block!important}
.break-panel .direct-break-field.is-derived-total .break-minutes-field{
  background:#f4f8ff;
  border-color:#bfd4f6;
}
.break-panel .direct-break-field.is-derived-total input{
  color:#087a48;
  cursor:default;
}
.break-panel .single-break-options{margin:0 0 14px}
.break-panel .single-break-mode-radios{gap:10px 20px}
.break-ranges[hidden]{display:none!important}
.break-panel #addBreak{width:100%;margin:10px 0 0}
.break-panel.is-minute-mode #addBreak{margin:0 0 14px}
.break-count{margin-bottom:9px;color:#075fff;font-weight:800}

.break-list{display:grid;gap:10px}
.break-item{
  display:block;
  min-height:0;
  padding:10px;
  border:1px solid #d8e3f2;
  border-radius:11px;
  background:#fff;
  box-shadow:0 5px 14px rgba(16,44,86,.05);
}
.break-item-head{
  display:flex;
  align-items:center;
  min-height:28px;
  gap:8px;
  margin-bottom:8px;
}
.break-item-head strong{
  min-width:0;
  margin-right:auto;
  color:#07143f;
  font-size:12px;
  font-weight:800;
}
.break-item .break-item-head .duration{
  flex:0 0 auto;
  min-height:24px;
  padding:4px 9px;
}
.break-item .break-item-head .x{
  position:static;
  flex:0 0 26px;
  width:26px;
  height:26px;
  transform:none;
  border-radius:7px;
  font-size:18px;
  line-height:1;
}
.break-time-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) 18px minmax(0,1fr);
  align-items:center;
  gap:7px;
}
.break-time-grid .time-control{
  position:relative;
  display:grid;
  grid-template-columns:minmax(44px,1fr) auto;
  min-width:0;
  min-height:52px;
  padding:19px 7px 5px;
}
.break-time-grid .time-control::before{
  content:attr(data-label);
  position:absolute;
  top:5px;
  left:8px;
  color:#6b7b99;
  font-size:9px;
  font-weight:750;
  line-height:1;
}
.break-time-grid .clock-input{min-width:0!important;font-size:13px}
.break-time-grid .period-select{width:43px;height:28px;padding-inline:2px}
.break-time-grid .time-separator{text-align:center}
.break-item .row-error-message{display:block;margin-top:8px;grid-column:auto}

.result-label-mobile{display:none}

.guidance-card .rule-title{margin-bottom:18px}
.guidance-live-summary{
  display:grid;
  grid-template-columns:34px minmax(0,1fr);
  gap:11px;
  margin-bottom:13px;
  padding:14px;
  border:1px solid #cfddf2;
  border-radius:12px;
  background:#f6f9fe;
}
.guidance-status-icon{
  display:grid;
  place-items:center;
  width:32px;
  height:32px;
  border-radius:50%;
  background:#667085;
  color:#fff;
  font-size:15px;
  font-weight:850;
}
.guidance-status-copy{display:grid;gap:4px;min-width:0}
.guidance-status-copy strong{color:#07143f;font-size:15px;line-height:1.25}
.guidance-status-copy > span:last-child{color:#40547e;font-size:12px;line-height:1.4}
.guidance-auto-badge{
  width:max-content;
  max-width:100%;
  padding:3px 7px;
  border-radius:999px;
  background:#e7eef8;
  color:#465a7c!important;
  font-size:9px!important;
  font-weight:850;
  letter-spacing:.035em;
  line-height:1.2!important;
  text-transform:uppercase;
}
.guidance-live-summary.is-pass{border-color:#a9e4ca;background:#effbf6}
.guidance-live-summary.is-pass .guidance-status-icon{background:#12b76a}
.guidance-live-summary.is-warning{border-color:#f8d399;background:#fff8eb}
.guidance-live-summary.is-warning .guidance-status-icon{background:#f79009}
.guidance-live-summary.is-error{border-color:#f2b8b5;background:#fff3f2}
.guidance-live-summary.is-error .guidance-status-icon{background:#d92d20}
.guidance-metrics{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:7px;
  margin-bottom:16px;
}
.guidance-metrics > div{
  min-width:0;
  padding:9px 6px;
  border:1px solid #dce6f4;
  border-radius:9px;
  background:#fff;
  text-align:center;
}
.guidance-metrics span{display:block;color:#71809c;font-size:9px;font-weight:750;text-transform:uppercase}
.guidance-metrics strong{display:block;margin-top:3px;color:#07143f;font-size:13px;font-variant-numeric:tabular-nums}
.guidance-card .rule-list{gap:14px}
.guidance-card .rule-item{grid-template-columns:24px minmax(0,1fr);gap:9px}
.guidance-card .check-circle{width:23px;height:23px;font-size:12px}
.guidance-card .rule-item strong{font-size:13px}
.guidance-card .rule-item span{font-size:12px;line-height:1.45}
.guidance-net-value{
  display:block!important;
  margin:2px 0 3px;
  color:#075fff!important;
  font-size:20px!important;
  font-weight:850;
  font-variant-numeric:tabular-nums;
  line-height:1.1!important;
}
.guidance-card #ruleLimitItem{opacity:.82}
.guidance-card .note-box{margin-top:18px;padding-top:14px}
.guidance-card .note-inner{padding:14px}

@media (min-width:1025px) and (max-width:1500px){
  .break-time-grid{grid-template-columns:1fr}
  .break-time-grid .time-separator{display:none}
  .break-time-grid .time-control{width:100%}
}

@media (max-width:600px){
  .calculator-wrap .calc-tabs{
    gap:5px;
    padding:5px;
    border:1px solid #d6e2f3;
    border-radius:12px;
    background:#f3f7fd;
  }
  .calculator-wrap .calc-tab-heading{min-width:0}
  .calculator-wrap .calc-tab{
    flex-direction:column;
    justify-content:center;
    min-height:56px;
    height:56px;
    gap:4px;
    padding:5px 3px;
    border:1px solid transparent;
    border-radius:9px!important;
    background:transparent;
    box-shadow:none;
    line-height:1;
  }
  .calculator-wrap .calc-tab:not(.active){color:#273a64}
  .calculator-wrap .calc-tab.active{box-shadow:0 6px 14px rgba(7,95,255,.20)}
  .calculator-wrap .calc-tab .ui-svg{font-size:15px}
  .calculator-wrap .calc-tab-label{font-size:var(--atr-tab-mobile-font-size);font-weight:var(--atr-tab-mobile-font-weight)}

  .break-panel .single-break-mode-radios{gap:10px 18px}
  .break-time-grid{grid-template-columns:minmax(0,1fr) 16px minmax(0,1fr);gap:6px}
  .break-time-grid .time-control{min-height:54px;padding:20px 6px 6px}
  .break-item .break-item-head .duration{grid-column:auto;justify-self:auto}
  .break-item .break-item-head .x{grid-column:auto;grid-row:auto;justify-self:auto}

  .calc-main .result-cards{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:8px;
    padding:0 14px;
  }
  .calc-main .result-card{
    display:block;
    min-height:116px;
    padding:12px;
    border-width:1px;
    border-radius:11px;
    box-shadow:none;
  }
  .calc-main .result-card.net-result-card{border-width:1.5px;box-shadow:0 7px 16px rgba(7,95,255,.08)}
  .calc-main .result-card.net-decimal-card{box-shadow:0 7px 16px rgba(109,66,245,.08)}
  .calc-main .result-card .metric-icon{width:30px;height:30px;margin-bottom:8px;font-size:17px}
  .calc-main .result-card > div{min-width:0}
  .result-label-desktop{display:none}
  .result-label-mobile{display:inline}
  .calc-main .result-card strong{min-height:0;margin-bottom:5px;font-size:11px;line-height:1.2}
  .calc-main .result-card .number{font-size:19px;line-height:1.1;white-space:nowrap}
  .calc-main .result-card p,
  .calc-main .result-card .result-primary-badge{display:none}

  .guidance-card{padding:18px 16px}
  .guidance-live-summary{padding:12px}
  .guidance-metrics{gap:5px}
  .guidance-metrics > div{padding-inline:4px}
}

@media (max-width:340px){
  .break-time-grid{grid-template-columns:1fr}
  .break-time-grid .time-separator{display:none}
  .calc-main .result-card{padding:10px}
  .calc-main .result-card .number{font-size:17px}
}

/* Single WordPress-managed footer menu ---------------------------------- */
.footer-grid{
  grid-template-columns:minmax(280px,1.05fr) minmax(0,1.95fr);
  gap:clamp(40px,6vw,96px);
}
.footer-nav-column .footer-menu{
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px 34px;
}
.footer-nav-column .footer-menu a{margin:0}

@media (max-width:900px){
  .footer-grid{grid-template-columns:1fr;gap:24px}
  .footer-nav-column .footer-menu{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 24px}
}
@media (max-width:600px){
  .footer-nav-column{text-align:center}
  .footer-nav-column .footer-menu{grid-template-columns:1fr;gap:2px}
  .footer-nav-column .footer-menu a{justify-content:center;margin:0!important}
}

/* Accessible FAQ accordion ---------------------------------------------- */
.faq-item,
.faq-item.open{
  display:block;
  min-height:0;
  padding:0;
  overflow:hidden;
  cursor:default;
}
.faq-item.open{padding-top:0}
.faq-item h3{margin:0}
.faq-question{
  display:grid;
  grid-template-columns:46px minmax(0,1fr) 18px;
  align-items:center;
  gap:14px;
  width:100%;
  min-height:78px;
  margin:0;
  padding:16px 22px;
  border:0;
  border-radius:12px;
  background:transparent;
  color:inherit;
  font:inherit;
  text-align:left;
  cursor:pointer;
}
.faq-item.open .faq-question{align-items:start;padding-top:22px}
.faq-question-text{align-self:center;font-size:17px;font-weight:700;line-height:1.35;letter-spacing:-.02em}
.faq-item.open .faq-question-text{align-self:start;margin-top:6px}
.faq-question .chevron{align-self:center}
.faq-item.open .faq-question .chevron{align-self:start;margin-top:7px}
.faq-answer{padding:0 58px 22px 82px}
.faq-answer[hidden]{display:none}
.faq-answer p,
.faq-item.open .faq-answer p{
  display:block;
  max-width:640px;
  margin:0;
  color:#344977;
  font-size:15px;
  font-weight:400;
  line-height:1.55;
}

@media (max-width:600px){
  .faq-question{
    grid-template-columns:36px minmax(0,1fr) 16px;
    min-height:0;
    gap:12px;
    padding:14px 16px;
  }
  .faq-item.open .faq-question{padding-top:14px}
  .faq-question-text{font-size:clamp(15px,4.1vw,17px)}
  .faq-item.open .faq-question-text{margin-top:4px}
  .faq-answer{padding:0 16px 16px 64px}
  .faq-answer p,
  .faq-item.open .faq-answer p{font-size:clamp(14px,3.7vw,15.5px);line-height:1.5}
}

/* Legacy v3 layout polish (overridden where needed by v3.1 below) -------- */
.break-mode-segmented{
  grid-template-columns:.9fr 1.05fr 1.05fr;
}
.break-mode-segmented button{
  min-width:0;
  padding-inline:6px;
  line-height:1;
  white-space:nowrap;
}

/* Two-up desktop guides keep the homepage useful without the previous
   single-column, screenshot-heavy scroll. The dedicated guide remains fully
   readable and returns to one column on tablet and phone widths. */
.atr-front-page .guide-workflows{
  grid-template-columns:repeat(2,minmax(0,1fr));
  align-items:start;
}
.atr-front-page .guide-workflow{
  padding:30px;
}
.atr-front-page .guide-workflow-head{
  grid-template-columns:54px minmax(0,1fr);
  gap:16px;
}
.atr-front-page .guide-step-number{
  width:50px;
  height:50px;
  border-radius:14px;
  font-size:16px;
}
.atr-front-page .guide-workflow h3{
  font-size:clamp(22px,2vw,26px);
}

.week-break-input{
  display:inline-flex;
  align-items:center;
  gap:6px;
}
.week-break-input > span,
.hm-input > span{
  flex:0 0 auto;
}

@media (max-width:900px){
  .atr-front-page .guide-workflows{grid-template-columns:1fr}
}

@media (max-width:600px){
  .break-mode-segmented button{
    padding-inline:3px;
    font-size:12.5px;
  }

  /* Weekly and monthly rows become touch-friendly cards instead of forcing
     a 480px table through a narrow viewport. */
  .mobile-card-table-wrap{
    overflow:visible;
    border:0;
    border-radius:0;
    background:transparent;
  }
  .mobile-card-table{
    display:block;
    width:100%;
    min-width:0;
  }
  .mobile-card-table thead{
    position:absolute;
    width:1px;
    height:1px;
    margin:-1px;
    padding:0;
    overflow:hidden;
    clip:rect(0,0,0,0);
    white-space:nowrap;
    border:0;
  }
  .mobile-card-table tbody{
    display:grid;
    gap:12px;
  }
  .mobile-card-table tr{
    position:relative;
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px;
    padding:14px;
    border:1px solid #d5dfef;
    border-radius:12px;
    background:#fff;
    box-shadow:0 8px 20px rgba(16,44,86,.05);
  }
  .mobile-card-table td{
    display:flex;
    min-width:0;
    padding:0;
    border:0;
    flex-direction:column;
    align-items:stretch;
    gap:6px;
    white-space:normal;
  }
  .mobile-card-table td::before{
    content:attr(data-label);
    color:#536998;
    font-size:11px;
    font-weight:800;
    line-height:1.2;
    letter-spacing:.04em;
    text-transform:uppercase;
  }
  .mobile-card-table td:first-child,
  .mobile-card-table td[data-label="Net"]{
    grid-column:1 / -1;
  }
  .mobile-card-table td:first-child{
    padding-right:34px;
  }
  .mobile-card-table td[data-label="Net"]{
    padding-top:10px;
    border-top:1px solid #e1e8f3;
    color:var(--navy);
    font-size:17px;
  }
  .mobile-card-table .row-action{
    position:absolute;
    top:10px;
    right:10px;
    display:block;
    width:30px;
    height:30px;
  }
  .mobile-card-table .row-action::before,
  .mobile-card-table .row-action:empty{
    display:none;
  }
  .mobile-card-table .table-remove{
    width:30px;
    height:30px;
    border:1px solid #d5dfef;
    background:#fff;
    font-size:22px;
  }
  .mobile-card-table input.clock-input,
  .mobile-card-table input[type="text"],
  .mobile-card-table input[type="number"]{
    width:100%;
    min-width:0;
    max-width:none;
    height:44px;
    padding:0 11px;
  }
  .mobile-card-table .row-check{
    min-height:32px;
    font-size:16px;
  }
  .mobile-card-table .row-check input{
    width:18px;
    height:18px;
    flex:0 0 auto;
  }
  .mobile-card-table .hm-input,
  .mobile-card-table .week-break-input{
    display:flex;
    width:100%;
    align-items:center;
    gap:7px;
  }
  .mobile-card-table .hm-input input,
  .mobile-card-table .week-break-input input{
    flex:1 1 auto;
  }
}

@media (max-width:360px){
  .mobile-card-table tr{grid-template-columns:1fr}
  .mobile-card-table td{grid-column:1 / -1}
}

/* v3.1.0 calculator controls, 14-inch laptop breakpoint and result flow ---- */
.time-format-control{
  min-width:0;
  margin:0 0 16px;
  padding:0;
  border:0;
}
.time-format-control .control-label{padding:0}
.radio-options{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px 22px;
}
.radio-option,
.compact-radio-options label{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin:0;
  color:#344977;
  font-size:14px;
  font-weight:650;
  line-height:1.25;
  cursor:pointer;
}
.radio-option input,
.compact-radio-options input{
  appearance:none;
  -webkit-appearance:none;
  position:relative;
  width:17px;
  height:17px;
  margin:0;
  border:1.5px solid #9eb1cf;
  border-radius:50%;
  background:#fff;
  flex:0 0 auto;
}
.radio-option input::after,
.compact-radio-options input::after{
  content:"";
  position:absolute;
  inset:3px;
  border-radius:50%;
  background:var(--primary);
  transform:scale(0);
  transition:transform .15s ease;
}
.radio-option input:checked,
.compact-radio-options input:checked{border-color:var(--primary)}
.radio-option input:checked::after,
.compact-radio-options input:checked::after{transform:scale(1)}
.time-format-radios{
  min-height:30px;
  padding:2px 0;
}
.time-format-radios .radio-option:has(input:checked){color:var(--navy)}

.break-type-options{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:9px;
  margin:0 0 13px;
}
.break-type-options .radio-option{
  min-height:42px;
  padding:9px 12px;
  border:1px solid #d5dfef;
  border-radius:9px;
  background:#fff;
}
.break-type-options .radio-option:has(input:checked){
  border-color:#9ec1fb;
  background:#f5f9ff;
  color:#075fff;
}
.single-break-options{margin:0 0 14px}
.sub-control-label{
  display:block;
  margin:0 0 7px;
  color:#536998;
  font-size:12px;
  font-weight:750;
}
.compact-radio-options{
  display:flex;
  flex-wrap:wrap;
  gap:10px 18px;
  padding:10px 12px;
  border:1px solid #e0e8f4;
  border-radius:9px;
  background:#fafcff;
}

.time-field{
  display:grid;
  grid-template-columns:20px minmax(0,1fr) auto;
  align-items:center;
  gap:8px;
}
.time-field input,
.time-control input{
  min-width:0;
  width:100%;
  border:0;
  outline:0;
  background:transparent;
  color:var(--navy);
  font:inherit;
  font-weight:700;
}
.period-select{
  width:58px;
  height:32px;
  padding:0 5px;
  border:1px solid #cfdcf1;
  border-radius:7px;
  outline:0;
  background:#fff;
  color:#10265a;
  font-size:12px;
  font-weight:750;
  line-height:1;
}
.period-select[hidden]{display:none!important}
.time-help{display:inline}
.next-day-badge,
.table-next-day{
  display:inline-flex;
  align-items:center;
  width:max-content;
  margin-top:8px;
  padding:4px 8px;
  border:1px solid #b9d2fb;
  border-radius:999px;
  background:#f2f7ff;
  color:#075fff;
  font-size:11px;
  font-weight:800;
  line-height:1.2;
}
.next-day-badge[hidden]{display:none!important}

.break-item{
  grid-template-columns:minmax(0,1fr) 10px minmax(0,1fr) auto 20px;
  gap:7px;
  height:auto;
  min-height:44px;
  padding:6px 9px;
}
.time-control{
  display:flex;
  min-width:0;
  align-items:center;
  gap:5px;
}
.break-item .time-control{min-width:0}
.break-item .time-control input{min-width:44px}
.break-item .period-select{width:52px;height:29px;padding-inline:3px}
.break-item .time-separator{text-align:center;color:#667085}
.break-item .duration{white-space:nowrap}
.break-item .row-error-message{grid-column:1 / -1}
.table-time-control{min-width:116px}
.table-time-control input.clock-input{min-width:64px;max-width:96px}
.table-time-control .period-select{width:52px;height:34px}
.table-next-day{margin-top:5px;padding:3px 7px}

.calc-main .result-cards{
  grid-template-columns:repeat(4,minmax(0,1fr));
  align-items:stretch;
  gap:14px;
}
.calc-main .result-card{
  height:100%;
  min-height:142px;
  align-items:center;
}
.calc-main .result-card strong,
.calc-main .result-card p{white-space:normal}
.calc-main .result-card.net-result-card{
  border-width:2px;
  box-shadow:0 13px 28px rgba(7,95,255,.12);
}
.calc-main .result-card.net-decimal-card{
  box-shadow:0 13px 28px rgba(109,66,245,.11);
}
.result-primary-badge{margin-bottom:5px}

/* The homepage now mirrors the dedicated Guide page: one readable workflow
   column on desktop, tablet and mobile. */
.atr-front-page .guide-workflows{grid-template-columns:1fr}
.atr-front-page .guide-workflow{padding:38px}
.atr-front-page .guide-workflow-head{grid-template-columns:62px minmax(0,1fr);gap:20px}
.atr-front-page .guide-step-number{width:58px;height:58px;border-radius:16px;font-size:18px}

/* Move the guidance card below the calculator before laptop scaling makes the
   main form too narrow. The internal form remains two-column while it fits. */
@media (max-width:1400px){
  .calculator-section .calc-grid{grid-template-columns:1fr;gap:18px}
  .calculator-section .guidance-card{min-height:0}
}

@media (min-width:1041px){
  .daily-primary{display:grid!important;align-content:start;min-width:0}
  .daily-layout{
    display:grid;
    grid-template-columns:minmax(0,1.4fr) minmax(330px,.9fr)!important;
    grid-template-rows:auto;
  }
  .daily-layout .break-panel{
    grid-column:2!important;
    grid-row:1!important;
    align-self:start;
    border-top:0!important;
    border-left:1px solid var(--line-2)!important;
  }
  .daily-primary .calc-left{padding:22px 26px 0}
  .daily-primary .calc-options{padding:0 26px 18px}
  .daily-primary .transfer-row{padding:0 26px 22px}
}

@media (min-width:901px) and (max-width:1040px){
  .daily-primary{display:grid!important;min-width:0}
  .daily-layout{display:grid;grid-template-columns:1fr!important;grid-template-rows:auto;margin:-22px -26px 0}
  .daily-layout .break-panel{
    grid-column:1!important;
    grid-row:2!important;
    border-left:0!important;
    border-top:1px solid var(--line-2)!important;
  }
  .daily-layout .transfer-row{grid-column:1;grid-row:auto}
}

@media (min-width:901px){
  .calc-main .result-cards{grid-template-columns:repeat(4,minmax(0,1fr))}
}

@media (max-width:900px){
  .daily-primary{display:grid!important;min-width:0}
  .daily-layout{display:flex!important;flex-direction:column;gap:18px;margin:0}
  .daily-layout .break-panel{order:2!important;grid-column:auto!important;grid-row:auto!important}
  .daily-layout .transfer-row{padding:0;order:3}
  .calc-main .result-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .atr-front-page .guide-workflow{padding:28px}
}

@media (max-width:600px){
  .calc-main .result-cards{grid-template-columns:1fr}
  .calc-main .result-card{min-height:118px;grid-template-columns:42px minmax(0,1fr)}
  .break-type-options{grid-template-columns:1fr}
  .break-item{
    position:relative;
    grid-template-columns:minmax(0,1fr) 8px minmax(0,1fr);
    padding:9px 36px 9px 9px;
  }
  .break-item .duration{grid-column:1 / -1}
  .break-item .x{position:absolute;top:50%;right:8px;transform:translateY(-50%)}
  .break-item .row-error-message{grid-column:1 / -1}
  .atr-front-page .guide-workflow{padding:20px}
  .atr-front-page .guide-workflow-head{grid-template-columns:46px minmax(0,1fr);gap:13px}
  .atr-front-page .guide-step-number{width:44px;height:44px;border-radius:12px;font-size:15px}
}

@media (max-width:380px){
  .form-row{grid-template-columns:1fr;gap:12px}
  .compact-radio-options{display:grid;grid-template-columns:1fr}
}

/* v3.2.0 interaction, laptop layout and dynamic content pages ------------ */
html{scroll-padding-top:24px}
button,
.radio-option,
.compact-radio-options label,
.field,
.small-outline,
.calculate-btn,
.nav-link{
  transition:color .18s ease,background-color .18s ease,border-color .18s ease,box-shadow .18s ease,transform .18s ease;
}
button:active,
.radio-option:active,
.compact-radio-options label:active{transform:translateY(1px)}

/* Competitor-inspired clock fields: the value, optional AM/PM suffix and
   clock affordance live inside one control. Numeric-only validation remains. */
.time-field{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto 20px;
  gap:7px;
  padding:0 12px 0 15px;
  background:#f9fafc;
  cursor:text;
}
.time-field:focus-within{
  border-color:#76a9ff;
  background:#fff;
  box-shadow:0 0 0 3px rgba(7,95,255,.11);
}
.time-field .clock-input{
  height:100%;
  padding:0;
  font-variant-numeric:tabular-nums;
  letter-spacing:.01em;
}
.time-picker-icon{
  display:grid;
  place-items:center;
  width:20px;
  height:20px;
  color:#07143f;
  pointer-events:none;
}
.time-picker-icon .ui-svg{font-size:18px}
.time-field .period-select{
  width:52px;
  height:32px;
  padding:0 2px;
  border:0;
  border-radius:5px;
  background:transparent;
  color:#07143f;
  cursor:pointer;
}
.time-field .period-select:focus{
  outline:2px solid rgba(7,95,255,.28);
  outline-offset:1px;
}

/* The native select covers the whole field, including the custom arrow. */
.preset-field{
  position:relative;
  width:100%;
  max-width:none;
  padding:0;
  overflow:hidden;
  cursor:pointer;
}
.preset-field select{
  position:absolute;
  inset:0;
  z-index:1;
  width:100%!important;
  height:100%;
  padding:0 46px 0 15px;
  appearance:none!important;
  -webkit-appearance:none!important;
  cursor:pointer;
}
.preset-field .chev{
  position:absolute;
  top:50%;
  right:14px;
  z-index:2;
  display:grid;
  place-items:center;
  width:20px;
  height:20px;
  transform:translateY(-50%);
  transform-origin:center;
  transition:transform .18s ease,color .18s ease;
  pointer-events:none;
}
.preset-field .chev .ui-svg{font-size:18px}
.preset-field:focus-within{
  border-color:#76a9ff;
  box-shadow:0 0 0 3px rgba(7,95,255,.11);
}
.preset-field:focus-within .chev{
  color:var(--primary);
  transform:translateY(-50%) rotate(180deg);
}

.break-type-options .radio-option span{white-space:nowrap}
.break-panel .direct-break-field{margin:0 0 14px}
.break-panel .single-break-options{margin:0 0 14px}

/* Gross and Break are supporting values; both now use neutral ink so the two
   highlighted Net cards remain the visual destination. */
.calc-main .result-card.secondary-result-card strong,
.calc-main .result-card.secondary-result-card .number,
.calc-main .result-card.secondary-result-card .number.blue,
.calc-main .result-card.secondary-result-card .metric-icon,
.calc-main .result-card.secondary-result-card .metric-icon.blue{
  color:#111827!important;
}
.calc-main .result-card.secondary-result-card .metric-icon{
  background:#f2f4f7!important;
  box-shadow:none;
}

/* Keep the complete calculator and German guidance visible in one row on
   common 14- to 16-inch laptop viewports (roughly 1366–1536 CSS pixels). */
@media (min-width:1025px) and (max-width:1500px){
  .calculator-section .calc-grid{
    grid-template-columns:minmax(0,1fr) minmax(270px,300px);
    gap:18px;
  }
  .calculator-section .guidance-card{display:block;min-height:0}
  .calculator-section .calculator-wrap{padding:22px}
  .calculator-section .calc-tabs{gap:16px}
  .daily-layout{
    grid-template-columns:minmax(0,1.35fr) minmax(285px,.82fr)!important;
    margin:-22px -22px 0;
  }
  .daily-primary .calc-left{padding:20px 22px 0}
  .daily-primary .calc-options{padding:0 22px 16px}
  .daily-primary .transfer-row{padding:0 22px 20px}
  .daily-layout .break-panel{padding:20px 18px}
  .break-type-options{gap:7px}
  .break-type-options .radio-option{gap:6px;padding:8px;font-size:13px}
  .compact-radio-options{gap:9px 13px;padding:9px 10px}
  .compact-radio-options label{gap:6px;font-size:13px}
  .rule-card{padding:22px 18px}
  .rule-title{gap:10px;font-size:18px}
  .rule-item{gap:10px}
  .rule-item strong{font-size:14px}
  .rule-item span{font-size:13px}
  .note-inner{padding:15px;gap:10px}
}

@media (min-width:1025px) and (max-width:1200px){
  .daily-layout{grid-template-columns:1fr!important}
  .daily-layout .break-panel{
    grid-column:1!important;
    grid-row:2!important;
    border-left:0!important;
    border-top:1px solid var(--line-2)!important;
  }
}

@media (max-width:1024px){
  .calculator-section .calc-grid{grid-template-columns:1fr;gap:18px}
  .calculator-section .guidance-card{min-height:0}
}

/* v3.8.0 segmented clock interaction ------------------------------------ */
/* The main Start/End controls mirror the stable, segmented interaction of a
   native time field while preserving the calculator's explicit 24/12-hour
   switch across browsers and locales. */
.clock-canonical-input{display:none!important}
.time-field{
  grid-template-columns:minmax(0,1fr) auto 20px;
  gap:6px;
  padding-inline:12px;
}
.clock-segments{
  display:inline-flex;
  align-items:center;
  justify-content:flex-start;
  min-width:0;
  width:max-content;
  color:#07143f;
  font:inherit;
  font-size:16px;
  font-weight:650;
  font-variant-numeric:tabular-nums;
  line-height:1;
}
.clock-segment,
.time-field input.clock-segment{
  flex:0 0 2.25ch;
  width:2.25ch!important;
  min-width:2.25ch!important;
  height:30px;
  padding:0!important;
  border:0!important;
  border-radius:4px;
  outline:0!important;
  background:transparent;
  color:#07143f;
  font:inherit;
  font-weight:650;
  line-height:30px;
  text-align:center;
  caret-color:#075fff;
}
.clock-segment::placeholder{color:#07143f;opacity:1}
.clock-segment:focus{background:#e9f1ff!important}
.clock-segment::selection{background:#075fff;color:#fff}
.clock-colon{
  flex:0 0 auto;
  width:.7ch;
  text-align:center;
  user-select:none;
}
.time-field.input-error,
.time-field:has(.clock-segments.input-error){
  border-color:#d92d20!important;
  box-shadow:0 0 0 3px rgba(217,45,32,.10)!important;
}
.time-field .period-select{
  width:48px;
  min-width:48px;
}

/* Five complete ranges remain visible. The sixth and subsequent ranges use
   an internal scroller whose height is measured from the rendered rows. */
.break-list{
  max-height:none!important;
  overflow:visible!important;
  padding-right:0;
  scrollbar-gutter:auto;
}
.break-list.is-scrollable{
  max-height:var(--break-list-five-row-height,260px)!important;
  overflow-y:auto!important;
  overscroll-behavior:contain;
  padding-right:5px;
  scrollbar-gutter:stable;
}
.break-list.is-scrollable::-webkit-scrollbar{width:8px}
.break-list.is-scrollable::-webkit-scrollbar-track{background:#eef3fa;border-radius:999px}
.break-list.is-scrollable::-webkit-scrollbar-thumb{background:#9baac0;border-radius:999px}

@media (max-width:600px){
  .time-field{gap:4px;padding-inline:9px}
  .clock-segments{font-size:15px}
  .time-field .period-select{width:43px;min-width:43px;padding-inline:1px}
  .time-picker-icon{width:18px}
}

/* About Us and Contact Us use the WordPress Page title, excerpt, featured
   image and block-editor content, so their designed layouts remain editable. */
.subpage-shell .site-header{margin-bottom:34px}
.subpage-hero{margin:0}
.subpage-hero-card{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1fr) 150px;
  align-items:center;
  min-height:300px;
  padding:54px 60px;
  overflow:hidden;
  border:1px solid #d9e5f7;
  border-radius:28px;
  background:linear-gradient(135deg,#fff 0%,#f4f8ff 72%,#ecf4ff 100%);
  box-shadow:0 22px 52px rgba(12,42,93,.09);
}
.subpage-hero-card::after{
  content:"";
  position:absolute;
  right:-85px;
  bottom:-150px;
  width:370px;
  height:370px;
  border:1px solid rgba(7,95,255,.11);
  border-radius:50%;
  box-shadow:0 0 0 34px rgba(7,95,255,.035),0 0 0 78px rgba(7,95,255,.025);
}
.subpage-hero-copy{position:relative;z-index:1;max-width:850px}
.subpage-eyebrow{
  display:inline-flex;
  margin-bottom:15px;
  padding:7px 12px;
  border:1px solid #bed5fb;
  border-radius:999px;
  background:#f3f7ff;
  color:var(--primary);
  font-size:13px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.06em;
}
.subpage-hero h1{
  margin:0 0 14px;
  color:var(--navy);
  font-size:clamp(40px,4.6vw,66px);
  line-height:1.04;
  letter-spacing:-.045em;
}
.subpage-hero p{
  max-width:740px;
  margin:0;
  color:#40547e;
  font-size:19px;
  line-height:1.65;
}
.subpage-hero-icon{
  position:relative;
  z-index:1;
  display:grid;
  place-items:center;
  width:126px;
  height:126px;
  justify-self:end;
  border:1px solid #bad2fa;
  border-radius:34px;
  background:#fff;
  color:var(--primary);
  box-shadow:0 18px 38px rgba(7,95,255,.14);
}
.subpage-hero-icon .ui-svg{font-size:65px}
.subpage-content-section{margin-top:32px}
.subpage-content-card{
  padding:40px;
  border:1px solid #dbe5f6;
  border-radius:26px;
  background:#fff;
  box-shadow:0 18px 44px rgba(15,42,86,.075);
}
.subpage-featured-image{margin:0 0 34px}
.subpage-featured-image img{display:block;width:100%;height:auto;border-radius:18px}
.subpage-entry-content{color:#344977;font-size:17px}
.subpage-entry-content > *:first-child{margin-top:0}
.subpage-entry-content > *:last-child{margin-bottom:0}
.subpage-entry-content h2{margin:0 0 14px;font-size:30px;line-height:1.18}
.subpage-entry-content h3{margin:0 0 10px;font-size:20px;line-height:1.25}
.subpage-entry-content p{margin:0 0 14px}
.subpage-intro-card,
.subpage-note-card{
  padding:30px;
  border:1px solid #dbe5f6;
  border-radius:18px;
  background:#f8fbff;
}
.subpage-note-card{margin-top:24px;border-left:4px solid var(--primary)}

/* v3.3: calculator tabs can be enabled/disabled from the protected admin UI. */
@media (min-width:901px){.calculator-wrap .calc-tabs{grid-template-columns:repeat(var(--atr-tab-count,3),minmax(0,1fr))}}
.subpage-card-grid{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px!important;
  margin:24px 0 0!important;
}
.subpage-card-grid.contact-card-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.subpage-info-card{
  min-width:0;
  padding:24px;
  border:1px solid #dbe5f6;
  border-radius:16px;
  background:#fff;
  box-shadow:0 10px 24px rgba(20,45,90,.055);
}
.subpage-entry-content .wp-block-buttons{margin-top:20px}
.subpage-entry-content .wp-block-button__link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:48px;
  padding:0 22px;
  border-radius:10px;
  background:linear-gradient(180deg,#0b6cff,#0055ee);
  color:#fff;
  font-weight:800;
  box-shadow:0 12px 24px rgba(7,95,255,.2);
}
.subpage-entry-content .wp-block-button__link:hover{background:#004fe8;transform:translateY(-1px)}

@media (max-width:900px){
  .subpage-shell .site-header{margin-bottom:24px}
  .subpage-hero-card{grid-template-columns:1fr;min-height:0;padding:36px 30px}
  .subpage-hero-icon{display:none}
  .subpage-hero h1{font-size:42px}
  .subpage-hero p{font-size:17px}
  .subpage-content-section{margin-top:22px}
  .subpage-content-card{padding:24px}
  .subpage-card-grid,
  .subpage-card-grid.contact-card-grid{grid-template-columns:1fr}
}

@media (max-width:560px){
  .subpage-hero-card{padding:28px 22px;border-radius:20px}
  .subpage-hero h1{font-size:35px}
  .subpage-content-card{padding:16px;border-radius:20px}
  .subpage-intro-card,
  .subpage-note-card,
  .subpage-info-card{padding:20px}
}

/* v3.4: safe editor typography, streamlined radios and aligned content. */
.calculator-section .calculator-title{
  display:block;
  margin:0 0 4px;
  color:var(--navy);
  font-size:var(--atr-heading-size,34px);
  font-weight:var(--atr-heading-weight,700);
  line-height:1.14;
}
.calculator-wrap .calc-tab-label{
  min-width:0;
  font-size:var(--atr-tab-font-size,17px);
  font-style:normal;
  font-weight:var(--atr-tab-font-weight,600);
  line-height:1.15;
  text-align:center;
}
.calculator-wrap .calc-tab-heading{
  display:block;
  min-width:0;
  margin:0;
  padding:0;
  font:inherit;
}
.calculator-wrap .calc-tab-heading .calc-tab{width:100%}
.single-break-mode-radios{
  min-height:30px;
  padding:2px 0;
}
.single-break-mode-radios .radio-option:has(input:checked){color:var(--navy)}

.rich-content > p{margin-top:0}
.rich-content > p:last-child{margin-bottom:0}
.rich-content a,
.guide-steps a,
.guide-step-title a,
.legal-card-title a{
  color:var(--primary);
  font-weight:inherit;
  text-decoration:underline;
  text-underline-offset:3px;
}
.benefit-description{color:#344977}
.benefit-description p{margin:0}
.editable-section-heading{
  display:block;
  margin:0 0 12px;
  color:var(--navy);
  font-size:var(--atr-content-heading-size,48px);
  font-weight:var(--atr-content-heading-weight,700);
  line-height:1.12;
}
.guide-step-title,
.legal-card-title{
  display:block;
  margin:0;
  color:var(--navy);
  font-size:var(--atr-step-title-size,25px);
  font-weight:var(--atr-step-title-weight,700);
  line-height:1.24;
}
.guide-workflow .guide-step-title{margin:0 0 9px}

.rules-section .section-head,
.rules-section .rules-sources{
  width:100%;
  max-width:1120px;
  margin-left:auto;
  margin-right:auto;
}
.rules-section .section-head{
  grid-template-columns:minmax(0,1fr) minmax(320px,480px);
  gap:38px;
}

@media (max-width:1300px){
  .rules-section .section-head{grid-template-columns:1fr}
}
@media (max-width:900px){
  .calculator-section .calculator-title{
    font-size:var(--atr-heading-mobile-size,30px);
    font-weight:var(--atr-heading-mobile-weight,700);
  }
  .calculator-wrap .calc-tab-label{
    font-size:var(--atr-tab-mobile-font-size,14px);
    font-weight:var(--atr-tab-mobile-font-weight,600);
  }
  .editable-section-heading{
    font-size:var(--atr-content-heading-mobile-size,34px);
    font-weight:var(--atr-content-heading-mobile-weight,700);
  }
  .guide-step-title,
  .legal-card-title{
    font-size:var(--atr-step-title-mobile-size,22px);
    font-weight:var(--atr-step-title-mobile-weight,700);
  }
}
@media (max-width:560px){
  .single-break-mode-radios{gap:10px 18px}
}

/* v3.5: complete, uncropped header/footer logos with independent sizing. */
.brand-block.has-custom-logo{
  width:var(--atr-header-logo-width,260px);
  min-width:min(var(--atr-header-logo-width,260px),34vw);
  max-width:34vw;
  flex:0 1 var(--atr-header-logo-width,260px);
}
.brand-block.has-custom-logo .logo-icon{
  width:100%;
  height:72px;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
  overflow:visible;
  place-items:center start;
}
.brand-block.has-custom-logo .logo-icon img.custom-logo{
  display:block;
  width:100%;
  height:100%;
  max-width:none;
  max-height:none;
  border-radius:0;
  object-fit:contain;
  object-position:left center;
}
.footer-brand.has-footer-logo{
  display:block;
}
.footer-brand.has-footer-logo .footer-logo{
  display:block;
  width:min(var(--atr-footer-logo-width,210px),100%);
  height:84px;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
}
.footer-logo-link{
  display:block;
  width:100%;
  height:100%;
}
.footer-logo img.footer-custom-logo{
  display:block;
  width:100%;
  height:100%;
  max-width:none;
  max-height:none;
  border-radius:0;
  object-fit:contain;
  object-position:left center;
}

@media (max-width:900px){
  .brand-block.has-custom-logo{
    width:min(var(--atr-header-logo-mobile-width,190px),calc(100% - 54px));
    min-width:0;
    max-width:calc(100% - 54px);
    flex-basis:var(--atr-header-logo-mobile-width,190px);
  }
  .brand-block.has-custom-logo .logo-icon{height:56px}
  .footer-brand.has-footer-logo .footer-logo{
    width:min(var(--atr-footer-logo-mobile-width,170px),100%);
    height:70px;
    margin-inline:auto;
  }
  .footer-logo img.footer-custom-logo{object-position:center}
}

/* v3.6: uniform social brand icons with a selectable container shape. */
.footer-social{
  flex-wrap:wrap;
  gap:10px;
}
.footer-social .footer-social-link{
  --atr-social-brand:#075fff;
  width:46px;
  height:46px;
  border:1px solid #cfe0ff;
  border-radius:14px;
  background:#f8fbff;
  color:#263b68;
  box-shadow:0 5px 14px rgba(18,52,112,.07);
  transition:transform .2s ease,background-color .2s ease,border-color .2s ease,color .2s ease,box-shadow .2s ease;
}
.footer-social.is-circle .footer-social-link{border-radius:999px}
.footer-social .footer-social-link .ui-svg{font-size:20px}
.footer-social .social-glyph{
  width:1em;
  height:1em;
  fill:currentColor;
  stroke:none;
}
.footer-social .social-facebook{--atr-social-brand:#1877f2}
.footer-social .social-twitter{--atr-social-brand:#111827}
.footer-social .social-linkedin{--atr-social-brand:#0a66c2}
.footer-social .social-instagram{--atr-social-brand:#e1306c}
.footer-social .social-pinterest{--atr-social-brand:#bd081c}
.footer-social .social-youtube{--atr-social-brand:#f00}
.footer-social .social-email{--atr-social-brand:#075fff}
.footer-social .footer-social-link:focus-visible{
  outline:3px solid rgba(7,95,255,.25);
  outline:3px solid color-mix(in srgb,var(--atr-social-brand) 28%,transparent);
  outline-offset:3px;
  background:var(--atr-social-brand);
  border-color:var(--atr-social-brand);
  color:#fff;
}
@media (hover:hover){
  .footer-social .footer-social-link:hover{
    transform:translateY(-3px);
    background:var(--atr-social-brand);
    border-color:var(--atr-social-brand);
    color:#fff;
    box-shadow:0 10px 22px rgba(18,52,112,.16);
    box-shadow:0 10px 22px color-mix(in srgb,var(--atr-social-brand) 24%,transparent);
  }
}
@media (max-width:900px){
  .footer-social .footer-social-link{width:42px;height:42px;border-radius:12px}
}

/* v3.7: editable, low-emphasis agency credit below the legal footer row. */
.footer-credit{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  margin-top:20px;
  color:#6a7896;
  font-size:13px;
  line-height:1.4;
  text-align:center;
}
.footer-credit::before,
.footer-credit::after{
  content:"";
  width:clamp(30px,6vw,76px);
  height:1px;
  background:#d7e3f5;
}
.footer-credit a,
.footer-credit span{
  color:inherit;
  font-weight:500;
}
.footer-credit a{
  padding:6px 10px;
  border-radius:8px;
  text-decoration:none;
  transition:color .2s ease,background-color .2s ease;
}
.footer-credit a:focus-visible{
  outline:3px solid rgba(7,95,255,.2);
  outline-offset:2px;
  color:var(--primary);
}
@media (hover:hover){
  .footer-credit a:hover{
    color:var(--primary);
    background:#eef5ff;
  }
}
@media (max-width:600px){
  .footer-credit{gap:9px;margin-top:16px;font-size:12px}
  .footer-credit::before,
  .footer-credit::after{width:22px}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}
}

/* v3.9: concise mobile tabs, mobile-first section flow and clearer break
   range values. Desktop labels and desktop calculator ordering stay intact. */
.calc-tab-label-mobile{display:none}
.preset-control{min-width:0}

.break-item .time-control{
  min-height:34px;
  padding:3px 8px;
  border:1px solid #e0e8f4;
  border-radius:8px;
  background:#f8fbff;
  transition:border-color .18s ease,background-color .18s ease,box-shadow .18s ease;
}
.break-item .time-control:focus-within{
  border-color:#7aabff;
  background:#fff;
  box-shadow:0 0 0 3px rgba(7,95,255,.10);
}
.break-item .clock-input{
  color:#07143f;
  font-weight:800;
  font-variant-numeric:tabular-nums;
  letter-spacing:.01em;
}
.break-item .time-separator{font-size:0}
.break-item .time-separator::before{
  content:"\2192";
  color:#6b7b99;
  font-size:15px;
  font-weight:800;
}
.break-item .duration{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:24px;
  padding:3px 8px;
  border-radius:999px;
  background:#edf4ff;
  color:#075fff;
  font-size:12px;
  font-weight:800;
  font-variant-numeric:tabular-nums;
  line-height:1;
}
.break-item .x{
  border:1px solid #dce5f2;
  background:#f4f7fb;
  color:#536998;
}
.break-item .x:hover{
  border-color:#b8cff2;
  background:#edf4ff;
  color:#075fff;
}

@media (max-width:600px){
  .calc-tab-label-desktop{display:none}
  .calc-tab-label-mobile{display:inline}
  .calculator-wrap .calc-tab-label{white-space:nowrap}
  .calculator-wrap .calc-tabs{
    grid-template-columns:repeat(var(--atr-tab-count,3),minmax(0,1fr));
  }
  .calculator-wrap .calc-tab{
    min-height:48px;
    height:48px;
    gap:5px;
    padding-inline:5px;
  }
  .calculator-wrap .calc-tab .ui-svg{
    display:inline-flex!important;
    flex:0 0 auto;
    font-size:14px;
  }

  .daily-layout{
    display:flex!important;
    flex-direction:column;
    gap:16px;
    margin:0;
  }
  .daily-primary,
  .daily-primary .calc-options{display:contents!important}
  .daily-layout .calc-left{order:1}
  .daily-layout .time-format-control{
    order:2;
    margin-bottom:0;
  }
  .daily-layout .break-panel{
    order:3!important;
    grid-column:auto!important;
    grid-row:auto!important;
    padding:0!important;
    border:0!important;
  }
  .daily-layout .preset-control{order:4}
  .daily-layout .preset-control .preset-field{margin-bottom:0}
  .daily-layout .legal-row{
    order:5;
    margin-top:0;
  }
  .daily-layout .transfer-row{
    order:6!important;
    padding:0;
  }

  .break-item{
    position:relative;
    grid-template-columns:minmax(0,1fr) 18px minmax(0,1fr);
    gap:8px;
    min-height:0;
    padding:10px;
    border-color:#d6e2f3;
    border-radius:11px;
    background:#fff;
    box-shadow:0 4px 12px rgba(16,44,86,.045);
  }
  .break-item .time-control{
    position:relative;
    min-height:54px;
    padding:20px 8px 6px;
  }
  .break-item .time-control::before{
    content:attr(data-label);
    position:absolute;
    top:5px;
    left:8px;
    color:#6b7b99;
    font-size:9px;
    font-weight:700;
    line-height:1.1;
    white-space:nowrap;
  }
  .break-item .clock-input{
    min-width:0;
    font-size:14px;
    text-align:left;
  }
  .break-item .duration{
    grid-column:1 / 3;
    grid-row:2;
    justify-self:start;
  }
  .break-item .x{
    position:static;
    grid-column:3;
    grid-row:2;
    justify-self:end;
    width:24px;
    height:24px;
    transform:none;
    font-size:18px;
  }
  .break-item .row-error-message{
    grid-column:1 / -1;
    grid-row:auto;
  }
}

/* v3.10 final cascade: keep the unified card layout above legacy patches. */
.break-panel .break-item{display:block;min-height:0;padding:10px}
.break-panel .break-item-head{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.break-panel .break-item-head strong{margin-right:auto}
.break-panel .break-item .break-item-head .duration{position:static;grid-column:auto;grid-row:auto;justify-self:auto}
.break-panel .break-item .break-item-head .x{position:static;grid-column:auto;grid-row:auto;justify-self:auto;transform:none}
.break-panel .break-time-grid{display:grid;grid-template-columns:minmax(0,1fr) 18px minmax(0,1fr);align-items:center;gap:7px}
.break-panel .break-time-grid .time-control{position:relative;display:grid;grid-template-columns:minmax(44px,1fr) auto;min-height:52px;padding:19px 7px 5px}
.break-panel .break-time-grid .time-control::before{content:attr(data-label);position:absolute;top:5px;left:8px;color:#6b7b99;font-size:9px;font-weight:750;line-height:1}
.break-panel .break-time-grid .period-select{width:43px;height:28px;padding-inline:2px}
.break-panel .break-time-grid .time-separator{text-align:center}
.result-label-mobile{display:none}

@media (min-width:1025px) and (max-width:1500px){
  .break-panel .break-time-grid{grid-template-columns:1fr}
  .break-panel .break-time-grid .time-separator{display:none}
}

@media (max-width:600px){
  .calculator-wrap .calc-tabs{gap:5px;padding:5px;border:1px solid #d6e2f3;border-radius:12px;background:#f3f7fd}
  .calculator-wrap .calc-tab{flex-direction:column;justify-content:center;min-height:56px;height:56px;gap:4px;padding:5px 3px;border:1px solid transparent;border-radius:9px!important;background:transparent;box-shadow:none;line-height:1}
  .calculator-wrap .calc-tab.active{color:#fff!important;background:linear-gradient(180deg,var(--primary),var(--primary-2))!important;border-color:var(--primary)!important;box-shadow:0 6px 14px rgba(7,95,255,.20)}
  .calculator-wrap .calc-tab.active .calc-tab-label,
  .calculator-wrap .calc-tab.active .ui-svg{color:#fff!important}
  .break-panel .break-time-grid{grid-template-columns:minmax(0,1fr) 16px minmax(0,1fr);gap:6px}
  .break-panel .break-time-grid .time-control{min-height:54px;padding:20px 6px 6px}
  .calc-main .result-cards{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px;padding:0 14px}
  .calc-main .result-card{display:block;min-height:116px;padding:12px;border-width:1px;border-radius:11px;box-shadow:none}
  .calc-main .result-card.net-result-card{border-width:1.5px;box-shadow:0 7px 16px rgba(7,95,255,.08)}
  .calc-main .result-card .metric-icon{width:30px;height:30px;margin-bottom:8px;font-size:17px}
  .result-label-desktop{display:none}
  .result-label-mobile{display:inline}
  .calc-main .result-card strong{min-height:0;margin-bottom:5px;font-size:11px;line-height:1.2}
  .calc-main .result-card .number{font-size:19px;line-height:1.1;white-space:nowrap}
  .calc-main .result-card p,.calc-main .result-card .result-primary-badge{display:none}
}

@media (max-width:340px){
  .break-panel .break-time-grid{grid-template-columns:1fr}
  .break-panel .break-time-grid .time-separator{display:none}
}

/* v3.10.4: + Add Break keeps minute mode and creates separate minute entries. */
.minute-break-panel[hidden]{display:none!important}
.minute-break-panel{margin:0 0 14px}
.minute-break-list{display:grid;gap:9px}
.minute-break-item{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(118px,150px) 28px;
  align-items:center;
  gap:9px;
  padding:9px 10px;
  border:1px solid #d8e3f2;
  border-radius:11px;
  background:#fff;
  box-shadow:0 5px 14px rgba(16,44,86,.05);
}
.minute-break-item strong{color:#07143f;font-size:12px;font-weight:800}
.minute-break-value{height:40px;margin:0;padding:0 10px}
.minute-break-value input{
  width:100%;
  min-width:0;
  border:0!important;
  outline:0!important;
  background:transparent!important;
  box-shadow:none!important;
  color:#07143f;
  font-weight:800;
}
.minute-break-value > span:last-child{color:#50658e;font-size:12px;font-weight:750}
.minute-break-item .x{
  display:grid;
  place-items:center;
  width:28px;
  height:28px;
  padding:0;
  border:0;
  border-radius:7px;
  background:transparent;
  color:#53688e;
  font-size:19px;
  line-height:1;
  cursor:pointer;
}
.minute-break-item .x:hover{background:#f2f6fc;color:var(--primary)}
.minute-break-item.minute-break-error{border-color:#f6b2b2;background:#fffafa}
.minute-break-item.minute-break-error .minute-break-value{border-color:#e5484d}
.break-panel.has-minute-breaks .direct-break-field.is-derived-total .break-minutes-field{
  background:#f4f8ff;
  border-color:#bfd4f6;
}

@media (max-width:600px){
  .minute-break-item{grid-template-columns:minmax(0,1fr) minmax(105px,135px) 26px;gap:7px;padding:8px}
  .minute-break-value{height:38px;padding:0 8px}
  .minute-break-item .x{width:26px;height:26px}
}


/* v3.10.8: separate minute-break rows stack above the Add Break action. */
.break-panel.has-minute-breaks .minute-break-panel{margin:0 0 10px}
.break-panel.has-minute-breaks #addBreak{margin-top:0}

/* v3.10.8: One Time Range uses only the range editor; hide the minute slot. */
.break-panel.is-range-mode .direct-break-field{
  display:none!important;
}

/* v3.10.10: segmented interaction for break ranges, Weekly clocks and Monthly h:m values. */
.segmented-time-control .clock-canonical-input,
.duration-canonical-input{display:none!important}

.segmented-time-control .compact-clock-segments{
  display:inline-flex;
  align-items:center;
  min-width:0;
  width:max-content;
  color:#07143f;
  font:inherit;
  font-weight:750;
  font-variant-numeric:tabular-nums;
  line-height:1;
}
.segmented-time-control .clock-segment{
  flex:0 0 2.25ch;
  width:2.25ch!important;
  min-width:2.25ch!important;
  max-width:2.25ch!important;
  height:28px!important;
  padding:0!important;
  border:0!important;
  border-radius:4px!important;
  outline:0!important;
  background:transparent!important;
  color:#07143f!important;
  font:inherit!important;
  font-weight:750!important;
  line-height:28px!important;
  text-align:center!important;
  caret-color:#075fff;
}
.segmented-time-control .clock-segment:focus{background:#e9f1ff!important}
.segmented-time-control .clock-segment::selection{background:#075fff;color:#fff}
.segmented-time-control .clock-colon{width:.7ch;text-align:center;user-select:none}
.segmented-time-control:has(.clock-segments.input-error){border-color:#d92d20!important;background:#fff8f7!important}

.break-panel .break-time-grid .segmented-time-control{
  grid-template-columns:minmax(0,1fr) auto;
  align-items:end;
}
.break-panel .break-time-grid .compact-clock-segments{padding-bottom:1px}

.work-table .segmented-time-control{
  display:inline-flex;
  align-items:center;
  gap:4px;
  min-width:108px;
  min-height:36px;
  padding:2px 7px;
  border:1px solid #d5dfef;
  border-radius:8px;
  background:#fff;
}
.work-table .segmented-time-control:focus-within{
  border-color:#7aabff;
  box-shadow:0 0 0 3px rgba(7,95,255,.10);
}
.work-table .segmented-time-control .period-select{width:48px;height:30px}
.work-table tr.row-invalid .segmented-time-control:has(.clock-segments.input-error){border-color:#d92d20;background:#fff5f4}

.segmented-duration-control{gap:7px}
.duration-segments{
  display:inline-flex;
  align-items:center;
  min-width:112px;
  height:36px;
  padding:2px 8px;
  border:1px solid #d5dfef;
  border-radius:8px;
  background:#fff;
  color:#07143f;
  font-size:14px;
  font-weight:700;
  font-variant-numeric:tabular-nums;
  line-height:1;
  transition:border-color .18s ease,box-shadow .18s ease,background-color .18s ease;
}
.duration-segments:focus-within{
  border-color:#7aabff;
  box-shadow:0 0 0 3px rgba(7,95,255,.10);
}
.duration-segments.input-error{border-color:#d92d20;background:#fff5f4}
.work-table .duration-segment,
.duration-segment{
  height:28px!important;
  min-width:0!important;
  max-width:none!important;
  padding:0!important;
  border:0!important;
  border-radius:4px!important;
  outline:0!important;
  background:transparent!important;
  color:#07143f!important;
  font:inherit!important;
  font-weight:700!important;
  line-height:28px!important;
  text-align:center!important;
  caret-color:#075fff;
}
.work-table .duration-hours,.duration-hours{width:4ch!important;flex:0 0 4ch}
.work-table .duration-minutes,.duration-minutes{width:2.25ch!important;flex:0 0 2.25ch}
.duration-segment:focus{background:#e9f1ff!important}
.duration-segment::selection{background:#075fff;color:#fff}
.duration-colon{width:.7ch;text-align:center;user-select:none}
.hm-suffix{white-space:nowrap}

@media (max-width:600px){
  .work-table .segmented-time-control{min-width:104px;padding-inline:6px}
  .duration-segments{min-width:104px;padding-inline:6px}
}

/* v3.10.11: Weekly/Monthly workflow polish and compact mobile layout. */
.table-summary{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr)) auto;
  align-items:stretch;
  gap:8px;
  margin-top:10px;
  padding:9px;
  border:1px solid #d5dfef;
  border-radius:10px;
  background:#f8fbff;
}
.table-summary > div{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  min-width:0;
  padding:8px 10px;
  border-radius:8px;
  background:#fff;
}
.table-summary span{
  color:#536998;
  font-size:10px;
  font-weight:800;
  letter-spacing:.04em;
  text-transform:uppercase;
}
.table-summary strong{
  color:#10265a;
  font-size:15px;
  font-weight:850;
  white-space:nowrap;
  font-variant-numeric:tabular-nums;
}
.table-summary small{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0 8px;
  color:#536998;
  font-size:11px;
  font-weight:700;
  white-space:nowrap;
}

.weekly-panel-actions{margin-top:0}
.weekly-panel-actions .calc-add-row{margin-top:10px}
.monthly-add-week{margin-top:10px}

/* Keep Monthly h:m controls visually as tight as the Daily segmented clocks. */
.monthly-table .segmented-duration-control{gap:4px}
.monthly-table .duration-segments{
  min-width:96px;
  padding-inline:5px;
}
.monthly-table .duration-hours{
  text-align:right!important;
  padding-right:1px!important;
}
.monthly-table .duration-minutes{
  text-align:left!important;
  padding-left:1px!important;
}
.monthly-table .duration-colon{width:.45ch}
.monthly-table .hm-suffix{margin-left:-1px}

@media (max-width:600px){
  /* Smaller cards and denser information hierarchy on phones. */
  .mobile-card-table tbody{gap:8px}
  .mobile-card-table tr{
    gap:8px;
    padding:10px;
    border-radius:10px;
    box-shadow:0 5px 14px rgba(16,44,86,.04);
  }
  .mobile-card-table td{gap:4px}
  .mobile-card-table td::before{font-size:10px}
  .mobile-card-table td:first-child{padding-right:30px}
  .mobile-card-table input.clock-input,
  .mobile-card-table input[type="text"],
  .mobile-card-table input[type="number"]{
    height:38px;
    padding-inline:8px;
  }
  .mobile-card-table .row-check{min-height:26px;font-size:15px}
  .mobile-card-table .row-action{top:7px;right:7px;width:28px;height:28px}
  .mobile-card-table .table-remove{width:28px;height:28px;font-size:20px}

  /* Weekly: Start/End and Break/Net stay in two columns; off-days collapse
     to one compact checkbox row until the user enables them. */
  .weekly-table td[data-label="Net"]{
    grid-column:auto;
    padding-top:0;
    border-top:0;
    font-size:15px;
  }
  .weekly-table tr.is-disabled-day{
    display:block;
    min-height:44px;
    padding:8px 10px;
  }
  .weekly-table tr.is-disabled-day td:not(:first-child):not(.row-action){display:none}
  .weekly-table tr.is-disabled-day td:first-child{padding-right:30px}

  /* Monthly: keep the two duration inputs side-by-side and make Net a
     compact footer line instead of another tall field block. */
  .monthly-table td[data-label="Net"]{
    display:flex;
    grid-column:1 / -1;
    flex-direction:row;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    padding-top:7px;
    border-top:1px solid #e1e8f3;
    font-size:15px;
  }
  .monthly-table td[data-label="Net"]::before{margin-right:auto}
  .monthly-table .segmented-duration-control{gap:2px}
  .monthly-table .duration-segments{
    width:100%;
    min-width:0;
    height:38px;
    padding-inline:5px;
    justify-content:center;
  }
  .monthly-table .hm-suffix{display:none}

  /* Compact totals stay visible without adding another large card. */
  .table-summary{
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:6px;
    margin-top:8px;
    padding:7px;
  }
  .table-summary > div{
    display:block;
    padding:7px 5px;
    text-align:center;
  }
  .table-summary span{display:block;margin-bottom:3px;font-size:9px}
  .table-summary strong{font-size:13px}
  .table-summary small{
    grid-column:1 / -1;
    min-height:20px;
    padding:0;
    font-size:10px;
  }

  /* Three Weekly actions use two compact columns; the transfer action gets
     one full-width row because its label is longer. */
  .weekly-panel-actions{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:8px;
  }
  .weekly-panel-actions .small-outline{
    width:100%;
    min-width:0;
    min-height:40px;
    margin-top:0;
    padding-inline:8px;
    font-size:12px;
  }
  .weekly-panel-actions .weekly-transfer-action{grid-column:1 / -1}
  .monthly-add-week{
    width:100%;
    min-height:40px;
    margin-top:8px;
  }
  .weekly-panel-actions + .formula-note,
  .monthly-add-week + .formula-note{
    margin-top:8px;
    font-size:11px;
    line-height:1.35;
  }
}


/* v3.10.14: tighter, wider Weekly/Monthly mobile cards and narrow-phone fixes. */
@media (max-width:600px){
  /* The calculator already sits inside the page container, so reduce the
     nested padding for the two table-heavy tabs and give the controls more
     real screen width. */
  .calculator-section .calculator-wrap{padding:10px}
  #panelWeekly.calc-panel,
  #panelMonthly.calc-panel{padding:8px}

  .mobile-card-table tbody{gap:6px}
  .mobile-card-table tr{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:6px 7px;
    padding:8px;
    border-radius:9px;
    box-shadow:none;
  }
  .mobile-card-table td{gap:2px}
  .mobile-card-table td::before{
    font-size:9px;
    line-height:1.05;
    letter-spacing:.035em;
  }
  .mobile-card-table td:first-child{
    min-height:22px;
    padding-right:28px;
  }
  .mobile-card-table td:first-child::before{display:none}
  .mobile-card-table .row-check{
    min-height:22px;
    gap:8px;
    font-size:14px;
    line-height:1.1;
  }
  .mobile-card-table .row-check input{width:17px;height:17px}
  .mobile-card-table .row-action{top:6px;right:6px;width:26px;height:26px}
  .mobile-card-table .table-remove{width:26px;height:26px;font-size:18px}

  .work-table .segmented-time-control{
    width:100%;
    min-width:0;
    min-height:34px;
    padding:1px 5px;
  }
  .segmented-time-control .clock-segment{
    height:26px!important;
    line-height:26px!important;
  }
  .week-break-input{gap:4px}
  .weekly-table .week-break-input input{
    min-width:0;
    width:100%;
    height:34px;
    padding-inline:7px;
  }
  .weekly-table .week-break-input > span{font-size:11px}
  .weekly-table td[data-label="Net"]{
    min-height:34px;
    justify-content:center;
    font-size:14px;
    line-height:1.15;
  }
  .weekly-table tr.is-disabled-day{
    min-height:38px;
    padding:7px 8px;
  }
  .weekly-table tr.is-disabled-day td:first-child{padding-right:28px}

  /* Short mobile labels stop Monthly cards from wasting a full extra line
     on "Gross Working Time (h:m)" / "Total Break Time (h:m)". */
  .monthly-table td[data-mobile-label]::before{content:attr(data-mobile-label)}
  .monthly-table td:first-child::before{display:none}
  .monthly-table .segmented-duration-control{gap:0;width:100%}
  .monthly-table .duration-segments{
    width:100%;
    min-width:0;
    height:34px;
    padding-inline:4px;
    justify-content:center;
  }
  .monthly-table .duration-segment{
    height:26px!important;
    line-height:26px!important;
  }
  .monthly-table td[data-label="Net"]{
    min-height:28px;
    padding-top:5px;
    font-size:14px;
  }

  .table-summary{
    gap:4px;
    margin-top:6px;
    padding:5px;
    border-radius:8px;
  }
  .table-summary > div{padding:5px 3px}
  .table-summary span{margin-bottom:2px;font-size:8.5px}
  .table-summary strong{font-size:12px}
  .table-summary small{min-height:16px;font-size:9px}

  .weekly-panel-actions{gap:6px}
  .weekly-panel-actions .small-outline,
  .monthly-add-week{
    min-height:36px;
    height:36px;
    border-radius:8px;
    font-size:11.5px;
  }
  .weekly-panel-actions + .formula-note,
  .monthly-add-week + .formula-note{
    margin-top:6px;
    font-size:10px;
    line-height:1.3;
  }
}

/* Keep the useful two-column card layout even on 320–360px phones. The old
   generic rule stacked every cell vertically at 360px, which made Weekly and
   Monthly unnecessarily tall. */
@media (max-width:360px){
  .weekly-table tr,
  .monthly-table tr{grid-template-columns:repeat(2,minmax(0,1fr))}
  .weekly-table td,
  .monthly-table td{grid-column:auto}
  .weekly-table td:first-child,
  .monthly-table td:first-child,
  .monthly-table td[data-label="Net"]{grid-column:1 / -1}
  .weekly-table td[data-label="Net"]{grid-column:auto}
  #panelWeekly.calc-panel,
  #panelMonthly.calc-panel{padding:6px}
  .mobile-card-table tr{padding:7px;gap:5px 6px}
  .work-table .segmented-time-control,
  .monthly-table .duration-segments{font-size:13px}
  .weekly-table .week-break-input > span{font-size:10px}
}